12 legjobb prototípus-készítő eszköz

1/2 oldal: 1 oldal

A prototípus készítés elengedhetetlen része minden digitális tervezési folyamatnak. Ez segít nekünk szimulálni a terveket, felfedezni a különböző felhasználói tapasztalatok , és tesztelje az utazásokat és a felhasználói áramlásokat a projektjeinken belül. Rég elmúltak a nyomtatás és a PDF-fájlok benyújtásának napja.

Rengeteg van webdesign eszközök körül, de a prototípus-készítés eszközei az elmúlt években valóban magukhoz jöttek. Ezekkel a prototípus-készítő eszközökkel beállíthatja, hogy megfeleljen az esetleges tervezési kihívásoknak, függetlenül attól, hogy valami szépet vagy technikát szeretne létrehozni egy ötletből. Bármely prototípus esetén fontos tesztelni és játszani a kezelőfelülettel, hogy érvényesíthesse az élményt.

Ezen eszközök többségéhez tartozik egy árcédula, de egyesek ingyenes hozzáférést biztosítanak egyetlen projekthez vagy korlátozott oldalakhoz, így megtalálva a megfelelő alkalmazást a projektjéhez.



Ha kifejezetten drótvázas eszközökről van szó, akkor nézze meg a listánkat legjobb drótváz-eszközök elérhető.

Fő ábra: Newton Ribeiro

01. Proto.io

Ár: 24 dollár / hó (ingyenes próbaverzió)

Előnyök:

  • A felhasználói tesztek rögzítése
  • Megosztható prototípusok
  • Mobilalkalmazás elérhető
  • Támogatja a VR prototípus-készítést
  • Kiegészítők állnak rendelkezésre

Hátrányok:

  • Nem jó offline használatra

A Proto.io hihetetlen versenyző az életszerű prototípusok létrehozásában a durva ötletektől kezdve a teljes értékű tervekig. Az eszköz számos lehetőséget kínál a projektjeihez, többek között részletes animációk és egyedi vektoranimációk készítéséhez.

Minden bizonnyal az élmezőny egyike, amikor a prototípusok létrehozását segítő eszközöket értékel. A Proto.io segítségével a projekt elindítása olyan egyszerű, amennyire csak szeretné. Ha csak egy durva ötlet rajzolódik ki, azonnal megrepedhet, és elkezdhet előre definiált eszközöket használni a koncepció gyors fejlesztéséhez.

Miután elégedett az ötleteivel, ezeket aztán csiszoltabb és prezentálhatóbb drótvázakká lehet alakítani a további érvényesítés és átgondolás céljából. A következő jelentős lépés lehetővé teszi, hogy módosítsa prototípusainak tervét, hogy azok a lehető leghűbbek legyenek a végeredményhez.

A Proto.io egy webalapú eszköz, és rengeteg kiegészítőt és funkciót tartalmaz, amelyek magukban foglalják a Sketch és Photoshop fájlok importálását, VR prototípus-készítést, UI-könyvtárakat és még a képernyőfelvételt is felhasználói tesztelés céljából. Ez valóban segíthet, ha áttér más alkalmazásokra és azokról.

Végül egy kis időre van szüksége, hogy megismerje ezt az eszközt. Sokat lehet vele tenni, és rengeteg lehetőség és menüpont van, amelyekkel játszhatunk. Ha mégis megtanulta a módját, akkor nehéz lesz eltennie. A részletes animációk készítésének lehetősége valóban ezt a kiváló eszközt és tökéletes ötletet a lehető legreálisabb módon valósítja meg.

02. Adobe XD CC 2018

Ár : 9,99 USD / hó | 9,98 font / hó
Próbálja ki az ingyenes próbaverziót : MINKET | Egyesült Királyság

Előnyök:

  • Adjon interakciókat néhány kattintással
  • Tiszta felhasználói felület
  • Futtassa és exportálja a prototípusokat az egyszerű tesztelés érdekében
  • Készítsen prototípusokat nagyon kevés korlátozással

Hátrányok:

  • Az animációs lehetőségek korlátozzák

Az Adobe XD a legjobb környezetet kínálja az Adobe alá tartozó digitális projektekhez Kreatív felhő tervezőeszközök gyűjteménye. Bár ha Ön lelkes Adobe-felhasználó és még nem ismeri az XD-t, nem biztos, hogy a kezelőfelületet kezdetben nagyon ismeri, de a többi vezető eszközhöz hasonlít. Ugrás, ha egy ideje a Photoshopban tervezel. Azonban megéri, ha nagy Adobe rajongó vagy.

Ez az eszköz lehetővé teszi nagy pontosságú tervek és prototípusok készítését nagyon kevés megkötéssel. Minden bizonnyal mindig a vizuálisabb projektek fegyvertára lesz. Ez nagyon dizájn által vezetett, és nagyon könnyen használható néhány igazán ügyes funkcióval, hogy a tervezési folyamat hatékonyabb és kielégítőbb legyen.

Két módja van a vásznaknak: ezek a Design és a Prototype. Miután létrehozta az interfészek és rajztáblák készletét, elkezdheti felhívni a kapcsolatot a kattintható elemek és az oldalak között. Dönthet olyan átmeneti stílusok között, mint a csúszás, a tolás és az oldás. Ezután az XD lehetővé teszi a prototípusok futtatását és exportálását, így tesztelheti és megmutathatja az ügyfeleknek.

A mai legjobb Adobe Creative Cloud foglalkozik az Adobe-valAjánlott kereskedő Creative Cloud Minden alkalmazás 49,94 font / hó Kilátás nál nél Vályogtégla Kreatív felhő fotózás 9,98 font / hó Kilátás nál nél Vályogtégla Creative Cloud Single App 19,97 font / hó Kilátás nál nél Vályogtégla

03. Axure

Ár: $ 29 / hó

Előnyök:

  • Nagyszerű komplex oldalakhoz és ötletekhez
  • Kiválóan képes kezelni a dinamikus adatokat
  • Feltételes logika
  • Képes exportálni HTML fájlként
  • Nagyon funkcionális

Hátrányok:

  • Nem ideális a nagy hűségű tervek prototípusának elkészítéséhez

Az Axure-nek sikerült olyan hírnevet szereznie, mint a piac egyik legjobb drótváz-készítő eszköze, és tökéletes választás, ha bonyolultabb, dinamikus adatokat igénylő projektekről van szó. Az Axure segítségével valóban a projektek kigazdálkodására összpontosíthatja a figyelmét, amelyek egyszerre technikai jellegűek és nagyobb figyelmet igényelnek a felépítéssel és az adatokkal kapcsolatban.

Bár ez nem feltétlenül az első választás a nagy pontosságú terv prototípusának elkészítéséhez, mégis nagyszerű abban, hogy gyorsan át tudja vinni a nagyobb projekteket / szoftverplatformokat az első szakasz drótváz-koncepcióin.

Az Axure egyik fő előnye, hogy nagyon jól kezeli a dinamikus tartalmat, lehetővé téve annak megváltoztatását és módosítását bizonyos felhasználói utak vagy interakciók szerint. Ezt a feltételes logika és az oldalak, a tartalmi blokkok vagy a szöveg manipulálásával lehet elérni változók és paraméterek beállításával.

De az Axure-ban rejlő lehetőségek nem állnak meg itt. Nagyszerű lehetőség a folyamatábrák és diagramok vizualizálására, ami éppen az a tény, hogy segítsen megfogalmazni néhány olyan technikai utat, amelyekkel szembesülhet.

A projekt technikai szempontjairól szólva az Axure-nak a bevásárló listájának tetején kell lennie a tervezés technikai szempontjainak, valamint az adatalapú vagy dinamikus platformok kezelésének, ahol a tervezés pusztán kozmetikai felújítás a végén. A forma feletti funkció jut eszembe.

04. Origami Stúdió

Ár: Ingyenes

Az Origamit eredetileg a Facebook fejlesztette ki, hogy segítse a csapatot a termékek felépítésében és megtervezésében. Most ingyenesen elérhető: regisztrálhat Apple fejlesztőként, majd letöltheti és telepítheti az Xcode-ot a Quartz Composer alkalmazással, hogy az Origami Mac-en fusson.

Az eszköz telepítése több munkát igényel, mint más prototípus-beállítások. A telepítés után azonban elkezdhet olyan tervezési koncepciókat létrehozni, amelyek szimulálják a görgetést, a koppintásokat, az ellopokat és az oldalhivatkozásokat. Az Origami dokumentációi, oktatóanyagai és útmutató videói megkönnyítik az indítást.

A vázlat- és Photoshop-tervek importálhatók az Origami-ba, és a projektrétegei megőrződnek, összekapcsolásra készek, animálhatók és szükség szerint átalakíthatók. Az Origami sem mobil design-központú: tervezhet reszponzív webhelyeket és szimulálhat olyan funkciókat, mint a szövegbevitel, a FaceTime kamera és az OS X drag and drop.

A prototípus-összetevőket (beleértve az animációkat is) egyetlen kattintással exportálhatja, így a mérnökök átmásolhatják és beilleszthetik a projektbe. Az Origami tartalmaz egy bemutató eszközt, amely lehetővé teszi, hogy egyedi hátteret adjon a tervéhez, teljes képernyős nézetben jelenítse meg és különböző eszközöket szimuláljon.

Ingyenes prototípus-megoldásként az Origami sok mindent kínál. Az egyik hátrány azonban az, hogy még nem engedi, hogy az ügyfelek vagy a tervezőcsapat közvetlenül hozzászóljanak a projekthez vagy a verziós előzményekhez.

05. Webflow

A prototípusok tervezése gyors és zökkenőmentes a Webflow segítségével, de ez az eszköz valóban ragyog, amikor a prototípus elkészült. A kész prototípust egy gombnyomással gyártásra kész hellyé alakíthatja.

A közelmúltban a Webflow bevezette a játékot megváltoztató új funkciót: a prototípusok CMS-ét. A Webflow CMS-je teljesen vizuális, lehetővé teszi, hogy hatékony, dinamikus webhelyeket hozzon létre egyetlen kódsor megírása nélkül. Egy másik különösen hasznos tulajdonság az a képesség, hogy blogot készíthet a blogoldal prototípus-koncepciójával.

Ha Ön szabadúszó tervező, és nehézségei vannak a fejlesztő megtalálásával, hogy terveit gyártási helyekre fordítsa, akkor a Webflow az Ön számára lehet. Akár felhasználói fiókokat is beállíthat, vagy adminisztrátort jelölhet ki a tartalom kezelésére, és az ügyfelek képesek lesznek vizuálisan változtatni.

Alternatív megoldásként könnyű a prototípus kódba történő exportálása. A Webflow tiszta, szemantikus kódja órákon át takaríthatja meg mérnökeit a kódok tisztításával.

A Webflow webhelysablonokkal és web-összetevőkkel érkezik, amelyek áthúzhatók a prototípusba. Ezek felgyorsítják a prototípus-készítési folyamatot, mivel azt jelentik, hogy nem kell újra létrehoznia a gyakran használt tervezési eszközöket.

Ha bármikor elakadt és segítségre van szüksége, megnézheti a Webflow részletes dokumentációját, vagy megnézheti annak hasznos útmutató videóit. És természetesen, ha először használja a Webflow szoftvert, ez a támogatás minimalizálja a tanulási görbét.

A Webflow természeténél fogva reagál, ezért a webhely elrendezését minden eszközre optimalizálják: asztali, mobil és táblagépre. Ha ez nem lenne elég, megtervezhet olyan animációkat, amelyek működnek a mobil eszközökön és az összes modern böngészőben. És ezzel még mindig nincs vége: A Webflow beépített bővíthetőséggel rendelkezik, ami megkönnyíti az élő prototípusok összekapcsolását a Slack, a MailChimp, a Google Drive és több mint 400 egyéb szolgáltatással.

06. Vázlat

Ár: 99 USD / év (ingyenes próbaverzió)

Előnyök:

  • Zavartalan felhasználói felület
  • A funkcionalitás szempontjából nagyon rugalmas
  • Könnyen prototípusok készíthetők
  • Készítsen szimbólumokat és újrafelhasználható eszközöket
  • Kiegészítők állnak rendelkezésre
  • Könnyen megoszthatja prototípusát

Hátrányok:

  • Az animációs lehetőségek korlátozzák

A Sketch egy olyan alkalmazás, amelyet a tervezői közösség nagyon szeret. Használata egyszerű, és mindent megad Önnek, amire szüksége van a gyönyörű interfészek létrehozásához. Egészen a közelmúltig a Sketch harmadik féltől származó kiterjesztésekre támaszkodott az InVision prototípusának elkészítéséhez, de most már minden saját környezetet biztosít.

Előre definiált rajztáblák használatával nagyon gyorsan, nagyon kevés erőfeszítéssel elindulhat a Sketch alkalmazással; egyszerűen kezdje el betölteni grafikusan vagy gépelni. Ebben az eszközben szép és könnyű tervezni.

Az egyik olyan funkció, amely a Sketch-en belül nagyon jól működik, az, hogyan kezeli a szimbólumokat. Ez egy kicsi módszer a kis vagy akár nagy felületű objektumok csomagolására és újrafelhasználására. Szimbólumaival nem dekonstruktív módon is szerkesztheti őket. Előfordulhat például, hogy egy gombelem szimbólumba van csomagolva, amely szöveget, ikont és szegélyt használ. Újra felhasználhatja a szimbólumot a design körül, és szükség esetén megváltoztathatja a szöveges elemet. Ha a szimbólumot a forrásnál szerkeszti, megváltoztathatja például a betűtípust és a színt, és ez frissíti az összes szimbólumot a tervezés körül. Nagyon ügyes és gyakran nagy időmegtakarító.

A prototípus készítésével kapcsolatban kapcsolatokat lehet rajzolni a vásznon lévő objektumok és az oldalak között. Ezek a kapcsolatok olyan linkeket biztosítanak az oldalai között, amelyeket elkezdhet összekapcsolni, és lehetővé teheti a felhasználók útjainak szimulálását, miközben az Ön webhelyén mozognak. A Sketch-en belül megoszthatja prototípusait egy egyedi linkkel, és szükség esetén frissítheti a projektet.

A vázlat sokak kedvence, és mindenképpen érdemes megnézni. Ez egy nagyon tiszta és sokoldalú tervezőeszköz. Számos kiterjesztés érhető el hozzá, amelyek még gyorsabbá vagy könnyebbé teszik a tervezési folyamatot.

07. Framer

Ár: 15 USD / hó (ingyenes próba)

A Framer az egyik legnépszerűbb prototípus-készítő eszköz. Azon az előfeltevésen alapszik, hogy kóddal bármi prototípus készíthető, ami újszerű és úttörő terveket eredményez.

Bár ez igaz lehet, az eszköz saját kódolási nyelve a prototípusok tervezéséhez és animálásához akadályt jelenthet. Van, aki esetleg nem látja a jutalmat a meredek tanulási görbe végén, különösen egy olyan nyelv esetében, amely nem használható a Framer-en kívül.

Azok számára, akik mégis vállalni akarják a kihívást, a Framer kódoló nyelvének dokumentációja nagyon jól fel van építve, rengeteg példával bemutatva a nyelv működését. Vannak útmutató videók, valamint tanfolyamok az Udemy és O'Reilly témákról.

Ez a megközelítés különösen hasznos a tervezők számára, akik újak a kódolás terén. Első kézből nyújt képet arról, hogy a kód milyen rugalmas és hatékony lehet. Ezenkívül a Framer Mac App-je jól megtervezett, és élő előnézeteket biztosít a kód írása közben, ami biztató azok számára, akik először írnak kódot.

Ez nem azt jelenti, hogy nem jó a kódolási tapasztalattal rendelkező tervezők számára, akik inkább a HTML / CSS írását tervezik prototípusukként. A képkocka csak az az eszköz lehet, amelyet keresett: más alkalmazások fogd és vidd eszközei nem korlátozzák Önt. Továbbá, mivel a Framer kódot használ prototípusok készítéséhez, valós idejű adatokat építhet be prototípusába olyan forrásokból, mint a Twitter és a Parse.

A többi eszközhöz hasonlóan a Framer is támogatja a Sketch és a Photoshop projekteket, és megőrzi a tervezési rétegeket is. További előny, hogy - a legtöbb más eszközzel ellentétben - importálhat After Effects fájlokat is. Ha készen áll a prototípus megosztására, a Framer létrehozhat egy URL-t, amelyet meg lehet osztani az ügyfelekkel. Ezeket a megosztható URL-eket mobileszközökön lehet megnyitni élő előnézetekhez. A Framer lehetővé teszi a VR prototípusának elkészítését is.

08. Vectr

Tervezheti prototípusait a Vectr-en

Tervezheti prototípusait a Vectr webes vagy asztali alkalmazásaiban

Ár: Ingyenes

Tervezheti prototípusait a Vectr webes vagy asztali alkalmazásaiban Mac és Windows számára, ami lenyűgöző, tekintve az alkalmazás ingyenes használatát. A prototípusok szinkronban maradnak, akár asztali számítógépen, akár webböngészőben dolgozik, szabaddá téve a munkát, amikor csak készen áll, és biztosítva, hogy mindig hozzáférjen a legújabb változásokhoz.

A Vectr prototípusok megoszthatók egy URL-lel, és integrálhatók olyan alkalmazásokba, mint a Slack az erőteljes együttműködés érdekében. További bónuszként azok, akikkel megosztod a makettjeidet, feljegyezhetik és szerkeszthetik azokat.

Jelenleg a Vectr nem olyan funkciógazdag, mint sok más lehetőség, de ez nem tarthatja vissza attól, hogy megismerkedjen vele. Közzétették az alkalmazás ütemtervét, amely részletesen ismerteti a tervezett funkciók lenyűgöző listáját. Ide tartoznak: teljesen offline asztali alkalmazások, több platform, beépített verzióvezérlés, beépített tervezőeszközök piaca, teljes együttműködési szerkesztés, képeffektusok, beépülő modulok, kattintható makettek, beépített visszajelzési és kommentálási eszközök, valamint offline asztali alkalmazások .

Olvasson tovább további 5 nagyszerű prototípus-készítő eszközről ...

  • 1
  • két

Aktuális oldal: 1 oldal

Következő oldal 2. oldal