Hemmelighetene til effektiv kortbasert design
Så du vil få trender med et kortstil-grensesnitt? Det er sannsynligvis en god ide; Kort er et populært og brukervennlig alternativ for alle typer digital design på varierende enhetsstørrelser.
Nøkkelen til et kortdesign er å skape noe som brukerne vil klikke på. (Det er nøkkelen til et bra kort.) Et kort skal fungere som en beholder for en bestemt del innhold - innholdslink, registrering, videospiller osv. - som brukerne vil samhandle med.
Slik utformer du det ...
Begynn med en svart og hvit omriss
Det høres ganske enkelt ut: Begynn med en svart og hvit wireframe for designet. Tenk på hensikten med kortet og hvilke deler av det vil være klikk eller tappable. (Hele kortet kan fungere som en lenke.)
Planlegg for elementer som mellomrom, bilder og typografi slik at du kan se kortet uten farge eller utsmykking. Tenk på det som "spillekort" -fasen av designet. Alle elementene i kortet er der. Ser det ut som et rammeverk som er lett å forstå?
Tenk på hvordan du vil bruke den fra dette stadiet. Hvor vil du klikke for en handling? Er mønsteret og resultatet klart? Hvordan går du tilbake eller fremover? Svarene på disse spørsmålene bør være relevante uten tegn som en rød "klikk her" -knapp som blinker på skjermen.
Som med ethvert annet prosjekt, hvis omrisset ikke virker i svart-hvitt, vil det endelige designet trolig heller ikke.
Bruk overdrevet avstand
Den største utfordringen når det kommer til kort, er å skape en kompakt design som ikke føles rotete. Det er der hvite rom kommer inn. Og du vil bruke mer av det enn å føle deg komfortabel først.
Tillegget av hvitt plass gir elementene mer plass til å puste, noe som gjør at det generelle kortet virker mer romslig og økende lesbarhet.
Vanligvis vil du kanskje begynne med to ganger avstanden du vanligvis anser mellom elementer. Gutters bør være ekstra bred og linjeavstand kan også bruke ekstra rom. Den ekstra plassen vil hjelpe deg med å lage et åpent design og organisere innholdet tydeligere. Kortet har et ganske begrenset lerret og skal passe på en enkelt skjerm på en telefon, og en like stor del av skjermen på større enheter som tabletter eller stasjonære datamaskiner. Kortene kan også konkurrere mot andre kort for oppmerksomhet på større skjermer. Lagt til hvitt plass vil hjelpe hele designfeltet mer åpent og enkelt å dykke inn i.
Legg til naturlig farge og skygge
Nå er du klar til å tenke på farge og skygge for designet. Hold det naturlig å se og etterligne virkeligheten i skyggene og stilene av designet.
Nei, vi snakker ikke skeuomorphism her, vi snakker om å skape farge med naturlige konturer og skygger. Tenk på hvordan et kort vil bli vist. Brukeren skal få den samme følelsen som om han eller hun faktisk holdt den.
Bruk noen av de grunnleggende reglene for fysikk til å forestille (og designe) hvert kort som det ville bli holdt:
- Belysning skal kaste noen skygger på bak og bunn.
- Den mørkeste delen av designet er sannsynligvis nederst takket være lysforholdene, som vanligvis kommer fra oven.
- Unngå innhold på områder som kreves for å holde kortet.
- Berøringspunkter (og tilhørende samtaler til handling) bør være fokuspunkter og lett å samhandle med. (På samme måte som ansiktet på et spillkort er i midten av designet.)
- Ett kort er lik en bit informasjon.
Lag enkle lag
Nå som du tenker på fysikk, ta det til neste nivå med enkel lagring for å skape en enhetlig kortstil for hele grensesnittet. Ikke sikker på hvor du skal begynne? Googles Material Design retningslinjer er et flott utgangspunkt.
"I materiell design oversettes papirets fysiske egenskaper til skjermen. Bakgrunnen til en applikasjon ligner den flade, ugjennomsiktige tekstur av et ark papir.
En applikasjons adferd etterligner papirets evne til å bli omformet, blandet og bundet sammen i flere ark. Elementer som lever utenfor applikasjoner, for eksempel status- eller systemfelt, får en annen behandling. De er skilt fra appinnholdet under dem, og bærer ikke de fysiske egenskapene til papiret.
Bryt dette ned, og det går tilbake til å gjøre et digitalt objekt se ut og føle seg fysisk. Og hvis brukerne vil røre den, vil de ønske å klikke den. Konseptet er så enkelt.
Hold deg til enkle skrifttyper
Når det gjelder typografi, er enkle sans serifs ofte svaret. Unngå super tynne eller kondenserte alternativer fordi de kan være litt tøffere på øynene.
De fleste kortene fungerer best med to skrifttypealternativer (selv om de er fra samme familie) - noe for hoveddelen og en annen for overskriften eller call-to-action. Den viktigste faktoren når det gjelder typografi er å huske å inkludere mye kontrast slik at tekstelementene er enkle å lese. Husk å inkludere kontrast mellom skrifttyper og kontrast mellom bakgrunn og tekstelementer for hvert kort.
Begrens UI-elementer
Gjenta etter meg: ett kort er en handling.
Så det betyr sannsynligvis at du ikke trenger å inkludere en rekke brukergrensesnittelementer som knapper i hele designet.
Du trenger ikke engang en knapp i en kortdesign.
Men hvis du tror at brukerne trenger en visuell signal, er en knapp nok. Hold formen og designen enkel - igjen er Material Design-tilnærmingen et godt alternativ - og hold deg til bare en knapp.
En knapp er trolig det eneste brukergrensesnittet du trenger. Dette er ditt designmål.
Konklusjon
Det er ikke en magisk formel for det perfekte kortet, men det er noen designvalg du kan gjøre som oppfordrer hver bruker til å klikke (eller trykk). Hold designet sentrert i virkeligheten, følg en minimalistisk tilnærming med god plass og kontrast, legg vekt på enkel typografi, og lag en enkelt handling for hvert kort.
Etter denne oversikten vil du hjelpe deg med å forestille deg og konseptualisere kortstilte prosjekter som brukerne vil samhandle med. Kombiner disse ideene med designteori og dine dyktige ferdigheter for et godt prosjekt som vil være morsomt for brukere og estetisk på trend.