Material Design на русском. Часть 16 — Как используется цвет

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.

Как используется цвет

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

Иерархия

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

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

Контраст поверхностей

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

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

Цвет и форма

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

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

Ограничение по количеству цветов

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

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

Цветовая палитра из оттенков серого лучше всего подходит для того, чтобы фотография и текст выделялись (пример ниже).

Бренд

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

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

Обильное использование цвета

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

Это образовательное приложение использует смелые, яркие и насыщенные цвета (желтый, синий, пурпурный), которые соответствует духу бренда.

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

Экран запуска приложения

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

Онбординг приложения

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

Рассказ о функциональности

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

Утонченное использование цвета

Некоторые бренды очевидно менее яркие и используют цвет более утонченными способами, независимо от того, означает ли это передачу той самой утонченности и стиля, акцентирование контента или что-либо ещё. Главное помни о том, что интерактивные области и состояния элементов отчётливо читались в интерфейсе и были заметными.

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

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

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

Цвет как заглушка в UI

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

Цвет для индикации прогресса

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

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

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

Смысл

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

В этом погодном приложении цвет ассоциируется с погодными условиями.

Это приложение для навигации использует цвет как сигнал о текущих условиях на дороге.

Консистентность и контент

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

Выбор даты отображается красным цветом на фиолетовом фоне, ассоциируя основной цвет бренда (красный) с выбором даты путешествия.

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

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

Состояние элементов UI

Цвет может дать информацию о состоянии компонентов и элементов в интерфейсе. Сюда входит:

• Текущее состояние элемента или компонента, например, включена или отключена кнопка.
• Измененное состояние в приложении или у компонента, или у элемента.

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

Цвет как инструмент для явной демонстрации того, что элемент интерактивный

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

Цвет на фотографии указывает на то, что пользователь взаимодействует с ним.

Цвет как инструмент для выделения

Чтобы подчеркнуть выбранные элементы, используйте сильные цветовые контрасты на элементах.

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

Как следить за обновлениями гайдлайна и переводом?

• Структуированный документ в Notion
• Официальные обновления Google на странице what’s new