Лабораторная работа 5 по теме Прототипирование интерфейсов по дисциплине Проектирование интерфейсов студент группы мид20б
 Скачать 4.11 Mb.
|
|
ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ «ДОНЕЦКИЙ НАЦИОНАЛЬНЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ» Кафедра КМД Лабораторная работа №5 по теме «Прототипирование интерфейсов» по дисциплине «Проектирование интерфейсов» Выполнил: студент группы МИД-20б Погоржельская Т.А. Проверил: Казакова А.С. Донецк – 2022 Цель работы: изучить средства для прототипирования интерфейсов, научиться разрабатывать прототипы интерфейсов для различных персонажей, овладеть навыками тестирования прототипов интерфейсов. На основе сценариев взаимодействия пользователя с системой был составлен бумажный прототип, схематически отображающий основные компоненты всех разделов игры.  Рисунок 1 – Бумажный прототип лобби  Рисунок 2 – Бумажный прототип профиля игрока  Рисунок 3 – Бумажный прототип меню экипировки  Рисунок 4 – Бумажный прототип меню друзей  Рисунок 5 – Бумажный прототип интерфейса битвы  Рисунок 6 – Бумажный прототип результатов битвы Бумажный прототип не является окончательным вариантом интерфейса и будет усовершенствован на дальнейших этапах. Некоторые составляющие требуют доработки. На рисунке 3 представлены всплывающие подсказки, которые появляются при наведении на иконку навыка или на персонажа, но необходимо также добавить всплывающее окно подтверждения покупки предмета, на случай если игрок случайно нажал на закрытый предмет. Также меню выбора персонажа и оружия будут внешне немного различаться, потому что персонаж имеет характеристики, которых не должно быть у оружия, такие как уровень или скиллы. На рисунке 4 представлен внешний вид меню друзей и что произойдёт если нажать кнопку удаления. Данное действие требует подтверждения, на случай если пользователь нажал кнопку случайно. Если пригласить друга с помощью кнопки «пригласить», то его персонаж должен появиться в лобби. Рисунок 5 иллюстрирует внешний вид самой битвы, но необходимо доработать всплывающее меню инвентаря и покупки предметов. Имея разработанный бумажный прототип, можно приступить к созданию электронного, с учётом всех замечаний. Для его разработки была выбрана программа Figma, поскольку в ней созданный прототип можно будет сразу же сделать динамическим, добавив нужные переходы. Для начала создаём статический прототип. Поскольку он представляет собой лишь схематическое изображение интерфейса, некоторые объекты в нём будут заменены плейсхолдерами: в случае иконок это квадрат со знаком вопроса, в случае изображения – знак картины, в случае 3D-модели персонажа или оружия – силуэт, а для иконок персонажа использовано изображение немного другого силуэта. Прототип создаётся без дизайна, поэтому все элементы выполнены в оттенках серого, кроме тех случаев, когда требуется изобразить выделение цветом, к примеру, нажатой кнопки.  Рисунок 7 – Статический прототип лобби  Рисунок 8 – Статический прототип всплывающего профиля игрока  Рисунок 8 – Статический прототип меню выбора персонажа  Рисунок 9 – Статический прототип меню выбора оружия  Рисунок 10 – Статический прототип меню друзей  Рисунок 11 – Статический прототип меню битвы  Рисунок 12 – Статический прототип всплывающего окна инвентаря  Рисунок 13 – Статический прототип экрана итогов битвы Теперь создадим динамический прототип, чтобы иметь представление об изменениях в системе происходящих при нажатии определённых кнопок. Меню в верхней части страницы (рис.14) содержит переходы на другие разделы. На кнопке в виде ромба будет расположен разработанный логотип игры, и эта кнопка отвечает за возврат в лобби. Также выбранный в данный момент раздел будет подсвечен цветом, отличным от основного. На этой же панели навигации содержится кнопка выхода и количество внутриигровой валюты двух типов.  Рисунок 14 – Меню разделов В лобби имеются две кнопки в виде ромба со знаком «+», которые обозначают собой свободное место в команде. Если нажать на эту кнопку, то осуществится переход в список друзей. Если друг был приглашён (рис.15) и принял приглашение, то его выбранный персонаж появится в лобби игрока слева, а второй приглашённый друг – справа. Соответственно, игрок, принявший приглашение, окажется в лобби друга, но свой персонаж по-прежнему будет находиться посредине. Внешний вид лобби после приглашения союзника представлен на рисунке 16.  Рисунок 15 – Внешний вид приглашения в команду  Рисунок 16 – Вид команды в лобби Если нажать на кнопку «Профиль», то всплывает меню профиля. Динамических элементов там нет, кроме выбора персонажа. Иконка выбранного в данный момент персонажа на прототипе подсвечена красным цветом. Таким образом, можно просматривать информацию обо всех избранных персонажах. В разделе «Экипировка» дополнительно доступно переключение между двумя подразделами: «Персонажи» и «Оружие». Аналогично главной панели навигации, это меню имеет кнопки, которые подсвечиваются, будучи нажатыми. При нажатии на заблокированного персонажа, всплывёт окно подтверждения покупки, с напоминанием о том, сколько на предмет необходимо средств. Если средств игрока недостаточно для покупки, то строка стоимости будет выделена цветом.  Рисунок 17 – Подтверждение покупки При наведении на персонажа, появляется подсказка с предпросмотром краткой информации о нём (рис.18).  Рисунок 18 – Информация о персонаже Получение более подробной информации о навыках выбранного персонажа возможно при наведении курсора мыши на иконку.  Рисунок 19 – Информация о персонаже Перейдём в список друзей. При нажатии на кнопку удаления друга появляется окно подтверждения действия (рис.20), чтобы пользователя нельзя было удалить случайно. При нажатии на кнопку «Профиль» осуществляется переход в профиль игрока.  Рисунок 20 – Подтверждение удаление друга При поиске друга появляется список найденных пользователей с возможностью просмотреть их профиль или добавить в друзья.  Рисунок 21 – Результаты поиска по запросу При нажатии на кнопку «Играть» в лобби соответственно осуществляется запуск матча. При наведении на иконку навыка также выводится его описание, аналогично показанному на рис.19. Это необходимо на случай, если игрок забыл параметры навыка во время битвы. Навыки имеют время отката для того, чтобы их нельзя было использовать постоянно. Если навык сейчас в откате, то время, оставшееся до его использования, отображается как в виде цифр, так и в виде затемнённого сектора на фоне. При этом иконка навыка становится серой.  Рисунок 22 – Навык в откате Если союзник находится без сознания, то его иконка и подпись становятся прозрачными, как на рисунке 23.  Рисунок 23 – Союзник в нокауте При нажатии клавиши «Esc» появляется меню действий. С его помощью можно выйти из матча. Если нажать на кнопку «Выход из матча», то появится ещё одно окно подтверждения (рис.25)  Рисунок 24 – Меню Esc  Рисунок 25 – Подтверждение выхода В меню инвентаря при наведении на иконку предмета появляется подсказка, содержащая его стоимость и атрибуты.  Рисунок 26 – Информация о предмете При нажатии на предмет магазина вызывается окно с ползунком, позволяющим выбрать количество покупаемых предметов. Максимальная стоимость не превышает доступное игроку количество валюты, минимальная – стоимость одного предмета. При нажатии на предмет инвентаря всплывает окно подтверждения использования.  Рисунок 27 – Окно покупки предмета  Рисунок 28 – Окно использования предмета Теперь, когда создан динамический прототип, реализованы переходы между страницами и всплывающие окна, можно провести анализ разрабатываемого интерфейса. Проанализируем общую логику элементов и их общность и непротиворечивость. Согласно наиболее стандартному сценарию использования, пользователь входит в лобби и переходит в меню выбора персонажа сразу благодаря панели навигации. Нажимает на персонажа, которого желает выбрать. Переходит к выбору оружия, сразу же в этом экране, но в другом подразделе. Нажимает на оружие, чтобы выбрать его, при этом имеет возможность посмотреть его характеристики. Наиболее главные показатели персонажа и оружия – к примеру, сила атаки – выведены на панель и сразу бросаются в глаза. Менее важные, такие как урон от навыков, всплывают только по желанию пользователя (при наведении). Вернувшись в лобби, игрок может быстро перейти в меню друзей с помощью кнопки «+», а из любого другого раздела – с помощью кнопки на панели навигации, если вдруг игрок выбрал экипировку и сразу хочет собрать команду. Игрок выбирает друга, которому хочет отправить приглашение, либо игрока, с которым был сыгран последний матч. После выхода в лобби, запускает игру. В игре все показатели, требующие быстрого просмотра, выведены на экран. При этом элементы не занимают немного места и обеспечивают большое поле обзора. Игрок осведомлён о состоянии своего персонажа и навыков в любой момент времени благодаря постоянно обновляющимся шкалам и таймеру. Можно быстро применить важные для игры предметы (аптечка и фрукт, восстанавливающий ману). Такие предметы не требуют подтверждения использования. Для применения менее важных предметов нужно зайти в багаж. Поскольку такие предметы зачастую ситуационные и более дорогие, их использование нужно подтверждать. При нанесении урона врагу, игрок видит его оставшуюся шкалу здоровья и счетчик нанесенного урона. Таким образом, интуитивно понятно, сколько еще урона нужно нанести. По окончании матча игрок видит результат и имеет возможность только выйти обратно в главное меню. Таким образом, отсутствуют переходы в разделы тогда, когда они не нужны: во время игры игроку не понадобится просматривать персонажей, а необходимую информацию о навыках можно получить при наведении на иконку. Все важные действия, которые пользователь может осуществить ошибочно и при этом пострадать от этого, требуют дополнительного подтверждения. Элементы не противоречат друг другу, сгруппированы по назначению. Вывод: в ходе лабораторной работы был создан и протестирован прототип будущей игры. |