Labākie resursi režģa bāzēm
Process saskarnes projektēšana vienmēr sākas ar ideju ģenerēšana. Tas ietver vizualizāciju, citu vietņu izpēti un ātru prototipēšanu. Šai agrīnās idejas fāzei ir izšķiroša nozīme izprast izkārtojumu un lietotāja pieredzi jūs plānojat būvēt. Tātad, kā jums vajadzētu faktiski veikt wireframing darbu pie jauna projekta?
Es esmu tradicionālā papīra un zīmuļa ventilators ar papildus instrumentiem. Bet digitālā drukāšana ir arī liels, un tas ir dzīvotspējīgs risinājums mūsdienu dizaineriem. Šajā rakstā es vēlos dalīties ar labākajiem resursiem abām metodēm, lai palīdzētu jums izveidot savu UI tīkla režģi.
Agrīna UI / UX konceptualizācija
Sāksim, precizējot atšķirības starp a stieple un a prototips. Šie divi vārdi bieži tiek aizstāti, jo tie attiecas uz to pašu procesu.
A stieple ir viena statiska skice Web lapas vai lietotnes lietotāja interfeisa Tam var būt izsaukumi, lai izskaidrotu pogas tekstu, margas, elementu izmērus vai pat animācijas. Bet wireframes ir taisnība aptuvenus atsevišķu lapu projektus.
Līdzīgi, a prototips ir kā a diagramma, kurā parādīts, kā dažādas lapas sasaista kopā. Tātad prototips savieno wireframes, lai parādītu, kā dažādām pogām vai saitēm vajadzētu novest pie citām lapām.
Šīs definīcijas nav cirsts akmenī, dažiem dizaineriem var būt sava terminoloģija, un tie var nepiekrist manam precīzam formulējumam. Bet tas ir tas, kā es tos parasti esmu aprakstījis, un tas, cik daudzi dizaineri saprot šos vārdus vislabāk.
Tātad, ko jums vajadzētu tieši darīt ar šiem agrīnajiem konceptuālajiem gabaliem? Vai tie tiešām ir vajadzīgi? Es teiktu, ka prototipēšana ne vienmēr ir nepieciešama, bet tā ir ļoti laba ideja, jo īpaši, lai izstrādātu lietotnes ar sarežģītu mijiedarbību.
Bet wireframing vienmēr ir laba ideja par katru jaunu projektu. Tas palīdz jums koncentrēties uz lielo attēlu neuztraucoties par detaļām. Jūs saņemsiet sajūtu par to, kā tiek veidota visa lapa, un tas ir nenovērtējams, kad izstrādājat konkrētu izkārtojumu.
Mērķi Wireframing
Katru reizi, kad sākat jaunu projektu, jāapsver ko jūs mēģināt atrisināt. Katra vietne ir veidota ar konkrētu mērķi. Daudzās vietnēs ir vairāki mērķi, kur daži mērķi ir svarīgāki par citiem.
Izmantojiet wireframing kā ceļvedi, lai palīdzētu jums atrast labāko stratēģiju tīmekļa vietnes mērķa (-u) noteikšana. Tas, visticamāk, nenotiks uz pirmās stiepļu sijas, tāpēc būsiet gatavs ieskicējiet daudz dažādu ideju.
Meklējiet citas līdzīgas vietnes un pierakstiet to labākās funkcijas. Analizējiet, kā saturs tiek organizēts un kā pārvietojas pa katru lapu.
Domājiet par wireframes no interaktīvā skatījumā. Tie nav tikai skaisti attēli. Tie ir digitālo interfeisu attēlojumi, un jūs vēlaties to ieskicēt.
Ātra ieskicēšana var palīdzēt ar tīkla resursiem, neatkarīgi no tā, vai tie ir izgatavoti no papīra vai tie ir digitāli. Tagad pārbaudīsim labākos resursus, lai izveidotu wireframes.
Grid Sketchpads
Jūs vienmēr varat sākt ar pamata sīktēlu skicēm printera papīrā tikai uz apzināt neapstrādātas idejas. Personīgi es parasti sāku strādāt pie printera papīra, jo šādā veidā es esmu mazāk nobažījies par tīkliem un par to ideju radīšana.
Dotu režģa sketchpads ir labākais veids, kā iet, ja vēlaties iztīrīt ideju, un dod tai lielāku struktūru. Režģis palīdz jums novērtējiet attālumus starp vienumiem lapā un izveidojiet sava veida simetrija stiepļu rāmī.
Ir daudz lielisku produktu, ja vēlaties sākt papīra formēšanu, piemēram, Rhodia Dot Pad nāk dažādos izmēros ikdienas lietošanai. Tas ir tikai 80 lappuses, bet tas ir diezgan tipisks vairumam tīkla skices.
Vēl viens ļoti foršs un pielāgojams produkts ir Dotgrid. Visi Dotgrīda priekšmeti ir dārgāki par Rhodia grāmatām, taču tie ir aprīkoti ar vairākiem materiāliem un pielāgotiem vākiem.
Dotgrid pat pieņem pasūtījumus, kas ļauj jums veidojiet savu pielāgoto sketchpad. Katrā grāmatā ir nedaudz mazāk par 100 lapām, tātad arī priekšpusē un aizmugurē jūs saņemsiet aptuveni 200 lappušu, lai izveidotu režģi.
Pāris pāris dot grid skicesbooks, ko es vēlos pieminēt, ir Behance Dot Grid, kas ir ciets un spirālveida, lai gan tajā ir tikai 50 papīra lapas.
Responsive Design Sketchbook ir viens no labākajiem tīmekļa dizaineru resursiem. Nevienam citam produktu dizainerim nebūtu nepieciešama atsaucīga dizaina skice, bet tīmekļa dizaineri lielā mērā gūst labumu no brīvības radīt idejas dažādos ierīces platumos virs režģa izkārtojuma.
Šiem atsaucīgajiem dizaina spilventiņiem ir arī 50 lapas, kuru kopējais skaits ir 100 lapas, bet katrai lapai ir četri dažādi reaģējoši režģi pārstāvot dažādus pārtraukuma punktus atsaucīgā dizainā: galddatoru, klēpjdatoru, planšetdatoru un viedtālruni.
Lai gan dizains ir glīts salīdzinājumā ar Dotgrid grāmatām, neviens cits nav uzskatījis, ka web dizaineriem ir piemērotas skices. Ja jūs esat iesaistījies tajā, tad ir vērts pasūtīt vienu izmēģinājuma braucienam.
Ja jūs patiešām nonākat roku darbs, un nevēlaties tērēt naudu, varat arī izdrukājiet savas tīkla lapas ar saskarnes skici. Šis bezmaksas vietnes piedāvājums dažādas tīkla veidnes ko var izdrukāt, un izmantojiet ar roku zīmētus wireframes.
Režģi ir A4 un ASV burtu izmēri dažādiem printera papīra stiliem. Varat izvēlēties no daudzām iespējām, piemēram, pilna garuma tīmekļa pārlūkprogrammas veidnēm vai dažādiem iPhone ekrāniem.
Visas šīs iespējas ir lieliskas, un ir vērts izpētīt, vai jūs esat iesaistīts zīmuļu zīmēšana. Papīrs ir viens no vienkāršākajiem nesējiem, lai ātri izkļūtu no jaunām idejām, tāpēc bieži vien tas ir vēlamais variants pat UI dizaineriem..
Digitālie rīki un tīmekļa lietojumprogrammas
Ir tik daudz lielisku wireframing programmu, kas tur, ka tās var būt grūti aptvert bez riska analīzes paralīze, tāpēc tagad pieņemsim koncentrēties uz dažām labākajām iespējām tīkliem balstīta wireframing.
Pirmkārt, es gribētu pieminēt, ka varat izmantot Adobe rīkus, piemēram, Illustrator izveidojiet savus wireframes. Tas nav daļa no ikviena darbplūsmas, un Illustrator noteikti nav bezmaksas. Bet, ja jūs jau strādājat ar Adobe Creative Cloud, tas varētu būt laba vieta, kur sākt.
1. Moqups
Moqups ir viens no labākajiem tiešsaistes rīkiem wireframing. Jūs strādājat ar vizuālo redaktoru un aktīvu bibliotēku, lai velciet un nometiet visu lapu.
Katram jaunajam Moqups projektam ir a iepriekš definēts režģis, un izmanto spilgtas, purpursarkanas līnijas, lai palīdzētu jums sablīvēt elementus. Tas ir lielisks tīmekļa rīks, kas padara projektēšanu ar režģi tik daudz vieglāku.
Vietne darbojas pēc noklusējuma brīvā plānā, kas ierobežo lietotāju līdz 300 lapu objektiem. Vietnei ir piemaksas iespējas, bet ikmēneša maksas samaksa var būt vairāk kaitinoša nekā tikai ar Adobe rīkiem, vai vienreizējs Sketch pirkums.
2. Režģis Papr
Grid Papr tīmekļa lietojumprogramma ir pilnīgi bez maksas, un tā piedāvā gan publiskos, gan privātos kontus jūsu wireframes. Jūs izveidojat nosaukumu savam projektam un iegūsiet savu unikālo URL, ko var rediģēt no jebkura datora.
Katrs jauns stiepļu karkass nāk ar režģi kas ļauj jums veikt snap-to-grid visus elementus. Funkcijas ir vienkāršas, bet tās ir pietiekamas izveidojiet lo-fi stieplīti dažu minūšu laikā. Vienkārši velciet to, ko vēlaties, uz lapu, un sekojiet režģim, lai izveidotu zvaigžņotu stiepļu karkasu.
3. Wireframe.cc
Wireframe.cc ir viens no vienkāršākajiem un minimālākajiem instrumentiem, ko var izmantot, lai izveidotu drukāšanu. Tā ietver a netraucēts interfeiss ar iepriekš uzbūvēts režģis un organizētās rīkjoslas. Vienkārši noklikšķiniet un velciet, lai radītu jaunus elementus uz audekla. Varat arī saglabāt un koplietot savu darbu.
Šis ir vēl viens līdzeklis, ko piedāvā bez maksas ar papildu piemaksu plāniem. Katrs plāns tiek rēķināts katru mēnesi, tāpēc tas ir ļoti līdzīgs cenu struktūrai. Bezmaksas rīks ir izmantojams no jebkura datora bez konta.
4. Mockingbird
Mockingbird ir vēl viena lieliska iespēja, kas piedāvā daudz vairāk iespēju nekā vairums vadu rakstīšanas rīku. Jūs varat sākt bez maksas, bet izmēģinājums ir ierobežots līdz 7 dienām. Tas var būt dažiem lietotājiem nepatīkams, bet rīks ir patiešām neticams un darbojas visās pārlūkprogrammās.
Mockingbird ir bezgalīga bibliotēka ar UI elementiem, piemēram, cilnes, akordeoni, nolaižamās izvēlnes, video atskaņotāji un vienkāršas teksta saites. Noklusējuma režģis izmanto 960gs režģa sistēmu, bet jūs varat izvēlēties 12, 16 un 24 slejas.
Galīgie vārdi
Neatkarīgi no tā, vai izvēlaties tradicionālo vai digitālo iezīmēšanu, tas vienmēr ir par produkcijas kvalitāti. Veicot šādu darbu, ir daudz ko mācīties, tāpēc atrodiet, kāds rīks jums šķiet visērtākais.
Virzoties uz priekšu, vislabāk ir darīt vienkārši sāciet wireframing. Izbaudiet visu, kas jums patīk vislabāk (papīrs vai digitālais), un dariet to par savu. Šajā rakstā iekļautajiem resursiem vajadzētu sniegt jums vairāk nekā pietiekami, lai sāktu darbu ar savu digitālo saskarni.
(Pārskats Oykun Yilmaz fotoattēlu)
