Ohjelmointi

7 parasta langankehyksen ja prototyyppityökalua sovellusten valmistajille

Viime aikoina olen keskustellut paljon käyttöliittymästä ja käyttöjärjestelmästä. Kukaan ei ole valittanut tästä, joten oletan pääsevämme pisteeseen, jossa kaikki sovelluskehitykseen osallistuvat tunnistavat käyttöliittymän ja käyttöliittymän tärkeyden.

Huonosti suunniteltu käyttöliittymä ja kokemus pilaavat loistavan sovellusidean niin helposti. Ja koska nyt on saatavana monia työkaluja nopeaan lankakehykseen ja prototyyppien luomiseen, ei pitäisi olla mitään syytä olla suorittamatta loistava kokemus.

Vaikka termejä käytetään usein yhdessä, lanka- ja prototyypin välillä on selkeä ero.

Lankakehys on luuranko, paljain luut sovelluksesi rakenteen. Se tehdään yleensä ilman värejä - yksinkertaista mustavalkoista - ja vaikka lankakehys näyttää, mihin teksti, kuvat ja muut suunnitteluelementit menevät, se ei sisällä varsinaisia ​​kuvia, tekstiä jne. Kuitenkin jokainen lankakehyselementti on näkyy todellisessa mittakaavassa. Syynä tähän on, että lankakehysten on tarkoitus keskittää huomiosi rakenteeseen, ei varsinaiseen suunnitteluun. Aivan kuten talon tai rakennuksen piirustukset: saat selkeän käsityksen kaiken rakenteesta ja sijoittelusta häiritsemättä suunnittelua.

Prototyypit jäävät lankakehysten ja täysin toimivan sovelluksen väliin. Tärkein osa prototyypistä on animaation käyttö, jonka avulla voit tutkia, miten sovelluksesi reagoi käyttäjän vuorovaikutukseen sekä sivun tai näytön siirtymiin. Prototyypit voivat sisältää myös todellisia kuvia, kuvakesarjoja ja tekstiä, mutta tämän määrää prototyypin tarkoitus. Jos testaat vain vuorovaikutusta ja näytön kulkua, voit luoda prototyypin, joka sisältää vain animaatioita ja ehkä vähän väriä. Jos yrität vahvistaa ideasi tai säveltää potentiaalisille sijoittajille, haluat, että prototyyppisi on hiottu paremmin käyttämällä asianmukaisia ​​kuvia, tekstiä jne.

Vaikka työkalut, jotka olen sisällyttänyt tähän yhteenvetoon, helpottavat prototyyppien luomista, mukaan lukien enemmän elementtejä animaation lisäksi ja värejä, sinun tarvitsee enemmän aikaa tehdä muutoksia prototyyppiin.

1. Balsamiq

Jos olet kiinnostunut vain luomaan sovellusideesi lankakehyksen, Balsamiq on työkalu sinulle. Balsamiq on ollut saatavana sekä työpöydänä että verkkosovelluksena vuodesta 2008.

Lankakehysten on tarkoitus vaatia hyvin vähän vaivaa ja aikaa, joten Balsamiq on suunniteltu auttamaan sinua luomaan lanka kehyksiä nopeasti. Lisää yksinkertaisesti tarvitsemasi peruselementit, muuta sitten kokoa, sijoita ja mukauta tarpeen mukaan. Balsamiqilla luomasi lankakehykset näyttävät hieman karkeilta, mutta se on tarkoituksellista. Työkalun takana oleva luova tiimi uskoo, että rautalanka, joka näyttää enemmän luonnokselta, kannustaa aivoriihiin. Mikä on ensinnäkin suuri syy langankehykseen.

Yksinkertainen versionhallinta auttaa sinua seuraamaan, missä aloitit ja missä olet nyt. Ja vain koska tämä on lankakehys, ei tarkoita sitä, ettet voi saada tietoa potentiaalisilta käyttäjiltä / asiakkailta. Et voi luoda täysin interaktiivista prototyyppiä Balsamiqilla, mutta voit linkittää luomasi näytöt / sivut yksinkertaisen napsautussuhteen prototyypin luomiseksi. Ei animaatioita tai vuorovaikutusta: tarkoituksena on vain osoittaa virtaus.

Ja jos Balsamiq vaikuttaa hieman liian rajoitetulta, voit aina lisätä minkä tahansa yhteisön luomista laajennuksista, malleista ja kuvakepaketeista.

Balsamiq on saatavana työpöytäsovelluksena, hinnoiteltu 89 dollaria / käyttäjä, verkkopohjainen sovellus alkaen 12 dollaria kuukaudessa, tai Google Drive -linkitetty sovellus, hintaan 5 dollaria / käyttäjä / kk. Mutta voit ensin aloittaa ilmaisella kokeiluversiolla nähdäksesi, onko se oikea työkalu sinulle.

2. WireframePro

Vaikka MockFlow-lisenssi sisältää pääsyn kahdeksaan eri sovellukseen, se on WireframePro, josta olet kiinnostunut aloittaessasi oman sovelluksen kehittämisen. Jälleen se on web-pohjainen sovellus, jossa on vedä ja pudota-käyttöliittymä, joka luo langattoman kehyksen vaivattomasti.

Siinä on kaikki vakiokäyttöliittymän elementit sekä useita muita tarvitsemiasi komponentteja, mukaan lukien valikoima Applen ja Androidin älykelloja. Sovellus antaa sinulle myös pääsyn Mock Storeen, joka tarjoaa laajan valikoiman kolmansien osapuolten malleja, joita voit käyttää joko inspiraationa tai nopean lähtökohtana omalle lankakehyksellesi.

Kuten kaikkien tässä lueteltujen työkalujen kohdalla, WireframePro on suunniteltu yksilöille ja tiimeille, ja sisäänrakennetut yhteistyötyökalut ovat hyvät. Mukava osallisuus on kyky luoda automaattisesti tekniset tiedot kullekin elementille, joten jos et tee suunnittelutyötä itse, suunnittelijasi on helppo pääsy kaikkiin suunnitteluun liittyviin yksityiskohtiin.

Lopuksi, kun jaat jotain projektistasi, voit antaa oikeuksia ja rajoittaa joitain ihmisiä vain tarkastelemaan ja kommentoimaan projektia, kun taas toiset pystyvät myös muokkaamaan sitä.

WireframePro: lla ei ole ilmaisia ​​suunnitelmia, mutta voit kokeilla sitä 30 päivän ajan ennen siirtymistä maksettuun sopimukseen. Lisenssit alkavat 19 dollaria kuukaudessa yhdelle käyttäjälle ja 39 dollaria kuukaudessa enintään kolmelle tiimin jäsenelle.

3. UXPin

Kuten nimestä voi päätellä, UXPinin takana oleva joukkue korostaa UX: ää. Mitään vikaa siinä ei ole, lankakehyksen ja prototyyppien on tarkoitus auttaa sinua tarkentamaan sovelluksesi käyttöjärjestelmää. UXPinin avulla voit huolehtia sekä langan kehyksestä että prototyypeistä, joten sinun ei tarvitse vaihtaa työkaluja.

Kuten voit odottaa, UXPin tukee Sketch-lähdetiedostoja ja Photoshop-tiedostoja. Mutta sillä on myös sisäänrakennettu editori, joka tukee CSS-koodinpätkiä, jolloin voit muokata kaikkia lankakehyksessä ja prototyypissä käytettyjä elementtejä. Ja UXPinin avulla on erittäin helppo seurata jokaisen lisäämäsi tai luomasi tiedoston kutakin iterointia, joten sinun ei tarvitse napsauttaa kymmeniä tiedostoja etsimällä alkuperäistä versiota.

Peruslankakehysten ja prototyyppien luominen on nopeaa ja helppoa, ja kaikki vakio prototyyppivuorovaikutukset ovat käytettävissä. Luonnollisesti voit silti luoda mukautettuja vuorovaikutuksia tarvittaessa. Ja kun prototyyppisi on valmis, voit lähettää sen kenelle tahansa testattavaksi, ja kaikki vuorovaikutukset siepataan videolla yhdessä kunkin testaajan kommenttien äänen kanssa.

UXPin tukee verkkosivustojen, mobiilisovellusten ja verkkosovellusten langoituskehystä ja prototyyppien muodostamista. Mukana on 14 esiasetettua katkaisupistettä, joiden avulla voit katsella suunnittelua helposti useilla laitteilla. Hinnoittelu alkaa 19 dollaria kuukaudessa perussuunnitelmalle ja 29 dollaria kuukaudessa kehittyneiden ominaisuuksien avaamiseksi.

4. Prott

Vaikka Prott on tuotemerkki prototyyppityökaluksi, se sisältää myös langankehyksen. Jos sovelluksesi idea on vain karkeasti piirrettyjä luonnoksia, voit kuvata luonnoksesi ja tuoda ne suoraan sovellukseen. Nämä luonnokset voidaan sitten animoida tai käyttää lankakehyksen perustana. Vedä ja pudota ennalta asetetut muodot ja käyttöliittymän elementit suoraan luonnoksellesi, jotta voit siirtyä hetkellisesti epävakaista viivoista ammattimaisiin langattomiin lankakehyksiin.

Prott sisältää suuren määrän käyttöliittymäsarjaa useille laitteille, iOS: stä Androidiin ja verkkoon. Mutta voit myös luoda oman kirjaston käyttöliittymäelementeistä.

Sen sijaan, että vain jaat prototyyppisi muiden ihmisten kanssa, voit nyt sisällyttää jopa yksityiskohtaisen kartan, joka näyttää selkeästi sovelluksesi rakenteen. Ja kuka tahansa, jolle jaat prototyyppisi, voi kommentoida suoraan jokaisessa näytössä, joten sinun on helpompi ymmärtää, mihin heidän kommenttinsa liittyvät.

Prott tarjoaa monipuolisen 30 päivän kokeiluversion, jossa on ilmainen suunnitelma, jolla ei ole muita rajoituksia kuin luomiesi projektien lukumäärä. Jos haluat luoda lisää projekteja, voit siirtyä Starter- tai Pro-suunnitelmaan, hinnoiteltu 19 dollaria kuukaudessa.

5. InVision

InVision on tarkoitettu yksinomaan prototyyppien tekemiseen, mutta tukee eri käyttötarkoituksia. InVisionin avulla voit luoda nopeasti interaktiivisia prototyyppejä verkkosivustoltasi, verkkosovelluksestasi tai mobiilisovelluksestasi ja tarkastella sitten prototyyppiä todellisilla laitteilla. Ja tämä sisältää tabletit ja puettavat, ei vain matkapuhelimet.

Prosessi on yhtä yksinkertainen kuin:

  • Lisää suunnitteluominaisuudet (InVision tukee GIF-, PNG-, JPEG-, PSD- ja Sketch-lähdetiedostoja) vetämällä ja pudottamalla tai synkronoimalla Dropboxin kanssa.
  • Piirrä kuhunkin sisältöön hotspotit ja aseta ne linkittämään muihin sisältöihin, ulkoisiin URL-osoitteisiin tai ankkureihin.
  • Lisää interaktiivisuutta eleiden (napautukset tai pyyhkäisyt), kiinteiden alueiden (valikkorivi jne.) Ja siirtymien muodossa.

Kun olet valmis, voit tarkastella projektia puhelimellasi, tabletillasi tai tietokoneellasi tai jopa tekstiviestillä tai lähettää linkin ystäville ja kollegoille. Tämä helpottaa muiden ihmisten ottamista mukaan suunnitteluprosessiin kaikkien kanssa, joille lähetät linkin, jotta voit kommentoida kutakin mallia.

InVisionin hinnoittelu alkaa ilmaiseksi yhdelle prototyypille, 25 dollaria kuukaudessa rajoittamattomille prototyypeille ja 99 dollaria kuukaudessa enintään 5-jäsenisille ryhmille.

6. Ihme

Kuten InVision, Marvel-sovellus on tarkoitettu prototyyppien luomiseen. Se sisältää vakiotuen Sketch- ja Photoshop-tiedostoille, tai voit käyttää niiden sisäänrakennettua Canvas-suunnittelutyökalua. Marvelilla on myös iOS- ja Android-sovellukset, joiden avulla voit kuvata omia piirustuksiasi ja mallejasi ja ladata ne suoraan Marvel-kirjastoosi.

Suunnitelmiin on helppo luoda hotspotteja, ja käytettävissäsi on kymmeniä vuorovaikutuksia ja näytön siirtymiä prototyypin elävöittämiseksi. Ja voit testata prototyyppiäsi useilla näytöillä, mukaan lukien Apple Watch.

Tietenkään mikään prototyyppityökalu ei ole keskustelun arvoinen, jos se ei sisällä yhteistyötä. Ja Marvelin avulla voit merkitä prototyyppisi korostamaan tiettyjä alueita, joita haluat ihmisten kommentoivan. Kommentteja voi tehdä kuka tahansa, jolle lähetät prototyyppisi, ilman että heidän tarvitsee ensin luoda Marvel-tiliä.

Marvelin hinnoittelu alkaa 0 dollaria kuukaudessa yhdelle käyttäjälle ja enintään kahdelle projektille, mutta rajoitetuilla ominaisuuksilla. 14 dollaria kuukaudessa saat rajattomasti projekteja ja kaikkia ominaisuuksia, erillisellä hinnoittelulla tiimeille ja yritysasiakkaille.

7. Proto.io

Proto.io on suosittu prototyyppityökalu, joka sai suuren päivityksen vuonna 2016. Proto.io sisältää kaikki prototyyppityökalussa vaaditut ominaisuudet, mutta päivitys on tuonut myös joukon yksinkertaistettuja ominaisuuksia.

Uudistetun käyttöliittymän, joka tekee kaikista keskeisistä ominaisuuksista helpommin saavutettavissa, lisäksi Proto.io on painottanut paljon myös animaatiota. Liike on tärkeä ominaisuus mobiilisovelluksissa, ja Proto.io: n State Transitions -ominaisuuden avulla kenen tahansa on helppo luoda ja mukauttaa animaatioita prototyypissään.

Proto.io on myös ottanut käyttöön vuorovaikutussuunnittelumallikirjaston, mikä tekee vuorovaikutusten lisäämisestä vaivatonta. Nämä mallit sisältävät vuorovaikutusta, kuten diavalikot, ja vedä päivittää. Sinun tarvitsee vain lisätä vuorovaikutus projektiisi ja mukauttaa sitä.

Proto.io: n uusi versio laajentaa kykyäsi saada käyttäjät testaamaan ja kommentoimaan prototyyppiäsi. Se integroituu käyttäjän testausalustoihin, kuten Validately ja UserTesting, antaen sinulle pääsyn suurempaan todellisten käyttäjien ryhmään. Ja Lookback-integraation avulla saat rajattomasti tallenteita - toistaiseksi vain iOS: ssä - jotka osoittavat, kuinka käyttäjät ovat vuorovaikutuksessa ja navigoivat sovelluksessasi.

Proto.io tarjoaa monipuolisen 15 päivän kokeiluversion, jonka jälkeen voit siirtyä hyvin rajoitetulle ilmaiselle tilille. Maksetut suunnitelmat alkavat 29 dollaria kuukaudessa tiimisi koosta riippuen.

Johtopäätös

Kun olet vasta aloittamassa sovelluskehitystä, haluat ehkä luoda sekä lankakehykset että sovelluksen ideasi prototyypit. Mutta kun olet tyytyväinen kehitysprosessiin, voit harkita vain yhden tai toisen tekemistä.

Koska lankakehykset ovat niin perustavanlaatuisia suunnittelussa, ne pakottavat sinut keskittymään virtauksen ja käyttökokemuksen saamiseen. Prototyypit voivat auttaa sinua tarkentamaan sekä virtausta että UX: tä, korostamaan mahdollisia suunnitteluvirheitä ja mikä tärkeintä, näyttämään paremmilta kuin lankakehykset, jos sinun on esiteltävä asiakkaille tai sijoittajille. Ja vaikka saattaa olla houkuttelevaa tyytyä työkaluun, joka yhdistää sekä langankehyksen että prototyyppien kirjoittamisen, ratkaisevana tekijänä tulisi aina olla se, mikä työkalu sisältää kaikki tarvitsemasi ominaisuudet ja on mukavin käyttää. Ja koska jokainen tässä luetelluista työkaluista tarjoaa ilmaisen suunnitelman tai kokeilujakson, miksi et viettää päivän testaamalla niitä kaikkia ennen päätöksen tekemistä?