16 советов по разработке палитры интерфейса
Основатель агентства EightShapes Натан Кертис в своем блоге на Medium собрал советы дизайнерам по разработке основной и дополнительной палитры дизайн-системы.
Команда Sketchapp подготовила перевод заметки Кертиса.
Я далеко не эксперт в цветах. В плане разработки полноценной палитры и гармоничного ее использования в интерфейсе я в своей карьере полагался больше на визуальных дизайнеров, чем на себя.
Как системный проектировщик я часто оспариваю и оцениваю цветовые решения по мере того, как система приобретает форму. Вот 16 уроков, которые я извлек в процессе стабилизации основной палитры, цветов теней и оттенков, дополнительных палитр и поиска решений для доступных контрастов.
Основная палитра
Под основными цветами мы понимаем те, что используются повсеместно в проекте, включая цвета бренда, нейтральные цвета и интерактивный «цифровой синий».
1. Быстро стабилизируйте цвета бренда
В каждой организации есть один, два или несколько ключевых цветов бренда: красный, синий, оранжевый. Задержитесь на них. Даже если в дизайне разрешена пара цветовых переменных, в команде дизайнеров часто могут меняться и основные цвета бренда, а этого допустить нельзя. Цвета бренда - это величины постоянные.
Вывод. Определитесь с главными брендовыми цветами как можно раньше, потому что вскоре ваша палитра вырастет в разы.
2. Следуйте бренду (если вы меняете цвета)
Синий брендовый оттенок немного унылый? Не можете сопротивляться желанию его оживить? Сотрудничество с клиентом на ранних этапах сильно омрачается заявлениями вроде: «Мы сделали брендовый оранжевый для веба немножко насыщеннее». Реакция клиента: «Вы сделали что? Какое святотатство!».
Вывод. Цвета бренда - это территория его создателей. Обсуждайте все изменения с ними и руководствуйтесь их суждениями.
3. Опускайте нейтральные оттенки
Нейтральные оттенки - от темного, как ночь, серого до пушистого светло-серого - обеспечивают важную подложку интерфейса. Загрузка системы нейтральными тонами, даже если их несколько, создает риск, что в интерфейсе повсеместно будут использоваться размытые цвета. Другой частый результат - «каркасообразный» дизайн. Ни светлый, ни темный тип не обеспечивают комфортный контраст на средне-сером фоне.
Вывод. Выбирайте несколько светло-серых и несколько темно-серых цветов, чтобы достичь комфортного контраста, но не превратите дизайн в мутное каркасное месиво. Избегайте оттенков, которые находятся посередине между выбранными.
4. Используйте «цифровой синий». Все так делают.
Мои последние пять дизайн-систем базировались на насыщенном синем цвете, который использовался для кнопок и ссылок по умолчанию. Ссылки всегда были синими - наверное, еще с рождения первого браузера. Этот «цифровой синий», стандартный цвет для ссылок и кликабельных элементов - важный компонент любой ключевой палитры.
Вывод: Когда (не «если») вы используете «цифровой синий», выбирайте комфортный оттенок и старайтесь, чтобы он не конфликтовал с синим цветом бренда - или с красным, оранжевым, зеленым и так далее.
Оттенки цветов
Вы не можете просто взять и назвать несколько цветов «дневным» или «ночным» режимом, верно? Пользователям систем часто приходится выбирать цвета из диапазона, с легкостью их использовать и знать границы своего выбора.
5. Задайте диапазон оттенков и теней для каждого цвета
Паттерны цветовых палитр использовались задолго до появления веба. И все-таки компактные, удобно оформленные стеки оттенков могут быть просто потрясающими. Качественные стеки в комбинации с названием, HEX-кодами, переменными кода и прочими индикаторами визуализируют лучше, чем просто цвет. При первом же взгляде все ясно.
Вывод. Оформляйте оттенки цветов в стеки и компактно визуализируйте важные детали по цветам.
Оттенки индиго и насыщенного оранжевого в Material Design
6. Называйте оттенки и тени по яркости
Все мы с этим сталкивались. Месяц в системе, нейтральные цвета вроде $color-gray-1, $color-gray-2,..., $color-gray-7? стабильны. Затем вам понадобилось добавить еще один оттенок, который по насыщенности где-то между $color-gray-1 и $color-gray-2. И тут весь нейминг поплыл.
Вывод. Присваивайте оттенкам идентификаторы на основе яркости - от 0 до 100, например, $color-gray-05 и $color-gray-92. Диапазон отображает переход от темного к светлому, позволяет вставлять больше оттенков между основными, к тому же сразу легко распознать каждый цвет по названию.
7. Ограничивайте количество оттенков и теней
Ядро хорошей системы - это не выбор из бесконечных опций, а стабильная эстетика в качестве начальной точки. Вероятно, вы не Material Design, который обслуживает несметное количество продуктов. В большинстве случаев дизайн-система не нуждается в бесконечном выборе. Чем больше опций выбора вы предоставляете, тем тяжелее контролировать гармоничные комбинации и постоянство в приложениях.
Вывод. Предложите ряд опций и избегайте утомительного многообразия. Предоставьте пользователям системы именно столько возможностей выбора, сколько им нужно, - больше одного, максимум несколько.
8. Определите метод трансформации: выбор вручную или функционально
Современные инструменты вроде SASS и Stylus предлагают функции трансформации вроде затемнения или осветления, чтобы менять цвет по проценту яркости. Это позволяет изменять цвета для получения легкого контраста, вроде кнопки на ховере или многоуровневой навигации.
Но трансформации могут вызывать проблемы: тщательно отобранные базовые цвета станут недоступной альтернативой (смотрите ниже), общая палитра страницы помутнеет или же «системный 5%», который работает на средне-ярких цветах, даст практически невидимый контраст на светлом или темном цвете.
Вывод. Специально разрешайте - или предотвращайте - цветовые трансформации в вашей системе. Если вы приемлете такую практику, предлагайте примеры, когда и как эффективно использовать их в вашей системе. Например, 5?10% для средне-ярких цветов и 10?20% в крайних случаях. Если трансформаций нужно избегать, кратко это документируйте.
Дополнительные палитры
Помимо цветов бренда и их вариаций, продуманные цветовые системы имеют более широкий выбор цветов, зарезервированный под разные цели.
9. Сформируйте наборы цветов по смыслу, например, Feedback Colours
Большинство систем закрепляют отдельный оттенок красного для ошибок, зеленого - для успешных операций, желтый - для предупреждений и синий - для информационных сообщений. Цвета отклика критически важны: они выводятся наверху страницы, сочетаясь с остальными ключевыми компонентами, и пользователи могут воспринимать их не очень дружелюбно. Без четкой структуры в системе такие цвета просто прописываются в коде - в это может привести к непостоянству и разброду цветов.
Вывод. Устанавливайте стандартные цвета фидбеков и другие релевантные наборы оттенков, чтобы все цвета гармонировали между собой.
Типичные цвета фидбека: успех, предупреждение, ошибка и информационный
10. Иллюстрируйте разнообразие тем
В некоторых системах использование цвета настраивается для каждого продукта, раздела или бренда. Часто такие настройки отображают связь с главным брендом (например, Marriott International) с его суббрендами (например, Courtyard Hotels, Ritz Carlton и Moxy Hotels). Либо это заранее предусмотренные темы вроде Ambient Warmth и Frozen Blue. Возможно, пользователь будет настраивать темы полностью самостоятельно - тогда вам нужно просто продемонстрировать всю широту (или узость) его возможностей.
Вывод. Показывайте перечень доступных тем в компактном режиме и устанавливайте границы допустимых цветов тем в определенных контекстах.
Цвета тем для разных отелей Marriott.com, полученные из страниц продуктов
11. Определите, как работает теминг
Недостаточно просто сказать: вперед, оформите все в единую тему. Цвета темы можно применять к предсказуемым акцентам в UI: цвет фона кнопки, фон активной вкладки или цвет границы основной навигации. Важно запретить использовать цвета темы там, где они будут невидимы - например, как цвет ссылки.
Вывод. Идентифицируйте правила работы темы, особенно ссылаясь на параметры конкретных элементов интерфейса. Очень важно оговаривать, на какие элементы эти правила не распространяются.
12. Не согласовывайте смешивание цветов, пока страсти не улягутся
Один из моих любимых инструментов для дизайн-системы - MDL Color Customizerот Google, который дает возможность комбинировать основные и дополнительные цвета интерфейса. Это просто, но полезно. Тем не менее команды систем, с которыми я работаю, либо не хотят внедрять эту возможность, либо у них попросту нет времени решать подобные комбинаторные задачи.
Вывод. Избегайте мук с огромным диапазоном цветовых комбинаций, если только это не ключевая ценность системы. В большинстве случаев пользователи системы будут делать собственные комбинации или воспользуются инструментом, предназначенным специально для таких целей. Помогите им сделать свой выбор, вместо того чтобы продумывать комбинации под любую возникшую необходимость. Экспериментировать - их работа.
Предоставьте пользователям эффективные методы выработки собственного решения, вместо того чтобы решать за них.
Контраст и приемлемость
Возможность реализации доступного приемлемого контраста должна быть продумана в цветовой системе изначально. Тем не менее процесс дизайна иногда очень сложен, так что команды могут и не уследить. Некоторые члены команды просто не знают о приемлемости или не считают ее приоритетом.
Разработчики систем могут внедрять доступные практики в рабочий процесс, распространяя в компании нужные принципы.
13. Проверяйте контрасты заранее и тщательно
Часто бывает, что до запуска продукта или дизайн-системы остается несколько недель или дней, и тут кто-то замечает ошибку. Команда не позаботилась должным образом о сочетании основной и дополнительной палитры, чтобы оно соответствовало нормам WCAG 2.0 цветового контраста 3.0 (для крупного типа) или 4.5 (для стандартного типа). Так что дизайнеры, а потому и разработчики, мучаются с фиксами и их реализацией в коде.
Вывод. Любой дизайнер системы, ответственный за цвета, должен быть знаком с правилами WCAG 2.0, иметь инструмент вроде Tanaguru для проверки цветовых пар и внедрять эту практику в выбор цветов.
Tanaguru, один из многих онлайн-калькуляторов сочетаемости
14. Находите приемлемые цвета, выбирая из спектра
Недостаток спецификаций WCAG - их жесткий предел: цветовые пары либо проходят проверку, либо нет. В итоге дизайнеры хотят большего, да и клиенты в недоумении: насколько цветовая пара плоха, и как именно ее нужно менять?
Разговор идет быстрее, когда появляется спектр опций на выбор, когда линия прохождения или непрохождения пар объяснима и очевидна. Это переводит процесс из режима тестирования и получения ошибок к настройке корректности пар. Раньше было так: «Пара не прошла. Давайте попробуем еще», а теперь - «О, вот как нужно затемнить синий». За этим следует рациональная дискуссия по балансировке тона, согласованности с политикой бренда, сочетаемости и контраста.
Вывод. В поиске приемлемого цветового контраста показывайте ряд опций, чтобы помочь команде выбрать цвета, полностью соответствующие всем правилам и требованиям.
Поиск нейтральных и интерактивных цветов путем показа разных сочетаний в спектре
15. Светлое на темном и темное на светлом
При создании системы дизайнеру приходится обдумывать весь набор опций по цвету. Недостаточно просто тестировать проблемы сочетаемости по мере их возникновения. Вместо этого цветовую палитру нужно тщательно проанализировать перед выпуском системы для работы.
Это особенно важно при обратных сочетаниях цветов. Обычно система по умолчанию настроена на темный текст на светлом фоне. Тем не менее многие меняют эти цвета ролями, будь это черный и белый на светлом и темном фоне, или оттенки другого основного или дополнительного цвета.
Вывод. Предусмотрите возможность или невозможность обратного переключения цветов в системе.
Таблица рассчитанных контрастов (используя функцию SASS) между нейтральными фонами и интерактивными оттенками синего
16. Используйте цвет для более широкой поддержки сочетаемости
Цвет - фундаментальный элемент системы, а приемлемый цветовой контраст - фундаментальный критерий для цветов. Из-за этого сочетаемость становится главным моментом в формировании всей системы. На нее обращают внимание бренд-менеджеры, дизайн-лиды, разработчики. Отличная возможность использовать цвет, чтобы открыть дверь в более широкий спектр факторов приемлемости.
Вывод. Воспользуйтесь возможностью ратовать за доступность и приемлемость. Всегда собирайте знания команды (или обнаруживайте их недостаток) и всячески обучайте, пропагандируйте.
