Slik bruker du UI Design Patterns
Designmønstre er optimale løsninger på vanlige designproblemer. Som vanlige problemer kastes rundt et fellesskap og løses, oppstår ofte vanlige løsninger. Til slutt, de beste av disse stiger over din egen, identifiserer og blir raffinert til de når statusen til et mønster.
Jeg ville ikke kalle en designpatern en trend i webdesign, designmønstre synes å være mer om å se på hvordan vanlige design er klassifisert i ettertid, i stedet for å smi nytt territorium eller se til hvor ting er på vei.
Hvordan skal du nærme UI-designmønstre?
Vi bruker designmønstre hele tiden, hvis du ikke er kjent med dem, har du sannsynligvis ikke skjønt at de er rundt deg.
Hva med det klassiske eksempelet på å ha for mye innhold å vise på en side? Vi viser oppmerksomheten til "Tabs", et designmønster som gjør at vi kan tjene alt innholdet vi ønsker, uten at brukeren forsvinner i et sjø av lenker.
De typiske fordelene ved å bruke et mønster er:
- viser nybegynnere hvordan man bruker beste praksis i webdesign;
- lære å tilpasse seg kollektiv forståelse av designere;
- muliggjør bedre kommunikasjon, reduserer risikoen forbundet med ukjente valg;
- reduserer nødvendig tid og koster arbeidsflyt for å utføre bestemte oppgaver;
- Unngå bortkastet tid på å bygge noe som er blitt bygget før;
- gi brukeren en opplevelse som han er kjent og opplevd med (designmønsterets karakter).
I eksemplet ovenfor ser vi Clicky Media bruker to meget populære designmønstre i dag:
- Navicon - et universelt symbol for menyen, ellers kjent som nettstednavigasjon, blir stadig mer populært i moderne webdesign, men har allerede blitt fullt tilpasset mobilenheter.
- Parallax Scrolling - et unikt designmønster som muliggjør enkeltsidens nettside, med en brukervennlig rullemekanisme, men inneholder også en liste over bakgrunnsprites som gir siden en livlig følelse.
Selv om både Navicon-menyen og den generelle menyen øverst på siden deler lignende valg - det ville være veldig distraherende å inkludere alle linkene på samme topplinje - det blir klart at små valg kan gjøre en stor forskjell.
Her er hva du trenger å tenke på når du vurderer et mønster og tilpasser det til dine egne behov:
- Problemoppsummering: Hvilket brukerproblem løser du? Hold fokus, og uttrykk det som en brukerhistorie - kun i en setning.
- Løsning: hvordan har andre løst dette problemet? Enkelte detaljer inkluderer brukernavigering (inkludert snarveier), brukerinnganger, håndtering av data og integrasjoner med andre tjenester eller applikasjoner, og visning av informasjon og innhold (inkludert standardinnstillinger).
- Eksempel: flott, kan du vise meg? Noen ganger er et skjermbilde eller mockup tilstrekkelig; Andre ganger er brukerstrømmer og / eller flere notater nødvendig for å tydelig kommunisere mønsteret.
- Bruk: Når skal dette mønsteret (ikke) brukes? Enkelte detaljer inkluderer produktarkitektur, grensesnittlayout, enhet (er), programmeringsspråk, fravær eller eksistens av andre designmønstre, type brukere og primærbrukstilfeller.
Det krever øvelse og disiplin å tenke på mønstre på denne måten hvis du ikke har gjort det ennå. Ta deg tid til å svare på disse spørsmålene når du designer produktet, fordi det kan hjelpe deg med å spare mye tid på å refactoring nedover veien når brukerne og teamet ditt spør om lignende detaljer.
Stigningen av UI-toolkits
UI-designmønstre har alltid vært om å gjøre det lettere for brukeren å navigere på nettstedet ditt, programmet eller systemet. Hvis brukeren lærer å sende inn en kommentar for første gang, er det sjansene for at han umiddelbart vil vite hvordan du sender deg en e-post ved hjelp av kontaktskjemaet, det er det samme gjentatte konseptet med informasjonsinngang.
I de siste årene har vi sett en enorm vekst i UI verktøyet markedet. En UI verktøysett kan bare forstås som et sett med widgets som lar deg bygge en fullstendig grafisk applikasjon fra grunnen av. Twitter Bootstrap er et perfekt eksempel på et vellykket brukergrensesnitt. I disse dager vil en stor del av webdesignere stole på Bootstrap-funksjoner for å lette sin egen arbeidsflyt. På en måte er det ikke nødvendig å gjenoppfinne hjulet!
3 UI design mønstre å huske
Kort sagt er designmønstre løsninger på gjentatte problemer. Ved å bruke mønstre kan vi overvinne enkle brukergrensesnittproblemer. Hvis vi legger stor vekt på, merker vi at mønstre er rundt oss. Det er ikke noe spesielt med den spesifikke designen, det er måten det har blitt brukt på som du er spent på!
Crystal Clear Calls-to-Action
Den enkleste av nettskjemaer (og også de vanligste) vil vanligvis bare ha en enkelt handlerbar knapp: i dette tilfellet "Lag nettside". Det er ganske selvforklarende, hvilket er poenget.
Hvor mye mer lett kan det få, ikke sant? Alltid gå for det enkle alternativet, ikke gjenoppfinne hjulet bare for å skille seg ut fra mengden.
Breadcrumbs til redning
Breadcrumbs viser banen fra forsiden av nettstedet til nåværende sted for brukeren i nettstedets sidehierarki. De er et skjema for sekundær navigering som hjelper brukerne å forstå nettstedets hierarki og struktur. Breadcrumbs starter med hjemmesiden og slutter med siden som vises.
I dette eksemplet av Priser Farhan, vi ser hvordan han bruker to UI-designmønstre samtidig. Først har han flippene mønsteret på toppen, og det andre brønnsmørkets navigasjonsmønster på bunnen. Ved å kombinere dem sammen gir han en veldig hyggelig nettleseropplevelse.
Registrering bør være enkelt
Med mindre du har bodd under en stein, vil du være oppmerksom på sosial registrering. Registrering til en nettside er en vanlig ting å gjøre, og så bør det gjøres så enkelt og behagelig som mulig.
Dette er en av mine favorittregistreringssidene for øyeblikket. Det er GitHub hjemmeside, og som du ser på skjermbildet, er alt som selskapet står for, presentert på mindre enn hundre ord. Du har også mulighet til å registrere deg på farten, og prosessen tar mindre enn et minutt å fullføre. Du får en e-post for å bekrefte kontoen din, men det er noe vi er vant til i alle fall!
Endelige ord
Jeg har bygget nettsteder i over åtte år og i løpet av de åtte årene har jeg innsett at enkelhet er nøkkelen til mange designproblemer.
Jeg har kommet til en konklusjon at rot i design, oppblåst med unødvendige elementer og skjemaer, er den mest frustrerende opplevelsen du finner på nettet. Ja, design er akkurat hvordan noe fungerer, så hvorfor ikke få det til å fungere skikkelig? Brukergrensesnitt (UI) er utrolig viktig for suksessen til din bedrift eller venture.
Den beste måten å sikre at du utformer vellykkede nettsteder, er å lære av og bruke eksisterende designmønstre.