Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android
Code

Создание дизайна, вайрфрейма и прототипа для Android приложения: часть 1

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Ola Matona (you can also view the original English article)

Если вы мечтаете совершить следующий прорыв в области Android приложений, не буду врать: вам придется хорошенько поработать!

Если вы заглянете в интернет-магазин Google Plaу, то увидите, что почти любое приложение, о котором вы могли бы подумать, уже кем-то создано — и обычно не одно, и с довольно разным процентом успеха.

Чтобы выделиться на таком конкурентном рынке, ваше приложение должно предлагать нечто гораздо большее, чем просто набор отличных возможностей. И к тому же ваше приложение должно быть адаптивным, простым в использовании, работать без ошибок и (пусть это и очевидно) выглядеть красиво.

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

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

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

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

Чтобы вы поняли, как именно "проблеск вдохновения" превращается в рабочий прототип, я представлю, что у меня появилась идея для Android приложения, которое я хочу создать. Эту идею я и буду реализовывать в своих статьях.

Поскольку скоро (предположительно) наступит лето, то я буду разрабатывать приложение, которое помогает людям спланировать и организовать летний отдых вместе с друзьями.

Итак, у нас уже есть идея. С чего начать?

1. Опишите общую концепцию продукта

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

Чтобы понять, для чего нужно ваше приложение, хорошей практикой будет начать с концепции продукта. Это всего одно предложение, которое описывает, что у вас за приложение, что оно делает, и почему пользователи Goofle Play должны его немедленно скачать. Представьте, будто вы рекламируете ваше приложение возможному покупателю и можете использовать только одно предложение.

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

Приложение, в котором можно запланировать и организовать летний отдых легко и без стресса.

Очень важно, чтобы вы всегда держали в голове эту концепцию, поэтому вы можете даже записать ее на бумажке и поместить на видном месте.

You may want to scribble your product statement on a post it note

2. Определите целевую аудиторию

Следующий важный вопрос, который надо себе задать: для кого именно я все это делаю?

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

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

У меня уже есть очень общее представление о том, для кого мое приложение: молодые люди от 18 до 25 лет, студенты университета или колледжа, у которых или летние каникулы, или академический отпуск, или после окончания учебы они планируют хорошенько отдохнуть, перед тем как начать уже искать работу. Неплохое начало, но можно и уточнить детали!

Есть простой, но эффективный метод, который поможет точнее определить вашу аудиторию - создать персону.

Персона представляет собой вашего типичного пользователя. Какие черты могли бы у него быть? Хотя конкретные детали и будут отличаться, в зависимости от того, какое приложение вы делаете, но вы можете начать со следующих вопросов:

  • Сколько лет вашей персоне? Это может быть и конкретный возраст, и какой-то диапазон, например, старше 60, или молодежь.
  • Где они живут? Это может быть конкретная страна или город, или тип местности, например, у моря или в большом городе.
  • Есть ли у них дети?
  • Чем они увлекаются?
  • Работают ли они? Если да, то кем?
  • Учатся ли они в данный момент?
  • Какие приложения им нравятся?
  • Какие приложения им не нравятся?
  • Что заставит их загрузить приложение?
  • Платят ли они за мобильные приложения?
  • Много ли у них опыта в использовании мобильных приложений? Они продвинутые пользователи или начинающие?
  • Много ли у них опыта в использовании технологий вообще?

А теперь создадим персону для нашего приложения для путешествий. Лучше всего думать о нашей персоне, как о реальном человеке. Может даже дать ей имя, что я и сделаю! Знакомьтесь, Саша.

  • Ей 20 лет.
  • Она студентка на летних каникулах.
  • Летом живет с родителями, но, когда начнется учеба, вернется в студенческое общежитие.
  • Не замужем, детей нет.
  • У нее нет работы, и ее стипендия является единственным источником дохода.
  • Так как она с детства использует социальные медиа, то ей нравятся любые приложения, в которых можно поделиться фотографиями и своим статусом с друзьями, семьей и всей сетью вообще.
  • У нее большой опыт использования технологий, особенно мобильных приложений.

Так как мое приложение связано с отдыхом, то мне стоит также описать опыт Саши касательно путешествий. Много ли путешествуют мои "типичные" пользователи? Планировали ли они самостоятельно свой отдых до этого, или для них это все впервые? 

Я добавлю следующие особенности к моей персоне:

  • Саша была заграницей несколько раз, но только со своей семьей.
  • Она впервые планирует свой отдых.
  • Она достаточно организованна, когда это необходимо. Но так как она впервые планирует и организует отдых, то ей несомненно нужна помощь!

Сценарии использования

Итак, у нас кто, как насчет когда? Что должно произойти, чтобы Саша схватила свой смартфон и запустила наше приложение?

Вот, что пришло мне в голову:

  • Саша проводит время со своими университетскими друзьями и, понятное дело, заходит разговор о том, как весело они будут проводить лето. Все радостно взволнованны по этому поводу и, раз два, Саша открывает наше приложение и вместе с друзьями она планирует самое лучшее в жизни путешествие.
  • Она забрасывает идею в групповой чат в любимый мессенджер, в котором она и ее друзья всегда находятся, и, наконец-то, все приходят к соглашению по поводу того, куда ехать. Вдохновленная, Саша запускает наше приложение и начинает искать, чем можно будет там заняться.
  • Саша приходит в замешательство. Они часами обсуждают, как классно они проведут время в путешествии, но никто ничего не бронирует. Кому-то надо этим заняться, и, кажется, это будет наша Саша. Вот только одна проблема, она никогда ничего подобного не делала. Ей нужно какое-то приложение, которое поможет легко и без стресса спланировать и организовать отличный летний отдых.

3. Создайте список функций

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

Если нужно вдохновение, зайдите в магазин Google Play и загрузите несколько приложений на схожую тему или для похожей аудитории.


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

Вот, что я набросала:

  • Можно забронировать все, что только может понадобиться в поездке, от самолета, поезда и автобусных билетов, до проживания, и даже такие вещи, как столик в местном ресторане с хорошими отзывами на TripAdvisor.
  • Можно прочитать отзывы других пользователей и оставить свои.
  • Пользователь может заранее задать бюджет на свою поездку, и приложение будет предлагать варианты, исходя из этого бюджета.
  • Импровизируй!  Само планирование отдыха уже должно быть весельем. А что если предоставить все воле случая и поставить виртуальную метку на виртуальной карте? 
  • Хотя планирование поездки и должно быть весельем, это все же и тяжелый труд, особенно, если это делается впервые. В нашем приложении должен быть контрольный список всего, что пользователю надо забронировать и организовать, чтобы в итоге спланировать отличную поездку.
  • Социальные функции, с помощью которых пользователи будут вызывать зависть своих друзей и членов семьи: можно делиться фотографиями и статусами о том, как весело они проводят время.
  • Дневник путешествия для тех пользователей, кто хочет поделиться чем-то большим, чем просто фотографиями и статусами.
  • Так как моей целевой аудиторией является молодежь, то они скорее всего впервые отвечают за планирование своего отдыха.  Поэтому им могут пригодиться советы для начинающих путешественников, например, об оформлении паспорта, или о том, что можно и запрещено провозить в ручном багаже.
  • Отсчет времени перед путешествием, чтобы пользователи могли видеть, сколько недель, дней, часов и минут до него осталось.

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

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

Как решить, что убрать, а что оставить?

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

И ваша персона, и сценарии использования должны влиять на то, какие функции будут реализованы в первой (и последующих) версии вашего приложения Какие возможности могли бы понравиться Саше?

Пересмотрев еще раз описание персоны, сценарии использования и общую концепцию, я остановилась на следующих функциях:

  • Бронирование поездок и жилья.  Это обязательно должно быть - если не организовать транспорт и ночевку, то ехать будет некуда.
  • Установка бюджета. Саша тратит на свое путешествие свои студенческие деньги, поэтому установка бюджета обязательна для наших студентов, которым надо следить за финансами.
  • Установка виртуальной метки на виртуальной карте.  Саша молода и хочет организовать летнее приключение со всеми своими друзьями, поэтому мысль о том, чтобы сделать что-то слегка сумасшедшее и спонтанное, может ей понравиться. Также помните тот сценарий, где Саша проводила время с друзьями и они обсуждали друг с другом, как они весело проведут лето? Это отличная возможность для Саши реально начать что-то делать, запустив наше приложение и установив отметку на карте наугад.
  • Список шагов. Так как Саша впервые планирует свой отдых, то четкий список шагов сделает весь процесс не таким пугающим. 

В нашем списке функций есть и другие, которые понравятся Саше, например, возможность выложить фотографии из поездки, ведь мы знаем, что она фанат социальных сетей. Однако в первой версии приложения все будет просто, и я сфокусируюсь на главной цели приложения. Только когда вы разработаете основные функции, а также реализуете концепцию вашего приложения, тогда и можно вернуться к тем функциям, которые хорошо бы было бы иметь.

4. Набросайте примерный путь пользователя

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

В моем приложении для отдыха основными задачи будут следующие: 

  1. Организация поездки
  2. Просмотр деталей для уже организованной поездки. 

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

Example of a quick flowchart

Это занятие в основном необходимо для того, чтобы вы обдумали то, какие экраны вам надо создать, чтобы реализовать все те функции, которые вы ранее отобрали. Не тратьте слишком много времени на схему, так как вы ее уточните при создании карты экранов.

5. Описываем набор экранов

А теперь, на основе вашей схемы, мы перечислим экраны, которые необходимо сделать.

Вот набор моих экранов, а также краткое описание того, что будет на каждом из них:

  • Главный экран. Здесь будет меню со всеми поездками, которые пользователь организовал в нашем приложении. Пользователь может выбрать любую из поездок и увидеть список шагов для нее. Или здесь можно поставить ссылку на  "Запланировать новое приключение!"
  • Карта. Здесь будет карта и метка. Пользователь может выбрать место на карте или схватить метку и, закрыв глаза, отдаться на волю случая.
  • Выбор города. После того, как пользователь выбрал страну для поездки, на этом экране будет выбор из нескольких городов, где можно остановиться. Также здесь будет слайдер, где можно будет задать бюджет.
  • Список шагов. Здесь будут шаги, которые пользователю надо выполнить. Нажав на любой из них, пользователь перейдет на экран, где он сможет этот шаг выполнить, включая:
  • Бронирование транспорта.
  • Бронирование отеля.

6. Создайте карту экранов

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

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

A screen map of our travel app

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

Вообще-то, чем меньше шагов, тем лучше интерфейс. Эта карта экранов наглядно покажет, где их можно было бы уменьшить.  Может, понадобиться какие-то экраны убрать, скомбинировать, поменять местами, или добавить какой-либо навигационный "ярлык", чтобы сразу перейти с экрана А на экран Д.

Заключение

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.