Как удобнее выбирать цвет дизайнеру?
От: Baiker  
Дата: 29.10.22 15:51
Оценка:
Мужики, сам я — погромизд, но требуется мнение из дизайнерской братии. Пишу контрол выбора цвета. В целом, идея интерфейса есть, но затыка именно в самом соке диалога — КАК ИМЕННО выбирать цвет? Одни делают ползунки RGB (что я считаю полной ерундой), другие — "цветовой круг"(HSL), рядом с которым выводится поле, где варьируются Saturation/Luminosity (как бы градиент такой получается). Третьи делают ещё 20 контролов-ползунков играть с параметрами.
У меня есть догадка, что реальный дизайнер вообще не занимается этими "крутилками", а тупо "шарит по плоскости цвета". Но мне нужно мнение реального дизайнера — погромизды тут только ещё больше наворотят контролов.
Да, на выходе нужен RGB цвет, но я его легко получу из любой схемы.
Re: Как удобнее выбирать цвет дизайнеру?
От: Нomunculus Россия  
Дата: 29.10.22 15:57
Оценка:
Здравствуйте, Baiker, Вы писали:

B>Да, на выходе нужен RGB цвет, но я его легко получу из любой схемы.


Есть книга Иоханнеса Иттена "Искусство цвета", Там много чего интересного написано, как цвет влияет на людей с психологической точки зрения и как рисовать картины с использованием гармоничных троек и пар цвета. Так вот к чему это я. Он как раз и ввел понятие цветового круга — HSL — его исползуют художники. Так что если софтина для дизайнеров — то этот круг им как раз и ближе. Не потому что программисты так придумали.
Re: Как удобнее выбирать цвет дизайнеру?
От: velkin Удмуртия https://kisa.biz
Дата: 29.10.22 16:12
Оценка:
Здравствуйте, Baiker, Вы писали:

B>Мужики, сам я — погромизд, но требуется мнение из дизайнерской братии. Пишу контрол выбора цвета. В целом, идея интерфейса есть, но затыка именно в самом соке диалога — КАК ИМЕННО выбирать цвет?


Как хочешь, так и делай.

А можешь взять стандартное, типа такого.
https://doc.qt.io/qt-5/qcolordialog.html


Есть ещё именованные цвета.
1. HTML-цвета
2. Список цветов в X11

Да и в целом основная проблема не ввести код цвета, а выбрать подходящий цвет. Вот для этого есть всякие дизайнерские книжки и статьи, типа такого.
Re: Как удобнее выбирать цвет дизайнеру?
От: swame  
Дата: 30.10.22 15:38
Оценка:
Здравствуйте, Baiker, Вы писали:


У меня диалог выбора цвета имеет 4 закладки с разным вариантов интерфейса выбора цвета, пользователь может выбрать подходящий.
  Диалог

На 1 закладке — специфичные для приложения именованные цвета цветовой схемы.
Плюс показывается несколько последних использованных цветов.
По желанию можно добавить еще закладок с цветовыми колесами или схемами, и подобного, зависит от задачи.
Отредактировано 30.10.2022 15:42 swame . Предыдущая версия . Еще …
Отредактировано 30.10.2022 15:41 swame . Предыдущая версия .
Re: Как удобнее выбирать цвет дизайнеру?
От: wildwind Россия  
Дата: 31.10.22 12:51
Оценка: +1
Здравствуйте, Baiker, Вы писали:

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

По этому мой совет — текстовое поле, которое понимает разные форматы. Плюс поле просмотра, показывающее этот цвет и его компоненты.

Ну и какой-нибудь стандартный пикер (например встроенный ОС), на случай, если программой будет пользоваться не дизайнер.
Re[2]: Как удобнее выбирать цвет дизайнеру?
От: Sinclair Россия https://github.com/evilguest/
Дата: 02.11.22 06:58
Оценка:
Здравствуйте, wildwind, Вы писали:

W>По этому мой совет — текстовое поле, которое понимает разные форматы. Плюс поле просмотра, показывающее этот цвет и его компоненты.

W>Ну и какой-нибудь стандартный пикер (например встроенный ОС), на случай, если программой будет пользоваться не дизайнер.
Полностью согласен со всем сказанным.
Дополню:
1. Если это инструмент, которым дизайнер пользуется на последнем этапе, то крайне удобным может быть инструмент "пипетка". Я вот "дизайню" в основном в офисе, и задача "сделать так, как в референсе" встречается значительно чаще, чем "сделать красиво". Так вот в паверпоинте такой инструмент в диалоге выбора цвета есть, и мне не приходится руками двигать ползунки для соответствия референсу. А во многих случаях это и вовсе невозможно. К примеру, если референс — это какой-нибудь PDF.
2. Если это инструмент, которым дизайнер пользуется непосредственно (а не для копирования в него какого-то источника), то надо смотреть на всю задачу. Очень редко дизайнер выбирает "просто цвет". Как правило, цвет выбирается на основе какой-то цветовой схемы. Можно посмотреть на то, как эту задачу придумали решать в Office 2007 — именно тогда появилось вот это представление палитры, где для каждого из цветов схемы добавлены вариации по "тёмности". Это сделано именно для того, чтобы пользователь не изобретал "такой же, но светлее" при помощи рукопашного кручения L-параметра в HSL модели. Так и тут — наверняка будут какие-нибудь паттерны типа "контрастный к цвету Х" или "цвет warning, гармонирующий с остальной схемой".
Уйдемте отсюда, Румата! У вас слишком богатые погреба.
Re[3]: Как удобнее выбирать цвет дизайнеру?
От: Baiker  
Дата: 02.11.22 22:36
Оценка:
Мужики, спасибо всем, кто откликнулся! Отвечу сразу всем, чтоб не плодить однострочники.

Напомню (частично ответ Нomunculus'у и velkin): мне лично вообще похрен на все эти цвета, поэтому "психология цвета" меня волнует меньше всего. Мне важно, чтобы сам творческий человек имел максимально удобный инструмент. HSL — ради бога, сделаю! Но круг — это пол-дела, это Hue! Saturation/Luminosity придётся как-то тоже показывать, причём так, чтобы дизайнер не матерился. А вдруг ему это hue не нравится? Может, он хочет начинать со стандартной палитры и уходить в оттенки! Я нинай.

velkin> Как хочешь, так и делай.

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

velkin> А можешь взять стандартное, типа такого.

Не, уже вижу кучу недостатков. Точно не подходит.

swame> У меня диалог выбора цвета имеет 4 закладки


Как "безобразие разнообразие альтернатив" — может быть, но прыгать по закладкам точно не то. Нужен ОДИН диалог и удобный выбор. Опять же, повторюсь про контролы: вот кто будет дрочить вот эти RGB поля? (на последней вкладке) Увеличить красноту на 1 единицу? Серьёзно??
Палитра — да, идея хорошая (третья вкладка). Хотя странноват выбор "разнообразия серого" — его в Питере делали что ли?

wildwind> а в твою программу будут вносить готовый результат

Да, я это предусмотрел. У меня есть поля ввода (для dec и hex). Но это как бы доп.фишки. Выбор цвета всё же является главным (сам процесс лазания по палитре).

Sinclair> крайне удобным может быть инструмент "пипетка"

Не совсем понял, кого я буду в диалоге пипетить? Вот есть программа, в ней вылез диалог цвета — куда тыкать пипеткой? (гусары, молчать!)
Если речь просто про "16-миллионное поле цвета", то да, оно конечно будет.

Sinclair> надо смотреть на всю задачу

Сразу чувствуется проф.подход бывалого! Да, задачу может и стоило озвучить, но всё же я её хочу решить для максимального количества случаев. Ведь в стандартном WinForms никто не парится "задачами" — просто показали диалог и пусть дизайнер там мучается! Я делаю generic-диалог для WPF.
Моя стартовая задача — выбор цвета для "syntax highliter" (Sublime Editor). Но раз мне придётся писать целый диалог, хотелось бы его запилить макс.удобным для остальных задач тоже.

Sinclair> для каждого из цветов схемы добавлены вариации по "тёмности"

Да, тоже была такая идея. ЕСЛИ дизайнерам это удобно — запилю непременно. На hue-кольце выбираем цвет, а внизу даём 16-32 плашек, где этот цвет варьируется по Luminosity.

На данный момент диалог выглядит так:



Особенности:
  1. Палитра HSL (вверху цветастый столбик Hue) + регион вариаций S/L. Под регионом встроенные поля чужого контрола, их буду убирать.
  2. Есть отображение "старого" цвета (который мы хотим поменять). Нужен для сравнения.
  3. После выбора нового цвета (из региона) он отображается под "New color" и его можно "плюсиком" добавить в favorite colors.
  4. Сразу же меняются и hex/dec поля — их можно отредактировать или скопировать кнопкой справа. Брать туда знак '#' — пока думаю, мне кажется это излишне.
  5. Favorite colors можно... ГЕНЕРИРОВАТЬ! Правый клик и выбор: либо станд.палитра Apple (уже добавлена), либо комбинация RGB, где на каждый цвет 6 уровней (всего 216).
  6. Правый клик на fav.color — он исчезает, левый клик — выбирается.

Вот как раз над favorites можно всунуть те 32 плашки для палитры.

Вот пока такая ГУЙня. Неуклюжее поле слева вверху — это как раз тот 3rd party контрол, который хочу удалить и вставить свой (и сейчас мы думаем какой! ).
Велкам ту критик!
Re[4]: Как удобнее выбирать цвет дизайнеру?
От: wildwind Россия  
Дата: 03.11.22 08:09
Оценка: -1
Здравствуйте, Baiker, Вы писали:

B>я её хочу решить для максимального количества случаев.

B>Я делаю generic-диалог для WPF.

Обречено на провал ИМХО. Впустую растраченные ресурсы работодателя. В Советском Союзе за такое наказывали.

B>Моя стартовая задача — выбор цвета для "syntax highliter" (Sublime Editor).


Я извиняюсь, а причем тут дизайнеры?
То есть ты сейчас сделаешь какие-то фишки для сферических дизайнеров в вакууме, они все равно не будут ими пользоваться, а программистам будет неудобно?
("Сферических" потому что реальных у тебя под боком нет, и тут они тоже не тусуются.)

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


Сопротивляйся такому "хотению". Решай реальные задачи.
Задачу "осчастливить весь мир" можешь решать в свободное от реальных задач время. А оно у тебя появится только на пенсии.
Re[5]: Как удобнее выбирать цвет дизайнеру?
От: Baiker  
Дата: 03.11.22 21:43
Оценка:
Здравствуйте, wildwind, Вы писали:

W>Обречено на провал ИМХО. (бла-бла поскипано)


Извини, забыл дописать: мнение чванливой школоты мне не интересно, зря буквы потратил.
Re: Как удобнее выбирать цвет дизайнеру?
От: Baiker  
Дата: 04.11.22 13:58
Оценка:
Тот самый "чужой контрол" переписал — сделал компактнее и удобнее. Диалог получился такой:



Ползунком находим нужный hue, потом елозим по Saturation/Luminosity палитре и после того, как цвет выбран, в блоке Luminosity palette выводится 11 плашек, где luminosity варьируется с шагом 10. Ну то есть не надо рыскать по большому полю в поисках цвета, а можно посмотреть на более ограниченный выбор.

Вот та какашечка на поле — это "курсор цвета". Он сделан контрастным за счёт выбора "противоположного" цвета (на hue круге). Меняем hue — курсор тоже его меняет и всегда хорошо виден (хотя и не особо важная деталь).
Приятная особенность — при ручном вводе/paste RGB кода, не нужно ипасса и убирать лишние символы — поле просто находит первые 6 hex-цифр и делает из них цвет (т.е. можно вводить даже "color: #22A9E1" откуда-то из CSS и поле спокойно это воспримет).

Ну чё, как, мужики-дизайнеры, всем ползунков хватает? Очень надеюсь, что контрол будет удобен. После "стандартных" диалогов меня аштрисёт. Кому руками пощупать — на гитхабе завёл проектик.
Отредактировано 05.11.2022 2:34 Baiker . Предыдущая версия . Еще …
Отредактировано 04.11.2022 14:41 Baiker . Предыдущая версия .
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.