Выполнение ТЗ по интерфейсу для мобильного шутера
27.05.2018
На днях выполнил тестовое задание для компании, которая разрабатывает игру — тир про снайпера. Интерфейс рисовал больше для того чтобы попрактиковаться, в связи с этим допустил некоторые отступления от ТЗ.
Хочу поделиться с вами тем как я решил некоторые задачи по оптимизации расположения элементов.
Хочу поделиться с вами тем как я решил некоторые задачи по оптимизации расположения элементов.
Рис.1. Мой вариант интерфейса по тестовому заданию (25.05.18).
Основные задачи:
1) Сохранить стиль игры Kill Shot Bravo
2) Сделать 5 кнопок выбора типа игры (Story, Sniper, Assault, Breach, Tactical)
3) Добавить карту выбора миссии
4) Добавить аватарку игрока
5) Добавить иконку премиум валюты — «Пачка наркотиков»
1) Сохранить стиль игры Kill Shot Bravo
2) Сделать 5 кнопок выбора типа игры (Story, Sniper, Assault, Breach, Tactical)
3) Добавить карту выбора миссии
4) Добавить аватарку игрока
5) Добавить иконку премиум валюты — «Пачка наркотиков»
Обоснование моего решения:
a) По стилю и расположению элементов максимально ориентировался на Kill Shot Bravo. Отталкивался от того что в рефе интерфейс сделан хорошо (размер элементов, их положение и т.п.). Вносил изменения только там, где видел что явно могу улучшить интерфейс.
b) Начал строить интерфейс от кнопок переключения режима игры, расположил их слева.
c) Кнопку "< Home" поместил в нижнюю левую часть экрана, т.к. кнопки перехода между экранами лучше располагать в углах, а не там, где это было сделано в рефе (см. Рис.2, кнопка «< Mission»). Такое решение более интуитивно для пользователя и уменьшает количество ложных срабатываний соседних кнопок.
d) Из-за того что кнопки переключения режимов игры занимают много места по высоте, не получилось увеличить кнопку "< Home" и поднять нижнюю панельку т.о. чтобы она обрамляла кнопку, подобно тому как это сделано под аватаркой игрока). Это могло бы быть стильным решением, но функционал победил :)
e) Аналогичная проблема возникла с размещением блока персональных данных игрока (аватарка, имя, шкала энергии). Изначально планировал разместить этот блок в левом верхнем углу, но чтобы аватарка хорошо читалась уменьшать её уже было нельзя, пришлось сместить вправо. Т.к. экран вертикально поделён на 3 разных по размеру блока (кнопки, карта, информация), то разместил блок персональных данных по центру одного из них (карта).
f) Иконки ресурсов оставил там же где они и были, но расположил их горизонтально, чтобы им не было так тесно и чтобы цифры лучше читались. Иконки поставил слева от цифр, так легче воспринимать информацию.
a) По стилю и расположению элементов максимально ориентировался на Kill Shot Bravo. Отталкивался от того что в рефе интерфейс сделан хорошо (размер элементов, их положение и т.п.). Вносил изменения только там, где видел что явно могу улучшить интерфейс.
b) Начал строить интерфейс от кнопок переключения режима игры, расположил их слева.
c) Кнопку "< Home" поместил в нижнюю левую часть экрана, т.к. кнопки перехода между экранами лучше располагать в углах, а не там, где это было сделано в рефе (см. Рис.2, кнопка «< Mission»). Такое решение более интуитивно для пользователя и уменьшает количество ложных срабатываний соседних кнопок.
d) Из-за того что кнопки переключения режимов игры занимают много места по высоте, не получилось увеличить кнопку "< Home" и поднять нижнюю панельку т.о. чтобы она обрамляла кнопку, подобно тому как это сделано под аватаркой игрока). Это могло бы быть стильным решением, но функционал победил :)
e) Аналогичная проблема возникла с размещением блока персональных данных игрока (аватарка, имя, шкала энергии). Изначально планировал разместить этот блок в левом верхнем углу, но чтобы аватарка хорошо читалась уменьшать её уже было нельзя, пришлось сместить вправо. Т.к. экран вертикально поделён на 3 разных по размеру блока (кнопки, карта, информация), то разместил блок персональных данных по центру одного из них (карта).
f) Иконки ресурсов оставил там же где они и были, но расположил их горизонтально, чтобы им не было так тесно и чтобы цифры лучше читались. Иконки поставил слева от цифр, так легче воспринимать информацию.
Рис.6. Иконка «Пачка наркотиков»
g) Кнопку "Меню" оставил слева вверху, не смотря на то что мне хотелось расположить её справа (я привык к тому что слева ставится кнопка «Назад», а справа кнопка «Меню»). Обычно её ставят в одном из верхних углов, но правая часть уже имеет много элементов и в противовес им я поставил эту кнопку слева.
h) Кнопку "Play" переместил по центру нижней части блока информации о миссии. Это логично, гармонично, и более удобно в использовании (не нужно тянуться в самый угол экрана).
h) Кнопку "Play" переместил по центру нижней части блока информации о миссии. Это логично, гармонично, и более удобно в использовании (не нужно тянуться в самый угол экрана).
Примечание:
— 5 иконок на кнопках выбора типа игры — взяты из интернета и доработаны
— 2 иконки ресурсов — взяты из Kill Shot Bravo и доработаны
— аватарка игрока — взята из Kill Shot Bravo
— карта — взята из интернета и доработана
— снайперская винтовка для красной иконки — взяты из интернета и доработана
— 5 иконок на кнопках выбора типа игры — взяты из интернета и доработаны
— 2 иконки ресурсов — взяты из Kill Shot Bravo и доработаны
— аватарка игрока — взята из Kill Shot Bravo
— карта — взята из интернета и доработана
— снайперская винтовка для красной иконки — взяты из интернета и доработана
