Grunnur HÍ / UX hönnunarhugmyndamunur á milli ramma, frumgerðar og mótor (Uppfært)

frumgerð um wireframe-spotta

Hver er munurinn á wireframe, spotta og frumgerð? Reyndur hönnuður hreinsaði hönnunarskilmála fyrir HÍ / UX hönnuði.

Mismunur þráðrammans, frumgerð og spotta ruglast alltaf af mörgum hönnuðum, þrátt fyrir reyndan hönnuð, sá ég að margir spurðu Quora og Reddit um þessi hugtök, svo það er bráðnauðsynlegt að gera sér grein fyrir hvað í fjandanum er það. Það myndi leysa mörg vandamál og spara hönnuði orku.

Hvað er Wireframe?

Það er myndræn uppbygging vefsíðu eða forrits sem inniheldur innihald og þætti. Rétt eins og teikning byggingar, til að það verði að skýjakljúfi þarf mörg verk og þátttakendur að taka þátt í. Sömuleiðis lítur þráðramminn einfaldur út og þarf að auki verk sem UX, HÍ, IxD hönnuðir vinna. Í stuttu máli, wireframe er hönnun með lágu tryggð sem hefur 3 einföld en bein markmið:

  • Inniheldur helstu upplýsingar
  • Teiknaðu yfirlit yfir uppbyggingu og skipulag
  • Sjónræn og lýsing á notendaviðmóti

1. Sjónrænir eiginleikar wireframe

Sjónrænt er að vírgrindin eru mjög augljós sjónræn takmörkun, því það þarf aðeins einfaldar línur, kassa og gráan lit (mismunandi gráskalir gefur til kynna mismunandi stig) til að klára.

Wireframe er mjög augljós sjónræn takmörkun. Almennt þurfa hönnuðir aðeins að nota línur, kassa og gráan lit (mismunandi gráskalir gefur til kynna mismunandi stig) til að klára.

2. Einfaldur vírrammi fyrir vektor

Innihald einfaldrar vírgrindar ætti að innihalda myndir, myndband og texta osfrv. Því verður sleppt í staðinn fyrir staðsetningar, myndinni í staðinn fyrir skyggða og texti verður skipt út fyrir táknræn orð í samræmi við textaskipulagið.

3. Kostur wireframe

Uppbygging þráðramma er hröð og ódýr.

Sérstaklega ef þú notar nokkur wireframing verkfæri eins og pappír og penna, Balsamiq. Auðvitað ættir þú að nota þessi hönnunarverkfæri til að gera það strax í byrjun.

Í samanburði við fullkomið og ítarlegt vírammi með mikilli tryggð er miklu auðveldara og mikilvægara að safna endurgjöf í gegnum lo-fi þráðinn. Af hverju? Vegna þess að fólk leggur meiri áherslu á virkni hugbúnaðar, upplýsingagerð, upplifun notenda, flæðirit yfir notendur og notagildi þess, frekar en að huga að fagurfræðilegu einkennum þessara þátta. Á sama tíma, í þessu tilfelli, geturðu auðveldlega breytt því í samræmi við eftirspurn, en ekki þörf á að aðlaga kóðun og grafíkvinnslu.

4. Gagnvirk vírammi

Stundum kjósa hönnuðir að bæta tryggð vírgrindanna til að auka mikilvægi notendaviðmótsins við suma þætti og sýna skynsemi samspils hrattprófs og sjónrænna þátta. Forrit til að takast á við þessi vandamál á réttan hátt er að nota gagnvirka þráðramma, einnig þekktur sem smellanlegi þráðramminn.

Ef þú vilt búa til svo flókinn þráðramma þarftu UXPin, sem er tæki til að wireframing og frumgerð hönnun. Gagnvirk frumgerð getur verið besta kynningin fyrir þróunarteymi og viðskiptavini. Þegar þú rakst á vandamálið að „hvað mun það gerast þegar ég smelli á þennan hnapp?“ Þarftu bara að smella og sýna viðskiptavinum þínum hvernig það virkar á gagnvirkri frumgerð. Reyndar er það nokkuð áhrifamikið og bein.

5. Sýnið vírgrindina með varúð

Þú verður að vera varkár gagnvart gauranum sem er algerlega leikmaður þegar þú þarft að kynna vírgrindina fyrir honum. Hann gæti verið viðskiptavinur þinn, einnig gæti hann verið tæknilegur framkvæmdastjóri tók þátt í samstarfinu. En hann veit ekki sannleikann að vírgrindin og lokaafurðin virðast ótengd. Svo að hann skilur kannski ekki eðlislæga hlekkinn og aðgerðina á milli. Þannig þarftu að reikna út rétta ákvörðun hvort þú þarft að leggja fram og hvernig.

Wireframing hönnunarverkfæri

Pappír og penni

Auðveldasta valið hönnunarverkfæri fyrir wireframing er pappír og penni. Teiknaðu frjálslega á pappír með penna, það er einfaldasta vírgrindin með grunnlínum og kassa. Með því myndu hönnuðir kynna hugmyndirnar innsæi með ítarlegri textatjáningu eða munnlegri ræðu fyrir viðskiptavini og leiðtoga. En þetta væri ekki notað í formlegu verkefni fyrir stór fyrirtæki.

Balsamiq

Stundum kjósa hönnuðir að bæta tryggð vírgrindanna til að auka mikilvægi notendaviðmótsins við suma þætti og sýna skynsemi samspils hrattprófs og sjónrænna þátta. Balsamiq veitir safn af þáttum fyrir truflanir wireframing í tveimur stílum. Handteikningastíll hennar myndi hjálpa til við að einbeita sér að skipulagi, hönnun aðgerða, allir litir eru hvítir og svartir. Svo þú munt ekki heyra kvörtunina um litastillingarnar og sjónræn áhrif.

Hvað er frumgerð?

Krafan um frumgerð er hærri en þráðramminn. Munurinn er sá að frumgerð verður að vera mikil tryggð frumgerð sem er gagnvirk og passa endanlegt notendaviðmót eins og mögulegt er. Á sama tíma veitir það fullkomna notendaupplifun fyrir prófarana með því að líkja eftir raunverulegu vöruviðmóti og virkni samskipta.

1. Kostur frumgerð

„Hópvæn frumgerð er til þess fallin að stuðla að samskiptum hönnuða og þróunaraðila. “

Af hverju það er svona mikilvægt? Þar sem frumgerð er venjulega notuð til að prófa vöru. Frumgerð próf á mjög snemma stigi getur sparað mikinn þróunarkostnað og tíma. Svo að það muni ekki eyða áreynslu í bakgrunni vöru arkitektúr vegna óraunhæft gagnvirkt viðmót. Svo, frumgerðin er fullkomin árangur til að prófa vöru fyrir hönnuði og verktaki.

Að auki að veita notendum frumgerðir til að safna endurgjöf, það er ávinningur að hafa innsýn í allar upplýsingar um vöruna þína og hvetja allt liðið. Mörg verkfæri frumgerða geta smíðað frumgerðir fljótt og vel, en enga erfðaskrá þarf.

Markmið frumgerðanna er nokkuð augljóst: að líkja eftir samspili notandans og viðmótsins eins raunhæft og mögulegt er. Þegar ýtt er á hnapp verður að framkvæma samsvarandi aðgerð og samsvarandi síður verða að birtast, reyndu besta til að líkja eftir fullri vöruupplifun. Þegar þú rakst á vandamálið að „hvað mun það gerast þegar ég smelli á þennan hnapp?“ Þarftu bara að smella og sýna viðskiptavinum þínum hvernig það virkar á gagnvirkri frumgerð. Reyndar er það nokkuð áhrifamikið og bein.

2. Sjónrænir eiginleikar frumgerð

Vafalaust verður frumgerðin að innihalda fagurfræðilegu eiginleika vöru sem ætti að hafa og reyna að passa endanlega útgáfu. Í grundvallaratriðum er það skinn vöru, engin HTML / CSS / JS sem taka þátt og ekki nauðsynlegt að huga að netþjóninum og gagnagrunninum.

3. Frumgerð próf

Frumgerðaprófun er lykilskref í hönnunarferli frumútgáfunnar sem er ein helsta áfangi í heildarferlinu. En hvernig eigi að framkvæma nothæfnisprófun er gríðarlega mikið umfjöllunarefni hér. Einfalt próf getur kostað um klukkutíma eða svo, það er nóg að prófa 5 eða 6 lykilmyndir. Hér eru nokkrar algengar spurningar til viðmiðunar:

  • Hvernig byrjar notandinn á verkefninu? (Leitar eða vafrar?)
  • Hvað gerir notandinn fyrst? og næst?
  • Hvernig tekur hann endanlega ákvörðun?
  • Skilja þeir hönnunaráætlunina? Einhver vandamál?

Það er stöðugt ferli til að framleiða frumgerðir á vöru og það þarf að halda endurtekningu og endurbótum.

Frumgerðartæki

Mockplus

Mockplus er allt innifalið prototyping tól fyrir skjótt samspil, hratt hönnun og fljótt forsýning. Það gerir kleift að búa til spotta fyrir farsíma (Android & iOS), Desktop (PC & Mac) og vefforrit. Í Mockplus 3.2 bætti það við UI Flow Design Mode, Repeater, Demo Verkefni og sniðmát og Sketch Import. Aðrir eiginleikar eins og Mind Map Design Mode verða kynntir í útgáfunum á eftir Mockplus 3.2.

https://www.mockplus.com

iDoc

Sem hönnunarafgreiðslutæki, samsetti iDoc samstarf, afhendingu hönnunarheimilda, svo og léttar frumgerðir. Óaðfinnanlegi verkflæðið gerir hönnuðum HÍ kleift að hlaða inn sjónrænum forskriftum frá Photoshop, Adobe XD og Sketch viðbótum.

Það er auðvelt og einfalt að setja gagnvirka tengla með því að bæta við heitum reit til að gera vandaðar frumgerðir á nokkrum sekúndum. Með 7 látbragði og 13 hreyfimyndum geturðu auðveldlega smellt á gagnvirka frumgerð sem hægt er að smella á. Hotspotið hefur 3 stillingar fyrir bakslag, heimasíðutengil og ytri hlekk. Kannaðu það meira, það kemur þér meira á óvart!

UXPin

UXPin hefur smíðað meira en 900 tegundir af mismunandi UI þætti fyrir þig til að búa til rammar og frumgerðir. Móttækilegur brotpunktur þess gerir notendum kleift að búa til móttækilegar frumgerðir og þráðrammar sem geta keyrt á mismunandi tækjum og upplausnum.

Hvað er spotta?

Mockup er „sjónræn handrit“ sem notað er til kynningar á heildar sjónrænum hönnun vörunnar. Það hefur ríkari sjónrænan þátt en vírgrindina, þar á meðal grafík, skipulag, litur og önnur nákvæmari sjónræn framsetning. Að einhverju leyti er það endanleg hönnun vörunnar.

Eins og þráðramminn er Mockup kyrrstæður og óstarfhæfur. Það leggur áherslu á útlit vörunnar með því að bæta við mikið af sjónrænum þáttum til að ná í mikilli tryggð. Þetta er oft notað í umræðum um sjónhönnun til að fá skjót viðbrögð og endurbætur á sjónrænum hönnun vöru.

Hönnunarflæði

Eftir að þú hefur fengið innsýn í kjarna hönnunar og þekkir muninn á wireframe, mockup, prototype, stendur þú fyrir framan hönnunarheiminn fyrir notendur.

Ef þú getur steypað röð vöruhönnunar í samloðandi og skilvirkt verkflæði munu ótrúlegir hlutir gerast.

Ábendingar

  • Reyndu að nota breytanlegan og endurnýtanlegan þátt þegar þú gerir vírgrind. Í því tilfelli heldurðu áfram að betrumbæta þættina til að ljúka frumgerðum sem byggjast á þráðramma.
  • Þegar þú býrð til rammar skaltu prófa að safna hugsunum og skoðunum frá teymi þínu og viðskiptavinum og reyna að endurspegla þær um hönnun þráðrammans.
  • Notaðu handhægasta tækið þitt

Þú hefur einnig áhuga á:

Bestu hönnunartækin og forritin fyrir spotta- og þráðstefnu fyrir HÍ / UX hönnuðir árið 2017

UX vs UI vs IA vs IxD: 4 Skilgreindir skilmálar um stafræna hönnun

Bestu HÍ / UX hönnunarbækur og úrræði fyrir hönnuðina

Upphaflega birt á www.mockplus.com.