Geriausi ištekliai tinklelio matmenų eskizavimui
Procesas sąsajos projektavimas visada prasideda idėjos generavimas. Tai apima vizualizaciją, kitų svetainių tyrimą ir greitą prototipų kūrimą. Šis ankstyvosios idėjos etapas yra labai svarbus suprasti išdėstymą ir naudotojo patirtį jūs ketinate statyti. Taigi, kaip jūs iš tikrųjų turėtumėte atlikti naujo projekto kūrimo darbus?
Aš esu tradicinio popieriaus ir pieštuko gerbėjas su papildomais įrankiais. Bet skaitmeninis laidavimas taip pat yra didelis, ir tai yra perspektyvi galimybė šiuolaikiniams dizaineriams. Šiame straipsnyje norėčiau pasidalinti geriausiais ištekliais abiems metodams, kad padėtų jums sukurti savo tinklinės sąsajos sąsajos.
Ankstyvoji UI / UX konceptualizacija
Pradėkime paaiškindami skirtumus tarp a vielos rėmas ir a prototipas. Šie du žodžiai dažnai vartojami pakaitomis, nes jie susiję su tuo pačiu procesu.
A vielos rėmas yra vienas statinis eskizas tinklalapio vartotojo sąsajos arba programos. Jis gali turėti iškvietimus, kad paaiškintų mygtuko tekstą, paraštes, elementų dydžius ar net animacijas. Bet wireframes yra teisingi grubūs atskirų puslapių projektai.
Panašiai, a prototipas yra tarsi a schema, parodanti, kaip skirtingi puslapiai susieja. Taigi prototipas jungia „wireframes“, kad parodytų, kaip skirtingi mygtukai ar nuorodos turėtų nukreipti į kitus puslapius.
Šios apibrėžtys nėra iškirtos akmenimis, kai kurie dizaineriai gali turėti savo terminologiją ir gali nesutikti su mano tikslia formuluote. Tačiau taip dažnai aš juos apibūdinau, ir kaip daugelis dizainerių supranta šias sąlygas.
Taigi, ką turėtumėte tiksliai daryti su šiais ankstyvaisiais konceptualiais kūriniais? Ar jie tikrai reikalingi? Sakyčiau, kad prototipų kūrimas ne visada būtinas, bet tai yra labai gera idėja, ypač kuriant sudėtingas sąveikas.
Bet wireframing visada yra gera idėja kiekvienam naujam projektui. Tai padeda jums sutelkti dėmesį į didelį vaizdą nerimaudami dėl detalių. Jūs suprantate, kaip išdėstomas bendras puslapis, ir tai yra neįkainojama, kai projektuojate konkretų išdėstymą.
„Wireframing“ tikslai
Kiekvieną kartą, kai pradedate naują projektą, turėtumėte apsvarstyti ką bandote išspręsti. Kiekviena svetainė yra sukurta atsižvelgiant į konkretų tikslą. Daugelyje svetainių netgi yra keli tikslai, kai kai kurie tikslai yra svarbesni už kitus.
Naudokite wireframing kaip vadovą, kuris padės jums rasti geriausią strategiją užfiksuoti svetainės tikslą (-us). Tai tikriausiai neįvyks pirmajame vielos karkase, todėl būkite pasirengę eskizuokite daug skirtingų idėjų.
Ieškokite kitų panašių svetainių ir užsirašykite jų geriausias savybes. Analizuokite, kaip organizuojamas turinys ir kaip judate per kiekvieną puslapį.
Pagalvokite apie wireframes iš interaktyvus požiūris. Tai ne tik gražios nuotraukos. Jie yra skaitmeninių sąsajų vaizdai, ir jūs norėtumėte, kad jūsų idėjos būtų suplanuotos.
Naudojant tinklinius išteklius, nesvarbu, ar jie yra pagaminti iš popieriaus, ar jie yra skaitmeniniai, gali daug padėti greitai eskizuoti. Dabar pažiūrėkime geriausius išteklius wireframes kūrimui.
Grid Sketchpads
Visada galite pradėti su pagrindiniais miniatiūrų eskizais spausdintuvo popieriuje išsiaiškinkite neapibrėžtas idėjas. Asmeniškai aš paprastai pradedu dirbti spausdintuvo popieriuje, nes tokiu būdu esu mažiau susirūpinęs tinklais ir daugiau apie tai idėjų generavimas.
Taškų tinklelio eskizai yra geriausias būdas eiti, jei norite išvalyti idėją, ir suteikti jai daugiau struktūros. Tinklelis padeda jums įvertinkite atstumus tarp elementų puslapyje ir sukurkite simetrija vielos rėmelyje.
Yra daug puikių produktų, jei norite pradėti spausdinti popieriuje, pvz., „Rhodia Dot Pad“ yra įvairaus dydžio kasdieniam naudojimui. Jame yra tik 80 puslapių, tačiau tai yra gana tipiška daugeliui tinklelio eskizų knygų.
Kitas labai kietas ir pritaikomas produktas yra „Dotgrid“. Visi „Dotgrid“ daiktai yra brangesni už „Rhodia“ knygas, tačiau jie turi daugiau medžiagų ir užsakymų.
„Dotgrid“ netgi priima užsakymus, kurie leidžia jums suprojektuokite savo pasirinktinį eskizą. Kiekvienoje knygoje yra šiek tiek mažiau nei 100 lapų, taigi, įskaitant priekį ir atgal, gausite apie 200 puslapių tinklui.
Pora kitų taškų tinklelio eskizų knygų, kurias norėčiau paminėti, yra „Behance Dot Grid“, kuris yra kietas ir spiralinis, nors jame yra tik 50 popieriaus lapų.
„Responsive Design Sketchbook“ yra vienas iš geriausių interneto dizainerių išteklių. Jokiam kitam gaminio projektuotojui nereikėtų reaguoti į dizaino eskizų knygą, tačiau interneto dizaineriai labai naudingi generuoti idėjas skirtinguose įrenginio pločiuose ant tinklelio išdėstymo.
Šiuose jautriuose dizaino pagalvėlės taip pat turi 50 lapų, iš viso 100 puslapių, tačiau kiekviename puslapyje yra keturi skirtingi atsakingi tinklai reprezentuoja skirtingus taškus atsakingame dizaine: darbastalio, nešiojamojo kompiuterio, planšetinio kompiuterio ir išmaniojo telefono.
Nors dizainas yra nuoširdus, palyginti su „Dotgrid“ knygomis, niekas kitas nemanė, kad interneto dizaineriai yra atsakingi. Jei esate į tokį dalyką, verta užsisakyti vieną bandomąjį važiavimą.
Jei iš tikrųjų esate į rankų darbo daiktus ir nenorite išleisti pinigų, taip pat galite spausdinkite savo tinklelio puslapius su sąsajos eskizu. Ši nemokama svetainė siūlo skirtingų tinklelio šablonų galite spausdinti ir naudoti rankomis brėžiniams rėmeliams.
Tinkleliai yra A4 ir JAV raidžių dydžiams skirtingiems spausdintuvo popieriaus stiliams. Galite rinktis iš daugelio parinkčių, pvz., Viso ilgio interneto naršyklės šablonų arba skirtingų „iPhone“ ekranų.
Visos šios parinktys yra puikios ir verta ištirti, jei esate pieštuko piešimas. Popierius yra vienas iš paprasčiausių laikmenų, leidžiančių greitai išspręsti naujas idėjas, todėl dažnai tai yra pageidaujamas pasirinkimas net UI dizainerių.
Skaitmeniniai įrankiai ir žiniatinklio programos
Yra tiek daug puikių wireframing programų ten, kad jie gali būti sunkiai padengiami, nekeliant pavojaus analizei paralyžiuoti, todėl dabar leiskite sutelkti dėmesį į kai kuriuos geriausius variantus tinklelio pagrindu sukurtas režimas.
Pirmiausia norėčiau paminėti, kad galite naudoti „Adobe“ įrankius, pvz., „Illustrator“ sukurti savo wireframes. Tai nėra visų darbo eigos dalis, o „Illustrator“ tikrai nėra nemokama. Bet jei jau dirbate su „Adobe Creative Cloud“, tai gali būti gera vieta pradėti.
1. Moqups
„Moqups“ yra viena iš geriausių internetinių įrankių Wireframing. Jūs dirbate su vaizdo redaktoriu ir turto biblioteka, kad galėtumėte vilkti visą puslapį.
Kiekvienas naujas Moqups projektas turi a iš anksto nustatytas tinklelis, ir naudoja ryškias violetines linijas, kad padėtų jums užfiksuoti elementus į suderinimą. Tai puikus žiniatinklio įrankis, kuris leidžia daug lengviau projektuoti su tinklu.
Svetainė veikia pagal nutylėjimą nemokamu planu, apribojančiu vartotoją iki 300 puslapių objektų. Svetainėje yra aukščiausios kokybės parinkčių, tačiau mėnesio mokesčio mokėjimas gali būti labiau erzina nei tik naudojant „Adobe“ įrankius, ar vienkartinį „Sketch“ pirkimą.
2. Tinklelis Papr
Tinklelis „Papr“ žiniatinklio programa yra visiškai nemokama ir siūlo tiek viešąsias, tiek privačias sąskaitas. Sukursite savo projekto pavadinimą ir gausite savo unikalų URL, kurį galėsite redaguoti iš bet kurio kompiuterio.
Kiekviena nauja viela ateina su tinkleliu kuri leidžia jums atlikti visus elementus. Funkcijos yra paprastos, tačiau jos yra pakankamos sukurkite lo-fi vielinę karkasą per kelias minutes. Tiesiog vilkite viską, ką norite į puslapį, ir sekite tinklelį, kad sukurtumėte žvaigždyną.
3. Wireframe.cc
„Wireframe.cc“ yra vienas iš paprasčiausių ir minimaliausių įrankių, kuriuos galite naudoti „wireframe“. Jame yra a netvarkinga sąsaja su iš anksto pastatytas tinklelis ir organizuotos įrankių juostos. Tiesiog spustelėję ir vilkite, kad ant drobės būtų sukurti nauji elementai. Taip pat galite išsaugoti ir bendrinti savo darbą.
Tai dar viena priemonė, siūloma nemokamai su papildomais planais. Kiekvienas planas pateikiamas kas mėnesį, todėl labai panašus į „Moqups“ kainų struktūrą. Nemokamas įrankis gali būti naudojamas bet kuriame kompiuteryje be paskyros.
4. Mockingbird
„Mockingbird“ yra dar viena puiki galimybė, kuri siūlo daug daugiau funkcijų nei dauguma „wireframing“ įrankių. Galite pradėti nemokamai, bet bandymas trunka ne ilgiau kaip 7 dienas. Tai gali būti kai kurių vartotojų nepatogumas, tačiau įrankis tikrai neįtikėtinas ir veikia visose naršyklėse.
„Mockingbird“ turi begalinę UI elementų biblioteką, pvz skirtukai, akordeonai, išskleidžiamieji meniu, vaizdo grotuvai ir paprastos teksto nuorodos. Numatytasis tinklelis naudoja „960gs“ tinklelio sistemą, tačiau galite pasirinkti 12, 16 ir 24 stulpeliai.
Galutiniai žodžiai
Nesvarbu, ar pasirinksite tradicinį, ar skaitmeninį keitiklį, tai visada yra apie produkcijos kokybė. Yra daug ką išmokti, kai atliekate tokį darbą, todėl suraskite bet kokią jums patogiausią įrankį.
Geriausias dalykas - judėti į priekį tiesiog pradėkite wireframing. Susipažinkite su tuo, kas jums patinka geriausia (popieriaus ar skaitmeninio), ir padarykite tai savo. Šiame straipsnyje numatyti ištekliai turėtų suteikti jums daugiau nei pakankamai, kad galėtumėte pradėti savo skaitmeninių sąsajų kūrimą.
(Uždėkite Oykun Yilmaz nuotrauką)
