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:

Ukrainian (українська мова) translation by Mavka (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.
  • Можна прочитати відгуки інших користувачів і залишити свої.
  • Користувач може заздалегідь задати бюджет на свою поїздку, і додаток буде пропонувати варіанти, виходячи з цього бюджету.
  • Будьте спонтанними! Саме планування відпочинку вже має бути веселощами. А що якщо надати всьому трохи випадку і поставити віртуальну мітку на віртуальній карті?
  • Хоча спланувати свою поїздку і має бути веселощами, це все ж і важка праця, особливо, якщо це робиться вперше. У нашому додатку повинен бути контрольний список всього, що користувачеві треба забронювати і організувати, щоб в результаті спланувати відмінну поїздку.
  • Соціальні функції, за допомогою яких користувачі будуть викликати заздрість своїх друзів і членів сім'ї: можна ділитися фотографіями і статусами про те, як весело вони проводять час.
  • Щоденник подорожі для тих користувачів, хто хоче поділитися чимось більшим, ніж просто фотографіями і статусами.
  • Так як моєю цільовою аудиторією є молодь, то вони швидше за все вперше відповідають за планування свого відпочинку. Тому їм можуть стати в нагоді поради для початківців мандрівників, наприклад, про оформлення паспорта, або про те, що можна і заборонено провозити в ручній поклажі.
  • Відлік часу перед подорожжю, щоб користувачі могли бачити, скільки тижнів, днів, годин і хвилин до неї залишилося.

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

Уявіть, ви запускаєте такий додаток вперше і бачите величезну складне меню з купою варіантів. Вибір - це прекрасно, але занадто великий вибір збиває з пантелику. Останнє, що б ми хотіли зробити з нашими користувачами, це збити їх з пантелику.

Тому нам треба відібрати зі списку наших супер можливостей лише найнеобхідніші.

Як вирішити, що прибрати, а що залишити?Для першої версії вашої програми, сфокусуйтеся на тих можливостях, які виконують основну функцію вашої програми. І пам'ятайте, якщо якісь можливості не будуть реалізовані в першій версії додатка, це не означає, що їх не можна зробити в наступних версіях. Якщо у вашому списку є функція, яка має потенціал, але вона не є основною, позначте де-небудь, що потрібно до неї повернутися, коли основний функціонал вашої програми буде закінчено.

І ваша персона, і сценарії використання повинні впливати на те, які функції будуть реалізовані в першій Версії 1.0 (і наступних) вашої програми. Які можливості могли б сподобатися Саші?

Переглянувши ще раз опис персони, сценарії використання і загальну концепцію, я зупинилася на таких функціях:

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

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

4. Накидайте приблизний шлях користувача

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

У моєму додатку для відпочинку основними завдання будуть наступні:

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

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

Example of a quick flowchart

Це заняття в основному необхідно для того, щоб ви обміркували те, які екрани вам треба створити, щоб реалізувати всі ті функції, які ви раніше відібрали. Не витрачайте занадто багато часу на схему, так як ви її уточніть при створенні карти екранів.

5. Описуємо набір екранів

Тепер, на основі вашої схеми, ми перерахуємо екрани, які необхідно зробити.

Ось набір моїх екранів, а також короткий опис того, що буде на кожному з них:

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

6. Створіть карту екранів

А тепер прийшов час об'єднати схему з шляхом користувача і набір екранів в карту екранів, на якій можна буде побачити взаємодії між всіма цими екранами.

Почніть з першого екрану, який користувач бачить після запуску вашого застосування, і йдіть далі.

A screen map of our travel app

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

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

Висновок

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

Зараз у нас є, хоч і приблизний, але план для розробки нашого застосування. У другій частині, ми більш детально спроектируем кожен екран з карти, перед тим як приступити до їх тестування за допомогою цифрового прототипу.

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.