Vuonna 1487 Leonardo da Vinci piirsi kaavion nimeltä taisteleva ajoneuvo , Suunniteltu hänen ollessaan Milanon herttuan Ludovico Sforzan suojeluksessa. Vaikka kone oli tarkoituksella suunniteltu toimimaan kunnolla, joukko insinöörejä loi sen uudelleen vuonna 2010. Da Vinci kaavamainen on yksi varhaisimmista esimerkeistä peruslankakehyksestä.

Termi rautalanka on ollut käytetty vuosikymmenien ajan , kauan ennen kuin verkkosuunnittelumaailma hyväksyi sen. Lankakehyksiä käytettiin alun perin Computer Aided Design (CAD) -ohjelmistossa havainnollistamaan kohteen suunnittelua ilman yksityiskohtia. Tuloksena oli a suunnitelma se näytti siltä kuin se olisi tehty langoista, ergo, päädyimme lankakehyksiin.

Mutta mikä on rautalanka suunnittelussa, ja mitä tarkoitusta sillä on?

Lankakehys digitaalisessa suunnittelussa on visuaalinen opas tai sivukaavio, josta on poistettu typografinen tyyli, värit, grafiikka ja interaktiiviset elementit ja joka edustaa tiettyä kohtaa suunnitteluprosessissa. Sen tarkoituksena on näyttää sivutason asetteluideoita, jotka kuvaavat toiminnallisuutta, käyttäytymistä ja sisällön prioriteettia.

Suunnittelijat käyttävät lankakehyksiä yhdistääkseen taustalla olevat käsitteelliset rakenteet sivuston tai sovelluksen näytön visuaaliseen suunnitteluun. Lankakehyksiä on kolme erilaista:

• Heikko tarkkuus - varhaisen vaiheen piirustus ilman paljon yksityiskohtia. Heikkolaatuiset lankakehykset ovat usein käsin piirrettyjä luonnoksia tai viivoja ja muotoja, jotka edustavat ideaa.
• Keskitasoinen uskollisuus - lankakehykset, jotka alkavat näyttää enemmän komponenttitietoja ja keskittyvät sisällön asetteluun ja sivun kokonaisrakenteeseen.
• Korkealaatuinen - myöhemmän vaiheen (post iteratiiviset) piirustukset, jotka kuvaavat komponenttien yksityiskohtaisempaa ja korkeamman tason renderöintiä käyttäytymisominaisuuksilla ja keskittyen sisällön asetteluun.

Lankakehysten kehitys digitaalisessa suunnittelussa on toinen UX-esine ja toimitettava: lankavirta. Lankavirrat ovat lanka- ja vuokaavioiden yhdistelmä, kaksi artefaktia UX-suunnittelijat ovat hitaasti sulautuneet yhteen toista tarkoitusta varten: havainnollistamaan ja seuraamaan vuorovaikutusta, joka edustaa tehtävävirtoja tuotteessa, kuten verkkosovelluksessa.

Suunnittelijoiden kohtaama lanka kehysten kanssa viestii käyttäjän matkaa. Vaikka on olemassa monimutkaisempia tapoja näyttää käyttäjien matkoja, on suuntaus sisällyttää heidät lankalangan yksinkertaisuuteen. Hyödyllinen työkalu siihen on a lankakarttakartta .

Lankakehyskartta yhdistää lankakehykset käyttäjän matkoihin (tai käyttäjävirtoihin) osoittaakseen käyttäjän matkan tuotteen läpi lankakehyksillä.

Suosituimmat langoituspuitteet

Suunnittelijat on paljon valintoja, kun päätät langankehitystyökaluista. Uusia työkaluja tulee jatkuvasti markkinoille, joten voi olla vaikea pysyä mukana. Tässä on muutamia ominaisuuksia etsittävistä hienoista langankehitystyökaluista:

• Kyky tuottaa erilaisia ​​uskollisuuksia (matala tai korkea)
• Vakaa ohjelmisto, jota on helppo käyttää ja jota päivitetään usein
• Sisäänrakennetut mallit, symbolit ja vakio-käyttöliittymäkomponentit lisäominaisuuksilla

Jotkut tämän oppaan työkaluista ovat keskittyneet voimakkaammin langankehykseen, kun taas toiset yrittävät löytää tasapainon langankehyksen ja prototyyppien muodostamisen sekä mallintamistoimintojen välillä. Jos valitset yhden työkalun käyttämisen toisen (tai useamman) kanssa, tulee suunnittelijan mieltymys.

Balsamiq

Balsamiq on heikkolaatuinen, helppokäyttöinen lankakehystyökalu, jota suositaan sen helppokäyttöisyyden ja ikonisen 'käsin piirretyn' ilmeen vuoksi. Sen mukana tulee joukko valmiita malleja, joita voidaan käyttää nopeasti ja helposti vedä ja pudota -editorilla. Suunnittelijat voivat lisätä omia resurssejaan ja mukauttaa asettelua.

Perusprototyyppien muodostus voidaan saavuttaa yhdistämällä maketteja, jotta voidaan luoda yksinkertaisia ​​napsautettavia kokemuksia käytettävyystestausta varten, kun projekti näytetään koko näytön esitystilassa tai vietynä PDF-tiedostona.

Balsamiqia tarjotaan työpöytäversiona (Windows ja Mac), pilvipalveluna tai Google Driven, Confluencen ja JIRA: n laajennuksena.

Moqups

Moqups on toinen luova yhteistyötyökalu, joka keskittyy langankehykseen, mutta jota voidaan käyttää myös prototyyppien tekemiseen. Toisin kuin Balsamiq, se on puhtaasti verkkopohjainen ja sen tarkoituksena on tehdä lankakehyksiä verkko- ja mobiilisovelluksia varten.

Suurin ero Moqupsin ja Balsamiqin välillä on lankakehysten uskollisuus. Vaikka Balsamiq tuottaa 'käsin piirretyn' ilmeen, Moqups tarjoaa täysvärisiä stensiilejä ja sarjoja mobiilisovelluksia ja verkkosuunnittelua varten, mukaan lukien iOS, Android ja Bootstrap.

Moqups eroaa Balsamiqista muutamalla muulla tavalla. Ohjelmisto mahdollistaa rajallisen objektien muokkauksen ja sivunhallinnan, jolloin suunnittelijat voivat määritellä 'pääobjektit', mikä voi säästää paljon aikaa, kun tehdään muutoksia lankakehyksiin iterointiprosessin aikana.

Esimerkiksi suunnittelija luo hallita painikeobjekti, jolla on tietty koko, muoto ja väri. Tätä painiketta käytetään useita kertoja koko lankakehyksessä. Myöhemmin iterointiprosessissa, jos suunnittelijan on muutettava painikkeen väriä, sen sijaan että jokainen painikeobjekti muutettaisiin, hän voi vaihtaa sen kerran, ja kaikki alipainikkeen kohteet vaikuttavat välittömästi.

minä kysyn

minä kysyn on huippulankakehystyökalu, joka keskittyy matalan tarkkuuden suoritteisiin, joilla on jonkin verran vuorovaikutteisuutta. Myös pilvipohjainen, se käyttää uudelleenkäytettäviä komponentteja ja erottaa Balsamiqista ja Moqupsista vankemmalla napsautettavalla lankakehyksellä.

Pidoco on hyödyllinen mobiilisovellusten ja verkkosivujen suunnittelussa, koska sillä on sisäänrakennetut mobiilinäkymät, jotta suunnittelijat näkevät, kuinka heidän sovellussivunsa näyttävät erikokoisilla näytöillä. Toinen sisäänrakennettu ominaisuus on vienti- ja määritystoiminnot . Tämä auttaa suunnittelijat siirtyä lankakehyksestä prototyypiksi / malliksi ilman laajennusta tai laajennusta.

Picoco näyttää ja tuntuu matalalta, mutta sisältää useita ominaisuuksia, jotka tyypillisesti löytyvät monimutkaisemmista suunnittelutyökaluista. Se toimii hyvin suunnittelijoille, jotka tekevät vähäistä käyttöjärjestelmää ja tarvitsevat toistaa nopeasti lyhyemmillä palautesykleillä.

Glyffy

Glyffy on keskitason langallinen kehystystyökalu, jolla on muutamia ainutlaatuisia ominaisuuksia, jotka erottavat sen Balsamiqista ja Mockupista. Yksi ainutlaatuinen piirre on kyky luoda lankavirtoja. Gliffyllä on sisäänrakennetut vuokaavio- ja kaavoitusominaisuudet mukana toimitetuilla kaavaimilla, ajatuskartoilla ja liiketoimintaprosessien mallinnuksella.

Muiden lankakehystyökalujen tapaan Gliffy tarjoaa kirjaston muotoja, kuvakkeita ja kyvyn jakaa lankakehyksiä natiivisti Atlassianin yhtymäkohta , Löysä , Basecamp , Trello ja WordPress .

Tämä on suhteellisen uusi UX-langankehyksen suunnittelutyökalu, mutta sillä on suuri tilaajakanta ammattisuunnittelijoita, jotka etsivät yksinkertaisia ​​integraatioita ja ominaisuuksia staattisen lankakehyksen ulkopuolella.

Wireframe.cc

Wireframe.cc on perusvalmistustyökalu, aivan kuten Balsamiq. Siinä on puhdas käyttöliittymä ilman paljon häiritseviä työkalurivejä ja kuvakkeita. Toisin kuin monet muut työkalut, sen avulla voit 'piirtää' lankakehyksiä hiirellä.

Wireframe.cc tarjoaa kirjaston stensiilejä ja puhtaan, mutkikkaan esineiden käsittelyn. Hyödyllinen elementti, jonka Wireframe.cc tarjoaa työskennellessään lean UX: n kanssa, on URL jokaiselle lankakehyssivulle, jotta se voidaan jakaa palautetta varten nopeasti ja helposti.

Sisäänrakennettua prototyyppiä tai vuorovaikutteisuutta ei ole, koska se keskittyy puhtaasti heikkolaatuiseen langankehykseen.

Hassu

Soitettiin 'Google Docsiksi' langankehyksille, Hassu jäljittelee kaaviotyökaluja, kuten OmniGraffle ja Visio . Se ei keskity prototyyppien tekemiseen / mallintamiseen, koska sen pääpaino on langankehyksessä ja vuokaavioissa, joten se on loistava ehdokas lankavirtojen tuottamiseen.

Gliffyn tavoin Whimsical on keskitason langankehystyökalu, joka sisältää suuren määrän konfiguroitavia elementtejä (painikkeet, tulot, valintaruudut jne.).

Rajoittamaton yhteistyö saman lankakehysasiakirjan kanssa samanaikaisesti on hieno sisäänrakennettu ominaisuus etäsuunnittelutiimeille.

Adobe XD

Adobe XD on viime aikoina kiinnittänyt suunnittelijoiden huomion yksinkertaisella käyttöliittymällä, syvillä siteillä muihin Adobe-tuotteisiin, helppokäyttöisyyteen ja sisäänrakennettuihin toimintoihin, jotka vähentävät tarvetta luottaa laajennuksiin ja laajennuksiin.

Lankakehyksiä voidaan rakentaa Adobe XD: llä kahdella tavalla. Ne voidaan rakentaa viivojen ja muotojen avulla esineiden ja elementtien luomiseksi, tai ne voidaan rakentaa käyttämällä valmiita käyttöliittymäsarjaa lähteistä, kuten behance.net ja XD-resurssit .

Yksi Adobe XD: n aikaa säästävä ominaisuus on kyky luoda 'pääkomponentteja' (joita kutsutaan Sketchin symboleiksi), joista on hyötyä muutosten tekemisessä, koska kaikki isännältä havainnollistetut komponentit perivät kaikki muutokset.

Toinen etu XD: n käyttämisessä langanmuodostustyökaluna on kyky vaihtaa prototyyppitilaan hiiren napsautuksella. Prototyyppitila on sisäänrakennettu XD: hen ja toimii niin taustalla suunnittelijat älä tuhlaa aikaa siirtyessäsi lankakehyksistä prototyyppeihin.

Luonnos

Luonnos , suosittu suunnittelutyökalu UX / UI-suunnittelijoille, tarjoaa alustan vektorin muokkaamiseen, prototyyppien muodostamiseen ja yhteistyöhön, ja sillä on kasvava kirjasto, jossa on satoja laajennuksia, jotka laajentavat sen toiminnallisuutta.

Lankakehys sisään Luonnos on paljon kuin Adobe XD käyttämällä sarjoja / malleja ja piirtotyökaluja. Luonnoksessa käytetään laajasti Symbolit jotka ovat uudelleenkäytettäviä komponentteja, jotka voidaan määrittää kerran ja käyttää useita kertoja (painikkeet jne.). Välitön symboli ottaa myös kaikki muutokset, jotka on tehty 'master' -symboliin. Tämä on hyödyllistä suunnittelijoille, koska koko langanmuodostusprosessissa on tehtävä monia muutoksia.

Luonnoksen avulla suunnittelijat voivat luoda erittäin tarkkoja lankakehyksiä, prototyyppejä ja maketteja. Se ei ole pilvipohjainen sovellus, ja yksi mahdollisista haittapuolista on, että se toimii vain macOS: n kanssa.

UXPin

UXPin on johdoton kehystyökalu, joka tukee vuorovaikutteisia tiloja, logiikkaa ja ohjelmallisia komponentteja, mikä antaa suunnittelijoille mahdollisuuden koodi ehdolliset vuorovaikutukset, muuttujat ja lausekkeet.

UXPin ylittää paljon langankehyksen, keskittyen ensisijaisesti prototyyppien tekemiseen käyttöliittymäkomponenttikirjastojen, symbolien, vektoripiirustustyökalujen ja muokkauksen kanssa.

On Windows-, macOS- ja pilvi- / selainversio. UXPin toimii huippuluokan langankehyksessä kuten Sketch ja Adobe XD. Se ei ole vedä ja pudota kuten Balsamiq, mutta se vie prototyypit ja mallinnukset seuraavalle tasolle suunnittelijat haluavat pysyä yhdessä ekosysteemissä.

Ihme

Ihme , toinen suosittu suunnittelutyökalu, joka helpottaa lankojen kehystämistä ja prototyyppien tekemistä, tarjoaa suunnittelijoille tutun vedä ja pudota -liitännän matalan tai korkean tarkkuuden lankakehysten luomiseen.

Marvel ei vaadi lisäosia tai laajennuksia, koska kaikki varat sisältyvät. Alusta on täysin pilvipohjainen, mikä tekee lankakehysten jakamisesta muiden suunnittelutiimien jäsenten tai asiakkaiden kanssa nopeaa ja helppoa.

Yksi syy siihen, miksi suunnittelijat valitsevat Marvelin lankakehykseen, on sen integrointi muihin alustoihin, kuten Jira, Sketch, Confluence, Dropbox, Slack ja monet muut. Yhteistyössä kehittäjien, etäsuunnittelutiimien ja asiakkaiden kanssa tämä ominaisuus säästää suunnittelijoita paljon aikaa.

Marvelilla on myös tuote nimeltä Pop joka auttaa muuttamaan kynän ja paperin lankakehyksen luonnokset interaktiivisiksi iPhone- ja Android-prototyypeiksi. Pop sallii suunnittelijat ottaa kuvan luonnoksistaan ​​ja muuttaa ne interaktiivisiksi lankakehyksiksi.

Axure RP

Axure RP on ollut käytössä jo pitkään ja on loistava työkalu staattisten lankakehysten (sekä erittäin interaktiivisten prototyyppien) luomiseen. Se ei ole pilvipohjainen, vaikka se toimii sekä Windows että macOS.

Lankakehys voidaan tehdä käyttämällä sen massiivista vedä ja pudota -komponenttikirjastoa, mutta Axure RP on monimutkainen työkalu, joka menee paljon pidemmälle kuin lankakehys. Axure RP: n ohjelmallisten ominaisuuksien avulla suunnittelijat voivat luoda edistyneitä prototyyppejä, joiden toiminnallisuus heijastaa täysin toimivaa sovellusta.

Kun otetaan huomioon Axuren korkea oppimiskäyrä, ei olisi järkevää käyttää sitä vain staattisiin lankakehyksiin. Jos tavoitteena on kuitenkin tuottaa erittäin kiillotettuja ja toimivia prototyyppejä, se olisi täydellinen työkalu tuotesuunnittelijat .

ApeeScape Designersin suosikkilankatyökalut

Saavuimme joillekin ApeeScape-suunnittelijat saadaksesi selville, mitä lankakehystyökaluja ammattisuunnittelijat käyttävät ja miksi Tässä on heidän sanottavanaan.

”Suosikkini ovat Adobe XD ja UXPin. Olen valinnut XD: n suosikiksi, koska on helppo tehdä nopeita lankakehyksiä ja testata ideoita, ja sitten voin todella aloittaa suunnittelun ja jopa prototyypin samalla alustalla. ' - Michael Craig

'Suosikkini on Pop, koska se on vain niin nopeaa. Piirrän langankehykset aina paperille, joten se toimii hyvin eikä minun tarvitse kaksinkertaisesti käsitellä mitään. Minusta on myös hyvä, että 'älä rakastu ratkaisuun', koska se on niin selvästi lo-fi. ' - Nicola Rushton

”Käytän Axurea suunnilleen koko ajan suunnittelutyössäni. Se on erittäin aliarvioitu työkalu kattavaan suunnittelutyöhön, erittäin monimutkainen ”- Andi Omtvedt

'En todellakaan lanka kehystä sinänsä - koska mielestäni työkalut ovat riittävän vahvoja tuottamaan matalan tarkkuuden prototyyppejä, joten melkein yhdistetään alkuperäinen lankakehys parempaan visuaaliseen. Olen adoptoinut Framer X: n tämän vuoden tammikuusta lähtien, ja rakastan sitä. ' - Charlie Williams

Yhteenveto

Ottaen huomioon kyvyn tuottaa hienostuneita prototyyppejä, onko rautakehykset edelleen merkityksellisiä? Jotkut ammattisuunnittelijat väittävät, että lankakehykset ovat menneisyyden jäänne, kun taas toiset puolustavat vakaasti niiden jatkuvaa merkitystä suunnitteluprosessille.

Nykyään on olemassa runsaasti rautalankatyökaluja, jotka helpottavat suunnitteluprosessia. Jotkut keskittyvät edelleen pelkästään langankehykseen, vaikka trendi on siirtymässä kohti hybridituotteita, jotka alkavat lankakehyksillä mutta sisältävät myös kyvyn prototyyppiin ja tuottavat monissa tapauksissa täysin toimivia mallikuvia.

Lankakehys ei ole varmasti katoamassa, vaikka se onkin kehittynyt heikkolaatuisesta toimituksesta keski- tai korkealaatuiseksi.

• • •

Lue lisää ApeeScape Design Blogista:

• Lankakehyksen kartoitus: Kuinka välttää laajuus ryömimistä
• Kuolema lankakehykseen. Suoraan korkealaatuiseen!
• Suunnittelutyökalujen esittely - Adobe XD vs.Schetch (2019)
• Hallitse veneesi näillä Top UX -työkaluilla
• 10 UX-toimitettavaa huippusuunnittelijaa käyttää

Perustietojen ymmärtäminen

Mikä on UX-lankakehys?

UX-lankakehys on verkkosivun, tuotteen tai sovelluksen esitys, joka näyttää olemassa olevat elementit. Lankakehykset ovat tyypillisesti kaksiulotteinen kuva, joka keskittyy sisältöön, käyttäytymiseen ja toiminnallisuuksiin. Ne eivät yleensä sisällä muotoilua, värejä tai grafiikkaa.

Mikä on lankakehyksen suunnitteluohjelmisto?

Lankakehyksen suunnittelutyökalut ovat suunnittelijoiden käyttämiä lankakehysten, prototyyppien ja mallien luomiseen. Tyypillisesti ohjelmisto sisältää ennalta rakennettujen elementtien kirjastoja, joita kutsutaan myös malleiksi, lankakehyssarjoiksi tai lisäosiksi, jotka voivat rakentaa lankakehysasetteluja vetämällä ja pudottamalla.

Mikä tekee hyvästä lankakehyksestä?

Hyvällä lankakehyksellä on sekä muoto että toiminta kaksiulotteisessa ulkoasussa. Se priorisoi sisällön ja sivuelementtien, tuotteen tai sovelluksen suunnitellun käyttäytymisen. Hyvät lankakehykset, kuten piirustukset, kertovat kuinka rakentaa jotain ilman tarpeettomia yksityiskohtia.

Mitä rautalangan tulisi sisältää?

Lankakehyksen tulisi edustaa tilan jakamista sivun komponenttien välillä, sisällön, käytettävissä olevien toimintojen ja suunnitellun käyttäytymisen esitys. Se ei vaadi värejä, kuvia tai erityistä typografiaa.

Miksi tarvitset lankakehystä?

Lankakehyksiä tarvitaan, koska ne auttavat yhdistämään sivuston tietoarkkitehtuurin visuaaliseen suunnitteluun, määrittelemään käyttöliittymän suunnitellun toiminnallisuuden ja antamaan suunnittelijoille paremman käsityksen eri komponenttien näyttämisestä käyttöliittymässä.