Csinálj egy mobilalkalmazás prototípusa az egyik legegyszerűbb technika megtekintheti az alkalmazás megjelenését a tervezés szempontjából, és anélkül, hogy el kellene kezdenünk egyetlen kódsort programozni.

Az alkalmazás prototípusának elkészítése sok időt és munkát takarít meg. Ezenkívül lehetővé teszi, hogy nagyon hűen lássa, hogyan fog kinézni az alkalmazás, és szükség van-e a tervezés, a megjelenés és a használhatóság optimalizálására.

Ha elmész az alkalmazás fejlesztését kiszervezik Ez a folyamat segít abban, hogy olyan költségvetést szerezzen, amely igazodik a valóban szükséghez; ha éppen ellenkezőleg, Ön oldalán áll fejlesztők, a prototípus lesz az első kézbesítés, amelyet érvényesítésre bemutat az ügyfelének.

Abban az esetben, ha változtatni szeretne a dizájnon, sokkal könnyebb lesz ezeket elkészíteni a alkalmazás prototípus-készítő eszköz. Akár több prototípust is készíthet, hogy az ügyfél kiválassza azt, amelyik a legjobban megfelel annak, amire vágyik.

A változatosság eszközök prototípus készítéséhez amelyek a piacon elérhetők, széles. Ebben a cikkben összefoglalót fogunk készíteni egyesek lehetővé teszik az alkalmazások prototípusainak online létrehozását, mások pedig le kell töltenie. Néhány tippet is adunk Önnek. Olvass tovább!

Tárgymutató - Hogyan hozhatunk létre mobilalkalmazás prototípust

  • Miért fontos a jó prototípus?
  • A prototípusok, a makettek és a drótvázak közötti különbségek
  • Hogyan készíts prototípust? Főbb pontok
  • Eszközök az alkalmazás prototípusának elkészítéséhez
    • Justinmind
    • Folyékony felhasználói felület
    • NinjaMock
    • Invision
    • Proto.io
    • Antitípus
  • Gyakori hibák a prototípus létrehozásakor
  • A fejlesztési szakaszba megyünk!

alkalmazási
Sarah Pflug képe a Burst-en keresztül

Miért fontos a jó prototípus?

Ne kezdje a házat a tetővel! Biztosan van egy jól definiált vázlat a programozás megkezdése előtt egyetlen kódsor. Pontosan ez a Yeeply szakembereinek egyik mantrája. Két jó okunk van arra, hogy miért kell ezt tennie.

  • Ne dobja el a munkaórákat . Ha a kód fejlesztésével kezdi, mielőtt törölné a képernyőket és az alkalmazás funkcionalitását, nagyon valószínű, hogy később meg kell refaktoroznia és újra kell tennie az alkalmazás sok képernyőjét. Ha Ön kiszervezett szolgáltatásokat is, például fejlesztést vagy tervezést, ez az órakiadás szintén jelentős pénzkiadást jelenthet.
  • Tedd próbára ötletedet a kezdetektől fogva. A prototípus készítés az ötlet felfogása szempontjából fontos. Tökéletes, hogy nagyon kevés erőfeszítéssel képet kapjon a végeredményről, és ellenőrizze, hogy mi működik és mi nem az egész alkalmazásban.

A prototípusok, a makettek és a drótvázak közötti különbségek

Mi a különbség a makett és a prototípus között? Szinonimák prototípusok, makettek vagy drótvázak? Valójában három különböző dologról van szó, amelyek mindegyike alapvető a mobil interfészek tervezésében.

Bár ebben a cikkben a prototípusra összpontosítottunk, ez csak a drótvázak és a korábban kidolgozott makettek evolúciója. Lássuk, miből áll pontosan mindegyik.

  • Drótkeret. Ez egyfajta mobilalkalmazás vázlata amelyben meghatározunk, minden stílus vagy tervezés nélkül, milyen dolgoknak jelenjenek meg és hol lesznek az alkalmazásunkban. Vizuális magyarázatot adunk arra is, hogy milyen lesz az interakció. Fontos, hogy az alaptól kezdve dolgozzunk rajta, mivel ezek a drótvázak alkotják a mobilalkalmazás vázát. Az elképzelés az, hogy nagyon egyszerűen készülnek el: akár egy kézzel készített vázlat is kiindulópontként szolgálhat.

  • Minta darab. A makettek célja, hogy megmutassák a projekt leglátványosabb része. Statikus módon mutatják be az információ szerkezetét, tartalmát és funkcióit. Nagyon jól képviselik, hogy az alkalmazás hogyan fog működni, de sokkal alacsonyabb befektetéssel, mint azt a prototípus feltételezné.
  • Prototípus. Kicsit továbblépünk magába a mobilalkalmazások fejlesztésébe, amikor a prototípus készítésbe kezdünk. Ezen a ponton egy eszközt fog használni adjon „életet” drótvázának. Az ötlet az, hogy egy prototípus megmutatja, hogy milyen lesz az alkalmazás interakciója, és hogy ez lehetővé teszi, hogy képet kapjon arról, hogyan is lesz végre. Rendkívül hasznosak egy projekt használhatóságának teszteléséhez.

Hogyan készíts prototípust? Főbb pontok

Készen áll a vállalkozásra az alkalmazásjavaslattal? Van néhány tippünk, amelyeket tapasztalatainkból szeretnénk kiemelni. Látjuk-e a legfontosabb pontokat az alkalmazások prototípus készítésekor?

  • Kezdje az alkalmazás menü definiálásával . Ezután összpontosítson a mobil architektúra az összes felvenni kívánt tartalom rendszerezéséhez, és eldöntheti, melyik kerül a menübe, és melyik nem.
  • Magyarázza el azokat a műveleteket, amelyeket a terv egyes részein fog végrehajtani, amikor elkészíti a makettjét. Például jelzi, hogy mely zónákkal lehet interakcióba lépni. Ha például van egy gomb, akkor azt is meghatározza, hogy mi történik, amikor rákattintanak. Azt is jelzi, hogy akció típusa (például érintse meg, csúsztassa vagy csúsztassa el ujját).
  • Dolgozzon a használhatóságtól kezdettől fogva . Ha az alkalmazás nem használható, akkor elfelejtheti, hogy sikeres. A felhasználók nyomorúságban hagyják.
  • Határozza meg, milyen színeket fog használni . Megkönnyíti a megfelelő makett elkészítését. Válasszon legalább színskála az alkalmazás tervezéséhez mindig összhangban kell lennie a vállalat márkanevével, ha az már létezik.

Eszközök az alkalmazás prototípusának elkészítéséhez

1. Justinmind

Keleti prototípus készítés kód nélkül a maga területén az egyik leghatékonyabb eszköz. Ingyenes drótváz-eszközzel rendelkezik, és a teljes prototípus-verzió 19 dollár/hó ártól érhető el (ezzel az olcsóbb verzióval korlátlan prototípusok vannak). Ingyenesen letöltheti Mac-en és Windows-on.
Az eszköznek van egy natív iOS és Android elemek galériája amelyek lehetővé teszik, hogy a végeredményhez nagyon hű prototípust készítsen mobilján. A terveket közvetlenül innen töltheti fel Photoshop vagy vázlat, egyéb eszközök között.
A terveket gyakorlatilag bármilyen átmenettel biztosíthatja (forgatás, érintés, megfordítás, görgetés ...). Miután elkészült a prototípusod, Justinmind lehetővé teszi tegye próbára bármely Android-eszközön, iPhone-on vagy iPad-en szimulátorból.

2. FluidUI

Egyszerű, de azzal, amire szükség van ahhoz, hogy a drótvázaktól a rendkívül interaktív prototípusok, mind az interneten, mind az alkalmazáson keresztül. A FluidUI lehetővé teszi, hogy nagyon gyorsan dolgozzon: használhatja a szerszámban már megtalálható több mint 2000 alkatrészt; vagy feltöltheti saját terveit. Néhány kattintással animálhatja és életre keltheti prototípusait.
Asztali verziója és verziója lehetővé teszi munka a prototípusok online tervezésén nincs szükség semmilyen program telepítésére.

A az ingyenes verzió lehetővé teszi akár tíz képernyő létrehozását egyetlen prototípushoz, ami elmaradhat, ha komplex alkalmazással rendelkezik, bár egy egyszerű prototípus esetében ez jól működik. A továbbjutáshoz fel kell vennie a havi tervek egyikét, havonta 8,25 USD-tól kapható.

További tulajdonságai közé tartozik letöltheti az alkalmazást, hogy tesztelje prototípusát Android és iOS eszközökön, és tesztelje az általunk készített tervet. Ezenkívül együttműködési eszköz, és lehetővé teszi a csapatmunkát ugyanazon prototípuson.

3. NinjaMock

A NinjaMock egy olyan eszköz, amely lehetővé teszi hozzon létre egy online alkalmazás prototípust, nincs szükség semmilyen program telepítésére. Az általunk beépített elemek a kész szabadkézi rajz. Ez nem a legalkalmasabb mobilalkalmazás megtervezéséhez, de programként szolgál az alkalmazások vázlatainak elkészítéséhez.

A NinjaMock fő előnye, hogy az teljesen ingyen. Az egyik legnagyobb hátrány, amelyet megtalálhatunk, például az a prototípusok interakciója nem lépi túl a képernyők közötti kapcsolatokat. Az első vázlat elkészítésének eszközeként a NinjaMock több mint elég.

4. Invízió

Ez mindenképpen az egyik leghatékonyabb eszköz hogy ingyen megtalálhatjuk. Az Invision prototípus része lehetővé teszi a statikus terv átalakítását interaktív prototípussá átmenetekkel és animációkkal.

Valami, amivel az Invision kiemelkedik, az a lehetőség dolgozzon együtt, mint csapat ugyanazon a prototípuson.

Az ingyenes terv lehetővé teszi, hogy egyszerre egyetlen prototípust készítsen, bár a fizetős verziókkal 5, 10, 15 és akár 100 aktív projektet és több emberből álló csapatot is készíthetünk. Az árak viszonylag megfizethetőek, havi 15 és 100 dollár közé kerülnek.

Erősen ajánlott kis ügynökségek és kevés tagból álló fejlesztőcsapatok és egyszerre kevés projekten dolgoznak. Ideális környezet az együttműködéshez az alkalmazás prototípusának elkészítésekor. Van egy verzió a Mac számára is, amellyel szinkronizálhatja a szükséges fájlokat.

5. Proto.io

Prototípus készítés nem kell tudni a kódot. Készítse el terveit, és kölcsönhatásokkal és animációkkal keltse őket életre, hogy lássa, milyen lenne az alkalmazása. A listán szereplő többi eszközhöz hasonlóan a Proto.io lehetővé teszi a prototípus megtekintését több eszközön és az előnézet megosztását.
Kipróbálhatja innen 15 napig ingyenes és ha meggyőz, béreljen fizetett verziót $ 24/hó-tól (tartalmaz egy felhasználót és öt aktív projektet).

6. Antitípus

Az Antetype alkalmazás prototípus-készítő eszköz a legmagasabb szintű tervezés. Jelenleg egy frissítés miatt szabadon hozzáférhet a meglévő verzióhoz.

Bár az összehasonlítások furcsaak, van egy Keynote-szerű stílus. Nagyon egyszerű és intuitív, megtalálhatja ezt az eszközt kizárólag Mac-hez és megvásárolhatja az eszköz saját weboldalán vagy az Apple Store-ban.

Ez az eszköz nemcsak alkalmazások létrehozását teszi lehetővé, hanem meg is tudja mindenféle weboldal megtervezése. Egy nagyon komplett eszköz, amelyet, ha lehet, meg kell próbálnia. Az extrák letöltésének lehetősége nagyon érdekes lehetőséggé válik az iOS, Android, Windows Phone alkalmazások fejlesztői, de a weboldalak számára is.

Gyakori hibák a prototípus létrehozásakor

Négy olyan hibát szeretnénk előtérbe hozni, amelyek nagyon gyakran előfordulnak, és amelyek akadályozzák a mobilalkalmazás-fejlesztési folyamatot.

  • Túl nagy hangsúlyt fektetve a tervezésre a prototípusok korai szakaszában. A tervezés apró részletei csiszolódnak, amikor minden más készen áll, bár mindig jó lesz elképzelni a durva kivitel, hanem a változtatások lehetőségével.
  • Felejtse el a beépítendő funkciókat. Különösen, ha olyan kihelyezett projektekről beszélünk, amelyekben az ügyfél nem ismeri száz százalékosan a kívánt mobilalkalmazások fejlesztését.
  • Túl sok front nyitva hagyása. Próbálj meg dolgozni egyet szilárd javaslat, bár később módosítani fogják.
  • Ne feltételezzük, hogy az ügyfél technikus. Az olyan kiszervezési esetekben, mint amilyeneket a Yeeplynél kezelünk, ez szinte soha nem így van. Mindig lesz nagyon jól elmagyarázza az alkalmazás működését. Ha úgy gondolja, hogy a kliens a legigényesebb és kevésbé tapasztalt tesztelő, aki tesztelni fogja az alkalmazását, akkor jó makettet vagy prototípust készít.

A fejlesztési szakaszba megyünk!

Miután érvényesítette a prototípust vagy a makettet ... kezdődik a kemény munka! Végre munkába állhat vele mobilalkalmazás-fejlesztés. Ez a makett vagy az Ön által tervezett prototípus lesz a referenciapont a fejlesztő számára. Mindig az a modell lesz, amelyre épít, ésszerűsíti a munkát és megoldja az egyszerű kétségeket, amely egyébként időt rabolna.

Még mindig nincs valaki, aki vigyázna egy prototípus életre hívására?
A Yeeplynél minősített szakembereink között keresünk, hogy megtaláljuk a projekt megfelelő fejlesztőjét. Csak arra van szükséged, hogy mondj el egy kicsit többet a projektedről. Tegye ezt a linket!

FRISSÍTÉS: Ezt a cikket eredetileg 2014. szeptember 18-án tették közzé, és minőségének javítása érdekében frissítették.

Írta

Igen egy prémium platform, amely az egyedi mobilalkalmazások és webhelyek fejlesztésére specializálódott. 2012 óta ügyfeleink ránk bízzák projektjeik kidolgozását, és technikai szinten a legjobb tanúsított szakemberekre támaszkodunk: szabadúszó web- vagy mobilalkalmazások-fejlesztőkre, csúcsszoftver-vállalatokra és a legfejlettebb mobilügynökségekre. Az alkalmazás vagy a webhely létrehozása még soha nem volt olyan gyors, bizalmas és biztonságos, mint a Yeeply! Tegye közzé szoftverprojektjét a Yeeply oldalon, és hagyja, hogy csapatunk segítsen a folyamat során.