Все, что нужно знать о цветах в дизайне пользовательского интерфейса — теория и практика


Все, что нужно знать о цветах в дизайне пользовательского интерфейса — теория и практика

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

Фото Тайлер Lastovich по сайту Unsplash

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

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

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

Давайте начнем разговор о знаменитом цвет колеса. Когда мы говорим о цвете, контрасте, гармонии, мы должны иметь этот образ в нашей голове:

Цвет Колеса

Есть 3 важные вещи, о цвете, что вы должны знать: оттенок, значение и насыщенность. Теперь я собираюсь объяснить каждый из них 🙂

1. Хюэ

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

Колесо цвета с цветами имена

2. Значение

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

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

Фото Александра Godreau по сайту Unsplash

Если вы ближе к свету, вы будете иметь более светлые тона (света) и если вы не прочь от света, у вас будет больше тени (тьмы).

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

Материальный дизайн от Google

Ярким примером является материальный дизайн от Google. Они используют различные поверхности для выявления важных элементов.

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

Цветовое Колесо / Посмотреть Стоимость

3. Насыщенность

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

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

Реальная жизнь против цифровой жизни

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

https://medium.com/media/0326c6f705f24c4b8e7ef66fdd8e16a9/href

Вернуться к основной

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

Чтобы иметь гармонию между цветами, между ними существует количество цвет от другого.

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

Правило 60 30 10

Нет, это не измерения супермодель, но доля успешно сочетать цвета. Вы должны выбрать доминирующий цвет и использовать его в 60% пространства, второе в 30% и последний цвет для оставшихся 10%. Да только 3 цвета! Это то, что часто используется в дизайне интерьера.

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

Как вы можете видеть на изображении использовано 3 цвета. Белый, розовый и зеленый, зеленый цвет дает акцент. Если мы возьмем эту метафору, чтобы дизайн интерфейса, цветовой акцент может быть определен как цвет наших призыв к действию (CTA).

Цветовая палитра интерфейса, КТА цвет зеленый

Будьте вдохновлены природой

Знаете ли вы, что человеческий глаз может различить более 10 миллионов цветов? Вы всегда можете найти гармонию и контраст в природе и то, что вы видите! Природа, предметы, животные, помещения. Все имеет свою цветовую палитру, вы просто должны принять много внимания.

Фото Свен Брандсма по сайту Unsplash

Тени никогда не бывают черными, и свет не белый 🤔

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

Тени в карты

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

Фото Зуй Хоанг на Unsplash включает

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

Используйте оттенки серого, чтобы проверить гармонию и контраст цветов.

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

Иллюстрация Лана Marandina https://dribbble.com/shots/3826770-Missing-Summer

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

Серость в оттенках цветов

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

Всем привет!

Тот, что слева имеет черный цвет #000000, а в другой-очень темно-синий цвет #15163D. Они оба выглядят черными, но это не так. Почему это так важно? Посмотрите на изображение ниже.

Же непрозрачность, другой результат

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

Два типа комбинаций

Как выглядят черными, но есть оттенки фиолетового, который является дополнительным цветом к желтому. Делая это, мы достигаем и контраст и гармония.

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

Цветовая палитра, использованная в Примере

Упражнения ваши глаза! Найти свет!

Сделал Пабло Стэнли https://www.pablostanley.com/

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

Многие из нас видят, что цвета не такие насыщенные или яркие, это нормально. Мир не идеален и ни цвета. Многие из нас поступают из физического мира, где мы использовали только CMYK и цвет, где есть лимит.

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

Взломать свою собственную систему таким образом, что это не похоже на задачу, но что-то естественное.

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

Заключительные Мысли

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

https://medium.com/media/69287636a160aa11b1b4a6347a9a0582/href

Я приглашаю вас следовать за мной в моих социальных сетях . Я делюсь своей повседневной работе, советами и своими знаниями с сообществом

Спасибо большое! Любые замечания оставляйте их в комментариях, я буду рад прочитать их все.


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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.