Базовая цветовая теория говорит нам, что цветовая палитра зеленого, желтого и красного цветов выглядит безобразно смехотворно, они конфликтуют между собой. Если мы возьмем зеленый как выдающийся цвет, аналогичные цвета, которые идут с ним, являются красным и синим - в такой цветовой схеме нет места для желтого.
Итак, есть ли способ объединить зеленый, желтый и красный в цветовую схему, не ослепляя пользователей?
В качестве примера у меня есть страница на веб-сайте, где эти цвета используются для измерения необходимого уровня навыка для проекта в сравнении с фактическим уровнем данного навыка данного пользователя. Зеленый удовлетворяет или превышает этот уровень, Желтый указывает на небольшой дефицит в ожидании, а Красный означает, что они либо недостаточно хороши, либо полностью лишены определенного навыка.
Вот мой пример (игнорируйте оранжевые и серые поля вокруг букв, они не связаны).
Мы все можем согласиться с тем, что это выглядит довольно ужасно, но именно этого формата мне нужно придерживаться, всей зелено-красно-желтой штуки. : /
Будучи программистом в основном, в отличие от графического / веб-дизайнера, мое понимание теории цвета и пользовательского опыта ограничено.
Чтобы подчеркнуть это, у меня вопрос: как создать традиционно конфликтующую цветовую схему, не умаляя опыта пользователя?
(Если мой вопрос не подходит, я его удалю, я не был уверен, где его задать, он показался мне наиболее подходящим)
источник
Ответы:
Зеленый, желтый и красный не могут идти вместе? Эфиопы должны быть ужасно оскорблены. Гугл для зеленых, желтых и красных изображений, и я думаю, что вы найдете несколько привлекательных примеров (наряду с уродливыми).
Насколько хорошо сочетается любой набор цветов, зависит от точных цветовых координат, а также от относительных положений, форм, размеров цветных объектов и эффекта, который вы хотите получить (например, успокаивающий или захватывающий, веселый и серьезный, жирный и тонкий). ). У меня нет жестких и быстрых правил для вас, но вот несколько вещей для экспериментов.
Соотношение размера и насыщенности
Чтобы избежать эффекта сотрясения (если вы этого не хотите), размер цветного объекта должен быть обратно пропорционален его цветовой насыщенности. В вашем примере была довольно высокая насыщенность, поэтому попробуйте либо снизить насыщенность цвета (например, пастель), либо покрасить что-нибудь, кроме фона. Например, вы можете раскрасить текст и оставить фон нейтральным, или вы можете закрасить небольшую форму или символ рядом с текстом. Последнее дало бы возможность использовать форму для избыточного кодирования соответствия навыка для специальных возможностей и для черно-белой печати (зеленая галочка для Удовлетворенности, желтый восклицательный знак для Недостатка и красный символ «не вводите» для Недостаточно хорошего) ,
Разнос
Как выглядят цвета, зависит от их близости друг к другу. Цвета, которые конфликтуют друг с другом, выглядят хорошо с небольшим разделением. Попробуйте поместить нейтральную границу вокруг каждой ячейки, чтобы больше отделить цвета (как у вас в заголовках), если только нет смысла смешивать клетки одного цвета, чтобы их воспринимали как один объект. Попробуйте разные толщины. Попробуйте отделить каждую ячейку с белыми полями, чтобы получить мозаичный вид.
Шаблон
То, насколько хорошо цвета сочетаются друг с другом, также зависит от рисунка, который делают цвета, поэтому убедитесь, что вы оцениваете макеты с типичными пропорциями и положениями цветов. Например, если в большинстве случаев все зеленое, и для пользователей наиболее важно следить за «бликами» желтого и красного, выберите зеленый, который создает хороший фон (например, низкая насыщенность, свет) и желтый и красный, кажется, сидит «сверху» (например, более высокая насыщенность, темнота). Учтите, что эстетика шаблона также может общаться и мотивировать пользователя. Если у пользователя особенно неподходящий или дисбалансный набор навыков, возможно, вам нужен уродливый паттерн. Наиболее привлекательный шаблон должен соответствовать состоянию, наиболее выгодному для пользователя.
Удобство использования
Ваш вопрос касается эстетики, но выбор цветовой кодировки также имеет большое значение для удобства использования. Ваш выбор цвета должен быть:
Визуально отличается друг от друга, особенно если используется в ухудшенных визуальных условиях (например, на мобильном телефоне при солнечном свете).
Обеспечьте хороший контраст с фоном (если его передний план) или с передним планом (если его фон). Например, черный текст на красном не так хорош. Как правило, передний план и фон нуждаются в разных уровнях яркости.
Убедитесь, что цвета ранжируются в соответствии с тем, что они кодируют. Например, пользователь должен уделять больше внимания контрасту с фоном и другими цветами.
Обеспечьте доступность и пригодность для печати, где каждый цвет также имеет различный уровень темноты с темнотой, масштабируемой до рангов (красный больше, чем желтый, больше, чем зеленый). Сделайте свой зеленый несколько голубоватым, а красный - оранжевым, чтобы пользователи с красным или зеленым дальтонизмом (наиболее распространенный вид дальтонизма) все еще могли видеть цветовые различия.
Используйте цветовое кодирование только для одной переменной. Я не знаю, для чего вы используете серый и оранжевый, но это может вызвать путаницу и затруднить пользователям использование красного, зеленого и желтого цветов. В любое время, когда у вас есть более трех цветов, трудно сохранить вещи пригодными для использования. Найдите другой способ кодирования любого серо-оранжевого кода (например, используйте размер шрифта или вес, или используйте пунктирные линии для границ ячейки; см. Вставка G в GUI ).
В одном проекте, над которым я работал, я использовал следующие цвета: # E00000, # FF8400 и # C0FFE0 (не очень желто-желтый, но он все еще работал).
У меня есть больше о выборе цветовых кодов, в том числе, как рассчитать цветовой контраст и яркость при нарушении цветового кода .
источник
#C0FFEEдля шестнадцатеричного кода. :)Попробуйте использовать пастели вместо фактических цветов RGY. С уменьшенной насыщенностью должно быть легче смотреть на информацию.
Пастель Красный Hex: # F7977A RGB: 246-150-121
Пастельно-зеленый Hex: # 82CA9D RGB: 130-202-156
Пастель Желтый Hex: # FFF79A RGB: 255-247-153
источник
Я вижу три основных проблемы с этими тремя цветами.
Я могу только придумать пару вариантов, если предположить , что вам не нравится эффект поп-арта больших областей насыщенного цвета. Оба из них сводят к минимуму влияние насыщенности, исчезая цвета.
Здесь есть еще одна проблема, которая не имеет ничего общего с эстетикой. Красный будет подавлять два других цвета и приведет к привлечению внимания к отрицательным отметкам на странице. Если это твоя цель, ты в порядке. Если вы хотите, чтобы ваша диаграмма имела позитивный характер, вы будете бороться.
источник
«Красный», «Желтый», «Зеленый» оставляют много места для интерпретации, поэтому у вас есть хороший шанс найти комбинацию, которая хорошо работает.
Для вашей эстетической проблемы я взял ваш «красный» и «зеленый» цвет и поместил его в блендер . Затем я выбрал pHSL в качестве цветовой модели для смешивания. Это уже улучшило набор цветов.
Затем я попробовал разные «красные» и «зеленые», чтобы еще больше улучшить впечатление. Немного темнее, насыщеннее / сильнее красного. Зеленый с немного большим количеством желтого плюс большая насыщенность.
Хорошо, неплохо, но еще не готово.
Для вашей проблемы с юзабилити имейте в виду, что существует иерархия (относительной) яркости, оттенка и насыщенности, чтобы направлять наше внимание. Поскольку желтый, естественно, имеет самое высокое значение яркости, эти поля привлекли бы наше внимание больше всего. Поэтому я импортировал цвета в конвертер цветов для индивидуальной настройки каждого цвета. В моем примере я дал «желтый» и «зеленый» равные значения яркости. Снижение яркости для желтого или более высокое для зеленого казалось эстетически проблематичным.
Я попробовал свою комбинацию в Фотошопе и понял, что белые (интервальные) границы произвели хорошее впечатление. Поэтому я бы порекомендовал интервал белого для ячеек и не более одной тонкой черной линии для разделения каждой линии записей.
Используя инструменты, упомянутые выше, вы можете найти цветовую комбинацию, которая лучше соответствует вашему личному вкусу или требованиям (например, насыщенность зеленого цвета) ...
источник
Вы должны быть осторожны при использовании цветов в качестве фона, так как это может затруднить чтение и отвлечь пользователя от сообщения. т.е. красный фон и черный шрифт.
Преобразование цвета в оттенки серого обычно помогает понять, какие цвета лучше всего контрастируют. т.е. когда вы конвертируете красные в оттенки серого, цвет становится темно-серым. Поэтому плохой цвет для использования в качестве фона, когда ваш шрифт черный. Вам нужно выбрать цвет, который бы дал вам хороший контраст.
Однако, если вы хотите быстро дать пользователю представление о том, что вы пытаетесь сделать, я предлагаю оставить ячейки пустыми (светлый цвет) и просто добавить небольшой символ, обозначающий статус (квадрат или 5%, или ячейку, заполненную цвет)
Таким образом, пользователь может прочитать текст и увидеть категорию, к которой он относится, довольно быстро.
Однако, если вы хотите совместить цвета, я предлагаю вам купить книгу «Цветовой индекс». Там вы найдете тысячи комбинаций, которые будут хорошо сочетаться, и вы сэкономите себе время.
источник
Если вы найдете правильные оттенки цветов, вы можете использовать красный, желтый и зеленый вместе.
Я рекомендую заглянуть на некоторые из этих сайтов, где вы можете найти несколько прекрасных комбинаций:
http://www.colorschemer.com/schemes/search.php?s=red+yellow+green&submit=Search
Или попробуйте создать некоторые из них самостоятельно:
http://colorschemedesigner.com/
То, что я действительно рекомендую, после выбора вашей цветовой комбинации спросите другого человека, что они думают об этом. Иногда нам не хватает внешнего вида, и нам просто нравятся цвета вместе, даже если они совсем не хороши.
Не забывайте думать о контрастности и видимости текста при выборе правильных оттенков.
Я бы порекомендовал использовать светло-желтый, так как вы используете его как совершенно нейтральный цвет.
источник
Вот три схемы, надеюсь, вам понравится.
источник