Цель выделения – привлечь внимание (следовательно, нельзя выделять много)
Сначала нужно расположить поля без выделения, затем начать эксперементировать с выделением. Способы:
- Цвет символов.
- Цвет фона.
- Уровень яркости (наименее отвлекает).
- Мерцание/анимация (наиболее отвлекающий и наиболее дорогой). Желательно иметь возможность отключить анимацию. Возможна анимация по клику либо конечное число раз.
- Шрифты (различных шрифтов должно быть немного). Делятся на 2 категории:
- засечные Т, М (Times New Roman)
- отрубные T, M (Verdana)
Их не рекомендуется смешивать - Подчеркивание
- Звук (требует большого внимания). Бывает нужен, когда пользователь не смотрит на экран. Звук нужно подтверждать чем-либо еще. Он используется для обращения внимания на экран. Общее правило: чем меньше – тем лучше. Нужно иметь возможность отключить звук.
Общая рекомендация: минимизировать число эффектов.
Цвет
- Делать как можно проще.
- Цветов немного (4-20 цветов: фон, текст, гиперссылка, отработанная гиперссылка).
- Для данных – яркие цвета, для фона – приглушенные.
- Для больших областей – спокойные, для маленьких – яркие.
- Цвет можно использовать для выделения логических групп.
- Цвет может быть визуальной подсказкой.
- Для выделения цветом у объекта можно использовать цвет фона, основной цвет, цвет текста.
- Не заставлять пользователя запомнить много цветов (не больше 5).
- Цвета на разных экранах отображаются по разному. Существует набор «безопасных» цветов, которые отображаются одинаково на разных экранах и с разным освещением:
R | G | B |
cc | cc | cc |
ff | ff | Ff |
+ всевозможные их комбинации
|
|
- Не все люди одинаково различат цвет. После 50 лет происходят возрастные изменения, и голубой цвет начинает сливаться с белым.
- Глубина. Волны разной длины преломляются по-разному. Как следствие, синие цвета кажутся дальше красных: если фон синий, а объект красный – то объект выступает. Если есть несколько объектов, то:
- 2 об: красный-синий/желтый-синий;
- 3 об: красный-зеленый-синий/красный-желтый-синий;
- 4 об: красный-желтый-зеленый-синий;
- 5 об: красный-оранжевый-желтый-зеленый-синий;
- 6 об: красный-оранжевый-желтый-зеленый-синий-фиолетовый;
- Размер:
- области с темным фоном из красной части спектра кажутся больше, чем области с голубым;
- яркие области кажутся больше;
- цвет в аленьких областях трудно различать;
- для выделения деталей контрастные цвета.
- Основной и фоновый цвета:
- темный – светлый;
- пара взаимодополняющих цветов;
- области на белом фоне или на фоне из средней части спектра кажутся ярче и легче воспринимаются при разном внешнем освещении
- максимальных контраст достигается, если у первой фон черный или близок к концу спектра, у второй – белый или близок к середине спектра.
- Цвет текста пункта меню совпадает с цветом горячих клавиш.
- Дать пользователю возможность настраивать цвета, если это не вредит делу.
- При настройке легче оперировать сразу группами цветов – палитрами.
- Соблюдать общепринятые ассоциации:
- красный – опасность, высокая температура, стоп;
- синий – низкая температура;
- зеленый – движение.
- Учитывать национальные цвета, символику, особенности и пр.
- Для индикации процессов рекомендуется использовать градиентные цвети, а не спектральные.
- Не надо под текст подкладывать текстуру.
|
|