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