Цветовая система Система дизайна

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

Пунктов проверки: 8 · Групп: 2

Содержание чек-листа

Прогресс проверки

Структура и значение

Сравните информацию и представление в контексте использования.

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

Взаимодействие и удобство использования

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

Измерьте используемые цветовые парыКонтрастируйте текст, значки и элементы управления с реальным фоном, а не только с цветовой палитрой.Запишите допустимые пары текста и фона, чтобы разработчикам не приходилось гадать, какие цвета сочетаются друг с другом.Световые и темные тесты независимо друг от другаОпределите отдельные значения для каждого интерфейса и проверьте все состояния.Тестируйте каждую цветовую пару после переключения скинов, а не просто переключайте светлый на темный; Светлые блики и границы нуждаются в своих собственных ролях.Сохраняет идентификацию неповрежденной и разборчивойИспользуйте фирменные цвета в соответствующих местах; Отрегулируйте оттенок, если контраст недостаточен.Если идентификационный цвет трудно прочитать, сделайте его декоративным и используйте достаточно четкий цвет для значимого текста или операций.Не позволяйте цвету нести свое значение в одиночкуИспользуйте метки, фигуры или символы, когда вам нужно различать данные и статус.

Прогресс автоматически сохраняется в этом браузере.

РЕКОМЕНДАЦИИ

Как проверять

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

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

ПРИМЕРЫ

Примеры использования

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

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

Цветовая система Система дизайна

Структура и значение

Взаимодействие и удобство использования

Как проверять

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

Примеры использования

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

Найти чек-лист

Чек-листы не найдены