полноцветные значки и серые значки в меню

Значки в меню часто полноцветны. Даже несмотря на то, что страница с элементами управления элементами /элементами меню не активна, значок по-прежнему отображается в нормальных оттенках. Чтобы отличить значок, который активен, дизайнер часто меняет цвет фона, окружающий значок. В качестве примера рассмотрим панель инструментов разработчика Google Chrome ...

Полноцветная панель инструментов Chrome

Но может быть использован другой набор методов. Один из вариантов состоит в том, чтобы иметь вымытую версию значков, которые неактивны, поэтому панель инструментов Chrome Developer станет следующей:

Chrome greyed-out toolbar

Или рассмотрите экран панели инструментов WordPress Admin, где только активная иконка имеет цвет. Панель инструментов Wordpress, очень серая

Мой вопрос (ы):

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

Если ваша реакция такова, что greyed out-icons указывают «disabled», то последующий вопрос будет: если все значки находятся в серой версии (ala Google Analytics), вы находите, что предпочтительнее полноцветных значков?

12 голосов | спросил mg1075 21 Maypm11 2011, 20:02:32

6 ответов


12

Интересный вопрос и пара вопросов:

  1. иногда greyed out используется с точки зрения безопасности /разрешений для обозначения - «не может касаться этого»
  2. в вашем основном примере есть еще «депрессия» и демаркация активных

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

ответил Chris Kluis 21 Maypm11 2011, 20:16:40
2

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

  • 80% пользователей предпочли цветную версию, общее ощущение, что они обеспечивают визуальный сигнал, который помогает находить действия.
  • 20% предпочитали greyed out, и они сказали, что интерфейс был более читабельным способом (значки меток и т. д.).

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

ответил ekapros 24 Maypm13 2013, 13:51:11
1

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

Есть несколько вещей, которые нужно учитывать. С одной стороны: элементы, отображаемые как в интерфейсе wordpress, так и в google one, не являются кнопками для представления действий. Они больше представляют виды /экраны. Именно поэтому необходимо различать активные и неактивные в первую очередь (кнопки, представляющие действия, должны отвечать только нажатию, но после того, как клик зарегистрирован, кнопка «отскакивает назад» в исходное состояние нажатой.)

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

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

ответил Inca 21 Maypm11 2011, 23:01:44
1

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

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

ответил Bredcrumbs 22 Maypm11 2011, 18:52:22
0

При использовании значков цвета значки серой шкалы, как бы ни были вымыты, обычно указывали на отключенные значки. Я лично предположил бы, что они были отключены, прежде чем пытаться щелкнуть их. Это общий элемент в пользовательских интерфейсах как в Windows, так и в Mac OS X (и, возможно, в Linux тоже).

Фоновый снимок кнопки в верхнем скриншоте более чем достаточно, чтобы указать текущий активный экран.

ответил Nick Bedford 23 Mayam11 2011, 02:57:00
0

Я должен согласиться с консенсусом о том, что серые значки указывают на заблокированные или недоступные функции. @Ben Durnell дает хорошее представление о том, что он работает на Wordpress из-за синего текста, который указывает гиперссылку.

Тем не менее, я определенно считаю, что цветные значки отвлекают и считают, что цвет является одним из самых сильных способов сосредоточить внимание на чем-то. Поскольку он используется в примере Google, цвета кажутся подавляющими. Я думаю, что цветные варианты значков должны быть обязательно рассмотрены и сопоставлены с элементами на странице.

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

ответил Adam Waselnuk 24 Mayam13 2013, 00:36:52

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132