Hvernig á að nota UI Design Patterns
Hönnunarmyndir eru bestu lausnir á sameiginlegum hönnunarvandamálum. Eins og algeng vandamál eru kastað um samfélag og eru leyst, koma sameiginlegar lausnir oft fram. Að lokum, hæstu þessir rísa upp fyrir dýrið, þekkja sjálfan sig og verða hreinsaður þangað til þeir ná stöðu hönnunarmynsturs.
Ég myndi ekki hringja í hönnun faðir stefna í vefhönnun, hönnunarmynstur virðast vera meira um að skoða hvernig sameiginleg hönnun er flokkuð í eftirliti, frekar en að smíða nýtt landsvæði eða horfa á þar sem hlutirnir eru á leiðinni.
Hvernig ættir þú að nálgast hönnunarsnið mynstur?
Við notum hönnunar mynstur allan tímann, ef þú hefur ekki kynnst þeim hefur þú sennilega ekki áttað þig á því að þau séu allt í kringum þig.
Hvað með klassískt dæmi um að hafa of mikið efni til að birta á einni síðu? Við vekjum athygli okkar á 'Tabs', hönnunarmynstri sem gerir okkur kleift að þjóna öllu því efni sem við viljum, án þess að notandinn hverfist í sjó á tenglum.
Dæmigert kostur við að nota hönnunarmynstur eru:
- sýna byrjendur hvernig á að nota bestu starfsvenjur í vefhönnun;
- læra að laga sig að sameiginlegum skilningi hönnuða;
- leyfa betri samskiptum, draga úr áhættu í tengslum við ókunnuga val;
- draga úr nauðsynlegum tíma og kosta vinnuflæði til að framkvæma tiltekin verkefni;
- forðast sóun á tíma til að byggja upp eitthvað sem hefur verið byggt áður;
- gefa notandanum reynslu sem hann þekkir og hefur reynslu af (eðli hönnunarmynsturs).
Í dæminu hér að ofan sjáum við Clicky Media með tveimur mjög vinsælu hönnunarmynstri í dag:
- Navicon - alhliða tákn fyrir valmyndina, annars þekktur sem vefsíðaleiðsögn, er að verða sífellt vinsælli í nútíma vefhönnun, en hefur nú þegar verið að fullu lagað að farsímum.
- Parallax Scrolling - einstakt hönnunarmynstur sem gerir vefsíðuna kleift að nota, með auðvelt að nota hreyfimyndun, en einnig inniheldur lista yfir sprites bakgrunn sem gefur síðunni líflegan tilfinningu.
Jafnvel þótt bæði Navicon valmyndin og almenna valmyndin efst á síðunni séu svipuð val - það væri mjög truflandi að innihalda allar tenglar á sama hausboga - það verður ljóst að litlar valkostir geta skipt miklu máli.
Hér er það sem þú þarft að hugsa um þegar meta hönnunarmynstur og aðlaga það að þörfum þínum:
- Vandamálssamantekt: hvaða notendavandamál leysir þú? Vertu einbeittur og setningu það eins og notendasaga - aðeins í einum setningu.
- Lausn: Hvernig hafa aðrir leyst þetta vandamál? Nokkur atriði í smáatriðum eru notendaviðmót (þ.mt flýtivísar), færð notendaviðmót, fjallað er um gögn og samþættingu við aðra þjónustu eða forrit og birtar upplýsingar og efni (þar með talið sjálfgefið).
- Dæmi: frábært, getur þú sýnt mér? Stundum er screenshot eða mockup nóg; Að öðru leyti er notandi flæði og / eða viðbótarskýringar nauðsynlegar til að geta skýrt sambandið við mynstur.
- Notkun: hvenær ætti þetta mynstur (ekki) að nota? Nokkur atriði í smáatriðum eru vörur arkitektúr, tengi skipulag, tæki (s), forritunarmál, fjarveru eða tilvist annarra hönnunar mynstur, tegund notenda og aðalnotkun tilvikum.
Það tekur æfingu og aga að hugsa um mynstur á þennan hátt ef þú hefur ekki enn gert það. Taktu þér tíma til að svara þessum spurningum þegar þú ert að hanna vöruna þína vegna þess að það gæti hjálpað þér að spara mikinn tíma til að refsa niður veginum þegar notendur og lið biðja um svipaðar upplýsingar.
Hækkun UI tólanna
Hönnunarhugmyndir HÍ hafa alltaf verið um að auðvelda notandanum að vafra um vefsvæðið þitt, forritið eða kerfið. Ef notandinn lærir hvernig á að leggja fram athugasemd í fyrsta sinn, líkurnar eru á því að hann muni þegar í stað vita hvernig á að senda þér tölvupóst með því að nota tengiliðsformið, það er sama endurtekin hugtak upplýsingaupptöku.
Á undanförnum árum höfum við séð mikla vexti í UI tólamarkaðinum. Hægt er að skilja einfaldlega UI tólbúnað sem búnað sem gerir þér kleift að byggja upp fullkomlega grafíska forritið frá grunni. Twitter Bootstrap er fullkomið dæmi um árangursríka UI tól. Þessa dagana mun stór hluti vefhönnuða treysta á eiginleikum Bootstrap til að auðvelda eigin vinnustraum. Í vissum skilningi er engin þörf á að endurfjárfesta hjólið!
3 UI hönnun mynstur til að muna
Í stuttu máli eru hönnunarmyndir lausnir við endurteknar vandamál. Með því að nota mynstur getum við sigrast á einföldum notendaviðmótum. Ef við fylgjumst með því að við sjáum að mynstur eru allt í kringum okkur. Það er ekkert sérstakt við þessa tiltekna hönnun, það er hvernig það hefur verið beitt að þú ert spenntur!
Crystal Clear Símtöl til aðgerða
Einfaldasta vefform (og einnig algengustu) mun venjulega hafa aðeins einn aðgerðarmikil hnapp: í þessu tilviki "Búðu til vefsíðu". Það er nokkuð sjálfsskýringar, sem er málið.
Hve miklu auðveldara gæti það orðið, ekki satt? Gakktu alltaf á auðveldan valkost, ekki endurfjárfesta hjólið bara til að standa út úr hópnum.
Breadcrumbs til bjargar
Breadcrumbs sýna slóðina frá forsíðu vefsvæðisins til núverandi staðsetningu notandans á vefsíðunni. Þau eru mynd af framhaldsskoðun sem hjálpar notendum að skilja stigveldi og uppbyggingu vefsvæðisins. Breadcrumbs byrja á heimasíðunni og endar með síðunni sem verið er að skoða.
Í þessu dæmi með Fares Farhan, við sjáum hvernig hann nýtir tvær UI hönnunarmyndir á sama tíma. Í fyrsta lagi hefur hann flipamynsturinn að ofan, og annað er breadcrumbs flakkarmynsturinn neðst. Með því að sameina þau saman gerir hann mjög skemmtilega beit reynsla.
Skráning ætti að vera auðveld
Nema þú hefur búið undir rokk, munt þú vera meðvitaðir um félagslega skráningu. Skráning á vefsíðu er algengt að gera, og það ætti að vera eins auðvelt og skemmtilegt og mögulegt er.
Þetta er ein af uppáhalds skráningarsíðum mínum í augnablikinu. Það er það GitHub heimasíðuna, og eins og þú sérð á skjámyndinni er allt sem fyrirtækið stendur fyrir kynnt í minna en hundrað orð. Þú hefur einnig getu til að skrá þig á ferðinni og ferlið tekur minna en eina mínútu til að ljúka. Þú færð tölvupóst til að staðfesta reikninginn þinn, en það er eitthvað sem við erum vanur að engu að síður!
Lokaorð
Ég hef byggt vefsíður í meira en átta ár og á þessum átta árum hef ég áttað mig á að einfaldleiki er lykillinn að mörgum hönnunarvandamálum.
Ég kemst að þeirri niðurstöðu að ringulreið í hönnun, uppblásinn af óþarfa þætti og eyðublöð er mest pirrandi reynsla sem þú finnur á vefnum. Já, hönnun er nákvæmlega hvernig eitthvað virkar, svo af hverju ekki að það virki rétt? Notendaviðmót (UI) er ótrúlega mikilvægt að ná árangri fyrirtækisins eða fyrirtækisins.
Besta leiðin til að tryggja að þú ert að hanna velgengna síður er að læra af og nýta núverandi hönnunarmynstur.