Hemmelighederne til effektiv kortbaseret design
Så du ønsker at få on-trend med en kort-stil interface? Det er nok en god ide; kort er en populær og brugervenlig mulighed for alle typer digitalt design på forskellige enhedsstørrelser.
Nøglen til et kortdesign skaber noget, som brugerne vil klikke på. (Det er nøglen til et godt kort.) Et kort skal fungere som en beholder til en bestemt smule indhold - indholdslink, tilmelding, videospiller osv. - som brugerne vil interagere med.
Sådan designer du det ...
Start med en sort / hvid omrids
Det lyder ret simpelt: Start med en sort og hvid wireframe til designet. Tænk på kortets hensigt, og hvilke dele af det vil blive klikket eller tappes. (Hele kortet kan fungere som et link.)
Planlæg for elementer som mellemrum, billeder og typografi, så du kan se kortet uden farve eller udsmykning. Tænk på det som "spillekort" -fasen af designet. Alle kortets elementer er der. Virker det som en ramme, der er let at forstå?
Tænk på, hvordan du vil bruge det fra dette stadium. Hvor vil du klikke på en handling? Er mønsteret og resultatet klart? Hvordan går du tilbage eller fremskridt? Svarene på disse spørgsmål skal være relevante uden tegn som en rød "klik her" -knap, der blinker på skærmen.
Som med ethvert andet projekt, hvis oversigten ikke virker i sort / hvid, vil det endelige design sandsynligvis heller ikke.
Brug overdrevet afstand
Den største udfordring, når det kommer til kort, er at skabe et kompakt design, der ikke føles rodet. Det er her hvide rum kommer ind. Og du vil gerne bruge mere af det end føles komfortabel først.
Tilføjelsen af whitespace vil give elementer mere plads til at trække vejret, hvilket gør det samlede kort til at synes mere rummeligt og øget læsbarhed.
Generelt kan du starte med to gange den afstand, du normalt overvejer mellem elementer. Gutters bør være ekstra bred og linjeafstand kan også bruge det ekstra rum. Det ekstra mellemrum hjælper dig med at oprette et åbent design og organisere indholdet tydeligere. Kortet har et ret begrænset lærred og skal passe på en enkelt skærm på en telefon og en tilsvarende stor del af skærmen på større enheder som tabletter eller stationære computere. Kort kan også konkurrere mod andre kort for opmærksomhed på større skærme. Tilføjet whitespace vil hjælpe hele design føler sig mere åben og let at dykke ind.
Tilføj naturlig farve og skygge
Nu er du klar til at tænke på farve og skygge for designet. Hold det naturligt udseende og efterligne virkeligheden i skyggerne og stilene i designet.
Nej, vi taler ikke skeuomorphism her, vi taler om at skabe farve med naturlige konturer og skygger. Tænk på, hvordan et kort vil blive vist. Brugeren skal have den samme følelse som om han eller hun rent faktisk havde det.
Brug nogle af de grundlæggende regler for fysik til at forestille (og designe) hvert kort som det ville blive afholdt:
- Belysning skal kaste nogle skygger på bagsiden og bunden.
- Den mørkeste del af designet er sandsynligvis i bunden takket være lysforholdene, som normalt kommer fra oven.
- Undgå indhold på områder, der er nødvendige for at holde kortet.
- Touchpoints (og de tilhørende opkald til handling) skal være kontaktpunkter og let at interagere med. (Ligesom ansigtet på et spillekort er i midten af designet.)
- Et kort svarer til en smule information.
Opret enkle lag
Nu hvor du tænker på fysik, skal du tage det til næste niveau med simpel lagring for at skabe en samlet kortstil for hele grænsefladen. Ikke sikker på hvor du skal starte? Googles Materiale design retningslinjer er et godt udgangspunkt.
"I materialet design oversættes papirets fysiske egenskaber til skærmen. Baggrunden for en ansøgning ligner den flade, uigennemsigtige tekstur af et ark papir.
En applikations adfærd efterligner papirets evne til at blive omformet, blandet og bundet sammen i flere ark. Elementer, der lever uden for applikationer, f.eks. Status eller systemstænger, modtager en anden behandling. De er adskilte fra appindholdet under dem og bærer ikke papirets fysiske egenskaber.
Bryd det ned, og det går tilbage til at få et digitalt objekt til at kigge og føle sig fysisk. Og hvis brugerne vil røre ved det, vil de gerne klikke på det. Konceptet er lige så simpelt.
Hold dig til enkle skrifttyper
Når det kommer til typografi, er simple sans serifs ofte svaret. Undgå super tynde eller kondenserede muligheder, fordi de kan være lidt hårdere på øjnene.
De fleste kort fungerer bedst med to skrifttyper (selvom de er fra samme familie) - noget til hovedlegemet og et andet til overskriften eller call-to-action. Den vigtigste faktor når det kommer til typografi er at huske at inkludere masser af kontrast, så tekstelementer er nemme at læse. Husk at inkludere kontrast mellem skrifttyper og kontrast mellem baggrunds- og tekstelementerne for hvert kort.
Begræns UI-elementer
Gentag efter mig: Et kort svarer til en handling.
Så det betyder nok, at du ikke behøver at inkludere en masse brugergrænsefladeelementer som knapper i hele designet.
Du har måske ikke engang brug for en knap overhovedet i et kortdesign.
Men hvis du tror brugerne har brug for en visuel cue, er en knap nok. Hold formen og designen enkel - igen er Material Design-tilgangen en god mulighed - og hold dig til kun en knap.
En knap er nok det eneste UI-element, du har brug for. Dette er dit designmål.
Konklusion
Der er ikke en magisk formel til det perfekte kort, men der er nogle design valg, du kan gøre, der opfordrer alle brugere til at klikke (eller trykke på). Hold dit design centreret i virkeligheden, følg en minimalistisk tilgang med masser af plads og kontrast, læg vægt på simple typografi og lav en enkelt handling for hvert kort.
Følgende skitse vil hjælpe dig med at forestille dig og konceptualisere kortstilte projekter, som brugerne vil interagere med. Kombiner disse ideer med designteori og dine gale færdigheder til et godt projekt, der vil være sjovt for brugere og æstetisk on-trend.