Как правило, имеет смысл группировать логические наборы функциональных или информационных элементов посредством визуальных свойств, например цвета или пространственных характеристик. Последовательно применяя эти визуальные свойства в интерфейсе, вы можете создавать шаблонные образы, которые ваши пользователи быстро научатся распознавать. Согласно инструкциям по проектированию дизайна андроид-приложений, обычные кнопки должны быть выпуклыми, со скругленными углами, а текстовые поля прямоугольные, обычно подчеркнутые и плоские, при этом активные элементы выделяются цветом (см. рис. 3.4). Благодаря систематическому применению этого образа невозможно перепутать кнопку и поле ввода, несмотря на некоторые сходства.
Глядя на любой набор визуальных элементов, пользователь бессознательно задается вопросом: "Что здесь представляет интерес?" – и почти сразу же: "Какая связь между этими объектами?" Мы должны стремиться к тому, чтобы интерфейс содержал в себе ответ на оба вопроса.
Рис. 3.4. Визуализация кнопок и текстовых полей ввода в Android
При создании иерархии необходимо определить, исходя из сценариев, какие функциональные и информационные элементы должны восприниматься пользователями сходу, какие являются вторичными, а какие нужны лишь в исключительных ситуациях. Такое ранжирование и служит основой для визуальной иерархии.
Чтобы создать видимые различия между уровнями иерархии, используйте цвет, насыщенность, контрастность, размер и положение. Самые важные элементы должны быть более крупными, более ярких цветов, более насыщенными и более контрастными. Их следует располагать над прочими элементами или делать выступающими. Менее важные элементы должны быть менее насыщенными, менее контрастны ми, более мелкими и плоскими. Нейтральные светлые цвета уводят их на второй план.
|
|
Разумеется, настройку этих свойств следует выполнять осторожно. Не следует делать самый важный элемент огромным, красным и выпуклым. Часто бывает достаточно изменить лишь одно из свойств. Если обнаружится, что два элемента различной важности состязаются за внимание пользователя, сделать менее важный менее заметным будет лучшим решением.
Создание четкой визуальной иерархии – одна из сложнейших задач в визуальном дизайне интерфейсов, ее решение требует навыков и таланта. Качественную визуальную иерархию пользователи практически не замечают – а вот ее отсутствие и проистекающая из этого путаница сразу бросаются в глаза.
Чтобы передать связь элементов, вновь обратитесь к сценариям. Необходимо определить не только элементы со сходными функциями, но и элементы, наиболее часто используемые совместно. Совместно используемые элементы обычно следует сгруппировать в пространстве (поместить на отдельный экран), чтобы минимизировать перемещения между ними.
Пространственная группировка объясняет пользователям, каким образом одни задачи, данные и инструменты связаны с другими, и может намекать на правильную последовательность действий. Хорошая группировка посредством расположения принимает во внимание порядок задач и подзадач и движение взгляда по экрану.
Элементы, расположенные рядом, как правило, связаны друг с другом. Если необходимо создать группировку, удобно реализовывать ее посредством расстояний. Элементы, разделенные бОльшими расстояниями, можно группировать посредством общих визуальных свойств.
|
|
Определившись с группами и визуальными особенностями этих групп, начинайте подстраивать контраст между группами – подчеркивая или, наоборот, затеняя группы сообразно их важности в текущем контексте.
Есть хороший способ убедиться, что визуальный дизайн эффективно задействует иерархию и отношения, – дизайнеры называют этот прием тестом с прищуриванием (squinttest). Закройте один глаз и посмотрите на экран прищуренным вторым глазом. Обратите внимание на то, какие элементы слишком выпирают, какие стали нечеткими, а какие объединились в группы. Эта процедура часто вскрывает не замеченные ранее проблемы в композиции интерфейса.
Визуальная структура и логические маршруты
Интерфейсы удобно представлять себе состоящими из визуальных и интерактивных элементов, объединяемых в группы с помощью панелей, которые, в свою очередь, можно группировать в экраны. Такая группировка может проводиться посредством распределения в пространстве или при помощи общих визуальных свойств. Крайне важно сохранять прозрачную визуальную структуру, чтобы пользователь мог легко переходить от одной части интерфейса к другой в соответствии со своим рабочим процессом.
Опишем ряд важных свойств, помогающих задать четкую визуальную структуру.
Выравнивание
Выравнивание визуальных элементов – один из главных приемов, позволяющих дизайнеру представить продукт пользователям в систематизированном и упорядоченном виде. Сгруппированные элементы следует выравнивать как по горизонтали, так и по вертикали (рис. 3.5).
|
|
В общем случае каждый элемент на экране следует выровнять по максимально возможному числу других элементов. Отказ от выравнивания двух элементов или двух групп элементов должен быть осознанным: это допустимо только для достижения конкретного разделяющего эффекта. В числе прочего дизайнерам следует обращать внимание на:
Выравнивание подписей. Подписи для элементов управления, расположенные друг над другом, должны быть выровнены по общей границе.
Выравнивание внутри группы функциональных элементов. Группа связанных флажков, вариантов выбора или текстовых полей должна подчиняться выравниванию стандартной сетки.
Выравнивание элементов, разнесенных по группам и панелям. Группы элементов управления и прочие объекты на экране везде, где это возможно, должны быть привязаны всё к той же сетке.
Рис. 3.5. Приложение uTorrent эффективно использует выравнивание по композиционной сетке. Текст и функциональные элементы четко выравниваются по сетке с фиксированным шагом.
Сетка
Сетка – один из самых мощных инструментов визуального дизайнера. Сетка обеспечивает однородность и последовательность структуры композиции. После того как проектировщики взаимодействия определили общую инфраструктуру приложения и элементов его пользовательского интерфейса, дизайнеры интерфейса должны организовать композицию в структуру в виде сетки, которая будет должным образом подчеркивать важные элементы и структуры и оставлять жизненное пространство для менее важных элементов и элементов более низкого уровня.
Как правило, сетка делит экран на несколько крупных горизонтальных и вертикальных областей. Качественно спроектированная сетка задействует понятие шага, то есть минимального расстояния между элементами. К примеру, если шаг сетки составляет четыре пиксела, все расстояния между элементами и группами должны быть кратны четырем.
В идеальном случае сетка должна задавать и пропорции различных областей экрана. Такие отношения обычно выражаются дробями. Среди распространенных дробей – прославленное "золотое сечение" (равное примерно 1,62), которое часто встречается в природе и считается особенно приятным для человеческого глаза; величина, обратная квадратному корню из двух (примерно 1:1,41), которая является основой международного стандарта размера бумаги (например, листа A4). В программировании для мобильных устройств не следует полагаться на соотношение сторон дисплеев, так как для устройств на Android не существует единого стандарта размера экранов.
Использование сетки в визуальном дизайне интерфейсов дает ряд преимуществ:
Удобство применения. Поскольку сетка делает расположение элементов единообразным, пользователи быстро приобретают навыки поиска нужных элементов в интерфейсе. Последовательность в расположении элементов и выборе расстояний между ними облегчает работу механизмов визуальной обработки в мозгу человека. Качественно спроектированная сетка упрощает восприятие экрана.
Эстетическая привлекательность. Аккуратно применяя сетку и выбирая подходящие соотношения между различными областями экрана, дизайнер может создать ощущение порядка, который удобен пользователям и стимулирует их работу с продуктом.
Эффективность. Создание сетки и включение ее в процесс на ранних этапах детализации проектных решений сокращает число итераций и действий по "доводке" интерфейса. Качественная и явно обозначенная сетка закладывает основу для легко модифицируемого и расширяемого дизайна, позволяя разработчикам находить хорошие композиционные решения.
Логические маршруты
Композиция должна не только в точности следовать сетке, но и структурировать эффективный логический маршрут через интерфейс для пользователей, принимая во внимание тот факт, что (в случае западных языков) взгляд движется сверху вниз и слева направо (рис. 3.6).
Рис. 3.6. Слева представлен хороший логический маршрут: движение взгляда и маршрут в интерфейсе совпадают. Справа – неудобный логический маршрут: все разбросано по экрану.
Симметрия – полезное средство организации интерфейса с точки зрения достижения визуального равновесия. Несимметричные интерфейсы обычно выглядят так, словно вот-вот завалятся на один бок. Опытные дизайнеры способны достигать асимметричного равновесия, управляя визуальным весом отдельных элементов. Тест с прищуриванием позволяет проверить сбалансированность интерфейса.
В интерфейсах чаще всего применяют два типа симметрии: вертикальная осевая симметрия (симметрия относительно вертикальной линии, проведенной через центр группы элементов) и диагональная осевая симметрия (симметрия относительно диагонали). В большинстве приложений присутствует симметрия одного из этих типов.
Целостные, непротиворечивые и соответствующие контексту образы
Применение пиктограмм и других наглядных элементов способно помочь пользователю разобраться в интерфейсе или, наоборот, вызвать раздражение, запутать или даже оскорбить, если пиктограммы выбраны неудачно. Очень важно, чтобы дизайнеры понимали, какое послание должна передать пользователю программа и какое послание он рассчитывает получить. Хорошее понимание персонажей и их ментальных моделей, как правило, дает прочный фундамент для текстового и визуального языков интерфейса. Играют роль и культурные аспекты.
Дизайнеры должны отдавать себе отчет в том, что цвет в различных культурах имеет различные значения (в Китае красный цвет не считается предупреждающим), равно как жесты и символы. Кроме того, следует знать цветовые коды, принятые в разных областях человеческой деятельности. Например, в больницах желтый цвет обозначает радиацию, а красный, как правило, используется в ситуациях, угрожающих жизни. На терминале фондового рынка красный – сигнал продавать. Прежде чем вы возьметесь за дело, убедитесь, что понимаете визуальный язык, принятый в сфере деятельности и культурном окружении ваших пользователей.
Визуальные элементы должны быть частью глобального визуального языка связующего компоненты интерфейса. Это означает, что логически сходные элементы должны иметь общие визуальные свойства, такие как положение, размер, толщина линий и общий стиль, различаясь лишь в том, что подчеркивает их значение. Идея состоит в создании связной системы элементов. Интерфейс, в котором эта цель достигнута, кажется безупречным: ни один элемент не выглядит так, словно его добавили в последнюю минуту.
Помимо функциональной ценности пиктограммы способны играть значительную роль в передаче атрибутов бренда. Яркие "мультяшные" пиктограммы могут попасть в точку, если вы проектируете игру для детей, а выверенные сдержанные пиктограммы больше подойдут для бизнес-приложения. Независимо от того, какой стиль выбран, соблюдайте преемственность – если на одних пиктограммах линии – жирные и черные со скругленными углами, а на других – тонкие ломаные, визуальный стиль "развалится".
Пиктограммы
Дизайн и рисование пиктограмм – совершенно самостоятельная область. Создание понятных изображений при низком разрешении требует значительного времени и практики – лучше делегировать эту задачу опытным дизайнерам. Основная трудность заключается в представлении абстрактных понятий на пиктографическом, визуальном языке. В таких случаях вместо образов, в которых никто не разберется, лучше опираться на идиомы и снабжать их всплывающими подсказками или подписями.
В случае очевидных и конкретных функций придерживайтесь следующих правил:
Помещайте на пиктограмму как функцию, так и объект, чтобы облегчить пользователю понимание пиктограммы. Глагол в сочетании с существительным понять легче, чем глагол сам по себе.
Остерегайтесь метафор и представлений, которые могут не обладать требуемыми значениями в глазах целевой аудитории. К примеру, поднятый вверх большой палец может показаться подходящей пиктограммой для обозначения положительной реакции, однако на Среднем Востоке и в других культурах этот жест является оскорбительным – в любом приложении, предназначенном для глобального рынка, его следует избегать.
Визуально группируйте взаимосвязанные функции – либо пространственно, либо, если это невозможно, с помощью цвета и иных изобразительных средств.
Создавайте простые пиктограммы; избегайте лишних деталей.
Используйте элементы повторно везде, где это возможно, чтобы пользователь изучил их однажды и навсегда.
Создание уникальных символов для различных типов объектов в интерфейсе также помогает пользователю лучше понимать интерфейс. Такие визуальные маркеры позволяют пользователю ориентироваться среди объектов быстрее, чем просто подписи. Чтобы установить связь между символом и объектом, используйте символ всякий раз, когда объект появляется на экране.
Дизайнер интерфейсов должен позаботиться также о том, чтобы символы, представляющие объекты различных типов, зрительно различались. Вычленить конкретную пиктограмму на экране, переполненном почти одинаковыми пиктограммами, столь же трудно, как и найти конкретное слово на экране, заполненном текстом.
Предварительный просмотр
Вместо того чтобы описывать результаты работы функций в интерфейсе исключительно словами (или, что еще хуже, не давать никаких описаний), показывайте пользователю, какими будут эти результаты. Для этой цели применяйте визуальные элементы. В дополнение к тексту, описывающему параметр или состояние, поместите картинку или диаграмму, описывающую поведение. Хотя визуализация, как правило, требует дополнительного места на экране, ее способность ясно передавать смысл стоит потраченных на это пикселов. Например, функция меню "Эффекты" в Android-приложении AdobePhotoshop показывает, как будет выглядеть документ, если к нему применить один из эффектов (рис. 3.7).
Рис. 3.7. Эффекты реализованы таким образом, чтобы пользователь легко мог понять, к каким результатам приводит тот или иной эффект.
Интеграция визуального стиля с функциональностью
Если дизайнеры интерфейсов решили придерживаться в интерфейсе определенного стиля, это следует делать глобально. Каждый аспект интерфейса должен быть проанализирован с точки зрения соответствия стилю; нельзя ограничиваться лишь некоторыми визуальными элементами. Необходимо убедиться, что функциональные аспекты графического интерфейса программы находятся в полной гармонии с общим визуальным стилем бренда вашей продукции. Поведение программы – часть бренда, и опыт взаимодействия пользователя с продуктом должен отражать баланс формы, содержания и поведения.
Для многих заинтересованных лиц (владельцев проекта) визуальный стиль – очень притягательная область, однако стилизованные элементы интерфейса следует держать под неусыпным контролем. Движущими силами в разработке визуального стиля должны быть базовые формы, поведение и ожидаемое назначение, тогда как соображения эстетического плана не должны мешать передаче смысла в интерфейсе и взаимодействию пользователя с продуктом.
При этом образовательные и развлекательные приложения оставляют больше возможностей для экспериментов со стилем. В таких случаях и визуальное впечатление, создаваемое интерфейсом, и содержимое приложения оказывают влияние на то удовольствие, которое пользователь получает от взаимодействия с приложением; это служит весомым аргументом в пользу более тесной связи оформления управляющих элементов с содержимым. Но и здесь следует помнить об ожидаемом назначении, позволяющем пользователям быстро получать доступ к информации.
Избегайте визуального шума и беспорядка
Визуальный шум в интерфейсе возникает из-за излишних графических элементов, отвлекающих внимание от элементов, непосредственно связанных с функциональностью и поведением программы. Визуальный шум возникает благодаря необязательным декоративным и излишне "объемным" элементам, злоупотреблению линиями и иными разделителями между элементами управления, неуместному или излишне интенсивному использованием цвета, текстур и контраста. Причудливые, запутанные или перегруженные интерфейсы повышают информационную нагрузку на пользователя и уменьшают скорость и точность его попыток разобраться в содержимом экрана.
В интерфейсах следует применять простые геометрические формы, минималистичные контуры и ограниченные наборы не очень ярких или нейтральных цветов, уравновешенные небольшим числом высококонтрастных и ярких цветов, позволяющих подчеркивать важную информацию.
Типографика не должна быть слишком разнообразной: одного или двух шрифтов в нескольких размерах вполне достаточно. Когда несколько элементов дизайна служат родственным или взаимосвязанным логическим целям, эти элементы должны визуально оформляться таким образом, чтобы работал принцип наследования. Наследование дает возможность переносить понимание одного элемента на другие сходные элементы. Если элемент требуется выделить, создайте контраст с прочими элементами через настройку одного или нескольких визуальных свойств, таких как размер, цвет и положение.
Бессмысленные вариации визуальных свойств мешают создавать целостные и удобные интерфейсы.
За любым визуальным элементом, любым отличием цвета, размера или другого визуального свойства должны стоять определенные причины. Если вы не можете сформулировать причину для отличий, избавьтесь от них.
Хороший графический интерфейс, как любой хороший дизайн, визуально эффективен. Он максимально полно использует минимальный набор визуальных и функциональных элементов. Распространенный прием – эксперимент с удалением отдельных элементов с целью проверки их вклада в ясность задуманного послания пользователю. Удаляйте элементы, пока продукт не сломается, а затем верните последний удаленный элемент на место.
Текст в графических интерфейсах
Текст – неотъемлемая составляющая практических всех пользовательских интерфейсов. Следует крайне внимательно относиться к применению текста, поскольку он обладает способностью запутывать и усложнять простые вещи.
Человек распознает буквы исходя из их форм. Чем более узнаваема форма, тем проще распознать букву, поэтому СЛОВА, СОСТОЯЩИЕ СПЛОШЬ ИЗ ЗАГЛАВНЫХ БУКВ, ЧИТАТЬ ТРУДНЕЕ, чем написанные обычным образом: в заглавных буквах отсутствуют привычные глазу начертания, и поэтому чтение требует большего внимания. Избегайте в своих интерфейсах слов, состоящих из заглавных букв.
Распознавание отдельных слов – не то же самое, что чтение, при котором мы осознанно сканируем отдельные слова и интерпретируем их значения в контексте. Следует стараться минимизировать объем текста, который пользователю необходимо прочитать, чтобы сориентироваться в интерфейсе. Применение коротких простых слов облегчает навигацию при минимальной необходимости в чтении.
Что касается читаемого текста в интерфейсе, рекомендуется придерживаться некоторых принципов:
Используйте контрастный текст. Убедитесь, что текст хорошо контрастирует с фоном и что не используются дополнительные цвета, способные повлиять на удобочитаемость текста.
Используйте подходящий шрифт и кегль (размер). Как правило, шрифт без засечек и с резкими контурами, такой как Verdana или Tahoma, читается лучше всего. Текст мельче 10 пикселов в большинстве ситуаций трудно читать.
Четко формулируйте мысли. Пользуйтесь минимальным количеством слов, необходимым для ясной передачи смысла. Избегайте сокращений. Если они все-таки необходимы, используйте общепринятые.
Цвет в графических интерфейсах
Цвет является составной частью визуального языка интерфейса, и пользователи будут пытаться усмотреть смысл в том, как он применяется. В большинстве приложений цвет должен использоваться сдержанно и хорошо сочетаться с прочими элементами визуального языка – символами, пиктограммами, текстом – и пространственными отношениями между ними. Если не проявлять осторожность, цвет очень легко применить неправильно. Самые распространенные ошибки:
Слишком много цветов. Добавление одного цвета, выделяющего важные элементы в наборе, значительно сокращает время поиска. Добавление новых цветов приводит к дополнительному ускорению работы пользователя, но при семи и более цветах скорость поиска значительно падает. Разумно предположить, что сходные результаты будут получены при любом типе навигации по интерфейсу, поскольку число семь отражает количество элементов информации, единовременно сохраняемой в кратковременной памяти человека.
Использование насыщенных дополнительных цветов. Дополнительными являются цвета, противоположные друг другу в числовом представлении. Если такие цвета обладают достаточно высокой насыщенностью и расположены рядом, то порождают зрительные эффекты, препятствующие легкому восприятию и мешающие сосредоточить внимание.
Чрезмерная насыщенность. Сильно насыщенные цвета выглядят кричаще и привлекают слишком много внимания. Умеренное насыщение цвета допустимо для небольших областей, привлекающих внимание пользователей, но такие области всегда следует создавать с осторожностью.
Недостаточный контраст. Когда цвет объекта отличается от цветов фона лишь оттенком, но не насыщенностью или яркостью, объект становится трудно воспринимать. Фигура и фон должны различаться по яркости и насыщенности, а не только по оттенку. Кроме того, необходимо избегать использования цветного текста на цветном фоне везде, где только возможно.
Недостаточная забота о людях с нарушениями цветового восприятия. Примерно десять процентов мужского населения страдает цветовой слепотой той или иной степени. Это означает, что при использовании (в частности) оттенков красного и зеленого для передачи важной информации следует проявлять внимательность. Любые цвета, применяемые в интерфейсе, должны заметно различаться по насыщенности или яркости. Если интерфейс остается читаемым после преобразования в черно-белый вариант, люди с нарушениями цветового восприятия смогут работать и с цветным вариантом интерфейса.
Принципы визуального информационного дизайна
Разработка визуального представления информации имеет свои принципы, и дизайнер может применять их для достижения наилучшего результата. В сфере визуального представления информации существуют две важных проблемы:
Трудно визуализировать многомерную информацию (информацию с более чем двумя переменными) на двухмерной поверхности.
Разрешение конечного носителя не всегда достаточно велико для вывода плотной информации.
Существуют универсальные принципы информационного дизайна, которые помогают повысить эффективность любого представления информации.
Информация, представленная визуально, должна:
Способствовать визуальному сравнению. Предоставьте пользователям возможность сравнивать взаимосвязанные переменные и тенденции либо сопоставлять варианты "до" и "после". Сравнение создает контекст, делающий информацию более ценной и понятной пользователям (пример см. на рис. 3.7).
Показывать причинно-следственную связь. Представляя информацию в графическом виде, четко обозначайте причину и следствие. В интерактивных интерфейсах необходимо обеспечить визуальную обратную связь, чтобы информировать пользователей о последствиях их действий или предоставить им подсказку о том, как следует действовать.
Отображать сразу несколько величин. Окна, содержащие информацию о нескольких взаимосвязанных переменных, должны в случае необходимости отображать все эти переменные одновременно без ущерба для ясности. При этом у пользователя должна быть возможность избирательно включать и отключать вывод величин этих переменных в интерактивном режиме, чтобы облегчить их сравнение и поиски корреляции.
Объединять текст, графику и данные в одном изображении. Диаграммы, требующие дополнительных подписей, легенд или расшифровок, нагружают пользователя добавочной когнитивной обработкой. Пользователю приходится переключать внимание с диаграммы на подпись и обратно, а затем соотносить их в уме. Гораздо лучше поместить необходимые надписи прямо на диаграмме (см. рис. 3.8).
Гарантировать качество, релевантность и целостность данных. Не следует выводить информацию на экран только потому, что это технически возможно. Убедитесь, что любая отображаемая информация помогает пользователю достигать конкретных целей и уместна в данном контексте.
Группировать объекты в пространстве, а не во времени. Когда вы отображаете данные, меняющиеся во времени, пользователю легче воспринимать их динамику, если значения выводятся рядом, а не перекрываются.
Представлять числовые данные в числовом виде. Даже если вы предпочитаете пользоваться графиками и диаграммами, чтобы облегчать восприятие тенденций и иной количественной информации, не следует полностью отказываться от вывода собственно числовых данных (рис. 3.8).
Рис. 3.8. Гистограмма Android-приложения Battery HD дает примерное представление об уровне заряда батареи, но здесь же выводится точное значение.