Открыть список
Как стать автором
Обновить

Интерфейс выбора цвета

Интерфейсы
В недавно вышедшем Photoshop CS5 к закладкам Color и Swatches (1) и диалогу (2) добавился так называемый HUD Color Picker (3):

Средства для работы с цветом в Adobe Photoshop

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

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

Вот как это выглядит:

Цветовое колесо

Ниже показаны основные зоны нашего «цветового колеса»:

Цветовое колесо - зоны

Разберем их по порядку.

1. Привычная всем плоскость выбора цвета по яркости (Brightness, по вертикали) и насыщенности цвета (Saturation, по горизонтали).

2. Так же привычная всем шкала третьей компоненты — цветового тона (Hue).

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

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

6 и 7. По аналогии с 4 и 5, эти две области дают вилку по яркости. Нажатие по ним позволит перемещаться фиксированными шагами вверх-вниз по квадрату 1.

8 и 9. По аналогии с 4 и 5, эти две области дают вилку по насыщенности, что позволит перемещаться фиксированными шагами вправо-влево по квадрату 1.

10 и 11. Эта вилка дает ближайшие «web-safe» цвета относительно текущего цвета.

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

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

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

Что дает такой дизайн?

Во-первых, все цвета (будь то полная палитра или пользовательские цвета) находятся у пользователя под рукой.

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

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

Как-то так. Надеюсь, что вышесказанное подстегнет кого-то к дальнейшему развитию этой идеи или, может быть, к реализации ее в каком-то виде в своих приложениях.
Теги:диалогвыбор цветаphotoshopuiпалитраколесо
Хабы: Интерфейсы
Всего голосов 120: ↑101 и ↓19 +82
Просмотры4.7K

Похожие публикации

Mobile UI/UX дизайнер
от 100 000 до 150 000 ₽CitadelМожно удаленно
UX/UI дизайнер
до 300 000 ₽SimpleFinance GroupМосква
Разработчик Frontend (UI)
от 150 000 до 200 000 ₽ВГТМосква
Продуктовый дизайнер, UI/UX дизайнер
до 110 000 ₽ABC MobileМожно удаленно
Web designer, UI/UX
от 40 000 до 100 000 ₽ИгрологияМожно удаленно

Лучшие публикации за сутки