Vietnes maketi: 4 populāras pieejas izpētei

Vietņu maketi

Vietņu maketus var izveidot ļoti dažādos veidos. Taisnība, ka nav “vislabākās” pieejas, taču atkarībā no noteiktiem lietotāja saskarnes un lietotāja dizainera stiliem un vēlmēm (un dizaina procesa) daži darbosies labāk nekā citi.

labākais planšetdators fotoattēlu rediģēšanai 2016. gadā

Šajā rakstā mēs aplūkosim četru populārāko iespēju plusus un mīnusus: gala UX rīki, maketa rīki, grafiskā dizaina rīki, kā arī kodēti noformējumi, kas sāk izjaukt robežas starp vietņu maketiem. un prototipus.



Ja jūs īpaši meklējat stieples rāmēšanas rīkus, skatiet šo ziņu vietnē labākie stiepļu rāmja rīki vai plašākai kolekcijai pārbaudiet mūsu lielo apkopojumu labākie tīmekļa dizaina rīki .



ĢenerētJS reklāmkarogu

Noklikšķiniet uz attēla, lai uzzinātu vairāk un paņemtu biļetes(Attēlu kredīts: Future / Toa Heftiba, Unsplash)

Nepieļaujiet kļūdu, domājot, ka visi vietnes maketi ir vienādi. Vienkārši lēmumi par platformām, uzticamību un kodēšanu radīs ievērojami atšķirīgus rezultātus. Ziniet, ko vēlaties un kādi ir jūsu mērķi, pirms sākat projektēšanas procesu - ja vēlaties rīku, kas atbalsta visas trīs fāzes, vislabāk ir sākt to lietot, nevis pāriet uz pusēm. Tāpat, ja jums ir nepieciešams zvaigžņu, pilnīgi reāls makets, paturiet prātā, ka jūs kādā brīdī izmantosit grafiskā dizaina redaktoru.



01. UX rīki no gala līdz galam

Augstākajā līmenī ir gala līdz galam rīki, kuru mērķis ir apmierināt visu darbplūsmu: maketi, prototipi, dokumentācija, izstrādātāju nodošana un projektēšanas sistēmas. UXPin kopš 2010. gadu sākuma ir apmierinājis šo vajadzību, taču vairāki citi zīmoli, piemēram, Adobe un InVision, tagad arī mēģina izveidot “vienu rīku, lai tos visus pārvaldītu”.

UXPin

UXPin lepojas ar spēcīgu prototipu veidošanu, maketiem, dokumentāciju un izstrādātāju nodošanu

Tātad, kā šie rīki tiek sakrauti, lai izveidotu maketu? Viņi var tos risināt bez problēmām - un pēc tam ar dažiem. Piemēram, izmantojot UXPin, varat izveidot maketus ar vairākiem stāvokļiem un mijiedarbību. Tas pat atdarina dažas Photoshop un Sketch funkcijas, iekļaujot pildspalvas rīku.



No otras puses, InVision studija , ļauj veikt diezgan jauku animācijas rediģēšanu; kamēr Adobe XD ļauj jums atvērt Photoshop un Sketch failus jūsu XD dizainos un lietot krāsas, simbolus, lineārus gradientus un rakstzīmju stilus.

kā uzzīmēt 3d vilku

Studio InVision

Studio by InVision mērķis ir izveidot gala gala darbplūsmu

Vissvarīgākais ir tas, ka end-to-end rīki tagad piedāvā projektēšanas sistēmas, lai nodrošinātu maketu konsekvenci visos projektos. Projektēšanas sistēmas visiem sniedz vienotu patiesības avotu par aktīviem un visu instrumentu dizaina principiem. Ja plānojat izveidot daudz maketus, šī funkcija kļūst gandrīz obligāta.

Izvēloties end-to-end rīku savas vietnes maketa izveidošanai, ir vērts apsvērt šādus aspektus:

  • Uzticība : Cik spēcīgs ir vizuālās un mijiedarbības dizaina rīks?
  • Konsekvence : Kādas funkcijas nodrošina dizaina konsekvenci jūsu darbā?
  • Precizitāte : Vai elementi, ar kuriem jūs strādājat, atspoguļo jūsu organizācijas “patiesības avotu”?
  • Sadarbība : Vai jūs varat sadarboties ar ieinteresētajām personām vai citiem dizaineriem?
  • Izstrādātāja nodošana : Kā rīks ģenerē specifikācijas un līdzekļus izstrādātājiem?

02. Īpaši maketa rīki

Mazāk izturīgi risinājumi, piemēram, Princips , Kadrētājs , Moqups vai Balsamiq joprojām var nodrošināt visu nepieciešamo maketa izveidošanai - jūs vienkārši zaudēsiet papildu darbplūsmas un dizaina konsekvences funkcijas. Šie rīki ir izstrādāti, lai radīšanas procesu padarītu pēc iespējas vieglāku, tāpēc jūs varat vairāk koncentrēties uz stilistiskiem lēmumiem un mazāk uz to, kā manipulēt ar programmu.

Īpašiem maketa rīkiem ir skaidras priekšrocības: iesācējiem ir noderīga to ērtā lietošana, savukārt eksperti novērtē dizainus, kas īpaši pielāgoti viņu progresīvajām vajadzībām. Progresīvākos rīkos, piemēram, Framer un Principle, ir specializācija animācijās un maketu mijiedarbībā.

Kadrētājs

Tādi rīki kā Framer specializējas mijiedarbībā

Apakšdaļā Moqups un Balsamiq nodrošina vairāk funkcionalitātes nekā nedizaina rīki, kurus dažreiz izmanto stiepļu rāmjiem un maketiem (piemēram, Galvenā piezīme ), bet tie ir ierobežoti tikai ar zemas precizitātes dizainu. Tomēr tie var būt diezgan noderīgi, ja mērķis ir ļoti ātri izveidot zemas precizitātes stiepļu rāmjus.

Kad runa ir par maketa rīkiem, jums jāizlemj, vai vienkārši izdosies vienkāršs stieples veidošanas risinājums, vai arī jums ir nepieciešams uzlabots ekrāna dizains. Neatkarīgi no izvēlētā maketa rīka, vienkārši pārliecinieties, vai esat gatavs pieņemt zaudējumus sadarbības darbplūsmā un mazāk dizaina konsekvences funkciju, ko piedāvā gala rīki.

03. Grafiskā dizaina programmatūra

Daži dizaineri zvēr pie tādas programmatūras kā Photoshop CC , Skice vai Illustrator CC , īpaši tie, kas ir īpaši prasmīgi vai pārzina rīkus, kas piedāvā vadību līdz pikseļiem. Grafiskā dizaina platformas vislabāk darbojas, ja tiecaties uz visaugstāko reālismu un vizuālo uzticamību. Un kā mēs paskaidrojam mūsu ceļvedī ātra prototipu veidošana, izmantojot Photoshop CC , tas var būt vieglāk, nekā jūs domājat.

Photoshop CC

kā es varu saglabāt savas fotogrāfijas privātas facebook
Photoshop nodrošina precīzu kontroli, taču vienkāršiem maketiem tas varētu būt pārspīlēts

Darbs grafiskā dizaina programmatūrā nodrošina piekļuvi gandrīz bezgalīgai ļoti definētu krāsu izvēlei, tādēļ, ja strādājat ar stingras un iepriekš iestatītas krāsu shēmas ierobežojumiem - piemēram, saskaņā ar noteiktiem zīmola noteikumiem - šīs programmas var būt jūsu labākās opcija. Šīs programmas piedāvā ne tikai krāsu opcijas, bet arī daudz vizuālākus rīkus, kas ļauj jums risināt detaļu sīkumus.

Tomēr šāda veida programmatūras izmantošanas trūkums ir tāds, ka to var būt grūti tulkot, kad ir pienācis laiks sākt dizaina kodēšanu. Tas, kas strādāja programmā Photoshop, ne vienmēr var darboties kodā (tādi elementi kā fonti, ēnas, gradienta efekti utt.), Kas var iztērēt laiku, kas tiek tērēts, izdomājot prototipu veidošanas risinājumus.

Stila ziņā smagām lapām maketa fāzē var būt noderīga noteiktā vizuālā informācija, tādā gadījumā Photoshop vai Sketch sniegs jums visvairāk iespēju. Līdzīgi, ja jums ir darīšana ar izvēlīgu vai grūti apmierināmu klientu, pasniedzot viņiem krāšņu un iespaidīgu maketu, viņi tos var vieglāk iegūt.

maketus var ievilkt UXPin

Photoshop vai Sketch izveidotos maketus var vilkt un nomest UXPin

Ir arī vērts pieminēt, ka Photoshop vai Sketch izveidotos maketus var vilkt un nomest prototipēšanas fāzē ar UXPin. Tas ļauj viegli animēt visus slāņus (bez saplacināšanas) ar dažiem klikšķiem un nodrošina, ka jums nav jāsāk no nulles, kad ir pienācis prototipa laiks.

kā paslēpt visas fotogrāfijas no publiskas

Ja vizuālā vide nav jūsu vienīgā prioritāte, iespējams, efektīvāk izmantojat rīku, kas ļauj vienuviet veikt stiepļu kadrēšanu, maketus un prototipus. Grafiskā dizaina programmatūra var sagādāt vairāk problēmu, nekā tā ir vērts maketiem, ja vien jūs nevēlaties optimālu vizualizāciju - jums noteikti būs regulāri jāsazinās ar savu izstrādātāju, jo šie rīki nav paredzēti sadarbībai.

04. Kodēti maketi

Ja jūs galvenokārt esat dizainers un neesat apmierināts ar kodēšanu, tad tas acīmredzami nav risinājums. Kā apspriests Ceļvedis maketiem , kodētie maketi nav noklusējuma izvēle.

Lielāko daļu kodēšanas var atlikt līdz prototipēšanas stadijai (ja veidojat HTML / JavaScript prototipu) vai pat vēlāk (ja izmantojat prototipēšanas rīku). Neskatoties uz sarežģītību un iespējamiem šķēršļiem, ir daudz cienījamu dizaineru, kuri iestājas par koda ieviešanu maketa fāzē.

Lai gan rīku un tehnoloģiju uzlabojumi nozīmē, ka izkārtojuma dizainā paveras arvien vairāk iespēju, ne visu ir viegli (vai pat iespējams) atjaunot kodā. Sākot ar kodu, jūs uzreiz zināt, ko jūs varat un ko nevar darīt. Ja jums ir ērti izmantot kodu, var arī apgalvot, ka sākt ar to ir mazāk izšķērdīgi - makets tik un tā nonāks HTML / CSS.

Bet, kā mēs jau minējām iepriekš, maketi ar kodēšanu nav populāra stratēģija vairāku iemeslu dēļ nekā kodēšanas grūtības. Pārāk agri sākot kodēt, var būt ierobežota jūsu radošums un gatavība eksperimentēt, jo ir viegli uztraukties par savu ideju iespējamību kodā, nevis par to, cik aizraujoši tās varētu izskatīties.

Kad jūs ieviesīsit kodēšanu, ir atkarīgs no jums. Vienkārši pārliecinieties, vai zināt savus dizaina mērķus, un informējiet izstrādātājus par to, kā jūs piešķirat prioritāti funkcijām.

Lasīt vairāk: