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

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

Я полностью согласен с тем, как выглядит дизайн.

№1: квадратная палитра цветов
введите здесь описание изображения

№2. Палитра цветов цветового круга
введите здесь описание изображения

№3. Цветовой круг — квадратная палитра цветов
введите здесь описание изображения

№4. Цветовой круг – треугольная палитра цветов
введите здесь описание изображения

66
Steve 6 Янв 2016 в 19:19
1
Если ваши пользователи в значительной степени знакомы со средством выбора, у вас должен быть дизайн, соответствующий этому средству выбора. Например, если большинство из них являются пользователями Photoshop, используйте средство выбора, похожее на Photoshop, а если большинство веб-разработчиков используют средство выбора инструментов разработчика Chrome, используйте его.
 – 
Jonathan
16 Дек 2015 в 18:13
15
Вы уверены, что вам нужна вся гамма цветов? Я не уверен, каков ваш вариант использования, но я думаю, что большинство вариантов использования могут работать с гораздо меньшим подмножеством цветов, и это позволило бы гораздо более простой пользовательский интерфейс.
 – 
David says Reinstate Monica
16 Дек 2015 в 18:55
6
Я бы сказал, что пользователи не хотят и не нуждаются в таком большом количестве вариантов выбора. Они будут счастливы выбирать между 12 цветами, а не 16 миллионами.
 – 
martinez314
16 Дек 2015 в 19:30
3
Не забудьте mspaint-стиль, с прямоугольником с оттенком и насыщенностью (?) и отдельным регулятором яркости.
 – 
user253751
17 Дек 2015 в 06:51
1
Fwiw, лично я всегда нахожу вариант 2, который подходит мне лучше всего. Выберите оттенок с первого взгляда, затем отрегулируйте интенсивность. Обычно я ищу цвет, а яркость — это всего лишь второстепенная настройка. Я бы определенно добавил текстовые поля RGB или HSV, поэтому, если пользователь уже знает, какой цвет он ищет, ему не нужно искать его. Меня всегда смущали варианты 3 и 4.
 – 
Jason C
17 Дек 2015 в 18:19

8 ответов

Сначала обычные пользователи

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

Сделайте «легкое» легким

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

Simple color swatch chooser

Эта конструкция выигрывает от трех ключевых особенностей:

  1. Достаточно широкий, но не подавляющий выбор.

  2. Продуманная организация опций.

    1. Оттенки серого
    2. Яркие цвета
    3. Диапазон значений ярких цветов
  3. Настраиваемый раздел для опытных пользователей.

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

Один спорный момент...

Для справки, я думаю, что базовые цвета Google (второй ряд образцов) бесполезны. Сколько из них вы действительно хотели бы иметь в своих документах без изменений? Вот краткий пример того, как я бы изменил базовый выбор цвета. Это тонко, но я думаю, что разница имеет смысл в использовании.

A new set of base color swatches

Сделайте «сложное» возможным

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

Google понимает это неправильно.

Выбранной ими усовершенствованной модели сборщика не хватает точности без улучшения удобства использования. Используя основную «сцену» для оттенка и насыщенности, выбор цвета ограничивается узкими вертикальными столбцами. Ценность сама по себе требует очень небольшой точности, но требует полного владения детализированным ползунком.
Высоконаучный вывод: мне это не нравится.

Google's advanced color picker

Лучший способ

Посвятив ползунок оттенку, пользователи могут легко добраться до общего цвета, который им нужен. Затем на основном этапе можно настроить насыщенность и значение, легко создавая тонкие вариации. Этот пример взят из подключаемого модуля для выбора цвета OSX, который я установил на свои компьютеры Mac (с некоторыми изменениями).
Высоконаучный вывод: Mo betta.

Modified Antetype color picker for Mac OSX

Спасибо @dberm22 за проницательное наблюдение, что эта модель должна иметь селектор оттенка first слева от основной сцены. Это создает логический переход от общей задачи (найти цвет) к детальной (управление значением и насыщенностью) и к более сложной (изменить или скопировать числа).

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

Помните о тяжелой работе пользователя

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

Философия "легко легко, сложно возможно" принадлежит Ларри Уоллу, создателю языка программирования Perl.

87
plainclothes 2 Фев 2016 в 22:54
2
Селектор Mac/antetype (Mo betta) устраняет указанную выше проблему, но я бы сказал, что ползунок оттенка должен быть слева, поскольку обычно это первое, что настраивает пользователь.
 – 
dberm22
17 Дек 2015 в 16:27
1
Лично мне, как продвинутому пользователю, очень не нравится двухэтапный подход «пользовательский цвет» -> «выбор цвета». Меня всегда раздражает, что я должен щелкнуть переключатель цвета, определить цвет, а затем снова выбрать образец при выборе цвета. Но палитра цветов с выбором «недавно выбранного цвета», с другой стороны, приятная и плавная.
 – 
Jason C
17 Дек 2015 в 18:21
1
Это отличное замечание о ползунке оттенка! Это действительно логичный (если не типичный) порядок вещей. Мне придется обновить снимок экрана в надежде, что наше обсуждение может повлиять на состояние палитр цветов для всех!
 – 
plainclothes
17 Дек 2015 в 20:19
1
Спасибо за ответ! Могу ли я копировать вслух, законно ли копировать цвета из цветовой палитры и использовать их для своего веб-сайта?
 – 
Steve
2 Фев 2016 в 04:34
1
Я хочу только цвета. Так ты говоришь, что Google позволит мне это сделать?
 – 
Steve
2 Фев 2016 в 06:20

Я не уверен, что на этот вопрос есть объективный ответ, потому что он слишком сильно зависит от демографических данных ваших клиентов. Я дам свои субъективные две копейки, хотя!

Если они не графические дизайнеры или не очень разбираются в технологиях, я бы предпочел наиболее интуитивно понятное решение, которое для меня является вторым. На мой взгляд, мысли пользователя, вероятно, будут такими: «Я хочу красный, может быть, темный», а не «Я хочу темный цвет, может быть, красный», поэтому Colour > Shade работает для меня лучше, чем Shade > Colour или любой из круглых в 3 или 4. Обратите внимание, что это зависит от стиля чтения слева направо, чтобы пользователь имел смысл, и может не работать в макетах справа налево, как вы найдете на иврите, для пример.

Однако это рассуждение может быть неверным, особенно если вы выбираете текст на белом фоне и должны выбрать темный цвет. Если да, то, возможно, горизонтально перевернуть первый?

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

mockup

загрузить исходный код bmml — Каркасы, созданные с помощью Мокапы Balsamiq

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

29
Jonathan 16 Дек 2015 в 18:31
4
Хотя я согласен с тем, что большинство пользователей, вероятно, захотят сначала выбрать оттенок (например, зеленый), а затем, возможно, подкрасить или затенить его, я не понимаю, как это делает второй выбор цвета лучше, чем другие. Наоборот, второй дизайн смешивает оттенок и оттенок в один и тот же цветовой круг, так что если пользователь решит, скажем, что ему нужен этот зеленый, но немного светлее, ему придется угадайте, где на колесе это будет, и постарайтесь тщательно нацелить их мышь, чтобы не изменить оттенок. Последние два дизайна кажутся мне гораздо более удобными в этом отношении. (Они также нейтральны по направлению.)
 – 
Ilmari Karonen
16 Дек 2015 в 07:21
3
Да, но ползунок во втором палитре цветов становится только темнее; вы не можете использовать его, чтобы осветлить цвет или затонировать его серым цветом.
 – 
Ilmari Karonen
16 Дек 2015 в 08:24
1
Многие люди не знают, что означает шестнадцатеричная система счисления, и преобразование между шестнадцатеричной и RBG затруднено, даже если вы к этому привыкли.
 – 
Darkhogg
16 Дек 2015 в 15:16
1
Истинный. Вот почему я предложил использовать значения HSL/V вместо RGB, и все довольны: те, кто знает RGB HEX, могут использовать его, а все остальные используют HSL/V. Если вы знаете RGB в десятичном виде, то можно с уверенностью предположить, что вы знаете его в шестнадцатеричном формате (в большинстве случаев палитра цветов Windows не дает цвет RGB в шестнадцатеричном формате, но дает его в HSL).
 – 
Toothbrush
16 Дек 2015 в 23:16
1
#007ПЛОХО? Что вы имеете против Джеймса Бонда?!
 – 
corsiKa
19 Дек 2015 в 19:57

Все перечисленные вами средства выбора цвета основаны на вариантах представления цвета HSL/HSV (оттенок, насыщенность, яркость/значение). . Таким образом, их основные отличия заключаются не в цветовой теории, а просто в размещении и форме элементов управления.

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

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

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

Последние два средства выбора цвета очень похожи по внешнему виду и удобству использования. Лично я считаю последний чуть более естественным и элегантным, так как пространство оттенков/оттенков имеет принципиально треугольную форму (состоит из комбинаций трех «чистых» оттенков: черного, белого и чистый насыщенный оттенок). Тем не менее, я не вижу практической разницы между ними.

Таким образом, я бы лично оценил ваши палитры цветов в следующем порядке: № 4 (лучший), № 3 (почти равен № 4), № 1, № 2 (худший).


Наконец, я хотел бы отметить, что все средства выбора цвета, которые вы показали, имеют общий недостаток: поскольку цветовые модели HSL/HSV, на которых они основаны, представляют собой простую репараметризацию цветового пространства RGB, который не является однородным для восприятия, изменение оттенка влияет на воспринимаемую легкость цвета. (В этом легко убедиться, взглянув на цветовые круги: синие части выглядят намного темнее, чем зеленые и желтые части.) Таким образом, хотя большинство из них позволяет легко выбирать различные оттенки и оттенки того же оттенка, обратное — изменение оттенка цвета при сохранении той же воспринимаемой легкости и насыщенности — довольно сложно.

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

20
Ilmari Karonen 16 Дек 2015 в 07:03
Спасибо за ответ! Я думаю @А. Сим довольно точен в том, что он сказал во втором абзаце. Что ты об этом думаешь? Кроме того, с каким бы дизайном я ни работал, я планирую иметь ползунок для rgb, hsv и т. д.
 – 
Steve
16 Дек 2015 в 07:16
Ответил ниже ответа А. Сима, так как я чувствую, что он там.
 – 
Ilmari Karonen
16 Дек 2015 в 07:23
Мое личное мнение: я вздрагиваю, когда вижу № 4, так как он не соответствует моему мышлению; Я не знаю, должен ли я/могу ли я повернуть треугольник. Вариант № 1 делает довольно очевидным, что я выбираю цвет из «радуги» справа, а затем точно настраиваю яркость/темноту в середине. И мне также нравится возможность ввода текстовых полей внизу, упомянутая @plainclothes для людей, которые знают, какие значения RGB или HSV использовать, если у них есть соответствующий стандарт дизайна.
 – 
Mark Stewart
17 Дек 2015 в 21:28

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

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

http://www.functionx.com/dlgboxes/color1.gif

enter image description here

14
Dan Is Fiddling By Firelight 16 Дек 2015 в 23:03
5
Как же я скучаю по этим цветокорректорам.
 – 
Insane
18 Дек 2015 в 08:55
Единственное улучшение, которое я бы сделал, — это возможность вводить цвета HEX и HSM как одну строку, а не отдельные значения, но команда Microsoft приложила немало усилий!
 – 
Eric Kigathi
20 Дек 2015 в 22:21

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

mockup

загрузить исходный код bmml — Каркасы, созданные с помощью Мокапы Balsamiq

Левый макет

Оттенок-насыщенность-яркость/яркость/значение/интенсивность/… представление куба цветового пространства RGB приводит к (обычно) цилиндру, «гексалиндеру» (призма/цилиндр с шестиугольным основанием), шестиугольной бипирамиде или сфере. Для обоих типов оснований, диска или шестиугольника, плоские координаты могут быть заданы комбинацией красно-голубой, зелено-пурпурной и сине-желтой осей. (Это сплющенный куб.) Он сочетает в себе угловатый оттенок и радиальную насыщенность. Яркость, легкость или значение, т.е. высота, задаются по оси бело-черный.

HSL cylinder

Правильный макет

Многие средства выбора HSB/HSL/HSV/HSI не делают очевидной связь между визуальным выбором и числовыми значениями. Этот набросок пытается показать, как этого можно достичь.

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

5
Crissov 22 Дек 2015 в 17:59
Это отличное решение для пользователей, знакомых с теорией цвета (например, приложение для дизайна профессионального уровня). Это очень похожий подход к инструментам создания палитры, которые я использовал на протяжении многих лет. Но это сложная презентация для всех остальных.
 – 
plainclothes
22 Дек 2015 в 20:44
Хорошее решение для цилиндров. Я подозреваю, что будет чертовски сложно выбрать правильный цвет, но, тем не менее, голосую за творчество.
 – 
Zoe K
22 Дек 2015 в 20:59

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

http://colorbrewer2.org/# ColorBrewer имеет такой список палитр, в данном случае специально для визуализации данных, но будут и другие, если эти не подходят

6
mgraham 16 Дек 2015 в 12:37
2
Согласен, темы/палитры - хороший вариант, но это только 80%-ное решение (ну, ближе к 95%-ному, но "95%-ное решение" - это не поговорка). Всегда есть такие пользователи, как я, которые не полностью удовлетворены темами по умолчанию и чувствуют необходимость настроить их до совершенства. Для этих пользователей у вас все еще должен быть выбор цвета. Однако это меняет вашу демографию, и стиль выбора также изменится.
 – 
dberm22
17 Дек 2015 в 16:48

В нескольких ответах здесь предлагаются средства выбора с отдельными числовыми элементами управления для RGB/HSL. Эти элементы управления хороши, но не очень наглядны и требуют некоторых проб и ошибок для работы. Ниже приведено изображение с двухрежимными визуальными и числовыми элементами управления для RGB/HSL, изображенными справа.

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

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

Пример абсолютной палитры цветов
(источник: eltima.com)

5
Eugene Ryabtsev 6 Июн 2019 в 07:47
Мне нравится этот подход для создателя палитры опытного пользователя, но это слишком много для обычного пользователя, который просто хочет выбрать хороший цвет.
 – 
plainclothes
18 Дек 2015 в 20:39
Ползунок яркости B появляется дважды, один раз по горизонтали и один раз по вертикали.
 – 
Crissov
22 Дек 2015 в 18:02
Ага. Как видно на скриншотах, иногда вертикальной полосы нет, а иногда есть одна или две . Не уверен, почему они там, вероятно, они относятся к «любой палитре цветов» части «любой палитры цветов + дополнительные элементы управления».
 – 
Eugene Ryabtsev
22 Дек 2015 в 21:10

enter image description here enter image description here

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

Она имеет :

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

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

3
TaW 19 Дек 2015 в 11:55
Почему спектр оттенков делится на желтые, а не на красные? Это выглядит так странно.
 – 
Keavon
19 Дек 2015 в 11:12
1
Это необычно, но я чувствовал, что разделение между желто-зеленым и желто-оранжевым является наиболее важным. Думаю, я мог бы сделать спектр подвижным... и, очевидно, было бы неплохо сделать его масштабируемым, если его легко распознать...
 – 
TaW
19 Дек 2015 в 11:54
1
Это интересная идея, возможно, спектр можно было бы перетаскивать вверх/вниз, а выделенной частью был бы центр. Но это, наверное, довольно нелогично. Но мне нравится идея масштабирования для повышения точности! Это также было бы полезно для стандартного средства выбора оттенка и квадратной насыщенности/яркости, возможно, с помощью колеса прокрутки.
 – 
Keavon
19 Дек 2015 в 12:27