Детские болезни игровых интерфейсов

5.
Верстка и акцентирование – основа интерфейса

Почтенные принципы полиграфического дизайна (скорее рекламного, чем книжного) доказывают свою силу и в компьютерном мире. В арсенале дизайнера интерфейсов трудно переоценить навыки грамотной верстки материала и расстановки акцентов.

1D-верстка: Меню

Даже в "одномерных" структурах, таких как обычное меню программы, вопрос о верстке отнюдь не праздный. (Одномерность здесь понимается в графическом смысле, логическое ветвление иерархического меню ситуации не меняет). В самом деле, какими параметрами определяется удобство работы с меню?

Группировка

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

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

Акценты

Помимо визуальных разделителей, в меню могут неплохо работать графические акценты – будь то цвет надписи, ее оформление или, например, добавление к элементу иконками-пиктограммы.

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

Лучше всего работает меню, в котором снабжены иконками только наиболее важные элементы. При таком подходе, мы как бы вводим дополнительное логическое измерение в одномерную структуру – если пространственно элементы сгруппированы по принципу логической близости (например, Save и Save as...), то введение графических акцентов позволяет сгруппировать их в мета-структуру типа "наиболее часто используемые" (например, Save и Print).

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

2D-верстка: Диалоги

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

Стандартизация

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

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

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

Читаемость

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

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

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

К началу страницы