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 и только для крупного/жирного.
Семантические цвета (успех/предупреждение/ошибка) отделены от акцентных.
Опубликован 24.07.2026 в 18:07