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

1. Определите интерфейс перед выбором цветов

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

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

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

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

2. Преобразуйте свой любимый цвет в стабильную основу

Ваша отправная точка может быть цветом из логотипа, фотографии, физического продукта или личного предпочтения. Преобразуйте этот цвет в точное цифровое значение, такое как HEX, RGB или HSL. "Глубокий фиолетовый" открыт для интерпретации, но значение #4F46E5 можно воспроизвести последовательно.

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

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

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

3. Дайте базовому цвету четкую семантическую роль

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

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

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

4. Создайте полезные оттенки и тени

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

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

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

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

5. Создайте нейтральную основу

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

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

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

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

6. Выберите контролируемый вспомогательный цвет

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

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

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

7. Назначьте цвета ролям интерфейса

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

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

8. Создайте состояния наведения, фокуса и отключения

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

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

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

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

9. Протестируйте контрастность цветов и доступность

Визуальная гармония не гарантирует читаемость контента. Каждая важная пара переднего плана и фона должна быть протестирована на контраст. Рекомендации W3C по доступности веб-контента 2.2 указывают минимальное соотношение контраста 4.5:1 для обычного текста и 3:1 для большого текста в соответствии с критерием успеха 1.4.3.

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

10. Подготовьте палитры светлого и темного режимов

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

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

Рекомендации Apple Human Interface для цвета рекомендуют рассмотреть различные внешние виды и использовать цвет последовательно для коммуникации. Протестируйте обе темы в контексте и убедитесь, что важная информация не выражается только цветом.

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

11. Протестируйте палитру внутри реальных компонентов

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

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

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

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

12. Задокументируйте, экспортируйте и поддерживайте систему

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

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

:root {
  --color-background: #ffffff;
  --color-surface: #f7f7fa;
  --color-text-primary: #17171c;
  --color-text-muted: #5f606b;
  --color-primary: #4f46e5;
  --color-on-primary: #ffffff;
  --color-border: #d9dae2;
  --color-success: #16794b;
  --color-warning: #9a6700;
  --color-error: #b42318;
}

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

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