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

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

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

Выравнивание и сетка

Выравнивание визуальных элементов – один из главных приемов, по' зволяющих дизайнеру представить продукт пользователям в система' тизированном и упорядоченном виде. Сгруппированные элементы сле' дует выравнивать как по горизонтали, так и по вертикали (рис. 14.1). В общем случае каждый элемент на экране следует выровнять по мак' симально возможному числу других элементов. Отказ от выравнивания двух элементов или двух групп элементов должен быть осознанным: это допустимо только для достижения конкретного разделяющего эффек' та. В числе прочего дизайнерам следует обращать внимание на:

• Выравнивание подписей. Подписи для элементов управления, рас' положенные друг над другом, должны быть выровнены по общей границе. Если все подписи имеют примерно одинаковую длину, вы' равнивайте их по левой стороне – так пользователям будет легче их читать, нежели при выравнивании вправо.

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

 

 

 

Рис. 14.1. Adobe Lightroom весьма эффективно использует выравнивание по композиционной сетке. Текст, функциональные элементы и группы элементов управления очень четко выравниваются по сетке с фиксирован-

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

• Выравнивание элементов, разнесенных по группам и панелям. Группы элементов управления и прочие объекты на экране везде, где это возможно, должны быть привязаны всё к той же сетке.

Сетка – один из самых мощных инструментов визуального дизайнера, стремительно набравший популярность в годы после Второй мировой войны благодаря швейцарским печатникам. Сетка обеспечивает одно' родность и последовательность структуры композиции, что особенно важно при проектировании интерфейса с несколькими уровнями ви' зуальной или функциональной сложности. После того как проекти' ровщики взаимодействия определили общую инфраструктуру прило' жения и элементов его пользовательского интерфейса (см. главу 7), дизайнеры интерфейса должны организовать композицию в структу' ру в виде сетки, которая будет должным образом подчеркивать важ' ные элементы и структуры и оставлять жизненное пространство для менее важных элементов и элементов более низкого уровня.

Как правило, сетка делит экран на несколько крупных горизонталь' ных и вертикальных областей (рис. 14.2). Качественно спроектиро'

 

 

 

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

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

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

В идеальном случае сетка должна задавать и пропорции различных об' ластей экрана. Такие отношения обычно выражаются дробями. Среди распространенных дробей – прославленное «золотое сечение» (обозна' чаемое греческой буквой «фи» и равное примерно 1,62), которое часто встречается в природе и считается особенно приятным для человече' ского глаза; величина, обратная квадратному корню из двух (пример' но 1:1,41), которая является основой международного стандарта раз' мера бумаги (например, листа A4); и отношение 4:3 – пропорция сто' рон большинства компьютерных дисплеев.

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

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

 

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

Решения по поводу композиции должны быть в определенном смысле бескомпромиссными: «почти квадрат» ни на что не годится; «почти один к двум» – тоже. Если композиция на экране близка к простой дробной его части – половине, трети или одной пятой, – скорректируй' те композицию таким образом, чтобы она занимала ровно половину, треть или одну пятую часть экрана. Используйте точные, четкие, ярко выраженные пропорции.

Использование сетки в визуальном дизайне интерфейсов дает ряд пре' имуществ:

• Удобство применения. Поскольку сетка делает расположение эле' ментов единообразным, пользователи быстро приобретают навыки поиска нужных элементов в интерфейсе. Если заголовок экрана всегда находится на одном месте, пользователю не приходится за' думываться или разглядывать экран в поисках этого заголовка. По' следовательность в расположении элементов и выборе расстояний между ними облегчает работу механизмов визуальной обработки в мозгу человека. Качественно спроектированная сетка в сущест' венной степени упрощает восприятие экрана.

• Эстетическая привлекательность. Аккуратно применяя сетку и вы' бирая подходящие соотношения между различными областями эк' рана, дизайнер может создать ощущение порядка, который удобен пользователям и стимулирует их вступать во взаимодействие с про' дуктом.

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