Top 15 Mobile App Wireframing & Mockup Tools 18 Nov 2019

A gyakorlatilag bármilyen folyamat első lépése a folyamat feltérképezése és a támadási terv kidolgozása. Gondolj bele! Mielőtt felépítesz egy házat, készítesz egy tervrajzot. Mielőtt focimeccset játszol, te és a csapatod kidolgoztok egy játéktervet. Mielőtt megírsz egy esszét az angol órádra, részletes vázlatot készítesz. Nos, ugyanez vonatkozik egy mobilalkalmazás létrehozására is. Valójában a mobilalkalmazás-fejlesztési folyamat egyik legfontosabb lépése az alkalmazás szerkezetének megalkotása. És amikor struktúrát mondok, akkor a szervezett és egyszerűsített tartalomra és elemekre gondolok.

Az alkalmazás struktúrájának megalkotása azonban sok időt és energiát igényelhet, kivéve persze, ha a megfelelő eszközzel rendelkezik. Ezért sok mobilfejlesztő egy mobilalkalmazás drótvázlatkészítő vagy mockup eszközzel kezdi. A mobilalkalmazás drótvázlatok nemcsak értékes időt (és pénzt!) takaríthatnak meg, hanem segítenek a fejlesztőknek a felhasználói élményre összpontosítani.

Mitől lesz jó egy drótváz vagy mockup eszköz?

Itt jön a neheze. A drótvázak készítésénél nem igazán létezik univerzális megoldás. Minden tervezőcsapatnak egyedi tervezési folyamata és mobilalkalmazása van. Tehát mit kereshetsz? Nos, először is fontos, hogy naprakész szoftvert alkalmazzon (ne aggódjon – az alábbi eszközök mindegyike naprakész és stabil) Ezután kulcsfontosságú, hogy olyan szoftvert keressen, amely tartalmaz UI-készletet vagy feltöltési lehetőséget, ami azt jelenti, hogy vagy beépített UI-komponens-könyvtárral rendelkezik, vagy UI-készleteket tölthet fel.

A guide to in-app feedback for mobile product owners
and mobile marketingers.

Ezek után nézd meg bátran a 15 kedvenc Mobile App Wireframing & Mockup Tools listánkat, és nézd meg, melyik működik a legjobban számodra.

Justinmind

A Justinmind egy minden egyben eszköz, amely képes nagy hűségű drótvázak és prototípusok létrehozására alkalmazásokhoz. Kizárólagosabb a mobilalkalmazások tervezésénél, mint a jelenlegi mainstream tervezőeszközök, köszönhetően a gesztusműveletek, átmenetek és interaktív effektek jó támogatásának. Interaktív drótvázakat hozhat létre animációk és interakciók segítségével, kód nélkül. Számos testreszabható sablon segítségével gyorsan elkezdheti a munkát a drag-and-drop felület segítségével. Az eszköz online prezentációs támogatást is kínál, így a felhasználók távolról is megoszthatják a drótvázakat.
Árak:

Mockplus

A Mockplus-hoz hasonló asztali alkalmazással könnyen és gyorsan készíthet prototípusokat mobilalkalmazásán. A Mockplus nagyon könnyen használhatóvá tette az alkalmazásukat, így nincs szükség adat- vagy technikai szakértelemre a kivitelezéshez. Android, iPad és iPhone sablonokat találhat minden méretben az Ön egyedi igényeinek megfelelően. A Mockplus több mint 200 komponenssel és több mint 3000 ikonnal is rendelkezik. Egy egyszerű drag-and-drop segítségével könnyedén készíthet interaktív prototípusokat.
Ár: 199 dollár (Pro) évente/ 399 dollár (korlátlan) felhasználónként élethosszig
Honlap: www.mockplus.com

Balsamiq

A Balsamiq Wireframes egy népszerű drótvázlatkészítő eszköz mobil alkalmazásokhoz, amely drag-and-drop funkciójának köszönhetően könnyen használható. Van egy vázlat mód az ötleteléshez és egy tiszta drótváz mód a prezentációhoz, és könnyen válthatsz közöttük. További nagyszerű dolog, hogy 30 napos ingyenes próbaverziót kínál a kipróbáláshoz, mielőtt elkötelezné magát. Ha egy rugalmas, kényelmes, gyors drótvázlatkészítő eszközt keres, akkor ez lehet az.
Ár: 9 $ (2 projekt) / 49 $ (20 projekt) / 199 $ (200 projekt) havonta
Honlap: www.balsamiq.com

Proto.io

A Proto.io egy drótvázlatkészítő és prototípuskészítő eszköz, amely a felhasználói élmény tesztelésére van kihegyezve. Drótvázlatkészítő eszközként nemcsak interaktív drótvázakat hozhat létre, hanem azt is tesztelheti, hogy a felhasználók hogyan lépnek kapcsolatba a drótvázlataival, és korai felhasználói visszajelzéseket gyűjthet. Ez egy nagyszerű szoftver mobil drótvázlatok és prototípusok készítéséhez, mivel lehetővé teszi a felhasználók számára a prototípusok offline megtekintését is, és számos mobil widgetet tartalmaz.A drótvázlatokat közvetlenül beágyazhatja egy weboldalba, vagy elküldheti azokat felhasználói tesztelési platformokra. A Proto.io elérhető Androidon, iOS-en, asztali számítógépen vagy a webböngészőben. Kockázatmentes, 15 napos ingyenes próbaverziót is kínál.
Árak: 24 $ (Szabadúszó)/ 40 $ (Startup)/ 80 $ (Ügynökség)/ 160 $ (Vállalati) havonta, éves számlázással
Honlap: www.proto.io

Moqups

A Mooqups egy tisztán webalapú platform, amelyet webes és mobil alkalmazások drótvázának létrehozására használnak. A webes platformok legnagyobb előnye, hogy bárhol dolgozhatsz. A Moqups ingyenesen elérhetővé vált a fejlesztői közösség számára világszerte. Ennek az online mockupnak a segítségével egyszerű drótvázakat, szilárd modelleket és UI-koncepciókat hozhat létre, és a beépített sablonjai közvetlenül használhatók. A fizetős csomagok havi 13 és 20 dollár között kezdődnek, meghatározott számú felhasználóval.
Árak: 20 dollár (trió, 7 dollár minden további felhasználó után)/ 13 dollár (egy felhasználó)/ Custom (vállalkozás) havonta, éves számlázással
Honlap: www.moqups.com

InVision

AzInVision egy nagyszerű eszköz, amelyet tervezők készítettek tervezőknek. Jobban szereted a drótvázakat egy táblán készíteni, ahol mindenki hozzájárulhat és átdolgozhatja? Akkor lehet, hogy ez az eszköz neked való. Az InVision segítségével interaktív maketteket hozhat létre, és megoszthatja azokat a csapatával, akik közvetlenül a képernyőn hagyhatnak megjegyzéseket. Valós idejű teendőlistákhoz is hozzáférhet, így mások is bekapcsolódhatnak a vitába.
Árak:

Fluid UI

A Fluid UI egy másik vezető és népszerű drótvázlatkészítő és mockup eszköz. A Fluid UI a legújabb technológiákat használja, mint például a HTML5, a JavaScript és a CSS. Ezekből a könyvtárakból származó elemek behúzásával egyszerűen hozhat létre elrendezéseket. A Fluid UI nagyszerű lehetőséget biztosít arra, hogy vizuálisan feltérképezze projektjeit azáltal, hogy linkeket hoz létre a képernyők összekapcsolására, diagramot alkotva arról, hogy minden hogyan illeszkedik egymáshoz. A Fluid UI egyedülálló funkciója, hogy a felhasználó különböző eszközökön, például mobilokon, táblagépeken és asztali számítógépeken keresztül interakcióba léphet a felhasználói felület kialakításával.
Ár: $8,25 (solo) / $19,08 (pro) / $41,58 (team) havonta
Honlap: www.fluidui.com

Pidoco

A Pidoco egy felhőalapú mockup szoftver, amely egyedi sablonokkal, interaktív elemekkel és egyszerű vázlatkészítéssel rendelkezik a gyors és hatékony drótvázlatkészítéshez. Ami az együttműködést illeti, a felhasználók megoszthatják és szerkeszthetik a képernyőket más felhasználókkal együtt, és valós időben gyűjthetik a megjegyzéseket. Egyéni építőelemeket is létrehozhatnak és újrafelhasználhatnak. Lehetőség van a Pidoco integrálására számos más szoftverrel, például a Jira, Planio és más szoftverekkel az API-n keresztül.
Árképzés: $59 (Pro)/ $199 (korlátlan) havonta
Honlap: www.pidoco.com

Protoshare

A ProtoShare egy webalapú drótvázlatkészítő és mockup eszköz, amellyel interaktív drótvázakat készíthet mobilalkalmazásokhoz (valamint webhelyekhez). Tartalmaz egy drag-and-drop elemekből álló könyvtárat, egy oldaltérképet, valamint egyéni CSS használatának és saját elemek beillesztésének lehetőségét. Egyszerűsítheti munkáját azáltal, hogy a semmiből készíthet mestereket és sablonokat, és ezeket több oldalon vagy projektben is újra felhasználhatja.
Árak: 29 $ (standard) / 49 $ (professzionális) / 59 $ (üzleti) személyenként havonta
Honlap: www.protoshare.com

Wireframe.cc

A Wireframe.cc egy egyszerű és egyszerű drótváz-eszköz, amely ideális azok számára, akik csak most kezdik. Lehetővé teszi, hogy megjegyzésekkel lássa el az egyes jelölési területeket megjegyzések és felülvizsgálatok céljából is. Azonban nem biztos, hogy olyan gazdag funkciókkal rendelkezik, mint más eszközök. Van egy korlátozott színpaletta, amely segít elkerülni a halogatásnak azt a bizonyos útját, és a felhasználói felület elemei kontextusfüggőek, és csak akkor jelennek meg, amikor szükség van rájuk.
Árképzés:
Honlap: www.wireframe.cc

Axure

Axure egy vállalati szintű drótvázlatkészítő és mockup eszköz, amely animációval, adaptív nézetekkel és feltételes áramlási funkciókkal rendelkezik, amelyek lehetővé teszik a felhasználói élmény áramlásának beállítását. A felhasználók megjegyzéseket adhatnak a drótvázakhoz a projektjegyzetek elmentése érdekében. Ha drótvázlatkészítést, prototípuskészítést és diagramkészítést szeretne végezni egyetlen eszközzel, az Axure remek választás.
Ár: $29 (pro) / $49 (team) $99 (enterprise) felhasználónként havonta
Honlap: www.axure.com

UXPin

AUXPin egy drótvázlatkészítő, UX-tervezési és mockup eszköz, amely megosztási, kommentelési és felülvizsgálati funkciókkal, valamint olyan funkciókkal rendelkezik, mint a jóváhagyási kérelmek, feladatkiosztások és Slack/e-mail értesítések, lehetővé téve a felhasználók számára a munkafolyamatok egyszerűsítését. Az egyszerű drag and drop funkcióval ikonokat, egyéni UI-elemeket és képeket húzhat a drótvázlat továbbfejlesztéséhez.
A rendszergazdák csapat- és szerepköralapú jogosultsági hozzáférést állíthatnak be, és lezárhatják a fontos projekteket.
Árképzés:
Honlap: www.uxpin.com

Figma

A Figma az első böngésző alapú, minden egyben tervezőeszköz. A tervezők rendezettek maradhatnak a rétegpanel segítségével, amely az összes artboardot és UI-elemet egy helyen tárolja. Amellett, hogy a Figma kiváló eszköz az önálló tervezők számára, valós idejű együttműködést kínál a csapat számára. A Figma előnyös módon lehetővé teszi, hogy több felhasználó egyszerre dolgozzon egy projekten, és minden változtatás egy projektben kerül elmentésre. A csapattársak az elemek kommentálásával kommunikálnak egymással.
Árképzés:
Honlap: www.figma.com

Sketch

A Sketch egy nagyszerű applikációs tervezőeszköz vektorszerkesztéshez, prototípusok készítéséhez és együttműködéshez. Az eszköz digitális tervezési eszköztárat kínál az alkalmazásépítéshez, amely rengeteg tervezési szimbólumot tartalmaz, amelyek újrafelhasználhatók és megoszthatók a tervezői közösségen belül. A tervekhez még adatokat is hozzáadhat, és felhasználói folyamatábrákká alakíthatja őket.
Árképzés: A személyes licencért a felhasználók 99 $/év díjat fizetnek. Alternatívaként a Sketch készülékenkénti csomagot (mennyiségi licencet) kínál 89 $/év/készülékért.
Honlap: www.sketch.com

MarvelApp

Végül, de nem utolsósorban ott van a MarvelApp. A MarvelApp egy igazán klassz, többfunkciós tervezési platform, amellyel mobilalkalmazások drótvázlatai készíthetők több eszközre. Ez az alkalmazás lehetővé teszi a felhasználók számára, hogy gyorsan és hatékonyan állítsák össze a terveket a drag-and-drop funkció segítségével. A MarvelApp lehetővé teszi továbbá, hogy a felhasználók életre keltsék prototípusaikat valósághű képernyőátmenetekkel (triggerek segítségével, pl. hover, swipe vagy click).
Pricing:
Honlap: www.marvelapp.com

Kezdje meg a drótvázlatkészítést még ma!

A mobilalkalmazás tervezésekor a felhasználói élménynek mindig a lista élén kell állnia. Enélkül az alkalmazásod csatlakozik a milliónyi mobilalkalmazáshoz, amelyek elvesznek a felfedezetlenek tengerében. Ezt most nem szeretné, ugye? Éppen ezért tisztában kell lennie az alkalmazások drótvázainak készítésekor szükséges folyamatokkal. A drótvázak létrehozásához használhatja az ezen a listán szereplő eszközök kombinációját; kezdheti egy webalapú alkalmazással, majd a drótváz részletesebb iterációjához áttérhet egy felhőalapú alkalmazásra.