Направи прототип на мобилно приложение е една от най-простите техники за прегледайте как ще изглежда приложението да се развиват по отношение на дизайна и без да се налага да започнете програмиране или ред код.

Изработването на прототип на приложение ще ви спести много време и работа. В допълнение, това ще ви позволи да видите много отблизо как ще изглежда приложението и дали е необходимо да оптимизирате неговия дизайн, външен вид и използваемост.

Ако отидете на аутсорсване на разработка на приложения Този процес ще ви помогне да получите бюджет, адаптиран към това, от което наистина се нуждаете; ако, напротив, вие сте на страната на разработчици, прототипът ще бъде първата доставка, която ще покажете на клиента си за проверка.

В случай, че искате промени в дизайна, ще бъде много по-лесно да ги направите от инструмент за прототипиране на приложения. Можете дори да направите няколко прототипа, така че клиентът да избере този, който най-добре отговаря на това, което иска.

Разнообразието от инструменти за прототипиране които се предлагат на пазара е широк. В тази статия ще направим обобщение с някои, които ви позволяват да създавате прототипи на приложения онлайн, а други, които трябва да изтеглите. Също така ви даваме няколко съвета. Продължавай да четеш!

Индекс - Как да създадете прототип на мобилно приложение

  • Защо е важен добрият прототип?
  • Разлики между прототипи, макети и каркаси
  • Как се прави прототип? Ключови точки
  • Инструменти за създаване на прототип на приложение
    • Justinmind
    • Течен потребителски интерфейс
    • NinjaMock
    • Инвизия
    • Proto.io
    • Антитип
  • Често срещани грешки при създаване на прототип
  • Преминаваме към фазата на развитие!

съвети
Изображение на Сара Пфлуг чрез Burst

Защо е важен добрият прототип?

Не започвайте къщата с покрива! Трябва да имате е добре дефинирана скица, преди да започнете да програмирате един ред код. Това е точно една от мантрите на професионалистите в Yeeply. Имаме две добри причини, поради които трябва да направите това.

  • Не изхвърляйте часове работа . Ако започнете с разработването на кода, преди да изчистите екраните и функционалността на приложението, е много възможно по-късно да се наложи да рефакторирате и да преработите много екрани на приложението. Когато имате и външни услуги, като разработка или дизайн, това изразходване на часове може да означава и значителни парични разходи.
  • Тествайте идеята си от самото начало. Прототипирането е важно от гледна точка на концепцията на идеята. Перфектно е да получите представа за крайния резултат с много малко усилия и да проверите какво работи и какво не в цялото приложение.

Разлики между прототипи, макети и каркаси

Каква е разликата между макет и прототип? Те са синоними прототипи, макети или каркаси? Те наистина са три различни неща, всички те от основно значение при проектирането на мобилни интерфейси.

Въпреки че в тази статия се фокусирахме върху прототипа, това е само еволюцията на телените рамки и по-рано работещите макети. Да видим от какво точно се състои всеки един.

  • Телена рамка. Това е един вид скица на мобилно приложение в който дефинираме, без никакъв стил или дизайн, какви неща трябва да се появят и къде ще бъдат в нашето приложение. Ще добавим и визуално обяснение за това какво ще бъде взаимодействието. Важно е да се работи от основата, тъй като тези рамки са скелетът на мобилното приложение. Идеята е, че те се правят много просто: дори скица на ръка може да служи като отправна точка.

  • Макет. Макетите имат за цел да покажат най-визуалната част от проекта. Те представят структурата на информацията, съдържанието и функционалностите по статичен начин. Те представляват много добре как ще бъде приложението, но с много по-ниска инвестиция, отколкото предполага прототипът.
  • Прототип. Преминаваме малко по-напред към самото разработване на мобилни приложения, когато стигнем до прототипирането. В този момент ще използвате инструмент за дайте „живот“ на вашата рамка. Идеята е, че прототип показва как ще бъде взаимодействието на приложението и че ви позволява да добиете представа как ще бъде най-накрая. Те са изключително полезни за тестване на използваемостта на даден проект.

Как се прави прототип? Ключови точки

Готови ли сте да започнете работа с предложението си за приложение? Имаме няколко съвета, които искаме да подчертаем от нашия опит. Виждаме ли ключовите моменти при прототипирането на приложения?

  • Започнете с дефиниране на менюто на приложението . След това се съсредоточете върху мобилна архитектура да организирате цялото съдържание, което искате да включите, и да решите кое ще влезе в менюто и кое не.
  • Обяснете действията, които ще извършите във всяка от частите на дизайна, когато създавате своя макет. Например, той посочва с кои зони може да се взаимодейства. Ако например има бутон, той също указва какво се случва, когато се щракне. Той също така посочва вид действие (докоснете, плъзнете или плъзнете например).
  • Работете върху използваемостта от самото начало . Ако приложението ви не може да се използва, можете да забравите, че е успешно. Потребителите ще я оставят в печата.
  • Определете какви цветове ще използвате . Това ще улесни задачата за правилен макет. Изберете поне гама от цветове за дизайна на вашето приложение, винаги в съответствие с марката на компанията, ако тя вече съществува.

Инструменти за създаване на прототип на приложение

1. Justinmind

изток прототипиране без код това е един от най-мощните инструменти в своята област. Той има безплатен каркасен инструмент и пълната версия за прототипиране се предлага от $ 19/месец (с тази по-евтина версия имате неограничени прототипи). Можете да го изтеглите безплатно на Mac и Windows.
Инструментът има a галерия от естествени елементи на iOS и Android които ви позволяват да създадете прототип, много верен на крайния резултат на вашия мобилен телефон. Можете да качвате дизайни директно от Photoshop или Sketch, наред с други инструменти.
Можете да предоставите на дизайните практически всеки преход (завъртане, докосване, обръщане, превъртане ...). След като подготвите своя прототип, Justinmind ви позволява изпробвайте го на всяко устройство с Android, iPhone или iPad от симулатор.

2. FluidUI

Просто, но с това, което е необходимо да се създаде от телени рамки до силно интерактивни прототипи, както в мрежата, така и в приложенията. FluidUI ви позволява да работите много бързо: можете да използвате повече от 2000 компонента, които вече съществуват в инструмента; или качете свои собствени дизайни. Само с няколко щраквания можете да анимирате и да оживите вашите прототипи.
Той има настолна версия и версия, която ви позволява работа по проектирането на прототипи онлайн няма нужда да инсталирате никаква програма.

The безплатната версия ви позволява да създадете до десет екрана за един прототип, което може да отпадне, ако имате сложно приложение, въпреки че за прост прототип работи добре. За да отидете по-далеч, ще трябва да наемете един от месечните планове, на разположение от $ 8.25 на месец.

Друго негово качество е това можете да изтеглите приложението, за да тествате своя прототип на устройства с Android и iOS, и тествайте дизайна, който сме създали с инструмента. В допълнение, това е инструмент за съвместна работа и позволява работа в екип върху същия прототип.

3. NinjaMock

NinjaMock е инструмент, който ви позволява създайте прототип на онлайн приложение, няма нужда да инсталирате никаква програма. Елементите, които включваме предлагат a завършено рисуване от ръка. Той не е най-подходящ за проектиране на мобилно приложение, но служи като програма за правене на скици на вашите приложения.

Основното предимство на NinjaMock е, че е така напълно безплатно. Един от най-големите недостатъци, които можем да открием, е например това взаимодействието на вашите прототипи не надхвърля връзките между екраните. Като инструмент за направа на първа скица, NinjaMock е повече от достатъчен.

4. Инвизия

Това е без съмнение един от най-мощните инструменти които можем да намерим безплатно. Прототипната част на Invision ви позволява да трансформирате статичен дизайн в интерактивен прототип с преходи и анимации.

Нещо, с което Invision се откроява, е възможността работят съвместно като екип по същия прототип.

Безплатният план ви позволява да направите само по един прототип наведнъж, въпреки че с платените версии можем да имаме 5, 10, 15 и до 100 активни проекта и за екип от повече хора. Цените са относително достъпни и струват между 15 и 100 долара на месец.

Силно се препоръчва за малки агенции и екипи за развитие, състоящи се от малко членове и те работят по няколко проекта наведнъж. Това е идеална среда за сътрудничество при създаване на прототип на приложение. Има и версия за Mac, с която можете да синхронизирате файловете, от които се нуждаете.

5. Proto.io

Прототипиране няма нужда да знаете код. Създайте вашите дизайни и ги оживете с взаимодействия и анимации, за да видите как ще изглежда вашето приложение. Както при другите инструменти в този списък, Proto.io ви позволява да преглеждате прототипа на множество устройства и да споделяте този преглед.
Можете да опитате от безплатно за 15 дни и ако ви убеди, наемете платената версия от $ 24/месец (включва един потребител и пет активни проекта).

6. Антитип

Инструментът за прототипиране на приложението Antetype търси най-високо ниво на дизайн. В момента поради актуализация можете да имате безплатен достъп до съществуващата версия.

Въпреки че сравненията са отвратителни, той има a Основен стил. Много прост и интуитивен, можете да намерите този инструмент изключително за Mac и можете да го закупите на собствения уебсайт на инструмента или в Apple Store.

Този инструмент не само ви позволява да създавате приложения, но можете и да проектирайте всякакви уеб сайтове. Много пълен инструмент, който, ако можете, трябва да опитате. Възможността за изтегляне на екстри става много интересна опция за разработчика на приложения за iOS, Android, Windows Phone, но също така и за уебсайтове.

Често срещани грешки при създаване на прототип

Искаме да изведем на преден план четири грешки, които се появяват много често и които възпрепятстват процеса на разработване на мобилни приложения.

  • Поставянето на твърде голям акцент върху дизайна в ранните етапи на прототипиране. Малките детайли на дизайна ще бъдат полирани, когато всичко останало е готово, въпреки че винаги е добре да имате представа за груб дизайн, но с възможност за извършване на промени.
  • Забравете функционалностите, които искаме да включим. Особено ако говорим за изнесени проекти, при които клиентът не познава сто процента развитието на мобилните приложения, които иска.
  • Оставяне на твърде много отворени фронтове. Опитайте се да работите с такъв солидно предложение, въпреки че по-късно ще бъде модифициран.
  • Не приемайте, че клиентът е технически. При аутсорсинг на случаи като тези, които разглеждаме в Yeeply, това почти никога не е така. Винаги ще има обяснете много добре как работи приложението. Ако мислите за клиента си като за най-взискателния и по-малко опитен тестер, който ще тества приложението ви, ще направите добър макет или прототип.

Преминаваме към фазата на развитие!

След като сте проверили прототипа или макета ... усилената работа започва! Най-накрая можете да започнете да работите с него разработване на мобилни приложения. Този макет или прототипът, който сте проектирали, ще бъде отправна точка за разработчика. Винаги ще бъде моделът, върху който да градите, рационализиране на работата и решаване на прости съмнения, които иначе биха ви отнели време.

Все още няма някой, който да се погрижи за оживяването на прототип?
В Yeeply ние търсим сред нашите сертифицирани професионалисти, за да намерим подходящия разработчик за вашия проект. Трябва само да ни кажете малко повече за вашия проект. Направете го чрез тази връзка!

АКТУАЛИЗАЦИЯ: Тази статия първоначално е публикувана на 18 септември 2014 г. и е актуализирана, за да подобри качеството си.

Написано от

Мрачно е първокласна платформа, специализирана в разработването на персонализирани мобилни приложения и уебсайтове. От 2012 г. нашите клиенти ни поверяват развитието на своите проекти и ние разчитаме на най-добрите сертифицирани професионалисти на техническо ниво: разработчици на уеб сайтове или мобилни приложения на свободна практика, топ софтуерни компании и най-модерните мобилни агенции. Създаването на приложение или създаването на уеб сайт никога не е било толкова бързо, поверително и сигурно, както при Yeeply! Публикувайте вашия софтуерен проект на Yeeply и оставете нашия екип да ви помогне през целия процес.