Создание руководства по стилю пользовательского интерфейса для лучшего UX

Послушайте аудиоверсию этой статьи.

Обеспечить целостный дизайн продукта и взаимодействие с пользователем

В 1976 году Джонни Кэш выпустил «One Piece at a Time » — песню, рассказывающую историю детройтского рабочего-автомобилестроителя, который двадцать лет собирает детали «Кадиллака», украденные с конвейера.

К сожалению, когда рабочий начинает собирать свой бутлег Cadillac, он обнаруживает, что многие детали несовместимы, потому что ключевые конструктивные особенности изменились за эти годы. Приложив немного изобретательности, кастомный автомобиль собирается вместе, но это неприглядная мешанина, которая вызывает насмешки, где бы она ни появилась.

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

Дизайнеры и разработчики современных цифровых технологий сталкиваются с аналогичной проблемой. Течение времени — грозный враг, способный нанести ущерб преемственности цифровых продуктов. Со временем члены команды приходят и уходят, тенденции развиваются, а функции меняются. Кроме того, быстрый темп нашего современного цифрового ландшафта означает, что инновации в продуктах происходят за кварталы, а не за годы.

Если у бизнес-группы или команды дизайнеров нет общей записи, которая документирует предполагаемый внешний вид продукта, возникнут визуальные и эмпирические несоответствия, пользователи будут разочарованы, а репутация бренда пострадает.

Руководства по стилю пользовательского интерфейса — это инструмент проектирования и разработки, который обеспечивает согласованность пользовательского интерфейса и опыта цифрового продукта. По своей сути они:

• Запишите все элементы дизайна и взаимодействия, которые происходят внутри продукта.
• Перечислите важные компоненты пользовательского интерфейса, такие как кнопки, типографика, цвет, навигационные меню и т. д.
• Задокументируйте важные компоненты UX, такие как состояния наведения, выпадающие заливки, анимацию и т. д.
• Содержит живые элементы и фрагменты кода, на которые разработчики могут ссылаться и использовать

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

Включите эти важные компоненты дизайна в руководства по стилю пользовательского интерфейса

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

Совет для профессионалов: документируйте только соответствующие компоненты дизайна. Излишняя информация делает руководства по стилю пользовательского интерфейса раздутыми и трудными для работы.

Типографская схема

Типографика — один из самых распространенных элементов дизайна интерфейса, поэтому недостаточно просто перечислить названия шрифтов, используемых в продукте. Для заголовков, подзаголовков, заголовков (H1, H2, H3), основного текста и подписей должны быть даны четкие инструкции.

Кроме того, должны быть предоставлены размеры шрифта, указан вес и определены стили. Высота строки и кернинг также необходимы, и было бы неплохо выделить подходящий шрифт, который будет использоваться при возникновении особых обстоятельств.

Адаптивные макеты

Когда цифровые продукты разрабатываются на основе адаптивных сеточных систем, руководства по стилю пользовательского интерфейса должны учитывать макеты интерфейса для разных размеров экрана. Это означает включение примечаний и примеров для интервалов, заполнения и размещения. Также полезно показывать наложения системы сетки продукта по отношению к разным размерам экрана.

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

Цветовая палитра

Один из самых быстрых способов испортить интерфейс — это непоследовательное использование цветов, поэтому необходимо четко определить цветовые комбинации. Список цветов и их значений (HEX, UIColor) — хорошее начало, но также следует привести конкретные пары и примеры использования.

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

Кнопки

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

Дополнительные компоненты пользовательского интерфейса, которые могут понадобиться

• Иконография
• Подсказки и всплывающие окна
• Модальные
• Элементы формы
• Таблицы данных
• Меню навигации
• Диаграммы и визуализации данных
• Вкладки
• Выключатели
• Диалоги
• Списки сетки содержимого
• Вертикальные списки
• Панели инструментов
• Выбор даты и времени
• Индикаторы загрузки
• Флажки
• Оповещения
• Выпадающие меню
• Слайдеры
• Степперы
• Пагинация

Организация и контекстуализация инструкций по проектированию

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

Оглавление

Хорошо организованное и четко обозначенное оглавление — это простой способ помочь каждому быстро найти содержимое документа.

Контекстные примечания

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

Например:

«В основе нашего продукта лежит демонстрация лучших изображений архитектуры со всего мира. По этой причине макет нашего интерфейса отдает предпочтение большим ярким изображениям, а не тексту. По возможности делайте изображения центром нашего продукта».

Инструкции по расстоянию и размещению

Интервалы и позиционирование часто рассматриваются в разделе «Адаптивные макеты». В зависимости от сложности цифрового продукта инструкции могут состоять из общих «эмпирических правил» или быть весьма детализированными.

Что можно и чего нельзя делать

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

• « Используйте белую версию логотипа нашей компании в нижнем колонтитуле интерфейса».
• « Не используйте альтернативные цветные версии словесного знака нашей компании на черном фоне».

Что можно и что нельзя делать, чтобы предотвратить споры и сэкономить время на проектирование и разработку, но всегда лучше предоставить примечание о контексте, подобное этому:

«Этот список того, что можно и чего нельзя делать, охватывает широкий спектр важных дизайнерских решений, но не учитывает все возможные варианты неправильного использования элементов дизайна нашего продукта. Имея это в виду, используйте здравый смысл, когда возникает неопределенность, и делайте выбор, который точно отражает общий внешний вид нашего продукта».

Живые элементы и фрагменты кода

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

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

Сделайте руководства по стилю пользовательского интерфейса легко доступными для дизайнерских команд

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

Традиционно руководства по стилю пользовательского интерфейса существовали в виде веб-страниц. Это обеспечивает дизайнерам и разработчикам легкий доступ и позволяет элементам дизайна функционировать так же, как в продукте.

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

Давайте посмотрим, как некоторые из этих платформ описывают свой подход к руководствам по стилю пользовательского интерфейса.

Фигма

«Создавайте дизайн-системы со связанными компонентами пользовательского интерфейса, которыми может пользоваться вся команда. Получайте обновления при внесении изменений в общие компоненты»

Фаза

«Библиотеки такими, какими они всегда должны были быть: цвета, свойства и элементы… даже время перехода — теперь все в компоненте. Редактируйте на месте — все в порядке. Переопределите все, что вам не нужно, для каждого экземпляра».

Инвижн

«Все компоненты бренда и UX, включая документацию по использованию, управляются в одном месте. Изменения синхронизируются со всей командой, и дизайнеры могут в любой момент переключиться на последнюю версию или откатить обновления».

Материал.ио

«Создайте собственную тему материала и создайте библиотеку фирменных символов, применяя изменения стиля к цвету, форме и типографике. Делитесь, загружайте и представляйте варианты дизайна в галерее. Затем используйте режим проверки для доступа к документации разработчика».

Руководства по стилю пользовательского интерфейса должны быть просты в использовании

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

Простые макеты

Руководства по стилю пользовательского интерфейса требуют чистых, незагроможденных макетов экрана. Каждый экран должен быть хорошо организован, четко помечен и легко читаем. Нет никакой пользы в перегрузке экранов визуальной информацией, поэтому стремитесь к минималистичным и просторным аранжировкам.

Краткая инструкция

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

Сценарии информативного использования

Хотите знать, когда использовать этот стиль ползунка вместо того? «Использование сценариев» устраняет путаницу такого рода. Опять же, визуальные эффекты здесь сильнее слов, поэтому приведите примеры, которые четко демонстрируют как сценарий, так и правильный путь вперед.

Соответствующие истории версий

Цифровые продукты часто обновляются. Поскольку команды разработчиков стремятся усовершенствовать каждую деталь интерфейса, важно вести постоянную запись того, как развивались компоненты дизайна. Здесь следует действовать по своему усмотрению — для небольших компаний и продуктовых групп ведение обширной библиотеки истории версий может оказаться нецелесообразным.

Руководства по стилю пользовательского интерфейса — ценный ресурс и мощный инструмент дизайна

Современные команды дизайнеров и разработчиков ценят эффективность и междисциплинарное сотрудничество, о чем свидетельствуют языковые системы дизайна, рекламируемые такими крупными брендами, как MailChimp, Google и Salesforce.

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

В то же время дизайн — это занятие не только для крупных компаний. Разнообразные продуктовые команды и цифровые проекты могут извлечь выгоду из хорошо составленных руководств по стилю пользовательского интерфейса, но ресурсы (финансовые, время и таланты) варьируются от бизнеса к бизнесу.

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

Дальнейшее чтение в блоге Toptal Design:

• Стили шрифтов для веб-дизайна и полиграфического дизайна
• Отзывчивый дизайн — лучшие практики и рекомендации
• Зачем стартапам нужен Styleguide
• Рекомендации по удобству использования и дизайну значков
• Используйте свое вдохновение — руководство по мудбордам