Sådan bruger du UI Design Patterns
Designmønstre er optimale løsninger på fælles designproblemer. Som almindelige problemer kaster rundt om et fællesskab og løses, fremkommer der ofte fælles løsninger. Til sidst løfter de bedste af dem over din egen, identificerer sig og bliver raffinerede, indtil de når status som et mønster.
Jeg ville ikke kalde en design patern en tendens til webdesign, designmønstre synes at være mere om at se på, hvordan fælles designs klassificeres i eftertid, snarere end at smede nyt territorium eller se på, hvor tingene er på vej.
Hvordan skal du henvende dig til UI-designmønstre?
Vi bruger hele tiden designmønstre, hvis du ikke er fortrolig med dem, har du sikkert ikke indset, at de er alle omkring dig.
Hvad med det klassiske eksempel på at have for meget indhold at vise på en side? Vi gør os opmærksom på 'Tabs', et designmønster, der gør det muligt for os at tjene alt det indhold vi ønsker, uden at brugeren forsvinder i et hav af links.
De typiske fordele ved brug af et mønster er:
- viser begyndere hvordan man bruger bedste praksis i webdesign
- lære at tilpasse sig kollektiv forståelse af designere
- muliggør bedre kommunikation, reducerer risikoen forbundet med ukendte valg;
- reducerer den nødvendige tid og koster arbejdsgange til at udføre specifikke opgaver
- undgå spild tid på at bygge noget, der er blevet bygget før;
- giver brugeren en oplevelse, som han er bekendt med og har erfaring med (mønsterets designmønstre).
I ovenstående eksempel ser vi Clicky Media ved hjælp af to meget populære designmønstre i dag:
- Navicon - et universelt symbol for menuen, ellers kendt som site navigation, bliver stadig mere populær i moderne webdesign, men er allerede fuldt tilpasset til mobile enheder.
- Parallax Scrolling - et unikt designmønster, der muliggør en enkelt sidewebsite med en nem at bruge rullemekanisme, men indeholder også en liste over baggrundsprites, der giver siden en livlig følelse.
Selvom både Navicon-menuen og den generelle menu øverst på siden deler lignende valg - det ville være meget distraherende at inkludere alle links på samme overskriftsbjælke - det bliver klart, at små valg kan gøre en stor forskel.
Her er hvad du skal tænke på, når du vurderer et designmønster og tilpasser det til dine egne behov:
- Problemoversigt: Hvilket brugerproblem løser du? Hold fokus, og sæt det som en brugerhistorie - kun i en sætning.
- Løsning: hvordan har andre løst dette problem? Et par detaljer kan nævnes brugernavigering (herunder genveje), indhentning af brugerindgange, håndtering af data og integrationer med andre tjenester eller applikationer, og visning af information og indhold (inklusive standardindstillinger).
- Eksempel: Godt, kan du vise mig? Nogle gange er et screenshot eller mockup tilstrækkeligt; Andre gange er brugerflow og / eller yderligere noter nødvendige for at kommunikere mønsteret tydeligt.
- Anvendelse: Hvornår skal dette mønster (ikke) bruges? Nogle ting til detaljerne omfatter produktarkitektur, grænsefladelayout, enhed (er), programmeringssprog, fravær eller eksistens af andre designmønstre, type bruger og primærbrugssager.
Det kræver praksis og disciplin at tænke på mønstre på denne måde, hvis du endnu ikke har gjort det. Tag dig tid til at besvare disse spørgsmål, når du designer dit produkt, fordi det kan hjælpe dig med at spare meget tid på at refactoring ned ad vejen, når dine brugere og team beder om lignende detaljer.
Stigningen af UI-værktøjer
UI-designmønstre har altid været ved at gøre det lettere for brugeren at navigere på dit websted, program eller system. Hvis brugeren lærer at indsende en kommentar for første gang, er chancerne for, at han straks vil vide, hvordan han sender dig en e-mail ved hjælp af kontaktformularen, det er det samme gentagne begreb informationsindlæsning.
I de seneste år har vi oplevet en enorm vækst på UI værktøjskasse markedet. Et UI-værktøjssæt kan simpelthen forstås som et sæt widgets, der giver dig mulighed for at opbygge en helt grafisk applikation fra bunden. Twitter Bootstrap er et perfekt eksempel på et vellykket UI værktøjssæt. Disse dage vil en stor del af webdesignerne stole på Bootstrap-funktioner for at lette deres egen arbejdsgang. På en måde er der ingen grund til at genopfinde hjulet!
3 UI design mønstre at huske
Kort sagt er designmønstre løsninger på tilbagevendende problemer. Ved at bruge mønstre kan vi overvinde simple brugergrænsefladsproblemer. Hvis vi holder meget opmærksomhed, bemærker vi, at mønstre er omkring os. Der er ikke noget særligt med det specifikke design, det er den måde, det er blevet anvendt på, at du er begejstret for!
Crystal Clear Calls-to-Action
Den enkleste af webformularer (og også de mest almindelige) vil normalt kun have en enkelt handlingsknapp: i dette tilfælde 'Opret hjemmeside'. Det er ret selvforklarende, hvilket er pointen.
Hvor meget mere let kunne det få, ikke? Gå altid til den nemme mulighed, genopfinde ikke hjulet bare for at skille sig ud fra mængden.
Brødsmuler til undsætning
Breadcrumbs viser stien fra forsiden af webstedet til den aktuelle placering af brugeren i hjemmesidenes sidehierarki. De er en form for sekundær navigation, der hjælper brugerne med at forstå hjemmesidenes hierarki og struktur. Brødsmuler starter med startsiden og slutter med den side, der aktuelt ses.
I dette eksempel af Priser Farhan, vi ser, hvordan han bruger to brugergrænseflader på samme tid. For det første har han flipmønstret på toppen, og for det andet brødkrummernavigationsmønsteret på bunden. Ved at kombinere dem sammen skaber han en meget behagelig browseroplevelse.
Registrering skal være let
Medmindre du har levet under en sten, vil du være opmærksom på social registrering. Registrering til et websted er en almindelig ting at gøre, og det skal også gøres så let og behageligt som muligt.
Dette er et af mine foretrukne registreringssider i øjeblikket. Det er GitHub hjemmeside, og som du kan se i skærmbilledet er alt, hvad firmaet står for, præsenteret i mindre end hundrede ord. Du har også mulighed for at registrere dig på farten, og processen tager mindre end et minut at fuldføre. Du får en email til at bekræfte din konto, men det er noget, vi er vant til alligevel!
Endelige Ord
Jeg har bygget hjemmesider i over otte år, og i løbet af de otte år har jeg indset, at enkelhed er nøglen til mange designproblemer.
Jeg er kommet til den konklusion, at rod i design, oppustet med unødvendige elementer og former er den mest frustrerende oplevelse, du kan finde på internettet. Ja, design er præcis, hvordan noget virker, så hvorfor ikke få det til at fungere korrekt? Brugergrænseflade (UI) er utrolig vigtig for succesen af din virksomhed eller venture.
Den bedste måde at sikre dig at designe vellykkede websteder er at lære af og udnytte eksisterende designmønstre.