Hemmelighetene til effektiviteten til kortdesign - SkillsUp - en praktisk katalog med leksjoner om design, datagrafikk, Photoshop-leksjoner, Photoshop-leksjoner. Dra nytte av animasjon og bevegelse

26.12.2016

Kort er pene små beholdere med informasjon.. Kort har nærmest blitt et må-ha-element når det kommer til å balansere estetikk med enkel brukervennlighet. Kortdesign ble opprinnelig introdusert av tjenester som Pinterest og Facebook, og i dag har innflytelsen spredt seg til mange bransjer.

Godt utført kortdesign kan forbedre brukeropplevelsen ( Brukererfaring) av søknaden din. I denne artikkelen vil jeg beskrive 5 nyttige teknikker å implementere kortdesign og jeg skal gi deg noen interessante eksempler.

Les også:

1. Følg regelen "Ett kort - ett konsept"

2. Hele overflaten av kortet må være klikkbar

Følg Fitts lov og la brukere klikke/trykke på hvilken som helst del av kortet, ikke bare tekstlenker eller bilder. Et stort kontaktområde forbedrer brukervennligheten betraktelig på både berøringsskjermer og enheter som bruker mus.

Råd: det er bra når kortene kaster en skygge, viser dybde - dette er visuelt bekrefter klikkbarheten til kortet.

3. Gjør kort attraktive

Kortdesign fungerer fordi god design og utmerket brukervennlighet. Ved å legge til estetikk til kort, gjør du dem gjenkjennelige og kreative.

Når det gjelder kortdesign, må du fokusere på følgende punkter:

Bilder

En vekt på bilder er styrken til kortdesign. Forskning bekrefte at bilder «hever» designet. Fokus på bruk av bilder gjør derfor kortgrensesnittet mer attraktivt for brukerne.

Skygger og gradienter

Skygger og gradienter har kommet langt for å bli følt og assosiert med deres fysiske motparter. Men tenk nøye gjennom hvordan du bruker skygger og gradienter: hvis skygger kastes fra alle vinkler og sider, vil illusjonen om at kortet er et fysisk objekt bli ødelagt.

Typografi

Du kan også tiltrekke brukerens oppmerksomhet ved å bruke tekst. Alt i kortdesignet skal være lett å lese og forstå:

Bruk enkle fonter Og fargepaletter(tekst leses best mot en kontrasterende bakgrunn).
Prøv å bruke et minimum antall fonter. For kortdesign er én skrift mer enn nok.

Råd: Vanlig sans-serif-skrift er flott for kort.

Les også:

4. Begrens kortinnhold

Kortene er vanligvis konsise og inneholder en lenke for å gå til mer detaljert informasjon. Når du prøver å pakke for mye innhold på et kort ved å gjøre det for bredt eller for langt, mister det sin opprinnelige melding fordi det ikke lenger ser ut som et kort.

Nedenfor er et eksempel på et kortgrensesnitt. Legg merke til kortet i midten. Problemet er at det er mye informasjon på det, noe som gjør kortet vanskelig å forstå.

5. Dra nytte av animasjon og bevegelse

Animasjoner kan ha en positiv innvirkning på UX hvis de brukes riktig. De hjelper folk bedre å navigere i kortgrensesnittet og installere visuelle forbindelser mellom forskjellige tilstander for hvert kort.

Visuelle hint

Visuelle signaler hjelper brukere med å forstå hvordan de best kan samhandle med brukergrensesnittet. Denne typen animasjoner brukes når du skal demonstrere hvordan visse designfunksjoner fungerer.

Visuell tilbakemelding

Visuell tilbakemelding er veldig viktig i grensesnittdesign. Det fungerer fordi det tilfredsstiller brukerens naturlige ønske om bekreftelse. I det virkelige liv objekter reagerer på interaksjon, og dette er hva folk forventer av objekter. For skrivebordsapplikasjoner eller nettsteder kan du bruke sveveeffekt for å vise at objekter kan samhandles med. Hover-animasjon øker forståelsesnivået og gjør samtidig brukeropplevelsen mer underholdende.

Ved å bruke sveveeffekten kan du også åpne alternativer. I eksemplet nedenfor lar sveveeffekten brukere endre farger, svare på meldinger, sende dem eller slette dem.

Like funksjonelle som de er vakre, er kortgrensesnitt ikke bare en trend. Siden mobilnetttrafikken overgikk trafikken på skrivebordet i 2014, har responsiv design blitt bransjestandarden, og nettdesignere fokuserer innsatsen på små skjermer. Som et resultat får de enestående popularitet enkle stiler som flat, minimalisme og spesielt kort.

Kortmønsteret er praktisk, ikke bare fordi det reduserer sidelastingstid og forenkler skaleringsgrensesnitt for forskjellige skjermer. Små deler av innholdet samsvarer med oppmerksomhetsspennet til nettbrukere (spesielt de som bruker mobile enheter). Inspirert av Pinterest og popularisert av sosiale nettverk som Facebook Og Twitter, kortgrensesnitt i dag kan sees på nettsteder for alle emner. I denne artikkelen vil vi se på kortets UI-mønster i sin helhet: hva er bra med det, hvordan det passer inn i konseptene adaptiv og materialdesign, og hva du kan forvente av det i fremtiden.

Kilde: Formelt Ja

Hva er containerbasert design?

For å forstå mønsteret, må du først forstå ideen om selve kortet.

Kort er i hovedsak små beholdere for deler av informasjon, og hvert kort bærer en uavhengig tanke. Den kan inneholde alle typer innhold: bilde, tekst, lenker osv. - alle kortene er forent av et eller annet felles tema.

Trello-brukere kan lage hvilke kort de vil. Hvem som helst kan lage kort med oppgavelister og sortere dem slik de vil.
Dette eksemplet viser hvor fleksible kort kan være og viser også deres evne til å organisere informasjon. Trello skylder sin popularitet til det faktum at kort virker enklere for brukere. vanlige lister oppgaver brukt av andre oppgavebehandlere.

Kort i grensesnittene til mobile og responsive nettsteder

Som jeg allerede har skrevet, passer kortgrensesnitt bra med responsive rammeverk, og det er grunnen til at Intercoms Des Traynor selv kalte dem fremtiden til nettet. Dette brukergrensesnittmønsteret oversetter godt til mobile enheter av mange grunner - vi skal snakke om dem nå.

Kilde: The Verge

For det første, i skalerbare rammer, kan kortstrukturer bygges om for å passe til ethvert bruddpunkt eller skjermstørrelse. Designere har mulighet til å leke med forholdet mellom kortbredde og høyde og hvordan grupper av kort forholder seg til hverandre. For eksempel kan kort ha fast bredde og forskjellige høyder med et gitt intervall mellom dem.

Sammenlign stasjonære (over) og mobile (under) visningsporter fra The Verge:

Kilde: The Verge (mobilnettsted)

Vær oppmerksom på tekstene, bildene, gradientene - de er de samme i begge versjonene. Kort lar deg lage en singel Brukererfaring og kringkaste den på alle enheter.

Du kan se dette prinsippet i aksjon ved å besøke Free Library for Designers-siden på UXPin. Legg merke til hvor jevnt oppsettet skaleres fra mobil til fullskjermvisning.

Mobil visningsport:

Kilde: UXPin

Høyoppløselig skjerm:

Kilde: UXPin

En annen fordel med kort er at de fungerer utmerket som bevegelseskontroller. På berøringsskjermer kort uten noen ekstra innsats bli til knapper. Ideen er enkel: Trykk på kortet for å begynne å samhandle med innholdet.

Kortenes fremtid

Det kortbaserte UI-mønsteret er i stadig utvikling for å møte nye utfordringer, hvorav de fleste vil påvirke adaptiv design og applikasjonsdesign. Som vi diskuterte i Web Design Trends 2015 og 2016, skyldes disse endringene delvis innvirkningen Material Design har på Android-apper.

1. Teknologi
Snart kan kortene bli dynamiske. Etter hvert som nettsteder blir mer produktive, kan de støtte mer komplekse medieressurser. Kanskje vil vi se elementer med et stort antall detaljer, for eksempel selvoppdaterende innhold, mens interaksjon med grensesnittet ikke vil avta.

Kortgrensesnittet er en av de mest populære trendene senere år. Den er brukervennlig og tilpasser seg perfekt forskjellige typer enheter.

Hvordan ser et vellykket kortdesign ut? Slik at brukeren ønsker å klikke på kortet og gjøre seg kjent med innholdet som er skjult bak det. Kortet skal fungere som en beholder for spesifikt innhold - tekst, registreringsskjema, video.

Frilans.I dag vil du fortelle deg hvordan du lykkes med å designe et kortdesign for nettstedet ditt.

Start med en sort/hvitt layout

Start designet med en svart og hvit trådramme. Tenk på hvert kort og hvilket innhold som skal ligge bak det.

Planlegg for elementer som mellomrom, bilder og fonter, og vurder kort uten farger eller bilder. Se hvordan hvert kort presterer under designfasen. Alle elementene på kartet er der. Er det lett å forstå hvorfor hun er her? Ville du klikket på den? Strukturen skal være tydelig uten en rød blinkende "Klikk her"-knapp.

Som med alle design, hvis omrisset ikke fungerer i svart og hvitt, vil det endelige designet sannsynligvis heller ikke fungere.

La det være mer mellomrom mellom kortene

Det meste et stort problem Når det kommer til å jobbe med kompakte kortdesign, handler det ikke om å skape en rotete atmosfære. Det er her plassene kommer godt med. Og hva flere plasser, jo mer komfortabelt vil det være for brukeren.

Å legge til hvit plass vil gi elementene mer plass til å puste; dette vil gjøre helhetsbildet mer romslig og vil ha god effekt på lesbarheten.

Du kan stille inn avstanden til to ganger normal avstand. Den ekstra plassen vil hjelpe deg med å skape et åpent design og organisere innholdet tydeligere.

Kart kan konkurrere med hverandre om brukerens oppmerksomhet store skjermer. Å legge til hvitt mellomrom vil bidra til å gjøre designet lettere å lese.

Legg til naturlige farger og skygger

Nå er det på tide å tenke på farge og skyggelegging for designet. Hold deg til naturlige farger og imiter virkeligheten i designstiler.

Nei, vi snakker ikke skeuomorfisme her, vi snakker om å skape farger med naturlige konturer og skygger. Tenk på hvordan kortet vil bli sett. Brukeren skal få den samme følelsen som om han holdt kortet i hendene, i virkeligheten.

Ved å bruke noen grunnleggende fysikkregler vil du kunne presentere utformingen av hvert kort mer naturlig:

Belysningen skal kaste noen skygger i bakgrunnen og bunnen;

Den mørkeste delen av designet skal være bunnen av bildet, på grunn av lysforholdene, som vanligvis faller ovenfra.

Knapper og oppfordringer til handling bør plasseres slik at de er enkle å samhandle med.

Det skal ikke være mer enn én informasjonsmelding på ett kort.

Lag enkle lag

Bruk enkle lag og lag enhetlig stil kart for hele grensesnittet. Vet du ikke hvor du skal begynne? Googles retningslinjer for materialdesign kan tjene som en guide for deg.

I materialdesign fysiske egenskaper papirer overføres til skjermen. Appens bakgrunn ligner den flate, ugjennomsiktige teksturen til et papirark. Som et resultat digitalt objekt ser ut som den ekte varen, og brukere vil berøre den, klikk på kartet. Konseptet er ekstremt enkelt og fungerer garantert.

Bruk enkle fonter

Det meste Den beste avgjørelsen er en enkel sans serif-font. For å unngå å gjøre det vanskelig å lese, unngå alternativer som er for tynne eller tykke. To fungerer fint på de fleste kort forskjellige fonter(selv om de er fra samme familie) - en for tittelen, den andre for hoveddelen av teksten.

Hva annet er viktig for lesbarheten? Sørg for å inkludere kontrast mellom skriftfargen og bakgrunnen til hvert kort.

Begrens antall UI-elementer

Ett kort - en handling. Dette er et aksiom.

Dette betyr at du ikke bør inkludere en haug med UI-elementer brukergrensesnitt, for eksempel knapper. De ser ikke bra ut på kart i det hele tatt og er faktisk ikke nødvendig der.

Men hvis du tror brukere trenger en visuell veiledning til handling, er én knapp nok. Hold formene og designene enkle.

Kanskje er en knapp det eneste grensesnittelementet du trenger.

konklusjoner

Det er ingen magisk formel for å lage det perfekte kortdesignet, men det er det Konstruktive beslutninger, som oppfordrer hver bruker til å klikke på kortet. Følg en minimalistisk tilnærming fra starten, legg igjen mer ledig plass, fokuser på enkle fonter, lag en egen handling for hvert kort.

Resultatet er et kortdesign som er brukervennlig og ser fantastisk ut.

Basert på interaktive kort som inneholder bilder, innhold, hyperkoblinger. Metro-stil ble først brukt av Microsoft i 2010 i grensesnittdesignet til produktene sine. fordeler av denne stilen, ifølge selskapets utviklere, var stilige og moderne utseende samt funksjonalitet. Brukeren ble ikke distrahert av fremmede elementer; all oppmerksomheten hans var fokusert på kartotekkortene som gir ham innholdet han lette etter. Denne designen ble ansett som intuitiv og forenklet brukeropplevelsen.

I dag kan kortdesign finnes på så velkjente ressurser som Twitter, Pinterest, Google og andre.

Kortstil funksjoner

Metro stil i design er veldig populær, den er mye brukt for å forbedre brukervennligheten og lette oppfatningen stor kvantitet innhold. Kortstilen har karakteristiske trekk:

Tilpasningsevne. Designet vises riktig på alle enheter.
Minimalistisk, ingen forstyrrende elementer. All oppmerksomhet rettes mot funksjonelle kort.
Moderne og estetisk utseende, bred palett av farger brukt.
Bruk av lettleste fonter (Segoe), klare tematiske bilder.
Tilgjengelighet, intuitiv forståelse av funksjonalitet for brukeren.
Dynamisme. Bruk av animasjonseffekter.
Tilstedeværelsen av håndtegnede elementer: ikoner, volumetriske knapper, infografikk som letter persepsjon og stimulerer til målrettede handlinger.

For hvilke nettsteder passer Metro-designstilen?

Lakonisk og moderne kortdesign brukes på nettsteder med ulike emner: porteføljer, blogger, bedriftssider, visittkortsider, nettbutikker og til og med landingssider. For eksempel ser Microsofts nettsted fortsatt nøyaktig ut i metrostil (https://www.microsoft.com/uk-ua): på hjemmeside det er store faner med selskapets produkter og lenker til sider med detaljert informasjon om dem. Det er kort mellom dem standard visning Med Kort beskrivelse og hyperkoblinger til innhold. Det er animasjonseffekter - når du holder markøren, blir bilder, knapper uthevet og koblinger fremhevet. Det er ingen fremmedelementer.

Og uansett hvordan du føler om dette konseptet, kortene har tatt sin plass i designet.

Hva er kort?

Dette er de små rektanglene med bilder og tekst som fungerer som inngangspunkter til en mer dyptgående studie av problemet. Kort er det første du tenker på hvis du trenger å balansere grensesnittestetikk og brukervennlighet. Alt fordi det er det praktisk måte vise innhold som består av ulike elementer.

Eksempel kort. Kilde: Materialdesign.

Flott metafor

Kort i grensesnittet er en flott metafor fordi de ligner veldig på ekte, håndgripelig kort. Før opptredenen mobile enheter, de var overalt: visittkort, baseballkort, spille kort etc. Kort som modell for interaksjon har blitt ganske utbredt. Derfor brukere på et intuitivt nivå forstå hva kortet inneholder.

Kort er en fin måte overføre raske historier. Godt eksempel fra det virkelige liv — baseballkort. Begge sider av det lille kortet inneholder alt Nøkkelinformasjon om spilleren du trenger.

Hvert kort representerer en spiller. Bildekilde: liveauctiongroup

Organisering av innhold

Innholdet på kortet er delt inn i semantiske blokker, og sparer dermed plass på skjermen. Akkurat som setninger i en tekst er gruppert i avsnitt og danner betydningsblokker, ulike elementer, samlet på et kort, opprette en komplett enhet av innhold.

Et eksempel på et utvalg kort. Kilde: Materialdesign

Kortoppsett tok ledende posisjoner innen design da giganter som Facebook begynte å implementere kortgrensesnitt på skrivebordet og mobilapplikasjoner. Brukte Facebook til det fulle "container" designå enkelt gruppere informasjon til tross for den nesten endeløse strømmen av data.

Attraktivt utseende

Vanligvis er kortdesign avhengig av visuelle elementer. Bilder— dette sterk siden av dette designet. Designstudioer bekrefter at bruk av bilder tar utformingen av en nettside eller applikasjon til et nytt nivå – fordi de umiddelbart og effektivt tiltrekker seg oppmerksomhet. Fokus på bilder gjør automatisk et kortdesign mer attraktivt for brukerne.

Ta Dribbble, et velkjent nettsted i det kreative fellesskapet der designere viser frem arbeidet sitt. Et kortdesign er kanskje best egnet til å vise denne typen innhold.

Dribbles nettsted.

Hvordan designe et kort

Kort innenfor samme layout skal ha samme bredde, men høyden kan være forskjellig. Maksimal karthøyde er begrenset av tilgjengelig plattformplass, men kan økes midlertidig (for eksempel for å vise et kommentarfelt).

Høyden på kortet kan være fast eller variabel. Bildekilde: Intercom

Fra et designperspektiv bør kortet ha avrundede hjørner og en kort skygge. De avrundede hjørnene får kartet til å se ut som en egen blokk med innhold, og skyggene skaper en følelse av dybde.

Avrundede hjørner og kort skygge. Kilde: Materialdesign

Disse elementene vil bringe til lett design visuell pikantitet uten å distrahere brukeren fra innholdet. I tillegg får de kortet til å se ut til å hoppe av siden. Du kan også bruke animasjons- og bevegelseseffekter.

Bildekilde: Behance

Fordeler med kort

Hvis du bruker kortene riktig, kan du forbedre brukeropplevelsen til applikasjonen din betraktelig. Takket være deres funksjonalitet og form fungerer kort som et interessant og intuitivt element i grensesnittet.

Lett fordøyelig form

Som du allerede vet, hovedinnhold. Kort i designet er beholdere som kan fylles med hva som helst. Hvis du legger innhold på kort, vil det være lettere for brukere å fordøye det. Dermed får brukerne enkel tilgang til innholdet som er av interesse for dem dem– som fremmer dypt engasjement.

Denne kortsamlingen inneholder kort med varierte innholdstyper. Kilde: Materialdesign.

Responsivt og mobilt design

Det viktigste med kort er at de er enkle å manipulere. Kortbasert design fungerer bra for både stasjonære og mobile enheter fordi kort presenterer innhold i små, lett fordøyelige biter. De er også gode for responsiv design fordi de tjener beholdere med informasjon, som enkelt kan skaleres.

Til slutt hjelper kort med å skape en enhetlig estetikk på tvers av flere forskjellige enheter. Derfor gir kortdesign konsekvent brukeropplevelse på alle enheter.

Tommeldesign

Kort er enkle designet for å passe tommelen. Kortdesignet ser ut til å være spesielt tilpasset applikasjoner. Det var det hovedårsaken populariteten til kort i mobildesign. Digitale kort på telefonen din oppfører seg på samme måte som fysiske kort, som gir brukerne en komfortabel interaksjonsopplevelse. De trenger ikke tenke: "hvordan fungerer alt her?" Brukere elsker det enkle i kortdesignet og forstår intuitivt prinsippet: snu kortet til tilleggsinformasjon eller sveip for å se den neste.

Sveip til høyre. Kilde: Dribble

Hvor skal du bruke?

Bånd

Åpner nytt

Kort— dette naturlig måte vise nytt innhold. Ta en titt på Tinder-kortmønsteret: sveipe kort fra høyre til venstre, finner du flere og flere nye mennesker som matcher din smak.

Bildekilde: Tinder

Pinterest bruker kort- pinner i sitt dynamiske rutenett for å organisere innhold og engasjere brukere i endeløs rulling.

Hva har disse to tjenestene til felles? De tar informasjon fra søknaden og lager den relevant for øyeblikket.