Выбрать цвет, шрифт, размер изображений: инструкция по созданию руководств для дизайнеров
Перевод материала дизайнера Нейтана Кёртиса о выборе заголовков, необходимости динамических примеров и правильной тональности текстов.
В сентябре 2014 года я впервые открыл руководство по Material Design от Google. Полтора часа я впитывал всё, что там было написано. Прочитав его, я не просто стал больше знать о концепции Material. Я стал лучше как дизайнер, потому что узнал, как правильно составлять документы.
Тогда я полностью погрузился в руководство — оно мне понравилось. Но в целом такие документы нельзя назвать приятным чтивом.
Чтобы создать качественное руководство, нужно чётко структурировать его содержание, разработать правила для написания текста и создать изображения, которые лучше всего подойдут вашей аудитории.
Начните с текста
Читателю легче усвоить информацию, если у советов предсказуемая структура.
Разбейте руководство на секции по категориям
Огромные, не систематизированные списки отталкивают читателя. Понятные заголовки закрепят в головах читателей определенную структуру текста. Когда составлен план, и вы начинаете работать с текстом, я рекомендую выделить следующие категории.
- «Используйте, когда нужно». В эту же категорию можно внести подзаголовок «Не используйте, когда» или «Когда использовать».
- «Визуальный стиль». Это категория, в которой можно рассказать о цветовых решениях, типографике, пустом пространстве и так далее. Другие названия: «Визуальный язык», «Язык дизайна».
- «Поведение». Здесь можно показать, как справляться с событиями, что делать с результатами и как внедрять. Другой вариант заголовка: «Взаимодействие».
- «Редакционная». Категория охватывает работу с текстом и изображениями. Другие варианты заголовка: «Характер и тональность», «Контент».
- «Специальных возможности». Здесь можно написать о том, что влияет на решение о выборе цветового контраста.
На странице компонентов есть местная навигация (например, закрепленный список ссылок), которая показывает другие категории.
Используйте, когда нужно
Формулировка «Используйте, когда нужно» помогает создать последовательную и сжатую структуру, потому что дальше можно начинать предложения с глагола: показать, сгруппировать, загрузить и так далее.
Примеры:
- Используйте, когда нужно показать пункты меню. Списки дизайн-системы Morningstar.
- Используйте, когда нужно выделить статус элемента, чтобы его было легче распознать. Графический компонент Lozenges дизайн-системы Atlassian.
- Используйте, когда нужно заполнить изображением всё доступное пространство, не превысив при этом реальных размеров изображения. Отзывчивые медиа дизайн-системы австралийского правительства.
- Используйте, когда нужно выделить короткие, неопределенные действия, занимающие две-пять секунд. Если действие требует больше времени, могут потребоваться другие методы коммуникации, например, виджет snackbar или уведомления. Индикатор выполнения из Google Material.
Приведите примеры того, что делать не надо. Элементы из списка «Не используйте, когда» должны быть написаны в той же тональности и оформлены в сестринскую или дочернюю группу.
Визуальный стиль
Здесь можно рассказать о цвете, типографике, иллюстрациях, границах, пустых пространствах, размере шрифта и других визуальных параметрах.
Примеры:
- Разместить главную кнопку правее всех остальных кнопок. Кнопка из дизайн-системы USAC Indigo.
- Настроить прозрачность для каждого состояния взаимодействия, чтобы оно гармонично смотрелось с цветом фона кнопки.
- Расположить элемент stepper в центре страницы сверху контента. Элемент Stepper из дизайн-системы Morningstar.
Поведение
Категория о поведении подробно рассказывает обо всех интерактивных деталях, полезных дизайнерам, разрабатывающим UX. Примеры:
- Закрыть всплывающее окно, когда пользователь повторно кликает на элемент-триггер, кликает в стороне от всплывающего окна, открывает другое всплывающее окно или нажимает Esc. Всплывающее окно из дизайн-системы NetApp LUCI.
Редакторская категория
В компонентах почти всегда есть слова или картинки, вне зависимости от того, простой он (как кнопка или поле ввода) или сборный (как карточка или меню). Редакторская категория может содержать советы по меткам, тональности, длине текста, пунктуации, а также примеры текстов.
Как писать эффективные руководства по дизайну
Руководства по характеру и тональности написания отличаются в разных дизайн-системах. Когда команда начинает работать над текстом, я предлагаю вот что:
- Начинайте с повелительного наклонения, например: «убирайте», «включайте», «предотвращайте», «ограничивайте» и «обеспечьте возможность».
- Опускайте ненужные слова. Если можно сказать что-то коротко, так и делайте.
- Помечайте обязательные к исполнению пункты словами «всегда» или «никогда».
- Дайте читателям возможность принять решение самостоятельно с помощью слов «рассмотрите возможность» или «избегайте».
- Предлагайте альтернативные варианты: «вместо этого воспользуйтесь инструментом...».
- Используйте утвердительные предложения, например: «Всегда включайте логотип в глобальную навигацию», а не «Никогда не забывайте включить логотип в глобальную навигацию».
- Отдавайте предпочтение спискам, а не абзацам. Читатели хотят быстро найти информацию. Поэтому не стоит закапывать советы в текст.
- Ограничивайте длину инструкций до двух или менее предложений.
- Включать в руководство субъективные и запутанные объяснения не стоит.
Как не нужно: слишком широкие логотипы и длинные метки могут привести к плохому отображению сайта, ухудшить юзабилити, влиять на другие элементы сайта, вызывать ненужный перенос текста, занимать слишком много места. Поэтому старайтесь делать логотипы меньше, чем 100 пикселей шириной и не делайте метки слишком длинными.
Как нужно: айдентика продукта должна уместиться в логотип менее 100 пикселей в ширину с текстовыми метками не более 15 символов.
Наполните руководство изображениями
Когда вы пишете или редактируете руководства, ставьте под сомнение каждый пункт списка, параграф, заголовок. Задавайте себе вопрос: «Может быть, передать информацию с помощью изображения будет эффективнее?».
Но в то же время создавать изображения, работать над их дизайном сложнее, чем написать несколько строк текста. Если будет слишком много изображений, то к концу документа читатель устанет.
Здесь важно найти баланс, например, одно изображение на каждые пять-десять текстовых рекомендаций.
Используйте список «Можно и нельзя»
Такой список позволяет отдохнуть от больших объёмов текста. В этом списке блоки информации наиболее полные, сжатые, предметные и годятся для беглого просмотра.
В каждом есть картинка с краткими советами, которые начинаются с «можно» или «нельзя» и подсвечены зеленым или красным. Наглядность — это не сложно. Такую модель можно использовать во всех разделах.
Использовать «Можно» и «Нельзя» нужно рядом друг с другом. Можно сделать любое количество «можно» и «нельзя».
Для списка «Можно и нельзя» используется стандартная высота, а ширина должна быть не более 50% от общей ширины текста на странице.
Иногда размеры картинки 4x3 — нежелательное ограничение для более крупных или горизонтальных изображений. Поэтому попробуйте в качестве альтернативы вариант списка «можно-нельзя» на всю ширину страницы.
«Можно и нельзя» отлично работает как со словами, так и с фрагментами кода. Shopify Polaris и Morningstar пользуются такими списками, чтобы показать примеры хороших и плохих решений.
Предостережение в списках «Можно и нельзя» выделяется желтым или оранжевым.
Добавьте динамические примеры
- Приблизительные схемы с примерами использования компонентов (например, индикатор загрузки в дизайн-системе Lightning компании Salesforce), процессов или состояний.
- Видеоролики, GIF-файлы и так далее, которые фиксируют варианты взаимодействия или анимации. Например, раздел «Анимация» в Google Material.
- Дополнительные примеры с рабочим кодом, которые позволяют глубже понять, что представляют собой предложенные варианты.
Следует признать, что такие примеры редко встречаются в описании компонентов дизайн-систем. Их дорого создавать, это может замедлить процесс создания материала, и ещё могут потребоваться инструменты и средства, которые незнакомы или недоступны авторам руководства.
"Я тут посмотрел, как Гугл оформляет свои гайды для Матириала. Сейчас расскажу для тех, у кого не октрывается"
Спасибо