Название проекта: Мой поп-друг

Дизайнер: Эрик Сориано

Курс: CIM613 — Разработка мобильного программирования, весна 2022 г.

МОЙ ПОП-ДРУГ

***ОБНОВЛЕНИЕ: панель рейтинга полностью удалена из приложения, но я по-прежнему документировал процесс ее рассмотрения на начальном этапе***

Описание приложения:

Забавный опыт для пользователей, которым скучно и нужно посмеяться в перерывах между перерывами, а также которые любят

популярная культура и мемы.

Целевая аудитория:

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

Функции:

  • Разрешить пользователям создавать собственного персонажа, используя 3 разных символа из раскрывающихся меню.
  • Возможность смешивать и сочетать символы, при этом каждая комбинация дает разные результаты.
  • Пользователи также могут изменить сцену (или фон) в любое время, нажав кнопку «Изменить сцену», что дает им возможность помещать своего нового поп-друга в разные области.
  • Пользователи могут дать оценку своему опыту, а затем отправить эту оценку разработчику, чтобы измерить удовольствие пользователя.

Рекомендации по человеческому интерфейсу IOS:

  • Не просите людей оценивать ваше приложение слишком быстро или слишком часто:Панель рейтинга, доступная с самого начала, была явным нарушением Руководства по пользовательскому интерфейсу, поэтому было хорошо, что ее оставили, потому что Apple советует не просить пользователей оценивать приложение слишком рано
  • Быстро переходите к действию.Мое приложение позволяет пользователям сразу же погрузиться в действие, избегая ненужной информации для входа или регистрации; как только приложение загружается, они могут начать взаимодействовать

Первый этап: мозговой штурм + идея

Меня очень вдохновила кастомизация персонажей в видеоиграх, таких как Zelda: Breath of the Wild, игры Persona и т. д. Мне также нравятся мемы и поп-культура, поэтому это вдохновило меня на идею этого приложения. Я всегда задавался вопросом: «Что получится, если смешать Наруто, Супер Марио и Спанч Боба в блендер?»; каков будет результат?»

Что ж, теперь, если вы похожи на меня, вам больше не нужно удивляться, так как я создал результат для вас.

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

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

Второй этап: разработка + дизайн

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

Раскрывающиеся меню (3):

  • Внутри строки (меню1, меню2, меню3)

Основной холст, на который будет выводиться фотография

  • внутри контейнера (актив изображения, использующий массив[] для вызова)

Кнопки действий

  • Внутри другой строки (кнопка создания; кнопка сброса; кнопка новой сцены)
  • Я немного поэкспериментировал, но с расположением кнопки и могу подумать о том, чтобы переместить кнопку «Создать» над фотографией и прямо под раскрывающимся списком 2, поэтому, когда пользователь хочет переключать комбинации, кнопка находится рядом с его пальцем.

Панель рейтинга

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

**Функция панели рейтинга позже была удалена, потому что она пока не приносила никакой пользы. Он будет рассмотрен позже***

См. приведенные ниже скриншоты этапа разработки, не завершенные, но до тестирования приложения с пользователями бета-версии.

Фаза третья: итерации после тестирования и редизайн

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

Перемещены кнопки действий:

  • Кнопка основного действия, которая является кнопкой «СОЗДАТЬ», была увеличена, чтобы быть более заметной и иметь контрастный цвет.
  • Кнопки второстепенных действий (новая сцена и сброс) были перекрашены в черный цвет, чтобы они были видны и сообщали, что они работают, но были уменьшены в масштабе и перемещены под кнопку основного действия. Мы поняли, что в предыдущей итерации кнопка СБРОС была неактивна, и это нарушало одну из «10 эвристик юзабилити; # 1 — видимость состояния системы, и мы хотели, чтобы пользовательский интерфейс был заметным и интуитивно понятным для пользователей.

Перемещен раздел с фотографиями и название персонажа:

  • Мы переместили основной контейнер с фотографиями над выпадающими меню и кнопками, чтобы выпадающие списки были ближе к пользователю, когда он нажимает «СОЗДАТЬ»; это обеспечивает естественный путь действий, которым должен следовать пользователь, чтобы сгенерировать выходную комбинацию символов, и, поскольку теперь на экране больше места, мы сделали изображения немного больше, чтобы их можно было лучше оценить.

Добавлена ​​возможность перемешивания фоновых сцен:

  • Наконец, мы добавили функцию для случайного изменения фоновых сцен каждый раз, когда пользователь нажимает кнопку «Изменить сцену». Это тоже дополнительная функция, но она позволяет каждый раз включать выводимого персонажа в новую настройку, создавая визуальную историю.

Ниже вы найдете скриншоты финальной версии приложения.

Используемые инструменты:

  • Flutter — Dart (язык программирования)
  • Adobe Photoshop: для создания коллажей всех персонажей
  • Github: для хранения репозитория
  • ПК с Windows: кодировать, а также записывать демо-видео/скриншоты для этого проекта.

© 2022 Эрик Сориано | Все права защищены