346 Глава 14. Визуальный дизайн интерфейсов

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

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

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

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

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

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

Создание логического маршрута

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

Принципы визуального дизайна интерфейса

347

п ользователей, принимая во внимание тот факт, что (в случае западных языков) взгляд движется сверху вниз и слева направо (рис. 14.3).

Хороший логический маршрут

Движение взгляда и маршрут в интерфейсе совпадают

Неудобный логический маршрут

Все разбросано по экрану

Рис. 14.3. Движение взгляда по интерфейсу должно прокладывать логический маршрут, позволяющий пользователям эффективно и успешно решать задачи и достигать целей

Симметрия и баланс

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

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

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

348