Добавить на главный экран

Дизайн-гайд papatto

papatto — набор инструментов, чтобы быстро справляться с небольшими задачами. На этой странице собраны правила, которые делают экраны и тексты единообразными, с точными значениями, которые использует сайт. Логотип можно скачать в разделе «Логотип».

Содержание

Основные правила

Каждый экран papatto строится на этих обещаниях. Ничего не делается так, чтобы их нарушить.

  • Без рекламы

    Ни баннеров, ни видеорекламы. Ничто на экране не мешает делу.

  • Без загрузки файлов

    Изображения, файлы и текст обрабатываются только на устройстве человека, который ими пользуется. Шрифты и библиотеки входят в комплект, поэтому во время работы ничего не загружается со сторонних серверов.

  • Без регистрации

    Ни аккаунта, ни установки. Открыл — и пользуйся.

  • Готово за миг

    Каждый инструмент делает одно дело. То, что нужно почти всем, — внутри; редко нужное — нет.

Структура бренда

papatto — одна из работ автора Hoshimado. Название и цвета принадлежат papatto и не перекрашиваются в цвета Hoshimado.

© papatto
  • Подпись «by Hoshimado» стоит у правого края нижней строки подвала, приглушённым цветом текста (muted).
  • На картинках для соцсетей та же подпись стоит в левом нижнем углу, приглушённым цветом.
  • Подписи нет в шапке, и на экране она появляется только один раз. Она никогда не больше логотипа papatto.
  • Во встроенных на другие сайты инструментах подписи нет — единственная ссылка на источник — полоса «Открыть в papatto».

Высота подписи — 16 px. Текст копирайта рядом — 12 px, поэтому по правилу Hoshimado «высота текста подписи равна тексту копирайта рядом (примерно 16–20 px)» papatto берёт нижнюю границу (правила by Hoshimado).

Связь с гайдом Hoshimado

papatto следует главам «Тексты» и «Доступность» гайда Hoshimado, сохраняя свои цвета, название и логотип.

Собственные правила Hoshimado описаны в дизайн-гайде Hoshimado.

Тексты

Пишем простыми словами, понятными каждому.

  • Короткие дружелюбные предложения. Одна мысль — одно предложение.
  • Без жаргона и малопонятных терминов — обычными словами.
  • Кнопки называют действие глаголом («Выбрать файл», «Скачать PDF»). Варианты во вкладках и переключателях остаются существительными («PNG», «Книжная»).
  • В инструкциях используются точно те слова, что на экране. Названия кнопок и инструкции совпадают слово в слово.
  • Сообщения об ошибках говорят, что случилось и что делать дальше («Такой даты нет. Проверьте год, месяц и день.»).
  • Никаких восклицательных знаков и эмодзи в текстах интерфейса.
  • Честно пишем, чего инструмент не умеет. Вместо необоснованных превосходных степеней («самый быстрый», «лучший») и успокаивающих лозунгов — факты вроде «ничего никуда не отправляется».
  • Все тексты есть на 10 языках, оригинал — японский. Переводы звучат естественно, а не дословно.
ПишемНе пишем
Выбрать файлЗагрузить на сервер
Конвертировать в PNGВыполнить конвертацию в формат PNG
СохраненоОперация успешно завершена!
Не удалось открыть файл. Выберите другой файл.Произошла ошибка
Введённые числа никуда не отправляютсяПередовая защита для вашего спокойствия

Цвет

Спокойные тёплые нейтральные тона и один акцентный цвет — оранжевый. У каждого цвета есть светлое и тёмное значение, они переключаются вместе с настройкой цвета.

  • --bgФон страницыСветлая#fffcf6Тёмная#17140f
  • --surfaceКарточки, поля ввода, блоки шаговСветлая#ffffffТёмная#201c16
  • --surface-hoverПри наведении, спокойные поверхностиСветлая#fff6e6Тёмная#2a241b
  • --fgОсновной текст и заголовкиСветлая#26211bТёмная#f3eee6
  • --mutedВспомогательный текст, примечанияСветлая#6b6157Тёмная#aaa093
  • --lineЛинии и рамки карточекСветлая#ece4d6Тёмная#342e25
  • --controlКонтуры полей, переключателей, кнопок с рамкой и цветных кружковСветлая#998c7eТёмная#776d5f
  • --sliderПолзунок: бегунок и дорожкаСветлая#c97a00Тёмная#f7b13c
  • --accentГлавные кнопки, выбранное и готовое состояниеСветлая#f5a524Тёмная#f7b13c
  • --accent-strongРамка фокуса, ссылки, текст включённого состоянияСветлая#9c5e00Тёмная#f7b13c
  • --accent-fgТекст на оранжевомСветлая#2b1a00Тёмная#2b1a00
  • --gainПлюс в итогеСветлая#2e7d32Тёмная#74d27a
  • --lossОтрицательный баланс, текст ошибок (text-danger)Светлая#c0392bТёмная#f4806f

Контраст

Соотношение цвета и фона. Для текста цель — 4,5:1 и выше, для контуров элементов управления (control) — 3:1 и выше; обе темы этого достигают.

ЦельСветлаяТёмная
fg / bg4.5:115.6:115.9:1
muted / bg4.5:15.9:17.1:1
muted / surface4.5:16.0:16.6:1
accent-strong / bg4.5:15.1:19.9:1
accent-fg / accent4.5:18.2:19.0:1
gain / surface4.5:15.1:19.1:1
loss / surface4.5:15.4:16.6:1
control / bg3:13.2:13.6:1
control / surface3:13.3:13.3:1
  • Оранжевой заливкой (accent) выделяются главные кнопки, включённые переключатели, номера шагов и отметки выбранного. Никогда — для украшения.
  • Насыщенный оранжевый (accent-strong) используется для рамки фокуса, ссылок вроде «Смотреть все» в подвале и текста включённых отметок. Никогда — для ошибок.
  • Текст ошибок — красный (text-danger, тот же цвет, что и отрицательный баланс).
  • Контуры полей, переключателей, кнопок с рамкой и цветных кружков рисуются цветом control; карточки и разделители — цветом line.
  • Только ползунки используют цвет slider (с accent-strong ещё не заполненная часть дорожки была бы ниже 3:1 относительно фона).
  • Одна главная кнопка с оранжевой заливкой на шаг.
  • Цвета записываются CSS-токенами, поэтому работают и в светлой, и в тёмной теме.

Шрифты

Заголовки набраны скруглённым шрифтом, текст — чётким гротеском. Шрифты отдаёт сам сайт, а не сторонние серверы.

  • M PLUS Rounded 1cЗаголовки (японский и языки на латинице и кириллице)
  • Noto Sans JPОсновной текст (японский и языки на латинице и кириллице)
  • Noto Sans KR・SC・ArabicЗаголовки и текст на корейском, китайском и арабском

Размеры

  • Маленькие задачи — за миг.30px · text-3xl Заголовок страницы (компьютер)
  • Маленькие задачи — за миг.24px · text-2xl Заголовок страницы (телефон), крупные заголовки разделов
  • Маленькие задачи — за миг.18px · text-lg Заголовки блоков шагов
  • Маленькие задачи — за миг.16px · text-base Основной текст, поля ввода на телефоне
  • Маленькие задачи — за миг.14px · text-sm Вспомогательный текст, поля ввода на компьютере
  • Маленькие задачи — за миг.12px · text-xs Примечания, подвал
  • Цифры в таблицах и счётчиках выравниваются по разрядам (табличные цифры).
  • В полях ввода на телефоне текст 16 px, чтобы iPhone не увеличивал экран при каждом нажатии.

Сетка, отступы и скругления

Сначала для телефона, потом шире на компьютере. Отступы кратны 4 px и сведены к нескольким ступеням.

Ступени отступов

  • 4・8px · gap-1・gap-2Внутри компонента (значок и подпись, заголовок и пояснение)
  • 8px · gap-2Элементы в ряд (маленькие кнопки, метки)
  • 16px · gap-4Близкие элементы (кнопки друг под другом, ряды карточек)
  • 32px · gap-8Группы (блоки шагов, колонки на компьютере)
  • 48px+ · gap-12・gap-16・gap-24Разделы страницы (обещания и список инструментов)
  • 16 / 24・32px · p-4・sm:p-6・sm:p-8Внутри блока (16 px на телефоне, 24 или 32 px на компьютере)

Скругление углов

  • rounded-fullКнопки, переключатели, метки
  • rounded-xlПоля ввода, небольшие поверхности
  • rounded-2xlКарточки, блоки шагов
  • rounded-3xlКрупные информационные блоки
  • Ступени 4, 8, 16, 24, 32 и 48 px используются для расстояний между элементами и внутренних отступов блоков. Если сомневаетесь: рядом = 16, группа = 32.
  • Маленькие отступы внутри компонентов (сверху и снизу метки, по бокам кнопки) — исключение: там встречаются и значения вне шкалы, например 2, 6, 10 и 12 px.
  • Ширина страницы — не больше 1152 px, текст для чтения переносится на 672 px. Боковые поля на телефоне — 16 px.
  • При ширине 360 px (а лучше 320 px) ничего не выходит за край.

Движение

Движение лишь объясняет, что сейчас произошло. Коротко и без пружинок.

  • При переходе на страницу содержимое слегка въезжает сбоку (0,2–0,3 с). При возврате — с другой стороны.
  • При смене цветовой темы старый и новый экран плавно сменяют друг друга за 0,3 с.
  • Уведомление «Сохранено» поднимается снизу и уходит вниз.
  • Видео в инструкции играют только пока видны и останавливаются, когда уходят с экрана.
  • Если включено «Уменьшить движение», анимация останавливается, а результат появляется сразу.

Компоненты

Кнопки, переключатели и поля берутся из общих компонентов; инструменты никогда не оформляют их сами. Одна и та же задача везде выглядит одинаково.

  • PrimaryButtonГлавное действие шага. Только одна оранжевая кнопка на шаг
  • SecondaryButtonКнопка с обводкой под главной
  • SmallButtonНебольшие действия рядом (копировать, отменить)
  • IconButtonКруглая кнопка только со значком. Всегда с названием для экранного диктора
  • SegmentedControlВыбор одного из 2–4 вариантов

    Формат

  • SwitchВкл/выкл, срабатывает сразу
  • ToggleButtonВарианты «вкл./выкл.» в узкой полосе. Во включённом состоянии — оранжевая рамка и галочка
  • TextFieldОднострочное поле с подписью сверху
  • ColorSwatchesКружки частых цветов и радужный кружок для любого другого цвета

    Цвет

    #e53935
  • CardButton・CardLinkНебольшая карточка, нажимается целиком
  • BadgeМаленькая ненажимаемая метка для короткого состояния
    ДействуетИстёк

Состояния

  • Поле с ошибкой получает красную рамку (aria-invalid), а под ним — красное сообщение о том, как её исправить. В фокусе рамка поля становится насыщенно-оранжевой.
  • Кнопки-переключатели (ToggleButton и IconButton с aria-pressed) во включённом состоянии показывают оранжевую рамку и светло-оранжевый фон. Текст и озвучиваемое название не меняются.
  • Цветные кружки — 32 px в диаметре, с промежутком 8 px. У каждого кружка контур 1 px (control); у выбранного — кольцо 2 px на расстоянии 2 px.
  • Цветные кружки — это группа радиокнопок, выбирать можно стрелками. Экранные дикторы называют цвет, например «Красный (#E53935)».

Ступени размера

Кнопки и другие нажимаемые элементы задаются ступенями высоты. Названия ступеней соответствуют главе «Кнопки» гайда Hoshimado.

СтупеньВысотаКомпонентыГде используется
xl56pxPrimaryButton xl・SecondaryButton xl / stageГлавное действие на сцене мини-инструмента (крутить, начать)
lg48pxPrimaryButton lgПоследняя главная кнопка шага (скачать, сохранить)
md44pxPrimaryButton md・SecondaryButton・ChangeFileButton・TextField・SelectСтандарт. Та же высота, что у полей и списков; также кнопка с рамкой под главной и кнопки повторного выбора файла
sm36pxPrimaryButton sm・SmallButton・ToggleButton・LinkButton inline・TextField smНебольшие действия рядом (копировать, отменить) и переключатели «вкл./выкл.», в том числе «Сохранить» вверху редактора на телефоне
icon44pxIconButton lgТолько значок, там, куда часто нажимают (удалить строку, закрыть полноэкранный режим)
icon-sm36pxIconButtonТолько значок, например копирование рядом с результатом
icon-xs32pxColorField (×)・Thumbnails / ImageStrip (×)× внутри поля или на миниатюре
swatch32pxColorSwatchesКружки выбора цвета

Расположение

  • Между действиями одной группы — 8 px.
  • Если не помещается — переносим на следующую строку. SegmentedControl, который не помещается, ставит варианты друг под другом.
  • Главная кнопка стоит в конце шага.

Значки и видео в инструкциях

Значки — линейные рисунки; инструкции показывают настоящий экран на видео.

  • Значки инструментов — линейные рисунки в скруглённом квадрате, цветом текста. Без оранжевого, чтобы ряды значков выглядели спокойно.
  • У конвертеров внутри значка мелко указан итоговый формат (например, PNG).
  • Для каждого шага инструкция показывает короткое видео настоящего экрана: компьютер — в рамке браузера, телефон — в рамке телефона.
  • Место касания обведено оранжевой рамкой.
  • Текст шага использует слова с экрана и говорит, куда нажать и что произойдёт.

Доступность

Чтобы пользоваться мог каждый, на любом устройстве.

  • Текст в обеих темах имеет контраст с фоном не ниже 4,5:1, а контуры элементов управления — не ниже 3:1.
  • Всё работает с клавиатуры; у любого компонента фокус показывается насыщенно-оранжевой рамкой 2 px на расстоянии 2 px от элемента.
  • Главные действия — не меньше 44 px. Небольшие действия рядом — 36 px (больше 24 px по WCAG 2.2, 2.5.8) и не ближе 8 px к соседям. × внутри полей и кружки выбора цвета — 32 px.
  • В языках с письмом справа налево, например в арабском, раскладка и стрелки отражаются зеркально.
  • У кнопок только со значком есть название для диктора, а состояние никогда не передаётся одним цветом.
  • Тёмная тема и «Уменьшить движение» не ломают раскладку.

Перед публикацией

Проверьте это, прежде чем выпускать новый экран.

  • Нет рекламы, загрузки файлов и запросов к сторонним серверам
  • Проверено на компьютере и телефоне, в светлой и тёмной теме, на японском, английском и арабском; при 360 px ничего не уезжает вбок
  • Только одна оранжевая главная кнопка на шаг
  • Отступы между элементами и внутри блоков взяты из заданных ступеней, компоненты — только общие
  • Кнопки называют действие, без восклицательных знаков и эмодзи; текст ошибок красный и говорит, что делать
  • Все 10 языков заполнены, названия кнопок совпадают с инструкциями
  • Шаги инструкции понятны с первого прочтения