Hemmeligheder bag effektiviteten af ​​kortdesign - SkillsUp - et praktisk katalog over lektioner om design, computergrafik, Photoshop-lektioner, Photoshop-lektioner. Udnyt animation og bevægelse

26.12.2016

Kort er pæne små beholdere med information.. Kort er blevet nærmest et must-have-element, når det kommer til at balancere æstetik med enkel brugervenlighed. Kortdesign blev oprindeligt introduceret af tjenester som Pinterest og Facebook, og i dag har dets indflydelse spredt sig til mange industrier.

Veludført kortdesign kan forbedre UX ( Brugererfaring) af din ansøgning. I denne artikel vil jeg beskrive 5 nyttige teknikker til at implementere kort design og jeg vil give dig nogle interessante eksempler.

• Læs også:

1. Følg reglen "Et kort - et koncept"

2. Hele kortets overflade skal kunne klikkes

Følge efter Fitts lov og tillade brugere at klikke/tappe på en hvilken som helst del af kortet, ikke kun tekstlinks eller billeder. Et stort kontaktområde forbedrer brugervenligheden markant på både touchskærme og enheder, der bruger en mus.

Råd: det er godt, når kortene kaster en skygge og viser dybde - det er visuelt bekræfter kortets klikbarhed.

3. Gør kort attraktive

Kortdesign virker pga godt design og fremragende brugervenlighed. Ved at tilføje æstetik til kort, gør du dem genkendelige og kreative.

Når det kommer til kortdesign, skal du fokusere på følgende punkter:

Billeder

En vægt på billeder er styrken ved kortdesign. Forskning bekræfte at billeder "løfter" designet. Fokus på brugen af ​​billeder gør kortets interfacedesign mere attraktivt for brugerne.

Skygger og gradienter

Skygger og gradienter er kommet langt for at kunne mærkes og forbindes med deres fysiske modstykker. Men tænk grundigt over, hvordan du bruger skygger og gradienter: Hvis der kastes skygger fra alle vinkler og sider, vil illusionen om, at kortet er et fysisk objekt, blive ødelagt.

Typografi

Du kan også tiltrække brugerens opmærksomhed ved at bruge tekst. Alt i kortdesignet skal være let at læse og forstå:

• Brug simple skrifttyper Og farvepaletter(tekst læses bedst mod en kontrasterende baggrund).
• Prøv at bruge et minimum antal skrifttyper. Til kortdesign er én skrifttype mere end nok.

Råd: Almindelig sans-serif-skrifttype er fantastisk til kort.

• Læs også:

4. Begræns kortindhold

Kort er normalt kortfattede og indeholder et link til at gå til mere detaljeret information. Når du forsøger at pakke for meget indhold ind på et kort ved at gøre det for bredt eller for langt, mister det sin oprindelige besked, fordi det ikke længere ligner et kort.

Nedenfor er et eksempel på en kortgrænseflade. Læg mærke til kortet i midten. Problemet er, at der er meget information på det, hvilket gør kortet svært at forstå.

5. Udnyt animation og bevægelse

Animationer kan have en positiv indflydelse på UX, hvis de bruges korrekt. De hjælper folk med bedre at navigere i kortgrænsefladen og installere visuelle forbindelser mellem forskellige tilstande for hvert kort.

Visuelle signaler

Visuelle signaler hjælper brugerne med at forstå, hvordan de bedst interagerer med brugergrænsefladen. Denne type animation bruges, når du skal demonstrere, hvordan visse designfunktioner fungerer.

Visuel feedback

Visuel feedback er meget vigtig i interfacedesign. Det virker, fordi det tilfredsstiller brugerens naturlige ønske om bekræftelse. I I virkeligheden objekter reagerer på interaktion, og det er, hvad folk forventer af objekter. Til desktop-applikationer eller websteder, du kan bruge svæveeffekt at vise, at objekter kan interageres med. Hover-animation øger forståelsesniveauet og gør samtidig brugeroplevelsen mere underholdende.

Ved at bruge svæveeffekten kan du også åbne muligheder. I eksemplet nedenfor giver svæveeffekten brugere mulighed for at ændre farver, svare på beskeder, sende dem eller slette dem.

Lige så funktionelle som de er smukke, er kortgrænseflader ikke kun en trend. Siden mobil webtrafik overgik desktoptrafik i 2014, er responsivt design blevet industristandarden, og webdesignere fokuserer deres indsats på små skærme. Som et resultat vinder de hidtil uset popularitet simple stilarter såsom flad, minimalisme og især kort.

Kortmønsteret er praktisk, ikke kun fordi det reducerer sideindlæsningstiden og forenkler skaleringsgrænseflader for forskellige skærme. Små stykker indhold matcher internetbrugernes opmærksomhed (især dem, der bruger mobile enheder). Inspireret af Pinterest og populariseret af sociale netværk som Facebook Og Twitter, kan kortgrænseflader i dag ses på websteder af ethvert emne. I denne artikel vil vi se på kortets UI-mønster i sin helhed: hvad er godt ved det, hvordan det passer ind i begreberne adaptivt og materialedesign, og hvad man kan forvente af det i fremtiden.

Kilde: Formelt Ja

Hvad er containerbaseret design?

For at forstå mønsteret skal du først forstå ideen med selve kortet.

Kort er i bund og grund små beholdere til stykker information, og hvert kort bærer en selvstændig tanke. Det kan indeholde enhver form for indhold: billede, tekst, links osv. - alle kortene er forenet af et eller andet fælles tema.

Trello-brugere kan oprette hvilke som helst kort, de ønsker. Alle kan oprette kort med opgavelister og sortere dem, som de vil.
Dette eksempel viser, hvor fleksible kort kan være, og viser også deres evne til at organisere information. Trello skylder sin popularitet det faktum, at kort virker enklere for brugerne. almindelige lister opgaver brugt af andre opgaveledere.

Kort i grænseflader på mobile og responsive hjemmesider

Som jeg allerede har skrevet, går kortgrænseflader godt med responsive frameworks, hvorfor Intercoms Des Traynor selv kaldte dem internettets fremtid. Dette UI-mønster oversættes godt til mobile enheder af mange grunde - vi vil tale om dem nu.

Kilde: The Verge

For det første, i skalerbare rammer, kan kortstrukturer genopbygges, så de passer til ethvert breakpoint eller skærmstørrelse. Designere har mulighed for at lege med forholdet mellem kortbredde og højde, og hvordan grupper af kort forholder sig til hinanden. For eksempel kan kort have fast bredde og forskellige højder med et givet interval mellem dem.

Sammenlign desktop (ovenfor) og mobile (nedenfor) viewporte fra The Verge:

Kilde: The Verge (mobilside)

Vær opmærksom på tekster, billeder, gradienter - de er ens i begge versioner. Kort giver dig mulighed for at oprette en enkelt brugererfaring og udsende det på tværs af alle enheder.

Du kan se dette princip i aktion ved at besøge siden Gratis bibliotek for designere på UXPin. Læg mærke til, hvor jævnt layoutet skaleres fra mobil til fuldskærmsvisning.

Mobil visningsport:

Kilde: UXPin

Høj opløsning skærm:

Kilde: UXPin

En anden fordel ved kort er, at de fungerer godt som bevægelseskontrol. På berøringsskærme kort uden nogen ekstra indsats blive til knapper. Ideen er enkel: Tryk på kortet for at begynde at interagere med indholdet.

Kortenes fremtid

Det kortbaserede UI-mønster udvikler sig konstant for at møde nye udfordringer, hvoraf de fleste vil påvirke adaptivt design og applikationsdesign. Som vi diskuterede i Web Design Trends 2015 & 2016, skyldes disse ændringer delvist den indflydelse, Material Design har på Android-apps.

1. Teknologi
Kortene kan snart blive dynamiske. Efterhånden som websteder bliver mere produktive, kan de understøtte mere komplekse medieaktiver. Måske vil vi se elementer med et stort antal detaljer, for eksempel selv-opdatering af indhold, mens interaktion med grænsefladen ikke vil bremse.

Kortgrænsefladen er en af de mest populære trends seneste år. Den er brugervenlig og tilpasser sig perfekt forskellige typer enheder.

Hvordan ser et vellykket kortdesign ud? Sådan at brugeren ønsker at klikke på kortet og stifte bekendtskab med indholdet, der er gemt bagved. Kortet skal fungere som en beholder til specifikt indhold - tekst, registreringsformular, video.

Freelance.I dag vil du fortælle dig, hvordan du med succes designer et kortdesign til din hjemmeside.

Start med et sort/hvidt layout

Start dit design med en sort og hvid trådramme. Tænk over hvert kort, og hvilket indhold der ligger bag det.

Planlæg for elementer såsom mellemrum, billeder og skrifttyper, og overvej kort uden farve eller billeder. Se, hvordan hvert kort klarer sig i designfasen. Alle elementer på kortet er der. Er det let at forstå, hvorfor hun er her? Ville du klikke på det? Strukturen skal være klar uden en rød blinkende "Klik her" knap.

Som med ethvert design, hvis omridset ikke fungerer i sort/hvid, vil det endelige design sandsynligvis heller ikke fungere.

Efterlad mere hvidt mellemrum mellem kortene

For det meste et stort problem Når det kommer til at arbejde med kompakte kortdesigns, handler det ikke om at skabe en rodet atmosfære. Det er her pladser kommer til nytte. Og hvad flere pladser, jo mere behageligt vil det være for brugeren.

Tilføjelse af hvidt mellemrum vil give elementer mere plads til at trække vejret; dette vil gøre det samlede billede mere rummeligt og vil have en god effekt på læsbarheden.

Du kan indstille afstanden til det dobbelte af den normale afstand. Den ekstra plads hjælper dig med at skabe et åbent design og organisere dit indhold mere klart.

Kort kan konkurrere med hinanden om brugerens opmærksomhed på store skærme. Tilføjelse af hvidt mellemrum hjælper med at gøre designet lettere at læse.

Tilføje naturlige farver og skygger

Nu er det tid til at tænke over farven og nuancerne til designet. Hold dig til naturlige farver og efterlig virkeligheden i designstile.

Nej, vi taler ikke skeuomorfisme her, vi taler om at skabe farve med naturlige konturer og skygger. Tænk på, hvordan kortet vil blive set. Brugeren skulle få den samme følelse, som hvis han i virkeligheden holdt kortet i hænderne.

Ved at bruge nogle grundlæggende fysikregler vil du give dig mulighed for at præsentere designet af hvert kort mere naturligt:

Belysningen skal kaste nogle skygger i baggrunden og bunden;

Den mørkeste del af designet skal være bunden af ​​billedet på grund af lysforholdene, som normalt falder ovenfra.

Knapper og opfordringer til handling skal placeres, så de er nemme at interagere med.

Der bør ikke være mere end én informationsmeddelelse på ét kort.

Opret enkle lag

Brug enkle lag og skab ensartet stil kort til hele grænsefladen. Ved du ikke, hvor du skal starte? Googles retningslinjer for materialedesign kan tjene som en guide for dig.

I materiale design fysiske egenskaber papirer overføres til skærmen. Appens baggrund ligner den flade, uigennemsigtige tekstur af et ark papir. Som resultat digitalt objekt ligner den ægte vare, og brugere vil røre ved den, klik på kortet. Konceptet er ekstremt enkelt og virker med garanti.

Brug simple skrifttyper

For det meste Den bedste beslutning er en simpel sans serif-skrifttype. For at undgå at gøre det vanskeligt at læse, undgå muligheder, der er for tynde eller tykke. To fungerer fint på de fleste kort forskellige skrifttyper(selvom de er fra samme familie) - en for titlen, den anden for hovedparten af ​​teksten.

Hvad er ellers vigtigt for læsbarheden? Sørg for at inkludere kontrast mellem skriftfarven og baggrunden på hvert kort.

Begræns antallet af UI-elementer

Et kort - en handling. Dette er et aksiom.

Dette betyder, at du ikke bør inkludere en masse UI-elementer brugergrænseflade, såsom knapper. De ser slet ikke godt ud på kort og er faktisk ikke nødvendige der.

Men hvis du mener, at brugerne har brug for en visuel guide til handling, er én knap nok. Hold formerne og designs enkle.

Måske er en knap det eneste grænsefladeelement, du har brug for.

konklusioner

Der er ingen magisk formel til at skabe det perfekte kortdesign, men det er der Konstruktive beslutninger, som opfordrer hver bruger til at klikke på kortet. Følg en minimalistisk tilgang fra starten, efterlad mere Fri plads, fokuser på simple skrifttyper, lav en separat handling for hvert kort.

Resultatet er et kortdesign, der er brugervenligt og ser fantastisk ud.

Baseret på interaktive kort, der indeholder billeder, indhold, hyperlinks. Metro-stil blev første gang brugt af Microsoft i 2010 i interfacedesignet af deres produkter. Fordele af denne stil, ifølge virksomhedens udviklere, var stilfulde og moderne look samt funktionalitet. Brugeren blev ikke distraheret af uvedkommende elementer; al hans opmærksomhed var fokuseret på indekskortene, der giver ham det indhold, han ledte efter. Dette design blev betragtet som intuitivt og forenklede brugeroplevelsen.

I dag kan kortdesigns findes på så velkendte ressourcer som Twitter, Pinterest, Google og andre.

Kort stil funktioner

Metro-stil i design er meget populær, den bruges i vid udstrækning til at forbedre brugervenligheden og lette opfattelsen stor mængde indhold. Kortstilen har karakteristiske træk:

• Tilpasningsevne. Designet vises korrekt på enhver enhed.
• Minimalistisk, ingen distraherende elementer. Al opmærksomhed er rettet mod funktionelle kort.
• Moderne og æstetisk udseende, bred palet af farver brugt.
• Brugen af ​​letlæselige skrifttyper (Segoe), klare tematiske billeder.
• Tilgængelighed, intuitiv forståelse af funktionalitet for brugeren.
• Dynamik. Brug af animationseffekter.
• Tilstedeværelsen af ​​håndtegnede elementer: ikoner, volumetriske knapper, infografik, der letter opfattelsen og stimulerer målrettede handlinger.

Til hvilke hjemmesider er Metro-designstilen velegnet?

Lakonisk og moderne kortdesign bruges på websteder med forskellige emner: porteføljer, blogs, virksomhedswebsteder, visitkortwebsteder, onlinebutikker og endda landingssider. For eksempel ser Microsofts hjemmeside stadig ud nøjagtigt i metrostil (https://www.microsoft.com/uk-ua): på hjemmeside der er store faner med virksomhedens produkter og links til sider med detaljeret information omkring dem. Der er kort imellem dem standard visning Med Kort beskrivelse og hyperlinks til indhold. Der er animationseffekter - når du holder markøren over markøren, fremhæves billeder, knapper, og links fremhæves. Der er ingen fremmede elementer.

Og uanset hvordan du har det med dette koncept, kort har solidt taget deres plads i designet.

Hvad er kort?

Det er de små rektangler med billeder og tekst, der tjener som indgangsvinkler til en mere dybdegående undersøgelse af problemet. Kort er det første, der kommer til at tænke på, hvis du skal balancere grænsefladeæstetik og brugervenlighed. Alt sammen fordi det er bekvem måde visning af indhold bestående af forskellige elementer.

Eksempel kort. Kilde: Materiale Design.

Fantastisk metafor

Kort i grænsefladen er en god metafor, fordi de minder meget om rigtige, håndgribelige kort. Før optræden mobile enheder, de var overalt: visitkort, baseballkort, spillekort etc. Kort som model for interaktion er blevet ret udbredt. Derfor brugere på et intuitivt niveau forstå, hvad kortet indeholder.

Kort er en fantastisk måde sende hurtige historier. Godt eksempel fra det virkelige liv — baseballkort. Begge sider af det lille kort indeholder alt Nøgleoplysninger om den spiller, du har brug for.

Hvert kort repræsenterer en spiller. Billedkilde: liveauctiongroup

Organisering af indhold

Kortets indhold er opdelt i semantiske blokke, og derved spares skærmplads. Ligesom sætninger i en tekst er grupperet i afsnit og danner betydningsblokke, forskellige elementer, samlet på et kort, oprette en komplet enhed af indhold.

Et eksempel på et udvalg af kort. Kilde: Materialedesign

Kortlayouts tog førende positioner inden for design, da giganter som Facebook begyndte at implementere kortgrænseflader på deres skrivebord og mobile applikationer. Brugte Facebook til fulde "container" design til bekvemt at gruppere information på trods af den næsten endeløse strøm af data.

Attraktivt udseende

Typisk er kortdesignet meget afhængigt af visuelle elementer. Billeder— dette stærk side af dette design. Tegnestuer bekræfter, at brugen af ​​billeder tager designet af en hjemmeside eller applikation til et nyt niveau – fordi de øjeblikkeligt og effektivt tiltrækker opmærksomhed. Fokus på billeder gør automatisk et kortdesign mere attraktivt for brugerne.

Tag Dribbble, et velkendt websted i det kreative fællesskab, hvor designere fremviser deres arbejde. Et kortdesign er måske bedst egnet til at vise denne type indhold.

Dribbles hjemmeside.

Sådan designer du et kort

Kort inden for samme layout skal have samme bredde, men højden kan være anderledes. Den maksimale korthøjde er begrænset af den tilgængelige platformsplads, men kan øges midlertidigt (for eksempel for at vise et kommentarfelt).

Højden på kortet kan være fast eller variabel. Billedkilde: Intercom

Fra et designperspektiv skal kortet have afrundede hjørner og en kort skygge. De afrundede hjørner får kortet til at ligne en separat blok med indhold, og skyggerne skaber en følelse af dybde.

Afrundede hjørner og kort skygge. Kilde: Materialedesign

Disse elementer vil bringe til letvægtsdesign visuel pikanthed uden at distrahere brugeren fra indholdet. Plus, de får kortet til at hoppe af siden. Du kan også anvende animations- og bevægelseseffekter.

Billedkilde: Behance

Fordele ved kort

Hvis du bruger kort korrekt, kan du forbedre brugeroplevelsen af ​​din applikation markant. Takket være deres funktionalitet og form fungerer kort som et interessant og intuitivt element i grænsefladen.

Let fordøjelig form

Som du allerede ved, hoved — indhold. Kort i designet er beholdere, der kan fyldes med hvad som helst. Hvis du lægger indhold på kort, vil det være lettere for brugerne at fordøje det. Dermed får brugerne nem adgang til det indhold, der er af interesse for dem dem- hvilket fremmer dybt engagement.

Denne kortsamling indeholder kort med forskellige indholdstyper. Kilde: Materialedesign.

Responsivt og mobilt design

Det vigtigste ved kort er, at de er nemme at manipulere. Kortbaseret design fungerer godt til både stationære og mobile enheder, fordi kort præsenterer indhold i små, let fordøjelige bidder. De er også gode til responsivt design, fordi de tjener containere med information, som nemt kan skaleres.

Endelig hjælper kort med at skabe en samlet æstetik på tværs af flere forskellige enheder. Derfor giver kortdesign ensartet brugeroplevelse på alle enheder.

Tommelfinger design

Kort er enkle designet til at passe til tommelfingeren. Kortdesignet ser ud til at være specielt tilpasset til applikationer. Dette er det hovedårsagen popularitet af kort i mobildesign. Digitale kort på din telefon opfører sig på samme måde som fysiske kort, som giver brugerne en behagelig interaktionsoplevelse. De behøver ikke tænke: "hvordan fungerer alt her?" Brugere elsker kortdesignets enkelhed og forstår intuitivt princippet: vend kortet om til Yderligere Information eller stryg for at se den næste.

Stryg til højre. Kilde: Dribble

Hvor skal man bruge?

Bånd

Åbner ny

Kort — dette naturlig måde vise nyt indhold. Tag et kig på Tinder-kortmønsteret: swiping kort fra højre mod venstre, finder du flere og flere nye mennesker, der matcher din smag.

Billedkilde: Tinder

Pinterest bruger kort- stifter i sit dynamiske gitter for at organisere indhold og engagere brugerne i endeløs scrolling.

Hvad har disse to tjenester til fælles? De tager information fra ansøgningen og laver den relevant i øjeblikket.