Принципы визуального дизайна интерфейса
Человеческий мозг – великолепное устройство распознавания обра' зов. Оно извлекает смысл из плотных потоков зрительной информа'
ции, обрушивающихся на нас буквально отовсюду. Наш мозг справля' ется с этим шквалом входных данных, выявляя визуальные законо' мерности и создавая для наблюдаемых нами объектов систему приори' тетов. В конечном итоге это позволяет нам осознанно воспринимать видимый мир. Именно способность зрительной системы человеческого мозга к сборке частей визуального поля в образы на основании визу' альных якорей (подсказок) позволяет нам обрабатывать зрительную информацию столь быстро и эффективно. Представьте, что вам вдруг пришлось бы вручную вычислять траекторию полета бейсбольного мя' ча, чтобы предсказать, где он упадет. Наши глаза и мозг вместе делают это за доли секунды, не требуя от нас сознательных усилий. Процесс создания визуального дизайна интерфейса должен опираться на наши природные способности к обработке визуальной информации, чтобы обеспечить передачу пользователям информации и отражение воз' можностей и функций программы.
Одной главы совершенно недостаточно для полного раскрытия темы визуального дизайна интерфейсов. Однако существует ряд важных принципов, которые помогут вам создавать интерфейсы, максимально простые в восприятии и приятные для глаза. Как уже говорилось, Ке' вин Маллет и Даррел Сано дают превосходный и подробный анализ этих базовых принципов; мы лишь кратко обсудим некоторые из наи' более важных принципов визуального дизайна интерфейса.
При создании графических интерфейсов следует:
• использовать визуальные свойства для группировки элементов и соз' дания четкой иерархии;
• создавать визуальную структуру и прокладывать логический мар' шрут на каждом уровне организации;
• использовать целостные, непротиворечивые и соответствующие контексту образы;
• интегрировать визуальный стиль с функциональностью осмыслен' но и последовательно;
• избегать визуального «шума» и беспорядка.
Эти принципы и некоторые другие общие закономерности, касающие' ся работы с текстом и цветом в графических пользовательских интер' фейсах, подробно обсуждаются в следующих разделах.
Используйте визуальные свойства для группировки элементов и создания четкой иерархии
Как правило, имеет смысл группировать логические наборы функцио' нальных или информационных элементов посредством визуальных свойств, например цвета или пространственных характеристик. По' следовательно применяя эти визуальные свойства в интерфейсе, вы можете создавать шаблонные образы, которые ваши пользователи бы' стро научатся распознавать. Например, в Windows XP все кнопки вы'
пуклые, со скругленными углами, а текстовые поля прямоугольные, слегка вдавленные, с белым фоном и синей окантовкой. Благодаря систематическому применению этого образа невозможно перепутать кнопку и поле ввода, несмотря на некоторые сходства.
Основой визуального интерфейса являются визуальные шаблоны.
Глядя на любой набор визуальных элементов, пользователь бессозна' тельно задается вопросом: «Что здесь представляет интерес?» – и поч' ти сразу же: «Какая связь между этими объектами?» Мы должны стре' миться к тому, чтобы интерфейс содержал в себе ответ на оба вопроса.
Создание иерархии
Исходя из сценариев определите, какие функциональные и информа' ционные элементы должны восприниматься пользователями сходу, какие являются вторичными, а какие нужны лишь в исключитель' ных ситуациях. Такое ранжирование и служит основой для визуаль' ной иерархии.
Используйте цвет, насыщенность, контрастность, размер и положе' ние, чтобы создать видимые различия между уровнями иерархии. Са' мые важные элементы должны быть более крупными, более ярких цветов, более насыщенными и более контрастными. Их следует распо' лагать над прочими элементами или делать выступающими. Выделяе' мые элементы лучше всего красить в насыщенные цвета. Менее важ' ные элементы должны быть менее насыщенными, менее контрастны' ми, более мелкими и плоскими. Нейтральные светлые цвета уводят их на второй план.
Разумеется, настройку этих свойств следует выполнять осторожно. Не следует делать самый важный элемент огромным, красным и выпук' лым. Часто бывает достаточно изменить лишь одно из свойств. Если обнаружится, что два элемента различной важности состязаются за внимание пользователя, «прикрутить фитиль» менее важного будет лучшим решением, чем пытаться «разжечь» более важный. Так у вас останется больше пространства для создания акцента на самых важ' ных элементах. (Вот хорошая аналогия: если все слова на странице на' браны жирным красным шрифтом, выделяется ли хоть одно из слов?)
Создание четкой визуальной иерархии – одна из сложнейших задач в визуальном дизайне интерфейсов, ее решение требует навыков и та' ланта. Качественную визуальную иерархию пользователи практиче' ски не замечают – а вот ее отсутствие и проистекающая из этого пута' ница сразу бросаются в глаза.
Визуализация связей
Чтобы передать связь элементов, вновь обратитесь к сценариям. Необ' ходимо определить не только элементы со сходными функциями, но и элементы, наиболее часто используемые совместно. Совместно ис' пользуемые элементы обычно следует сгруппировать в пространстве, чтобы минимизировать перемещения мыши, тогда как элементы, ко' торые могут не использоваться вместе, но обладают сходными функ' циями, можно группировать визуально, даже если они не группиру' ются в пространстве.
Пространственная группировкаобъясняет пользователям, каким об' разом одни задачи, данные и инструменты связаны с другими, и мо' жет намекать на правильную последовательность действий. Хорошая группировка посредством расположения принимает во внимание по' рядок задач и подзадач и движение взгляда по экрану: слева направо для западных языков и, как правило, сверху вниз. (Более подробно этот момент мы обсудим чуть позже.)
Элементы, расположенные рядом, как правило, связаны друг с дру' гом. Во многих интерфейсах такая группировка реализована слишком тяжеловесно: куда не взглянешь – рамки, причем иногда рамка за' ключает в себе всего один или два элемента. Часто того же эффекта бо' лее грамотно можно достичь посредством расстояний. К примеру, на панели инструментов кнопки могут отделяться друг от друга четырь' мя пикселами. Чтобы вычленить файловые команды («открыть», «но' вый файл», «сохранить») в отдельную группу, достаточно увеличить расстояние между кнопками файловых команд и соседней группой кнопок до восьми пикселов.
Элементы, разделенные большими расстояниями, можно группиро' вать посредством общих визуальных свойств, создавая шаблон, кото' рый в конечном итоге приобретет самостоятельный смысл для пользо' вателей. Так, использование объема для создания ощущения физиче' ского ожидаемого назначения – вероятно, самый эффективный способ отделять элементы управления от данных и фоновых элементов (более подробно об ожидаемых назначениях читайте в главе 13). Эта страте' гия часто применяется в рисовании пиктограмм. В операционной сис' теме Mac OS X применяются яркие цвета для пиктограмм приложе' ний и тусклые – для редко используемых вспомогательных программ. Зеленая кнопка запуска устройства может перекликаться с похожей анимированной зеленой пиктограммой, указывающей, что устройство функционирует нормально.
Определившись с группами и визуальными особенностями этих групп, начинайте подстраивать контраст между группами – подчеркивая или, наоборот, затеняя группы сообразно их важности в текущем контексте. Подчеркивайте различия между группами, но минимизируйте разли' чия между элементами одной группы.
Тест с прищуриванием
Есть хороший способ убедиться, что визуальный дизайн эффективно задействует иерархию и отношения, – дизайнеры называют этот при' ем тестом с прищуриванием(squint test). Закройте один глаз и посмот' рите на экран прищуренным вторым глазом. Обратите внимание на то, какие элементы слишком выпирают, какие стали нечеткими, а какие объединились в группы. Эта процедура часто вскрывает не замечен' ные ранее проблемы в композиции интерфейса.