Основатель 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. Ограничьте количество оттенков и теней
Основой хорошей системы является не выбор из бесконечных вариантов, а наличие стабильной эстетики в качестве отправной точки.Вы, вероятно, не дизайнер материалов, который предлагает множество продуктов.
В большинстве случаев дизайн-система не требует бесконечного выбора.
Чем больше возможностей выбора вы предоставляете, тем сложнее контролировать гармоничные комбинации и согласованность между приложениями.
Заключение.
Предлагайте широкий выбор вариантов и избегайте утомительного разнообразия.
Предоставьте пользователям системы ровно столько вариантов выбора, сколько им нужно — больше одного, максимум несколько.
8. Определить способ трансформации: ручной или функциональный выбор.
Современные инструменты, такие как SASS и Stylus, предлагают функции преобразования, такие как затемнение или осветление, для изменения цвета в процентах от яркости.
Это позволяет вам менять цвета для создания тонкого контраста, например, при наведении курсора или многоуровневой навигации.
Но трансформации могут вызвать проблемы: тщательно подобранные базовые цвета станут недоступной альтернативой (см.
ниже), общая палитра страницы станет мутной или «система 5%», работающая на средне-ярких цветах, даст почти невидимые контраст на светлом или темном цвете.
Заключение.
В частности, включите или запретите преобразование цвета в вашей системе.
Если вы согласны с этими практиками, приведите примеры того, когда и как их эффективно использовать в вашей системе.
Например, 5-10% для средне-ярких цветов и 10-20% в крайних случаях.
Если трансформаций необходимо избежать, кратко задокументируйте их.
Дополнительные палитры
Помимо фирменных цветов и их вариаций, продуманные цветовые системы предлагают более широкий выбор цветов, предназначенных для разных целей.
9. Создавайте наборы цветов по смыслу, например «Цвета обратной связи».
Большинство систем назначают отдельный оттенок красного для ошибок, зеленого для успешных операций, желтого для предупреждений и синего для информационных сообщений.
Цвета ответов имеют решающее значение: они появляются вверху страницы, смешиваясь с другими ключевыми компонентами, и могут быть не очень приятны пользователям.
Без четкой структуры в системе такие цвета просто прописываются в коде — это может привести к непостоянству и путанице цветов.
Заключение.
Установите стандартные цвета обратной связи и другие соответствующие наборы оттенков, чтобы все цвета гармонировали друг с другом.
Типичные цвета обратной связи: успех, предупреждение, ошибка и информация.
10. Иллюстрируйте различные темы
В некоторых системах использование цвета настраивается для каждого продукта, раздела или бренда.Часто эти настройки представляют собой ассоциацию с основным брендом (например, Marriott International) и его суббрендами (например, Courtyard Hotels, Ritz Carlton и Moxy Hotels).
Или это заранее разработанные темы, такие как Ambient Warmth и Frozen Blue. Возможно, пользователь настроит темы полностью самостоятельно — тогда вам просто нужно продемонстрировать всю широту (или узость) его возможностей.
Заключение.
Покажите список доступных тем в компактном режиме и установите границы допустимых цветов темы в определенных контекстах.
Тематические цвета для различных отелей Marriott.com, взятые со страниц продуктов.
11. Определите, как работает темирование
Недостаточно просто сказать: давайте, организуйте все в одну тему.Цвета темы можно применять к предсказуемым акцентам в пользовательском интерфейсе: цвету фона кнопки, фону активной вкладки или цвету границы основной навигации.
Важно предотвратить использование цветов темы там, где они не будут видны — например, в качестве цвета ссылки.
Заключение.
Определите правила темы, особенно обращаясь к параметрам конкретных элементов интерфейса.
Очень важно оговорить, на какие элементы эти правила не распространяются.
12. Не координируйте смешивание цветов, пока все не остынет.
Один из моих любимых инструментов системы дизайна — Google MDL Color Customizer, который позволяет комбинировать основные и дополнительные цвета интерфейса.Это просто, но полезно.
Однако системные команды, с которыми я работаю, либо не хотят реализовывать эту функцию, либо просто не имеют времени для решения таких комбинаторных задач.
Заключение.
Избегайте хлопот, связанных с огромным диапазоном цветовых комбинаций, если только это не является основной ценностью системы.
В большинстве случаев пользователи системы будут составлять свои собственные комбинации или использовать инструмент, разработанный специально для таких целей.
Помогите им сделать выбор, вместо того, чтобы продумывать комбинации для каждой возникающей потребности.
Их работа – экспериментировать.
Предоставьте пользователям эффективные методы, позволяющие найти собственное решение, вместо того, чтобы принимать решения за них.
Контраст и приемлемость
В цветовой системе с самого начала должна быть продумана возможность реализации доступного, приемлемого контраста.Однако процесс проектирования иногда бывает очень сложным, поэтому команды могут не успевать за ним.
Некоторые члены команды просто не осознают приемлемости или не считают это приоритетом.
Разработчики систем могут внедрять доступные практики в рабочий процесс, распространяя правильные принципы по всей компании.
13. Проверяйте контрасты заранее и тщательно
Часто бывает, что до запуска продукта или дизайн-системы остается несколько недель или дней, и тут кто-то замечает ошибку.Команда не позаботилась должным образом о сочетании первичной и вторичной палитры, чтобы она соответствовала рекомендациям по цветовому контрасту WCAG 2.0: 3,0 (для крупного шрифта) или 4,5 (для стандартного шрифта).
Поэтому дизайнеры, а значит и разработчики, борются с исправлениями и их реализацией в коде.
Заключение.
Любой системный разработчик, отвечающий за цвета, должен быть знаком с правилами WCAG 2.0, иметь такой инструмент, как Tanaguru, для проверки цветовых пар и применять эту практику при выборе цвета.
Танагуру, один из многих онлайн-калькуляторов совместимости.
14. Найдите приемлемые цвета, выбрав из спектра
Недостатком спецификаций WCAG является то, что они имеют жесткое ограничение: цветовые пары либо проходят тест, либо нет. В результате дизайнеры хотят большего, а клиенты теряются: насколько плоха цветовая пара и как именно ее следует изменить? Разговор движется быстрее, когда есть ряд вариантов выбора, когда линия прохода или провала пар понятна и очевидна.Это перемещает процесс от тестирования и получения ошибок к настройке корректности пар.
Раньше было так: «Пара не прошла.
Давай попробуем еще раз», а теперь «О, вот как затемнить синий».
За этим следует рациональное обсуждение вопросов баланса тона, соответствия политике бренда, совместимости и контраста.
Заключение.
При поиске приемлемого цветового контраста покажите ряд вариантов, чтобы помочь команде выбрать цвета, полностью соответствующие всем правилам и требованиям.
Нахождение нейтральных и интерактивных цветов путем показа различных комбинаций спектра.
15. Свет в темноте и темнота в свете.
Создавая систему, дизайнеру приходится продумывать всю гамму цветовых вариантов.
Недостаточно просто проверять проблемы совместимости по мере их возникновения.
Вместо этого перед выпуском системы в эксплуатацию следует тщательно проанализировать цветовую палитру.
Это особенно важно при обратных сочетаниях цветов.
Обычно система по умолчанию использует темный текст на светлом фоне.
Однако многие люди меняют роли этих цветов, будь то черный и белый на светлом и темном фоне или оттенки другого основного или вторичного цвета.
Заключение.
Учитывайте возможность или невозможность переключения цветов обратно в систему.
Таблица рассчитанных контрастов (с использованием функции SASS) между нейтральным фоном и интерактивным синим цветом
16. Используйте цвет для улучшения совместимости
Цвет является фундаментальным элементом системы, а приемлемый цветовой контраст является фундаментальным критерием цвета.Благодаря этому совместимость становится основным моментом формирования всей системы.
На это обращают внимание бренд-менеджеры, ведущие дизайнеры и разработчики.
Прекрасная возможность использовать цвет, чтобы открыть дверь к более широкому спектру факторов приемлемости.
Заключение.
Воспользуйтесь возможностью, чтобы выступить за доступность и приемлемость.
Всегда собирайте знания команды (или обнаруживайте их недостаток) и обучайте и всячески продвигайте.
-
Как Реализовать Удаленный Мониторинг Сети?
19 Oct, 24 -
Бредихин Федор Александрович.
19 Oct, 24 -
Олтман, Сидней
19 Oct, 24 -
Метка-Таблицы Vrf
19 Oct, 24 -
Почти Готово
19 Oct, 24
