12 parasta prototyyppityökalua

Sivu 1/2: Sivu 1

Prototyyppien kirjoittaminen on olennainen osa digitaalista suunnitteluprosessia. Se auttaa meitä simuloimaan malleja, tutkimaan erilaisia käyttäjäkokemuksia ja testaa matkoja ja käyttäjävirtoja projekteissamme. Kauan ovat menneet painamisen ja PDF-tiedostojen suunnittelun päivät.

Niitä on paljon web-suunnittelutyökalut ympärillä, mutta prototyyppityökalut ovat todella tulleet omiksi viime vuosina. Näiden prototyyppityökalujen avulla voit kohdata mahdolliset suunnitteluhaasteet, haluatko luoda ideasta jotain kaunista tai teknistä. Kaikilla prototyypeillä on tärkeää testata ja pelata käyttöliittymälläsi, jotta voit vahvistaa kokemuksen.



Suurimmalla osalla näistä työkaluista on hintalappu, mutta jotkut antavat ilmaisen pääsyn yksittäiseen projektiin tai rajoitettuihin sivuihin, jolloin löydät oikean sovelluksen projektiisi.



photoshop-valokuvatehosteet psd-tiedostot ladattavissa ilmaiseksi

Jos kyseessä ovat nimenomaan langoittamisen työkalut, joita etsit, tutustu luetteloon parhaat lankakehystyökalut saatavilla.

Pääkuva: Newton Ribeiro



01. Proto.io

Hinta: Alkaen 24 dollaria kuukaudessa (ilmainen kokeilu)

Plussat:

  • Tallenna käyttäjän testit
  • Jaettavat prototyypit
  • Mobiilisovellus saatavilla
  • Tukee VR-prototyyppejä
  • Lisäosia saatavilla

Haittoja:



  • Ei loistava offline-käyttöön

Proto.io on uskomaton kilpailija luomaan todenmukaisia ​​prototyyppejä karkeista ideoista aina täysimittaisiin malleihin. Työkalu tarjoaa myös monia mahdollisuuksia projekteihisi, mukaan lukien yksityiskohtaisten animaatioiden ja mukautettujen vektori-animaatioiden luominen.

Se on varmasti yksi juoksijoista, kun arvioit työkaluja prototyyppiesi luomiseen. Proto.ion avulla projektin aloittaminen on niin yksinkertaista kuin haluat. Kun hahmotellaan vain karkea idea, voit murtautua heti ja alkaa käyttää ennalta määriteltyjä resursseja kehittääksesi konseptiasi nopeasti.

Kun olet tyytyväinen ideoihisi, ne voidaan sitten muuttaa kiillotetuiksi ja esiteltävämmiksi lankakehyksiksi validointia ja pohdintaa varten. Seuraava merkittävä askel sen jälkeen antaa sinun muokata prototyyppiesi suunnittelua niin, että ne ovat mahdollisimman totta lopputulokseen.

Proto.io on verkkopohjainen työkalu, ja sen mukana tulee joukko lisäosia ja ominaisuuksia, jotka sisältävät Sketch- ja Photoshop-tiedostojen tuonnin, VR-prototyyppien luomisen, UI-kirjastot ja jopa näytön tallennuksen käyttäjien testausta varten. Tämä voi todella auttaa, jos siirryt muihin sovelluksiin.

Viime kädessä sinun on käytettävä jonkin aikaa päästä käsiksi tähän työkaluun. Sen avulla voi tehdä paljon, ja pelattavia vaihtoehtoja ja valikkokohteita on paljon. Kun olet kuitenkin oppinut kiertämään sen, se on vaikea laittaa pois. Mahdollisuus luoda yksityiskohtaisia ​​animaatioita tekee tästä erinomaisen käytettävän työkalun ja täydellisen tavan toteuttaa ideoitasi mahdollisimman realistisella tavalla.

02. Adobe XD CC 2018

Hinta : 9,99 dollaria kuukaudessa | 9,98 £ kuukaudessa
Kokeile ilmaista kokeilua : MEILLE | Iso-Britannia

Plussat:

  • Lisää vuorovaikutusta vain muutamalla napsautuksella
  • Puhdas käyttöliittymä
  • Suorita ja vie prototyypit helppoon testaamiseen
  • Luo prototyyppejä hyvin harvoilla rajoituksilla

Haittoja:

  • Animaatioasetukset ovat rajoittavia

Adobe XD tarjoaa parhaan ympäristön digitaalisille projekteille Adoben alla Luova pilvi suunnittelutyökalujen kokoelma. Vaikka olet innokas Adobe-käyttäjä ja uusi XD: lle, et välttämättä löydä käyttöliittymää kovin tutulta alusta, mutta se on pinoa muita johtavia työkaluja vastaan. Se on hyppy, jos olet suunnitellut Photoshopissa jonkin aikaa. On kuitenkin sen arvoista, jos olet iso Adobe-fani.

Tämän työkalun avulla voit luoda erittäin tarkkoja malleja ja prototyyppejä hyvin harvoilla rajoituksilla. Se on varmasti aina visuaalisten projektien armeijan joukossa. Se on erittäin design-johtoinen ja sitä on erittäin helppo käyttää joidenkin todella siistien ominaisuuksien kanssa, jotta suunnitteluprosessi olisi tehokkaampi ja tyydyttävämpi.

Kankaallasi on kaksi tilaa: nämä ovat muotoilu ja prototyyppi. Kun olet luonut joukon käyttöliittymiä ja piirtoalustoja, voit alkaa piirtää napsautettavien elementtien ja sivujen välisiä suhteita. Voit valita siirtymätyylien välillä, kuten liukuminen, työntäminen ja liuottaminen. XD antaa sinun sitten ajaa ja viedä prototyyppejä, jotta voit testata niitä ja näyttää asiakkaille.

Tämän päivän parhaat Adobe Creative Cloud -tarjoukset AdobeSuositeltava jälleenmyyjä Creative Cloud Kaikki sovellukset 49,94 puntaa / kuukausi Näytä klo Adobe Luova pilvivalokuva 9,98 puntaa / kuukausi Näytä klo Adobe Creative Cloud Single -sovellus 19,97 puntaa / kuukausi Näytä klo Adobe

03. Axure

Hinta: Alkaen 29 dollaria kuukaudessa

Plussat:

  • Erinomainen monimutkaisille sivustoille ja ideoille
  • Erinomainen dynaamisen datan käsittelyssä
  • Ehdollinen logiikka
  • Voi viedä HTML-tiedostoina
  • Erittäin toimiva

Haittoja:

miten tehdä intro elokuva 4d: ssä
  • Ei ihanteellinen korkean tarkkuuden mallien prototyyppien tekemiseen

Axure on onnistunut luomaan maineen yhtenä markkinoiden parhaimmista langankehitystyökaluista ja täydellisen valinnan monimutkaisempien dynaamista dataa vaativien projektien käsittelyssä. Axuren avulla voit todella keskittää huomiosi sellaisten projektien pilkkaamiseen, jotka ovat sekä teknisempiä että vaativat enemmän huomiota rakenteessa ja tiedoissa.

Vaikka se ei ole välttämättä ensimmäinen valinta korkean tarkkuuden suunnittelun prototyyppejä varten, se on silti loistava tapa viedä suuret projektit / ohjelmistoalustat nopeasti läpi ensimmäisen vaiheen lankakehyskonseptit.

Axuren merkittävä etu on, että se käsittelee dynaamista sisältöä todella hyvin, jolloin voit muuttaa ja muuttaa sitä tiettyjen käyttäjien matkojen tai vuorovaikutusten mukaan. Tämä saavutetaan yhdistämällä ehdollista logiikkaa ja manipuloimalla sivuja, sisältölohkoja tai tekstiä asettamalla muuttujia ja parametreja.

Mutta mahdollisuudet, joita voit tehdä Axurella, eivät lopu tähän. Se on loistava vaihtoehto visualisoida vuokaavioita ja kaavioita, mikä on vain asia, joka auttaa sinua ilmaisemaan joitain teknisempiä matkoja, joita saatat kohdata.

Ja puhumalla projektin teknisistä näkökohdista, Axuren tulisi olla ostoslistan yläreunassa, jotta voidaan puuttua suunnittelun teknisiin näkökohtiin sekä tietojohtoisiin tai dynaamisiin alustoihin, jolloin muotoilu on lopussa vain kosmeettinen peruskorjaus. Toiminta muodon suhteen tulee mieleen.

04. Origami-studio

Hinta: Vapaa

Origamin kehitti alun perin Facebook auttaakseen tiimiä rakentamaan ja suunnittelemaan tuotteita. Nyt se on saatavana ilmaiseksi: voit rekisteröityä Applen kehittäjäksi, ladata ja asentaa Xcode Quartz Composer -sovelluksella saadaksesi Origamin toimimaan Macissa.

Tämän työkalun asentaminen vaatii enemmän työtä kuin muut prototyyppivaihtoehdot. Kun se on kuitenkin asennettu, voit aloittaa suunnittelukonseptien luomisen, jotka simuloivat vieritystä, napautuksia, pyyhkäisyjä ja sivulinkkejä. Origamin dokumentaatio, oppaat ja opasvideot helpottavat aloittamista.

Sketch- ja Photoshop-mallit voidaan tuoda Origamiin, ja projektikerroksesi säilytetään, valmiina linkitettäviksi, animoitaviksi ja muunnettaviksi tarpeen mukaan. Origami ei ole myöskään mobiilisuunnitteluun keskittyvä: voit suunnitella reagoivia verkkosivustoja ja simuloida ominaisuuksia, kuten tekstinsyöttö, FaceTime-kamera ja OS X: n vetäminen ja pudottaminen.

Voit viedä prototyyppikomponentit (mukaan lukien animaatiot) yhdellä napsautuksella, jotta insinöörit voivat kopioida ja liittää projektin. Origami sisältää esitystyökalun, jonka avulla voit lisätä suunnitteluun mukautetun taustan, tarkastella koko näytön tilassa ja simuloida erilaisia ​​laitteita.

Origamilla on ilmaisena prototyyppiratkaisuna paljon tarjottavaa. Yksi haittapuoli on kuitenkin se, että se ei vielä anna asiakkaiden tai suunnittelutiimin kommentoida suoraan projektia tai versiohistoriaa.

05. Verkkovirta

Prototyyppien suunnittelu on nopeaa ja saumatonta Webflown avulla, mutta tämä työkalu todella loistaa, kun prototyyppisi on valmis. Voit muuttaa valmiin prototyypin tuotantovalmiiksi sivustoksi napin painalluksella.

Äskettäin Webflow on ottanut käyttöön pelin muuttavan uuden ominaisuuden: CMS prototyypeillesi. Webflow's CMS on täysin visuaalinen, jonka avulla voit luoda tehokkaita, dynaamisia sivustoja kirjoittamatta yhtä koodiriviä. Toinen erityisen hyödyllinen ominaisuus on sen kyky luoda blogi käyttämällä blogisivusi prototyyppikonseptia.

Jos olet freelance-suunnittelija ja sinulla on ollut vaikeuksia löytää kehittäjä kääntämään suunnitelmasi tuotantosivustoille, Webflow voi olla sinulle. Voit jopa määrittää käyttäjätilejä tai nimetä järjestelmänvalvojan hallitsemaan sisältöä, ja asiakkaasi voivat tehdä muutoksia visuaalisesti.

Vaihtoehtoisesti prototyyppi on helppo viedä koodiksi. Webflow'n puhdas, semanttinen koodi voi säästää insinöörejäsi koodin puhdistuksen tunteja.

Webflow sisältää sivustomallit ja verkkokomponentit, jotka voidaan vetää ja pudottaa prototyyppiin. Nämä nopeuttavat prototyyppien muodostusprosessia, koska ne tarkoittavat, että sinun ei tarvitse luoda uudelleen yleisesti käytettyjä suunnitteluvaroja.

Jos juutut milloin tahansa ja tarvitset apua, voit tutustua Webflow'n yksityiskohtaisiin ohjeisiin tai katsoa sen hyödyllisiä video-kursseja. Ja tietysti, jos käytät Webflow'ta ensimmäistä kertaa, tämä tuki auttaa minimoimaan oppimiskäyrän.

Webflow on luonteeltaan reagoiva, joten verkkosivustosi asettelut optimoidaan kaikille laitteille: työpöydälle, mobiililaitteelle ja tabletille. Jos se ei riitä, voit suunnitella animaatioita, jotka toimivat mobiililaitteissa ja kaikissa moderneissa selaimissa. Ja se ei silti lopu tähän: Webflow'ssa on sisäänrakennettu laajennettavuus, jonka avulla live-prototyyppien yhdistäminen Slackiin, MailChimpiin, Google Driveen ja yli 400 muuhun palveluun on helppoa.

06. Luonnos

Hinta: 99 dollaria vuodessa (ilmainen kokeilu)

paras paperi kolminkertaiseen esitteeseen

Plussat:

  • Selkeä käyttöliittymä
  • Erittäin joustava toiminnallisuuden suhteen
  • Helppo rakentaa prototyyppejä
  • Rakenna symboleja ja uudelleenkäytettäviä varoja
  • Lisäosia saatavilla
  • Jaa prototyyppi helposti

Haittoja:

  • Animaatioasetukset ovat rajoittavia

Sketch on sovellus, jota rakastetaan muotoiluyhteisössä. Se on helppokäyttöinen ja antaa sinulle kaiken mitä tarvitset kauniiden käyttöliittymien luomiseen. Viime aikoihin saakka Sketch luotti kolmansien osapuolten laajennuksiin prototyyppiin InVisionin kanssa, mutta se tarjoaa nyt kaiken oman ympäristön.

Käyttämällä ennalta määriteltyjä piirtoalustoja voit aloittaa Sketchin käytön melko nopeasti vaivattomasti. yksinkertaisesti aloita lataaminen grafiikassa tai kirjoita. Tämän työkalun suunnittelu on ihanaa ja helppoa.

Yksi Sketchin sisällä todella toimivista ominaisuuksista on se, kuinka se käsittelee symboleja. Tämä on siisti tapa pakata pieniä tai jopa suuria käyttöliittymäkohteita ja käyttää niitä uudestaan ​​ja uudestaan. Symboliesi avulla voit myös muokata niitä ei-dekonstruktiivisella tavalla. Esimerkiksi painike-elementti voi olla pakattu symboliin, joka käyttää tekstiä, kuvaketta ja reunusta. Voit käyttää symbolia uudelleen suunnittelun ympärillä ja muuttaa teksti-elementtiä tarvittaessa. Jos muokkaat symbolia lähteellä, voit muuttaa esimerkiksi fontin tyyliä ja väriä, ja se päivittää kaikki symbolisi suunnittelusi ympärillä. Erittäin siisti ja usein suuri ajansäästäjä.

Prototyyppien osalta voit piirtää suhteita kankaallasi olevien kohteiden ja sivujen välille. Nämä suhteet tarjoavat sinulle linkkejä sivuillesi, joiden avulla voit aloittaa yhteyden muodostamisen, ja voit simuloida käyttäjien matkoja heidän selattaessaan sivustoasi. Sketchissä voit myös jakaa prototyyppisi ainutlaatuisella linkillä ja tehdä päivityksiä projektiin tarvittaessa ja tarvittaessa.

Luonnos on monien suosikki ja ehdottomasti näkemisen arvoinen. Se on erittäin puhdas ja monipuolinen suunnittelutyökalu. Sille on saatavana useita laajennuksia, jotka auttavat tekemään suunnitteluprosessin entistä nopeammaksi tai helpommaksi.

07. Framer

Hinta: 15 dollaria kuukaudessa (ilmainen kokeilu)

Framer on yksi suosituimmista prototyyppityökaluista. Se perustuu olettamukseen, että koodilla on mahdollista prototyyppi mikä tahansa, mikä johtaa uuteen ja uraauurtavaan malliin.

Vaikka tämä saattaa olla totta, työkalun oma koodauskieli prototyyppien suunnittelussa ja animoinnissa voi olla este. On niitä, jotka eivät ehkä näe palkintoa jyrkän oppimiskäyrän lopussa, etenkin kielelle, jota ei voida käyttää Framerin ulkopuolella.

Niille, jotka haluavat vastata haasteeseen, Framerin koodauskielen dokumentaatio on kuitenkin hyvin jäsennelty, ja siinä on paljon esimerkkejä kielen toiminnasta. Tarjolla on ohjevideoita sekä kursseja Udemystä ja O'Reillystä.

Tämä lähestymistapa on erityisen hyödyllinen suunnittelijoille, jotka ovat uusia koodauksessa. Se tarjoaa ensikäden kuvan siitä, kuinka joustava ja tehokas koodi voi olla. Lisäksi Framerin Mac-sovellus on hyvin suunniteltu ja tarjoaa suoria esikatseluita kirjoittaessasi koodia, mikä on rohkaisevaa niille, jotka kirjoittavat koodia ensimmäistä kertaa.

Tämä ei tarkoita, että se ei ole hyvä suunnittelijoille, joilla on koodauskokemus, jotka haluavat kirjoittaa HTML / CSS-mallin prototyyppiin. Kehystin voi olla vain etsimäsi työkalu: muiden sovellusten vedä ja pudota -työkalut eivät rajoita sinua. Lisäksi, koska Framer käyttää koodia prototyyppien rakentamiseen, voit sisällyttää prototyyppiin reaaliaikaisia ​​tietoja lähteistä, kuten Twitter ja Parse.

Kuten muutkin työkalut, Framer tukee Sketch- ja Photoshop-projekteja ja säilyttää myös suunnittelusi kerrokset. Toinen etu on, että - toisin kuin useimmat muut työkalut - voit myös tuoda After Effects -tiedostoja. Kun olet valmis jakamaan prototyyppisi, Framer voi luoda URL-osoitteen, joka voidaan jakaa asiakkaidesi kanssa. Nämä jaettavat URL-osoitteet voidaan avata mobiililaitteilla suoraa esikatselua varten. Framer antaa sinulle myös prototyypin VR: stä.

08. Vectr

Voit suunnitella prototyyppisi Vectr: llä

Voit suunnitella prototyyppisi Vectrin verkko- tai työpöytäsovelluksissa

Hinta: Vapaa

Voit suunnitella prototyyppisi Vectrin verkko- tai työpöytäsovelluksissa Macille ja Windowsille, mikä on vaikuttavaa, kun otetaan huomioon, että sovellus on ilmainen. Prototyypit pysyvät synkronoituna riippumatta siitä, työskenteletkö työpöydällä vai verkkoselaimella, mikä vapauttaa sinut työskentelemään aina kun olet valmis ja varmista, että sinulla on aina pääsy uusimpiin muutoksiin.

Vectr-prototyypit voidaan jakaa URL-osoitteen kanssa ja integroida tehokkaaseen yhteistyöhön esimerkiksi Slack-sovelluksiin. Lisäbonuksena ne, joiden kanssa jaat mallisi, voivat merkitä ja muokata niitä.

Tällä hetkellä Vectr ei ole niin monipuolinen kuin monet muut vaihtoehdot, mutta tämän ei pitäisi estää sinua tutustumasta siihen. Sovelluksen etenemissuunnitelma on julkaistu, ja siinä on yksityiskohtainen luettelo vaikuttavista ominaisuuksista. Näitä ovat: täysin offline-tilassa olevat työpöytäsovellukset, useampia käyttöympäristöjä, sisäänrakennettu versionhallinta, sisäänrakennettu suunnitteluomaisuuden markkinapaikka, täysi yhteistyömuokkaus, kuvatehosteet, laajennukset, napsautettavat mallinnukset, sisäänrakennetut palaute- ja merkintätyökalut sekä offline-työpöytäsovellukset .

Lue lisää 5 upeasta prototyyppityökalusta ...

  • 1
  • kaksi

Tämänhetkinen sivu: Sivu 1

Seuraava sivu Sivu 2