Файл: Цифровой инструмент для совместного потребления товаров и услуг разработка прототипа интерфейса мобильного приложения.docx
Добавлен: 29.10.2023
Просмотров: 167
Скачиваний: 3
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
Таким образом можно сделать вывод, что пользователь должен иметь смартфон и обладать базовыми навыками владения им, возраст пользователя не имеет значения.
1.4 Описание пользовательских сценариев
Пользовательский сценарий — это вымышленная история о том, как пользователь выполняет действия или достигает своих целей с помощью вашего продукта. Сценарий обращает особое внимание на мотивацию пользователя в ходе взаимодействия с дизайном и документирует особенности поведения на сайте. В итоге дизайнеры получают набор полезных соображений, которые могут стать основой для выработки новых идей и юзабилити-тестирования.
Визуализация того, как юзер будет использовать продукт или услугу, весьма полезна на этапе идейной разработки проекта. На такой ранней стадии гибкость, которую эти сценарии предлагают воображению дизайнера, огромна. Благодаря этому можно расширить потенциал дизайна в плане его универсальности и даже выйти за рамки того, что предлагается на рынке.
Пользовательские сценарии также применяются для определения наиболее важных для юзабилити-тестирования областей, они позволяют понять, как именно должен проводиться каждый тест.
Благодаря сценариям мы можем определить:
-
наиболее важные моменты, на которые нужно обратить внимание в процессе разработки UX; -
какие этапы процесса потребуют от вас дополнительной помощи вашим пользователям; -
основные потребности и мотивы ваших пользователей.
Пользователь: Случайный пользователь, нуждающийся в неполной оплате аренды помещения.
Сценарий: Пользователь заходит в приложение, авторизируется или регистрируется, затем выбирает нужное ему помещение. После этого заходит в чат и присоединяется к оплате.
Таким образом в данной главе мы разработали сценарий для пользователя и выяснили ключевые действия пользователя, которые нужно будет учесть при дальнейшей разработке макета приложения.
ГЛАВА 2. Разработка прототипа интерфейса приложения
2.1 Анализ функций и возможностей пользователя.
Для создания общей схемы интерфейса по пользовательскому сценарию мы возьмем в пример случайного пользователя.
Исходя из задач этой категории пользователей, можно сформировать следующий перечень функций необходимых в приложении:
-
зайти на определенное помещение -
зайти в рекомендации -
зайти в карту предложений -
ввести адрес -
регистрация
Определим операции, которые должен выполнять пользователь в рамках возможностей, предоставляемых ему приложением
-
регистрация -
авторизация -
страница рекомендаций -
каталог -
карта предложений -
ввести адрес -
просмотр помещения -
присоединиться к оплате -
просмотр активных объявлений -
просмотр избранных объявлений
Таким образом, мы проанализировали функции приложения и возможности пользователя которые будут взяты за основу в разработке прототипа интерфейса мобильного приложения.
2.2 Создание макетов интерфейса приложения
Исходя из пользовательских сценариев и возможностей, можно приступить к созданию макетов интерфейса приложения, для этого мы использовали графические редакторы Figma и Adobe Photoshop.
При разработке макетов интерфейса стоит обратить внимание на положение блоков и кнопок, структура приложения должна быть понятной пользователю и удобной для восприятия.
Рисунок 5 «Макет страницы входа»
Рисунок 6 «макет страницы рекомендаций»
Рисунок 7 «макет страницы выбор офиса»
Рисунок 8 «макет страницы избранное»
Рисунок 8 «макет страницы товара»
В данной главе мы разработали макет прототипа интерфейса приложения, который будет использоваться в дальнейшей разработке интерфейса мобильного приложения.
2.3 Цветовое и шрифтовое оформление макетов интерфейса приложения.
Для цветового оформления макетов приложения была подобрана цветовая схема с синими оттенками, который ассоциируется со стабильностью и спокойствием, для текста мы выбрали белые и непринужденные цвета.
Рисунок 9 «Цветовая схема»
#090BDE – Цвет использовался как часть градиента для второстепенных элементов и фона ячеек
#5E5FFF – Цвет использовался как часть градиента для второстепенных элементов и фона ячеек
#000000 – Черный цвет использовался для надписей и цифр
#072A82 - Цвет использовался для главных элементов и кнопок
#FFFFFF - Белый цвет использовался для надписей и цифр
Для шрифтового оформления был выбран шрифт Gilroy с разными видами толщины, мы выбрали такой шрифт, потому что он легкий и простой для восприятия, без засечек, а также соответствует трендам.
Рисунок 11 «Шрифт»
Gilroy Regular – Использовался для надписей кнопок
Gilroy Medium - Использовался для надписей второстепенных кнопок
Gilroy Semibold – использовался для надписей важных элементов таких как логотип
Исходя из выбора цветового и шрифтового оформления итоговые прототипы дизайна приложения выглядят так:
Рисунок 5 «страница входа»
Рисунок 5 «страница главная»
Рисунок 5 «страница предложений»
Рисунок 5 «страница избранное»
Рисунок 5 «страница товара»
Таким образом, была выбрана цветовая схема для приложения и шрифтовое оформления, на основе их выбора разработан дизайн нескольких страниц приложения
Список используемых источников
-
Почему дизайн интерфейсов так важен [Электронный ресурс] - URL: https://ru.experrto.io/blog/2020/09/30/pochemu-dizajn-interfejsov-ui-tak-vazhen-pri-sozdanii-internet-magazinov/ -
Создание макета интерфейса [Электронный ресурс] - URL: https://vc.ru/u/836075-appmaster-io/272538-sozdanie-maketa-interfeysa-5-vazhnyh-sovetov-ot-appmaster-io -
Грибан О.Н. Мультимедиа технологии в образовании: исторический аспект рассмотрения // ВЕСТНИК КЫРГЫЗСКОГО ГОСУДАРСТВЕННОГО УНИВЕРСИТЕТА ИМЕНИ И. АРАБАЕВА. S. 2019. С. 136- 139 -
Создаем быстрый прототип мобильного приложения [Электронный ресурс] - URL: https://habr.com/ru/post/189524/ -
Behance [Электронный ресурс] - URL: https://www.behance.net/search/projects?tracking_source=typeahead_nav_sugg estion&search=presentation%20design -
Figma [Электронный ресурс] - URL: https://www.figma.com/files/recent?fuid=1084756661235958092 -
GoogleFonts [Электронный ресурс]. — URL: https://fonts.google.com/ -
Как дизайнить приложения [Электронный ресурс]. — URL: https://habr.com/ru/post/706666/ -
Дизайн мобильных приложений [Электронный ресурс]. — URL: https://wiserv.ru/blog/mobile-app/mobile-app-design