x
 
↑
Май
11 •

16 •

20 •

3 •

7 •
↓
Илья Полсаков
14 мая 2007

Меню выбора цвета для текста.

Реализован вариант написания каждого названия цвета именно своим цветом.

Общее мнение. Что доработать?

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

Предлагаю внести несколько улучшений. Можно сделать порядок цветов более предсказуемым. Стоит убрать нефункциональную серую полоску в левой части меню. Сервисный пункт <more…> не нужно обрамлять системными скобками; а с точки зрения синтаксиса интерфейса здесь правильнее написать other…

Если я правильно понял, круглая точка обозначает выбранный ранее цвет, а рамка вокруг точки — текущий пункт меню. Вероятно, такая рамка используется вместо привычной подсветки, чтобы активный цвет подсветки не мешал цвету самой надписи. Предлагаю несколько изменить конструкцию:
Точка окрашивается в выбранный цвет. Подсветка тонируется цветом текущего пункта
Кстати, инструменты для выбора нестандартного цвета должны открываться в состоянии, соответствующем последнему выбору (желтому в моем последнем примере).

Поделиться
Отправить

Комментарии
Ваня Ладошкин
14 мая 2007

А как будет отображен цвет «white»?
Роман Верник
14 мая 2007

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

2. В голову также пришёл такой вариант «подсветки»:
Роман Верник
14 мая 2007

3. Не мешало бы проработать набор самих цветов. Например, Fuchsia мне лично кажется лишним в списке основных цветов для текста:
не представляю, как его можно читать на белом :)

14 мая 2007

Наверное, вот так :-)

Хотя я не уверен, что зачем-то надо писать белым по белому.

14 мая 2007

Fuchsia хорошо подходит для выделения «сервисного» и «непечатаемого» текста на эскизах.

Забор из сэмпл-текста мне нравится гораздо меньше. Больно напоминает запрещенный «текст текст текст».

Отсутствие полноценной подсветки ухудшает обратную связь, удлиняет время реакции человека.
Андрей Зятиков
14 мая 2007

Друзья, а что происходит, когда мы нажимаем на пункт other..? Неужели, мы всем цветам в палитре названия придумаем? Неужели, мы их напишем и раскрасим? Страшно представить, что это будет.
Денис Чернов
14 мая 2007

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

14 мая 2007

Андрей, other, конечно же, открывает стандартную палитру или цветовой круг.
Руслан Худяков
14 мая 2007

Интерфейс можно значительно улучшить и обогатить.

1) Сгруппировать оттенки к основным цветам, и разместить в таком порядке, как показано, то есть как логическое продолжение пурпурный – синий и так далее.

2) Нефункциональную подсветку цветом превратить в градиент для выбора тона.

3) Маркер выбранного цвета сделать кликабельным, с выводом того же меню, что и по клику на custom, то есть полной палитры, после выбора цвета он «падает» вниз и подсвечивает образец в в custom. Тем самым, обращаться к нижней строчке меню придется намного реже.
Ярослав
14 мая 2007

Предлагаю вместо названия цветов или «Sample text» использовать цветовую палитру и область предпросмотра выделеного текста в выбранном цвете.
Cаня Стекольщиков
14 мая 2007

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

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

Мне кажется, приведенное Ильей меню изначально предлагает выбор из системных цветов. Такого рода списки есть во многих средах разработки и текстовых редакторах. Список цветов состоит из «фиксированных» цветов (http://msdn2.microsoft.com/en-us/library/aa358802.aspx) и системных цветов, определенных пользователем (http://msdn2.microsoft.com/en-us/library/aa358804.aspx).

В разных средах и разных языках программирования (или скриптования) названия цветов и их список слегка различаются, но смысл остается тот же.

Так вот, в такого рода списке пункт «more…» ведет именно к more, т. е. показывает остальную часть списка цветов и доступ к полному цветовому спектру.

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

И если уж пункт «more…» будет вести к полному списку цветов, следует назвать его «More Colors…»

15 мая 2007

С точки зрения синтаксиса наше меню — переключатель, аналогичный радиокнопкам. Последний пункт может быть выбран наравне с остальными. Он должен быть «однородным членом» в общем списке. Поэтому other… или custom…, как у Руслана Худякова, но не more colors…

Конечная цель последнего пункта — выбор конкретного цвета, а не любование радугой. Именно по этой причине появляется многоточие в названии, а вовсе не из-за факта появления диалогового окна. More colors… или, например, Options… являются не идеологичной конструкцией, хотя первоначальные правила использования многоточия забыли даже в Apple.
Дмитрий Кравчик
15 мая 2007

Мне идея с показом только последних использованных цветов не нравится:
1. Нарушается ориентация в пространстве — очень раздражает, когда один и тот же пункт скажет по меню то вверх, то вниз. Или, хуже того, появляется и исчезает.
2. Допустим, я просмотрел несколько цветов, и ни один из них мне не подошел. Я хочу указать другой — а программа мне подсовывает уже испробованные, отнимая место в меню у новых вариантов. Может статься, что придется все время ходить в то самое «more».
Здесь, правда, можно возразить, что иногда бывает удобным многократно попереключаться туда-сюда между двумя цветами, дабы сравнить впечатления. Ну тогда… если уж хочется, можно прикрутить некий вариант одношагового Undo/Redo.
Владимир Шипилов
15 мая 2007

Сразу оговорюсь — конечно, все зависит от конкретного интерфейса конкретной программы.

Но хотелось бы перечислить основные проблемы, которые я вижу при реализации данной идеи:
1. Поскольку мы беремся реализовать идею предпросмотра текста в меню выбора цвета, то возникает вопрос — а как быть с выбором цвета для различных начертаний пусть даже одного шрифта? Ведь акцент мы делаем именно на то как будет выглядеть цвет на штрихах текста. А в одном шрифте существует как минимуум три различных написания с разной толщиной штриха (bold, regular, light). В «Типографике» Эмиля Рудера он приводит пример пяти различных по насыщенности штриха начертаний. И на каждом из этих начертаний цвет будет меняться. Я уже не говорю о разнообразии гарнитур которыми мы пользуемся ежедневно. Выходит что предложенная схема весьма условна и подходит для ограниченного круга использования (предположим, в системной программе, где шрифт фиксированный и не подразумевает изменений).

2. Использование названия цвета позволяет избежать нам повторяющегося текста, который предложил Роман Верник, и в тоже время показывает нам образец цветного текста. Но, как справедливо заметил Андрей Зятиков, как быть с остальными цветами видимого нам спектра, если уж мы используем цветовой круг? В этом случае названия конкретных цветов превращаются в некоторый абстрактный набор букв. Тем более восприятие локального цвета у каждого человека свое, а если посмотреть выше, то у каждого народа свои названия цветов и представления о них. А если нам нужно будет сделать функцию замены одного цвета в главной палитре на какой-либо цвет из цветового круга (скажем, для создания необходимой и легко доступной палитры для конкретной работы), то тут уж мы и столкнемся с этой проблемой — как назвать новый цвет и нужно ли это делать?

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

Что делать? Предлагаю свое решение всех этих проблем. Перед вами единая палитра для текста и графики.

Поскольку в выборе цвета для текста нам важно увидеть изменения цвета на различных толщинах штрихов, то вполне уместной будет замена стандартного системного шрифта с каким-либо абсрактным текстом на штриховое изображение (в данном случае линейку из различных толщин штрихов), это позволит увидеть цвет текста почти любого начертания, не привязываясь к какому-то определенному шрифту. Что касается графики, то здесь так же реализована возможность просмотра цвета на плашке (максимальная толщина штриха) и, что немаловажно предусмотрена возможность просмотра цвета тонких линий в изображении (минимальная толщина штриха). Выбранный цвет для выделенного элемента в документе выделяется на палитре тонкой черной рамкой, а активный цвет — светло серой плашкой (это позволит увидеть белый цвет на белом фоне или любой другой цвет на однородном ему фоне). последний пункт палитры «more» называется так потому, что предлагает расширенные настройки для выделенного цвета или любого выбранного цвета из цветового круга. Также предусмотрена возможность создания своей цветовой палитры в основном меню выбора цвета.
Илья Полсаков
16 мая 2007

Принятые замечания:
 — изменим порядок и набор предопределенных цветов (уйдем в сторону от списка системных цветов);
 — избавимся от серой полоски в левой части меню;
 — для английской l10n название пункта <more…> исправим на other…;
 — инструмент для выбора нестандартного цвета реализуем в виде цветового круга (непрерывного или дискретного);
 — для выбранного нестандартного цвета будет показываться плашка с выбранным цветом.

Спасибо за комментарии.

17 мая 2007

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

Хотелось бы получать подобный отзыв от всех авторов, пусть даже и через некоторое время.
Мамонтов Максим
27 июня 2007

Немного доработал вариант Артема. У нас не всегда белый фон «листа», поэтому было бы удобно сразу видеть, как выглядит надпись на данном фоне. По поводу белого цвета, он однозначно должен быть, он должен быть выполнен в том же стиле, что и другие надписи. Если все же у нас оказывается белый фон, White доступен, но не виден, и нет в этом никакой необходимости. Писать белым по белому, по меньшей мере, странно.
Александр Пономарев
18 марта 2008

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


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

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

Navy 000080
Green 008000
Maroon 800000

Teal 008080 (Teal это «Antimaroon», в нем меньше всего красного)
Purple 800080 (Purple это «Antigreen»)
Olive 808000 (Olive это «Antinavy», в нем меньше всего синего)

Gray 808080

Blue 0000FF
Lime 00FF00
Red FF0000

Aqua 00FFFF (Aqua это «Antired», в нем меньше всего красного)
Fuchsia FF00FF (Fuchsia это «Antilime»)
Yellow FFFF00 (Yellow это «Antiblue», в нем меньше всего синего)

White FFFFFF

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


2. Затронутая проблема синтаксиса «more/other/custom» имеет место. Интуитивно понимаю, что среди дополнительно выбираемых цветов будут в том числе и цвета, которые мы только что сортировали. Их поэтому нельзя назвать «other», ведь среди них есть и не «другие», а те же самые. Согласен с А. Г. — «more» не подходит. Поэтому «Сustom…»


3. Теперь где этот «Сustom…» разместить? Разумеется, лень будет способствовать выбору цветов из стандартного списка. Поэтому «Сustom…» будут использовать реже других пунктов этого меню. Но, когда нужда действительно заставит, велика вероятность того, что для точного подбора цвета этот «Сustom…» придется открыть много раз подряд. Гуманно предвидеть эту ситуацию заранее и расположить «Сustom…» в самом начале меню.


4. И вот момент озарения наступает. После «Сustom…» должен идти «White» (в качестве разделителя), за ним «Gray», «Black», а потом — список остальных 12 цветов!


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

6. Точка, обозначающая ранее выбранный цвет, шумит. Не сильно, но шумит. Это легко поправимо


7. Мамонтов Максим очень прав в том, что если имена цветов показаны соответствующими цветами, то и цвет менюшки должен показывать цвет страницы документа. Железная логика.
Саша Волкова
11 ноября 2014

«Options… являются не идеологичной конструкцией, хотя первоначальные правила использования многоточия забыли даже в Apple» — что за первоначальные правила и что такое «не идеологичная конструкция»?

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.
Иногда люди, когда пытаются оценить, насколько выгодно расположены элементы на форме, рисуют линию, по которой якобы глаз скользит 2 • 4 • 23 • 2 •