ДизайнУха
08
Apr

Цвет и контраст в UI дизайне

источникdesignyourway.net
авторBogdan Sandu

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

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

Создание дизайна с помощью оптических иллюзий — игра света и тени

Фото: Anton Chandra

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

Возьмем кнопку в качестве примера. Кнопки делают темнее, когда вы нажимаете на них. Цель довольно проста: они должны вести себя как 3D-объекты. Кажется, что они отодвигаются, когда мы на них нажимаем, но приближаются как только мы их отпускаем. Если внимательно понаблюдать, кажется, будто устройство открывается, а регулятором служит источник света.

Изображения: Nicholas

Мы могли бы использовать эту особую связь между 3D-объектами и глубиной и построить UI метафору, основанную на этой идее. Во-первых, нам понадобилось бы раскрасить те элементы, которые мы хотим, чтобы они выглядели светлее. Во-вторых, нам нужно было бы покрасить те, которые буду уходить внутрь, чтобы они казались темнее.

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

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

Изображения: Carl Hauser

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

Это очень легко понять в случае с правым квадратом. Кажется, что желтый куб, плавающий внутри, приближен к нам. С другой стороны, красный куб доминирует над зеленым, и ему удается оттолкнуть его от нам. Какова причина этого?

Цвета

Изображения: Michael Sambora

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

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

Теплый цвет, чтобы привлечь внимание

Изображение: Ibnu Mas’ud

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

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

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

Обзор теории цвета

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

Аналоговые цвета

Изображения: Osetrov Artem

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

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

Комплиментарная палитра

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

Триада

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

Использование сильного контраста для привлечения внимания

Изображения: Piotr Czyżewski

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

Изображения: Anandu Sivan

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

Подведение итогов

Изображения: Nitesh Chandora

UI дизайн важен по многим причинам. Во-первых, интуитивность облегчает работу с интерфейсом и сокращает время на обучение. Благодаря улучшенному интерфейсу, у пользователей не будет никаких проблем в использовании вашего приложения (что также сэкономит вам пару долларов на поддержку). Так как хорошая новость распространилась в кратчайшие сроки, число пользователей будет увеличиваться параллельно их удовлетворению.

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

В заключение, использование основных элементов и принципов UI дизайна (цвета, света и контраста) может помочь вам создать идеальный интерфейс, который сможете продать вы и ваши клиенты.