Через расположение элементов интерфейса мы можем помогать людям решать задачи, которые ставит перед ними игра. Ниже описаны принципы, помогающие правильно располагать элементы интерфейса
Обозначение связи объектов
Если объекты расположены рядом, они кажутся зрителю связанными между собой. Мы можем использовать это чтобы помогать людям ориентироваться в интерфейсе
На примере ниже три персонажа слева стоят рядом, создаётся ощущение что они вместе, а персонаж справа стоит отдельно, видно что он не с ними
Если поставить всех персонажей рядом, сразу кажется что они вместе
Реплика на следующем примере принадлежит рыцарю, потому что висит прямо над ним
Если реплика будет висеть между персонажами, будет заметно сложнее понять кто её говорит
На примере ниже очевидно что блок с категориями умений относятся к "Силе", потому что расположен рядом с ней
На следующем примере кнопки разделов относятся к выбранному пункту меню потому что находится рядом с ним
Если располагать связанные элементы интерфейса далеко друг от друга, это может усложнить жизнь игроку. На примере ниже идёт бой и полоска здоровья крысы находится довольно далеко от неё. В результате сложно понять сколько здоровья осталось у противника
Группировка объектов
Мы можем группировать объекты и через это упрощать восприятие информации игроками. На примере ниже группировка помогает отличить основные характеристики предмета от второстепенных
На следующем примере слоты оружия сгруппированное вместе, благодаря этому мы с одного взгляда понимаем какой набор оружия у нас экипирован
Если не группировать слоты с оружием, а раскидать их по разным частям экрана, понять какой набор оружия у нас экипирован, будет заметно сложнее
На следующем примере отсутствие группировки мешает понимать какие функции вызывают бинды в нижней части экрана
Если сгруппировать бинды с надписями, будет проще понимать что делает каждый бинд
Как группировать элементы интерфейса
Мы можем группировать элементы с помощью их расположения относительно друг друга, для этого достаточно сделать расстояние между элементами группы заметно меньше чем расстояния до других групп
На примере ниже мы легко отличаем блок с умениями от блока с усилениями благодаря тому что расстояние между иконок в этих блоках заметно меньше чем расстояние между самими блоками
Мы также можем группировать элементы интерфейса за счёт декоративных элементов, оформления и подложек. В этом случае расстояние между элементами группы может быть не таким важным
На примере ниже в начале дерева умений расстояния между иконками разных веток совсем небольшие, но мы всё равно легко отличаем разные ветки друг от друга потому что они оформлены по-разному
Место элементов в иерархии
Одни элементы интерфейса важнее других, поэтому лучше располагать интерфейсные модули в соответствии с их значимостью
Например, игрок обычно смотрит в центр экрана, поэтому самые важные сообщения стоит показывать в центре
На примере ниже игрок заходит в новую локацию. Это важное событие, поэтому нотификация о нём появляется в центре экрана
Менее значимые вещи можно показывать ближе к краям экрана. На примере ниже произошло сохранение игры, это не самая важная информация, поэтому нотификация о ней показана далеко от центра экрана
На следующем скриншоте та же история с виджетами здоровья, выносливости и количества патронов
Последовательность повествования
Мы можем располагать элементы интерфейса так, чтобы игроки воспринимали информацию в определенном порядке. Например, люди читают сверху вниз, поэтому более значимые вещи есть смысл показывать вверху списка
На картинке ниже экран кастомизации персонажа. Авторы дизайна хотят чтобы мы в первую очередь выбрали тип тела героя, поэтому ставят этот пункт в начало списка
На тултипе ниже тот же подход, нам сперва показывают важные характеристики предмета, а потом второстепенные
Ниже ещё один пример последовательного повествования. В самом верху экрана расположены главные разделы полноэкранного интерфейса, за ними идёт блок подразделов и уже после него показано содержимое выбранного подраздела
Если расположить элементы в случайном порядке, работать с интерфейсом станет заметно сложнее, потому что информация будет подаваться непоследовательно
Заключение
Мы поговорили о том как располагать элементы интерфейса так, чтобы это помогало нашим игрокам решать их задачи. Для этого полезно показывать связь элементов, группировать их, помнить об их месте в иерархии и о порядке, в котором мы хотим показать информацию зрителям.
Надеюсь эти вещи как-то упростят вашу работу и жизнь ваших игроков. Всем удачи и творческих успехов =)
У меня есть Youtube канал с роликами про интерфейсы: Mikhail Kravchenko UI
Telegram для напоминаний о новых статьях: GoodGameUI
Telegram с игровым концепт-артом и прочими художествами: Художества Михаила Кравченко
Присоединяйтесь!
Всем удачи и творческих успехов!
