Функциональный серый цвет
Черный, белый и серый — наиболее часто используемые цвета в прототипировании и дизайне. С их помощью легко передать ощущение пространства, света, тени, формы и расставить акценты. С черным и белым все понятно — это крайности шкалы ахроматичности. А вот с серым цветом нужно разобраться.
Не будем брать к вниманию визуальный и эстетический аспекты(фон, форма, композиция и т.д.) и сосредоточимся на функциональном. Серый цвет должен, во-первых, хорошо считываться, во-вторых, нести нужную смысловую нагрузку (передавать нужный акцент или исполнять функцию).
И тут возникает вопрос: какие из множества «серых цветов» можно и нужно использовать, а какие нет?
Почему с серым цветом нужно так осторожничать?
Да потому, что его просто можно не увидеть. Круто, если у вас мак или на вашем потрясающем IPS/Retina мониторе все отчетливо видно. Но не нужно забывать, что у подавляющего большинства пользователей обычные экраны.
В каких элементах использование серого «опасно»?
- Кнопки. Особенно ключевые.
- Текст.
- Иконки, подразумевающие взаимодействие.
Несколько хороших примеров
Плохие примеры
Какой «серый» работает?
Проведем исследование и посмотрим, как отображаются на разных мониторах разные по насыщенности серые цвета. Для теста используем простую конструкцию из иконки, текста и кнопки.
Результаты
Крайние значения(самые светлые) хорошей читаемости серого для разных элементов по шкале RGB:
Для иконок: #с6с6с6
Для текста: #7e7e7e
Для кнопок: с заливкой — #9b9b9b, строуковых — #7e7e7e.
Выводы
Чтобы юзерам было удобно пользоваться продуктом, они видели и правильно воспринимали ваш дизайн, нужно аккуратно использовать серый цвет. Мы взяли себе за правило придерживаться полученных результатов.
Конечно, при умелом оперировании особенностями шрифта, формой элементов, контрастом и другими приемами можно добиться хорошей читаемости даже «жертвуя» правильным серым, но это, скорее, исключения из правил.
