Hi-Tech

Выбрать цвет, шрифт, размер изображений: инструкция по созданию руководств для дизайнеров

Полтора часа я впитывал всё, что там было написано. В сентябре 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.
  • Дополнительные примеры с рабочим кодом, которые позволяют глубже понять, что представляют собой предложенные варианты.

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

#дизайн

Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть