Выделение информации на экране. Цвет

Цель выделения – привлечь внимание (следовательно, нельзя выделять много)

Сначала нужно расположить поля без выделения, затем начать эксперементировать с выделением. Способы:

  1. Цвет символов.
  2. Цвет фона.
  3. Уровень яркости (наименее отвлекает).
  4. Мерцание/анимация (наиболее отвлекающий и наиболее дорогой). Желательно иметь возможность отключить анимацию. Возможна анимация по клику либо конечное число раз.
  5. Шрифты (различных шрифтов должно быть немного). Делятся на 2 категории:
    1. засечные Т, М (Times New Roman)
    2. отрубные T, M (Verdana)
      Их не рекомендуется смешивать
  6. Подчеркивание
  7. Звук (требует большого внимания). Бывает нужен, когда пользователь не смотрит на экран. Звук нужно подтверждать чем-либо еще. Он используется для обращения внимания на экран. Общее правило: чем меньше – тем лучше. Нужно иметь возможность отключить звук.

Общая рекомендация: минимизировать число эффектов.

Цвет

  1. Делать как можно проще.
  2. Цветов немного (4-20 цветов: фон, текст, гиперссылка, отработанная гиперссылка).
  3. Для данных – яркие цвета, для фона – приглушенные.
  4. Для больших областей – спокойные, для маленьких – яркие.
  5. Цвет можно использовать для выделения логических групп.
  6. Цвет может быть визуальной подсказкой.
  7. Для выделения цветом у объекта можно использовать цвет фона, основной цвет, цвет текста.
  8. Не заставлять пользователя запомнить много цветов (не больше 5).
  9. Цвета на разных экранах отображаются по разному. Существует набор «безопасных» цветов, которые отображаются одинаково на разных экранах и с разным освещением:
R G B
     
     
     
     
cc cc cc
ff ff Ff

+ всевозможные их комбинации

  1. Не все люди одинаково различат цвет. После 50 лет происходят возрастные изменения, и голубой цвет начинает сливаться с белым.
  2. Глубина. Волны разной длины преломляются по-разному. Как следствие, синие цвета кажутся дальше красных: если фон синий, а объект красный – то объект выступает. Если есть несколько объектов, то:
    1. 2 об: красный-синий/желтый-синий;
    2. 3 об: красный-зеленый-синий/красный-желтый-синий;
    3. 4 об: красный-желтый-зеленый-синий;
    4. 5 об: красный-оранжевый-желтый-зеленый-синий;
    5. 6 об: красный-оранжевый-желтый-зеленый-синий-фиолетовый;
  3. Размер:
    1. области с темным фоном из красной части спектра кажутся больше, чем области с голубым;
    2. яркие области кажутся больше;
    3. цвет в аленьких областях трудно различать;
    4. для выделения деталей контрастные цвета.
  4. Основной и фоновый цвета:
    1. темный – светлый;
    2. пара взаимодополняющих цветов;
    3. области на белом фоне или на фоне из средней части спектра кажутся ярче и легче воспринимаются при разном внешнем освещении
    4. максимальных контраст достигается, если у первой фон черный или близок к концу спектра, у второй – белый или близок к середине спектра.
  5. Цвет текста пункта меню совпадает с цветом горячих клавиш.
  6. Дать пользователю возможность настраивать цвета, если это не вредит делу.
  7. При настройке легче оперировать сразу группами цветов – палитрами.
  8. Соблюдать общепринятые ассоциации:
    1. красный – опасность, высокая температура, стоп;
    2. синий – низкая температура;
    3. зеленый – движение.
  9. Учитывать национальные цвета, символику, особенности и пр.
  10. Для индикации процессов рекомендуется использовать градиентные цвети, а не спектральные.
  11. Не надо под текст подкладывать текстуру.

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: