Программирование для мобильных платформ. IOS - страница 12

Рисунок 2.3. Различные варианты использования цвета в одном и том же приложении.

Рисунок 2.3. Различные варианты использования цвета в одном и том же приложении.

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

Существует несколько ограничений, которые нужно всегда держать в голове:

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

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

– Не использовать правый крайний угол палитры для основных цветов.

Ниже отмечена приемлемая зона выбора четкого цвета, но не бледных оттенков (Рисунок 2.4):

Рисунок 2.4. Зона выбора оптимальных цветов для основных элементов.

Кстати, веб-цвета тоже настоятельно не рекомендуется использовать, особенно учитывая современное развитие браузеров. Веб-цвета – это всего лишь оптимизация значений, они на удивление грубы и плохо соотносятся между собой. Во время разработки палитры интерфейса стоит использовать различные генераторы палитр и цветовых схем. Например это Kuler от компании Adobe или Paletton (Рисунок 2.5.). Разумеется, все вышеперечисленное следует воспринимать с умом, а не в лоб. Для того, чтобы грамотно подобрать практически любой цвет, как правило, приходится подвигать ползунок тона, т.к. чистые относительные цвета обычно недостаточно/чрезмерно контрастны для своих задач.

Рисунок 2.5. Генератор цветовых схем.

Человеческое зрение очень хорошо умеет адаптироваться к условиям различного контраста, например, его статический контраст равен примерно 100:1, а динамический может достигать 1.000.000:1, поэтому не следует бояться его понижения внутри элементов. При этом восприятие контрастности повышается с уменьшением циклов (грубо говоря, разноцветных элементов). В отличие от реального мира, компьютерный интерфейс имеет весьма примитивную структуру контрастов, небольшое количество цветов и типов элементов. Хороший пример грамотно выстроенного контраста – текущая версия социальной сети Facebook (Рисунок 2.6.):