Разработать дизайн мобильного приложения

1. Контекст и цель Продукт. Linza — приложение, которое фотографирует текст (документ, меню, вывеска, инструкция, заметка), распознаёт его (OCR), при необходимости переводит и показывает крупно и понятно. Ключевая ценность — не «сканер», а помощник для комфортного чтения. Цель редизайна. Сделать интерфейс «живым и стильным», сохранив и усилив текущую тёплую эдиториал-ДНК, при этом ни в одном решении не жертвуя читаемостью и доступностью — это ядро продукта и главный критерий приёмки. Что НЕ делаем. Не меняем эстетику на минимализм/необрутализм/soft-стиль, не уходим от кремовой бумаги к белому фону, не усложняем навигацию. Это эволюция, а не редизайн с нуля. 2. Аудитория и сценарии Аудитория (в порядке важности): Люди, которым тяжело читать мелкий текст (слабое зрение, возраст, усталость) — им нужен крупный контрастный результат. Путешественники / изучающие язык — перевод меню, вывесок, инструкций. Студенты/офис — быстро сохранить и вернуться к распознанному тексту. Основной сценарий (happy path): Открыл → «Сделать снимок» → (настройки распознавания) → обработка → крупный читаемый результат → сохранить в проект. Из этого следуют дизайн-приоритеты: мгновенно понятное главное действие, быстрый путь до камеры, а результат — эталон читаемости. 3. Ключевой принцип: читаемость выше «красоты» Любой стилистический приём проверяется вопросом «не мешает ли он прочитать?». Жёсткие требования (детально — §9): Контраст основного текста ≥ 7:1 (WCAG AAA), вторичного — ≥ 4.5:1. Базовый размер тела 18px; режим чтения 22px+ с регулировкой до очень крупного размера. Тап-зоны ≥ 48×48px. Цвет никогда не единственный носитель смысла (дублируем иконкой/подписью). Поддержка системного динамического шрифта, VoiceOver/TalkBack, видимого фокуса. 4. Визуальное направление Настроение: тёплый, аналоговый, «умный помощник для чтения». Уютно, но не по-детски; стильно, но не холодно-премиально. Носители стиля: Тёплая бумага вместо белого фона — весь интерфейс «на бумаге». Крупный жирный гротеск — типографика несёт характер (см. §5.2). Зернистые «бумажные» иллюстрации с мотивом лупы — фирменный узнаваемый приём. Электрик-синий = действие, лайм = акцент/успех, коралл = редкий пунктум. Что добавляем к текущему (то, ради чего затевается): Воздух и иерархия — больше «дыхания», единая сетка и ритм отступов. Единая дизайн-система — токены + компоненты вместо разнобоя. Живой отклик — микроанимации, привязанные к смыслу (см. §8). Проработанные состояния — пустое / загрузка / ошибка / успех как часть стиля. 5. Дизайн-токены 5.1 Цвет Токен Hex (light) Назначение paper #F3ECE0 Основной тёплый фон paper-2 #EFE7D9 Утопленные поверхности, сегменты card #FCFAF4 Приподнятые карточки, поля ввода ink #191714 Заголовки и основной текст ink-soft #5B564C Вторичный текст ink-faint #938C7D Подписи, метаданные line #E2D9C8 Хайрлайны, границы blue #3B3BEE Главное действие, ссылки, активный таб blue-ink #2C2CC4 Синий текст / нажатое состояние blue-wash #E7E7FB Синие тинт-поверхности lime #CBEF3A Акцент, теги, подсветка успеха lime-deep #A9C90F Лайм как текст на светлом (контраст) coral #F26B4E Редкий пунктум, мягкие ошибки green #4E9A34 Успех (галочки, «сохранено») Правила использования цвета: Синий и лайм — фирменная пара, встречаются часто. Коралл — скупо, только редкие акценты, пустые состояния и мягкие ошибки. Лайм нельзя использовать как цвет мелкого текста на светлом — только lime-deep и только для крупного/жирного. Семантические цвета (успех/предупреждение/ошибка) отделены от акцентных.