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

1. Обеспечить единый дизайн продукта и пользовательский опыт В 1976 году Джонни Кэш выпустил песню One...
2. Типография Схема
3. Адаптивные Макеты
4. Цветовая палитра
5. Кнопки
6. Дополнительные компоненты пользовательского интерфейса, которые могут потребоваться
7. Оглавление
8. Примечания к контексту
9. Инструкции по размещению и размещению
10. Делай и не делай
11. Живые элементы и фрагменты кода
12. Сделайте руководства по стилю интерфейса легко доступными для дизайнерских команд
13. Руководства по стилю интерфейса должны быть просты в использовании
14. Простые макеты
15. Краткие инструкции
16. Соответствующие версии истории

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

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

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

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

Как и в случае с Cadillac от Johnny Cash, цифровые продукты без UI Style Guides чувствительны к несовпадающим деталям и разрозненному дизайну.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопки

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

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

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

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

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

Оглавление

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

Примечания к контексту

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

Например:

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

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

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

Вот, Atlassian разъясняет расстояние между строками текста и кнопками.

Делай и не делай

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

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

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

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

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

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

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

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

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

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

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

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

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

Figma

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

фаза

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

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

InVision

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

Material.io

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

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

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

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

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

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

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

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

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

Salesforce

поддерживает их сценарии использования «ввода данных» с простой графикой.

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

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

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

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

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

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

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

• • •

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

Похожие

Комментарии