Secrete de design web în stilul cardurilor. Design card - Ghidul suprem

Pe cât de funcționale, pe atât de frumoase, interfețele cardurilor nu sunt doar o tendință. De când traficul web mobil a depășit traficul pe desktop în 2014, designul responsive a devenit standardul industriei, iar designerii web își concentrează eforturile pe ecranele mici. Drept urmare, ele câștigă o popularitate fără precedent stiluri simple precum flat, minimalism și mai ales carduri.

Modelul cardului este convenabil nu numai pentru că reduce timpul de încărcare a paginii și simplifică scalarea interfețelor pentru diferite ecrane. Bucăți mici de conținut se potrivesc cu durata de atenție a utilizatorilor web (în special a celor care folosesc dispozitive mobile). Inspirat de Pinterest și popularizat de rețelele sociale precum FacebookŞi Stare de nervozitate, interfețele cardurilor de astăzi pot fi văzute pe site-uri web de orice subiect. În acest articol, ne vom uita la modelul UI al cardului în întregime: ce este bun la acesta, cum se încadrează în conceptele de design adaptiv și material și la ce să ne așteptăm de la acesta în viitor.

Sursa: Formal Da

Ce este designul bazat pe container?

Pentru a înțelege modelul, mai întâi trebuie să înțelegeți ideea cardului în sine.

În esență, cardurile sunt mici containere pentru informații, iar fiecare card poartă un gând independent. Poate conține orice tip de conținut: imagine, text, link-uri etc. - toate cărțile sunt unite printr-o temă comună.

Utilizatorii Trello pot crea orice carduri doresc. Oricine poate crea carduri cu liste de sarcini și le poate sorta așa cum dorește.
Acest exemplu arată cât de flexibile pot fi cardurile și, de asemenea, demonstrează capacitatea lor de a organiza informații. Trello își datorează popularitatea faptului că cardurile par mai simple pentru utilizatori. liste obișnuite sarcini utilizate de alți manageri de activități.

Carduri în interfețele site-urilor mobile și responsive

După cum am scris deja, interfețele cardurilor merg bine cu cadrele receptive, motiv pentru care Des Traynor de la Intercom însuși le-a numit viitorul web. Acest model de interfață se traduce bine pe dispozitivele mobile din multe motive - vom vorbi despre ele acum.

Sursa: The Verge

În primul rând, în cadrele scalabile, structurile cardurilor pot fi reconstruite pentru a se potrivi cu orice punct de întrerupere sau dimensiune de ecran. Designerii au ocazia să se joace cu raportul dintre lățimea și înălțimea cărților și modul în care grupurile de cărți se relaționează între ele. De exemplu, cardurile pot avea o lățime fixă și înălțimi diferite când interval datîntre ei.

Comparați fereastra de vizualizare desktop (sus) și mobilă (mai jos) de la The Verge:

Sursa: The Verge (site mobil)

Atenție la texte, imagini, degrade - sunt aceleași în ambele versiuni. Cardurile vă permit să creați un singur experiența utilizatoruluiși difuzați-l pe toate dispozitivele.

Puteți vedea acest principiu în acțiune vizitând pagina Bibliotecă gratuită pentru designeri pe UXPin. Observați cât de ușor se scalează aspectul de la mobil la ecranul complet.

Vizualizare mobilă:

Sursa: UXPin

Ecran de înaltă rezoluție:

Sursa: UXPin

Un alt avantaj al cardurilor este că funcționează excelent ca comenzi prin gesturi. Pe ecrane tactile cardurile se transformă în butoane fără niciun efort suplimentar. Ideea este simplă: atingeți cardul pentru a începe să interacționați cu conținutul.

Viitorul cardurilor

Modelul UI bazat pe carduri evoluează constant pentru a face față noilor provocări, dintre care majoritatea le vor afecta design adaptivși proiectarea aplicației. După cum am discutat în Web Design Trends 2015 și 2016, aceste modificări se datorează parțial impactului pe care Material Design îl are asupra aplicațiilor Android.

1. Tehnologie
În curând cărțile pot deveni dinamice. Pe măsură ce site-urile devin mai productive, ele pot suporta active media mai complexe. Poate vom vedea elemente cu un număr mare detalii, de exemplu, conținut care se autoactualizează, în timp ce interacțiunea cu interfața nu va încetini.

Designul web este foarte dinamic. Vedem constant cum aspect site-urile web se schimbă odată cu apariția noilor tehnologii, metode, tendințe și stiluri. Așadar, astăzi conceptul principal este designul cardurilor.

Îl poți vedea peste tot: de la site-urile agențiilor imobiliare până la portaluri de știri. De fapt, giganții internetului precum Twitter, Facebook și Google folosesc și modele de carduri.

Cărți, în în acest caz,, acestea sunt dreptunghiuri mici pline cu imagini și informații interactive. Au devenit populare în primul rând datorită capacității de reacție, estetică și caracter practic.

Deși există multe concepții greșite despre ceea ce se califică drept design de card, un lucru este sigur: cardurile nu sunt doar dreptunghiuri pe site-uri web. Pentru a califica un anumit design drept un design de card, acesta trebuie să aibă funcţionalitateși fii autosuficient.

Poate cea mai bună metaforă pentru a descrie designul cardului este următoarea zicală: „Cartea este plată, dar are două fețe”. Adică, fiecare card nu ar trebui să conțină doar un fel de conținut, ci și să ofere consumatorilor săi posibilitatea de a interacționa cu acesta într-un fel.

Pur și simplu, cărțile nu sunt doar un design frumos, ci și ușor de utilizat.

Diferite tipuri de modele de carduri

Design card a suferit schimbări semnificative de la începuturi. Și acum poate fi făcut în următoarele stiluri.

1. Design plat

Prima dată card design plat a fost prezentat de către Microsoftîn 2006 și sa bazat pe stilul de design GUI Metro, care arată destul de solid și colorat. Adevărat, în a lui versiune modernă Gradientele, umbrele și skuemorfismul sunt utilizate pe scară largă.

2. Stilul revistă

Un design în stil revistă are nevoie de un echilibru vizual bun. Cardurile în acest caz conțin un bloc cu o imagine și un text care acționează ca un „teaser”, adică ademenesc vizitatorul la mai multe informatii detaliate pe altă pagină sau site. După cum sugerează și numele, acest design este folosit pe site-urile revistelor și portaluri de știri, dar este potrivit și pentru alte resurse concentrate număr mare conținut precum bloguri sau portofolii și pentru site-uri care sunt actualizate în mod regulat.

Acest stil este întruchipat pe site serviciul social Pinterest și a devenit o tendință populară de design tematică pentru Platforme WordPress. Inițial, cardurile conțineau doar link-uri și o anumită cantitate dintr-un anumit tip de conținut. Ele pot conține acum mai multe link-uri și tipuri de conținut, inclusiv videoclipuri, formulare, imagini și instrumente de partajare. rețelele sociale. În unele interfețe, cardurile oferă opțiuni de mini-interacțiune, cum ar fi activarea/dezactivarea notificărilor Facebook.

Cunoscut și ca stilul „zidărie”, conține blocuri interconectate sau distribuite pe întregul aspect.

Cum să utilizați eficient designul cardului?

Mânca o serie intreaga motive pentru care design în stilul cardului atât de popular. Iată doar câteva dintre ele:

O varietate de stiluri de design sunt compatibile cu acest format, de la modele plate la soiuri mai complexe.
Funcționează bine cu diverse tipuri conținut și, de asemenea, îl face mai ușor de consumat.
Funcționează bine cu cadre responsive.
Oferă un aspect organizat și structurat multor informații.

Pentru de acest tip design nu există reguli fixe. Cu toate acestea, două elemente care sunt aproape întotdeauna prezente în aspectele eficiente ale cardurilor sunt simplitatea și o varietate bogată de conținut. Există, de asemenea, tehnici care pot îmbunătăți estetica și funcționalitatea designului cardului.

spatiu gol

Un element comun în designul cardului este spațiul alb. Acest lucru este necesar pentru ca toate elementele să fie clar vizibile și înțelese. La urma urmei, tot ce aveți este o zonă de 600 de pixeli și trebuie să vă asigurați că titlul, butonul de îndemn, imaginile și textul linkului sunt proeminente și își fac treaba eficient.

Cantitate mare spatiu golîn jurul fiecărui element le oferă vizitatorilor site-ului timp să proceseze ceea ce văd în timp ce privesc de la un card la altul.

Fiecare card are propriul său conținut

Imagini clare

În designul bazat pe carduri, imaginile sunt critice. Ele trebuie să fie impecabile, chiar și atunci când sunt introduse spatiu limitat pentru a atrage atenția. Dacă nu există imagini, utilizați un font artistic sau un titlu creativ pentru a atrage atenția vizitatorilor.

Fonturi simple

Fontul nu trebuie să distragă atenția de la imagine. Pentru a face acest lucru, utilizați un font simplu într-o culoare ușor de citit, adică negru și gri. Cele mai populare fonturi, datorită designului lor neutru și ușor de citit, sunt fonturile sans serif. În plus, este recomandabil să folosiți un tip de font cu dimensiuni diferite.

Detalii neașteptate

Elementul surpriză face minuni. Încercați să adăugați detalii neașteptate, cum ar fi un efect 3D sau o procesare creativă a marginilor, pentru a vă face designul mai original. Alte tehnici care s-au dovedit eficiente includ efectele hover și suprapunerea de culoare. De asemenea, puteți aplica efectul numai la cel mai mult conținut semnificativ pentru a echilibra greutatea vizuală a fiecărei cărți.

Deschideți plasă

Oricât de importante sunt elementele din fiecare card, spațiul dintre ele este la fel de important. Creați un cadru de grilă care va oferi un anumit contrast și, de asemenea, să ofere distanta egalaîntre cărți și elementele lor. Acest lucru devine și mai important atunci când luați în considerare plasarea punctelor de întrerupere într-un aspect receptiv.

Utilizabilitate

Designul nu este doar despre estetică, ci și despre utilizare. Designul ar trebui să încurajeze utilizatorii să ia măsuri: faceți clic pe butonul de abonare, citiți întregul articol sau cumpărați un produs. Scopul final al interfeței dvs. este de a oferi o experiență ușoară care să-i determine pe utilizatori să ia acțiunea dorită.

În afară de aceasta, ar trebui să verificați și modul în care funcționează fiecare element de interfață, în special în versiunea mobilă site-ul. Adică, trebuie să vă gândiți nu numai la cât de convenabil este să faceți clic pe elemente cu mouse-ul, ci și la cât de convenabil este să interacționați cu ele folosind tehnici precum glisarea (glisarea degetului pe ecran) și atingerea (scurtă atingeți pe ecran). De asemenea, asigurați-vă că butoanele sunt vizibile clar și ușor de utilizat. Acest lucru, desigur, necesită să existe suficient spațiu între elemente pentru a preveni atingerea accidentală a butonului greșit sau inițierea unei acțiuni greșite.

Sortarea cardurilor

Odată ce designul cardului este finalizat, următorul pas este de a determina ce informații vor conține aceste carduri. Ar trebui să fie grupat conținutul după tip sau subiect? În ce categorie ar trebui clasificat acest sau acela conținut? Cel mai bun mod organizarea întregului conținut într-un mod ușor de utilizat este sortarea cardurilor.

Puteți face acest lucru folosind pix și hârtie sau puteți utiliza site-uri precum ConceptCodify sau Optimal Workshop. Fiecare metodă are avantajele și dezavantajele sale, deși metoda offline necesită o abordare mai individuală.

Designul cardurilor este unul dintre cele mai flexibile formate de aspect al site-ului web, permițându-vă să creați o experiență excelentă pentru utilizator. Cardurile sunt, de asemenea, plăcute ochiului din punct de vedere estetic. Utilizatorii caută în mod constant modalități de a consuma rapid cantități mari de informații, iar designul cardului le permite să facă acest lucru ușor și rapid.

Și indiferent ce simți despre acest concept, cardurile și-au luat ferm locul în design.

Ce sunt cardurile?

Acestea sunt acele dreptunghiuri mici cu imagini și text care servesc drept puncte de intrare într-un studiu mai aprofundat al problemei. Cardurile sunt primul lucru care vă vine în minte dacă trebuie să echilibrați estetica interfeței și gradul de utilizare. Totul pentru că este mod convenabil afișarea conținutului format din diverse elemente.

Exemplu de card. Sursă: Design material.

Mare metaforă

Cardurile din interfață sunt o metaforă grozavă, deoarece amintesc foarte mult de cele reale, tangibil carduri. Înainte de apariție dispozitive mobile, erau peste tot: cărți de vizită, cărți de baseball, cărți de joc etc. Cardurile ca model de interacțiune au devenit destul de răspândite. Prin urmare utilizatorii la nivel intuitivînțelegeți ce conține cardul.

Cărțile sunt o modalitate grozavă transmiterea de povestiri rapide. Bun exemplu din viata reala - cărți de baseball. Ambele părți ale cărții mici conțin toate informații cheie despre jucătorul de care aveți nevoie.

Fiecare carte reprezintă un jucător. Sursa imagine: liveauctiongroup

Organizarea continutului

Conținutul cardului este împărțit în blocuri semantice, economisind astfel spațiu pe ecran. Așa cum propozițiile dintr-un text sunt grupate în paragrafe și formează blocuri de sens, diferitele elemente adunate pe un card creează o unitate completă de conținut.

Un exemplu de selecție de carduri. Sursa: Material Design

Aspectele cardurilor au ocupat poziții de frunte în design atunci când giganți precum Facebook au început să implementeze interfețe de card pe desktop-ul lor și aplicații mobile. Am folosit Facebook la maximum design „container”. pentru a grupa convenabil informațiile în ciuda fluxului aproape nesfârșit de date.

Aspect atractiv

De obicei, designul cardului se bazează în mare măsură pe elemente vizuale. Imagini — aceasta puternic partea acestui design. Studiourile de design confirmă că utilizarea imaginilor duce designul unui site web sau al unei aplicații la un nou nivel - deoarece acestea atrag atenția instantaneu și eficient. Concentrarea pe imagini face automat un design de card mai atractiv pentru utilizatori.

Luați, de exemplu, Dribbble — famos în comunitate creativă un site unde designerii își prezintă munca. Designul cardului este poate cel mai potrivit pentru afișarea acestui tip de conținut.

Site-ul Dribbble.

Cum să proiectați un card

Cardurile din același aspect trebuie să fie aceeasi latime, dar înălțimea poate fi diferită. Inaltime maxima cardurile sunt limitate spatiu disponibil platformă, dar poate fi mărită temporar (de exemplu, pentru a afișa un câmp de comentarii).

Înălțimea cardului poate fi fixă sau variabilă. Sursa imagine: Interfon

Din perspectiva designului, cardul ar trebui să aibă colțuri rotunjite și o umbră scurtă. Colțurile rotunjite fac harta să arate ca un bloc separat de conținut, iar umbrele creează un sentiment de profunzime.

Colțuri rotunjite și umbră scurtă. Sursa: Material Design

Aceste elemente adaugă un fler vizual subtil designului fără a distrage atenția utilizatorului de la conținut. În plus, fac cardul să pară să sară de pe pagină. De asemenea, puteți aplica efecte de animație și mișcare.

Sursa imagine: Behance

Avantajele cardurilor

Dacă utilizați corect cardurile, puteți îmbunătăți semnificativ UX-ul aplicației dvs. Datorită funcționalității și formei lor, cardurile acționează ca un element interesant și intuitiv al interfeței.

Formă ușor digerabilă

După cum știți deja, principal — conținut. Cardurile în design sunt containere care pot fi umplute cu orice. Dacă puneți conținut pe carduri, utilizatorilor le va fi mai ușor să-l digere. Astfel, utilizatorii primesc acces facil la conținutul care este interesant în mod specific ei - care promovează implicarea profundă.

Această colecție de carduri conține carduri cu tipuri variate de conținut. Sursa: Material Design.

Design receptiv și mobil

Cel mai important lucru despre cărți este că sunt ușor de manipulat. Designul bazat pe card funcționează bine atât pentru desktop, cât și pentru dispozitivele mobile, deoarece cardurile prezintă conținut în bucăți mici, ușor de digerat. Sunt bune și pentru design responsive, deoarece servesc containere de informații, care poate fi scalat cu ușurință.

În cele din urmă, cardurile ajută la crearea unei estetice unificate în mai multe diferite dispozitive. Prin urmare, designul cardului oferă experiență constantă a utilizatorului pe orice dispozitiv.

Design al degetului mare

Cardurile sunt simple conceput pentru a se potrivi degetului mare. Designul cardului pare a fi adaptat special pentru aplicații. Asta este motivul principal popularitatea cărților în design mobil. Cardurile digitale de pe telefonul dvs. se comportă la fel ca carduri fizice, care oferă utilizatorilor o experiență de interacțiune confortabilă. Nu trebuie să se gândească: „Cum funcționează totul aici?” Utilizatorii adoră simplitatea designului cardului și înțeleg intuitiv principiul: întoarce cardul la Informații suplimentare sau glisați pentru a vedea următorul.

Glisați spre dreapta. Sursa: Dribble

Unde să folosești?

Panglică

Deschidere nou

Cardurile sunt o modalitate naturală de a afișa conținut nou. Aruncă o privire la model de card Tinder: glisând cărți de la dreapta la stânga, găsești din ce în ce mai mulți oameni noi care se potrivesc gusturilor tale.

Sursa imagine: Tinder

Pinterest folosește carduri- aceîn grila sa dinamică pentru a organiza conținutul și a implica utilizatorii într-o defilare fără sfârșit.

Ce au aceste două servicii în comun? Ei preiau informații din aplicație și le fac relevante în acest moment.

Doriți să dezvoltați o interfață la modă în stil card? Probabil că aceasta nu este o idee rea. Cardurile sunt populare și ușor de utilizat, potrivite pentru toate tipurile de modele digitale și dimensiuni de ecran. Cheia unui design de succes în stil card este crearea a ceva pe care utilizatorii doresc să facă clic. Cardul ar trebui să servească drept container pentru conținutul specific - link, formular de conectare, player video etc. - cu care utilizatorul va dori să interacționeze. Iată cum să creați acest design.

Începeți cu contururi alb-negru

Sună foarte simplu: începeți cu o machetă alb-negru a designului dvs. Gândiți-vă la scopul cărților și la ce părți ale acestora se vor putea face clic. (Întregul card poate servi ca link.)

Planificați elementele: spațiu alb, imagini și tipografie, astfel încât să puteți vedea cardul fără culoare sau design. Gândiți-vă la asta ca la etapa de proiectare cărți de joc. Toate elementele hărții sunt la locul lor. Este aspectul ușor de înțeles?

Gândiți-vă la modul în care veți folosi cărțile în această etapă. Unde dați clic pentru a efectua cutare sau cutare acțiune? Structura și rezultatul sunt clare? Cum te vei întoarce sau invers, să faci un pas înainte? Răspunsurile la aceste întrebări ar trebui să fie clare, fără solicitări, cum ar fi semnele roșii „Clic aici”.

Ca și în cazul altor proiecte, dacă un design nu funcționează în alb și negru, nici versiunea finală, complet proiectată, nu va funcționa.

Folosiți mult spațiu liber

Cel mai greu lucru cu designul în stilul cardului este să nu îl faci să pară aglomerat și supraaglomerat. Aici spațiul joacă un rol important. Și veți dori să utilizați spațiul liber într-o măsură mult mai mare decât pare confortabil.

Abundența „aerului” va oferi spațiu elementelor de design, va face toate cărțile mai spațioase vizual și va crește lizibilitatea.

Probabil că veți dori să începeți cu de două ori mai mult spațiu obișnuit între elemente. Distanțele dintre cărți ar trebui să fie mari și, de asemenea, puteți crește spațiul liber cu spațiere între linii. O cantitate foarte mare de aer vă va ajuta să creați design deschisși organizați conținutul în cel mai evident mod. Cardul are dimensiuni limitate și trebuie să se potrivească pe ecranul unui smartphone, precum și să modifice logic și proporțional dimensiunea pentru ecranele tabletei și monitorului. Pe ecrane mari cardurile pot, de asemenea, distrage atenția utilizatorului unul de la celălalt. Adăugarea de „aer” va face ca designul general să se simtă mai deschis și mai ușor de aprofundat.

Adăugați culori și nuanțe naturale

Acum ești gata să te gândești la culori și nuanțe pentru designul tău. Încercați să îi oferiți un aspect natural și să aduceți un aspect realist cărților folosind umbre și stiluri.

Nu este vorba despre skeomorfism, ci despre crearea de culori cu contururi și umbre naturale. Gândiți-vă la cum ar arăta un card adevărat. Utilizatorul ar trebui să se simtă ca și cum ar ține cardul în mână.

Utilizați câteva reguli fizice care se aplică atunci când țineți cardul în mâini:

Iluminarea va arunca umbre sub și în partea de jos a cardului.
Cea mai întunecată parte a designului se află în partea de jos a designului, deoarece, în mod normal, când țineți cardul în mâini, lumina vine de sus.
Evitați să postați conținut în locuri în care ați ține cardul în mâini.
Punctele de atingere (îndemnurile la acțiune etc.) ar trebui să fie punctul central, iar interacțiunile ar trebui să fie ușoare și clare. (La fel ca în cărți de joc, elementul principal se află în centrul designului).
Un card - o unitate de informații.

Păstrați-o simplu

Acum, ținând cont de proprietățile fizice, treceți la pasul următor - crearea stilul general carduri pentru întreaga interfață. Nu știi de unde să începi? Un bun punct de plecare ar fi Ghid de proiectare a materialelor de la Google.

„În Material Design, proprietățile fizice ale hârtiei sunt transferate pe ecran. Fundalul aplicației este o textură plată, uniformă, a unei foi de hârtie.

Elementele aplicației se comportă ca hârtie - și ele își schimbă dimensiunea, sunt derulate și colectate într-un teanc. Elementele din afara aplicației, cum ar fi bara de stare, se comportă diferit. Sunt separate de conținutul aplicației și nu moștenesc proprietățile fizice ale hârtiei.”

Țineți cont de aceste instrucțiuni și încercați să creați un obiect digital care să arate și să se simtă ca unul fizic. Dacă utilizatorii doresc să-l atingă, vor face clic pe el. Conceptul este simplu.

Alegeți fonturi simple

Când vine vorba de tipografie, cel mai adesea cea mai buna solutie voinţă fonturi simple sans serif. Evitați fonturile care sunt prea subțiri sau înguste, deoarece pot fi dure pentru ochi.

Majoritatea cardurilor vor funcționa bine cu două fonturi (chiar dacă sunt din aceeași familie) - unul pentru textul general și unul pentru titlu sau îndemn. Altul punct important Ceva de reținut atunci când lucrați cu tipografie este contrastul, care va face textul mai ușor de citit. Asigurați-vă că luați în considerare contrastele dintre fonturi și dintre fundal și text pentru fiecare card.

Limitați elementele UI

Amintiți-vă: o carte este egală cu o acțiune.

Aceasta înseamnă că nu trebuie să împrăștiați o grămadă de elemente de interfață în întregul design, cum ar fi butoanele. Este posibil să nu aveți nevoie de ele deloc. Dar dacă tot credeți că utilizatorul are nevoie de un indiciu vizual, un buton este suficient.

Păstrați formele și designul simplu - din nou, Material Design este o opțiune excelentă - și încercați să nu faceți mai mult de un buton.

Butoanele sunt probabil singurul element UI de care veți avea nevoie. Străduiește-te pentru asta.

Concluzie

Nu există o rețetă magică pentru designul perfect în stil de card, dar există tehnici specifice care îi vor atrage pe utilizatori să facă clic unde doriți. Străduiește-te să fii mai aproape de realitate, alege minimalismul cu un număr mare aer și contrast, favorizează tipografia simplă și indică o acțiune pentru fiecare card.

Traducere – Cameră de serviciu

26.12.2016

Cardurile sunt mici recipiente îngrijite de informații.. Cardurile au devenit aproape un element obligatoriu atunci când vine vorba de echilibrarea esteticii cu o utilizare simplă. Designul cardurilor a fost introdus inițial de servicii precum Pinterest și Facebook, iar astăzi influența sa s-a extins în multe industrii.

Designul bine executat al cardului poate îmbunătăți UX ( Experiența utilizatorului) din cererea dumneavoastră. În acest articol, voi descrie 5 tehnici utile pentru implementarea designului cardurilor și voi da câteva exemple interesante.

Citeste si:

1. Urmați regula „O carte – un concept”

2. Întreaga suprafață a cardului trebuie să poată fi clicată

Urmăriți Legea lui Fittsși permite utilizatorilor să facă clic/atinge pe orice parte a cardului, nu doar link-uri text sau poze. O zonă mare de contact îmbunătățește semnificativ utilizarea atât pe ecranele tactile, cât și pe dispozitivele care folosesc un mouse.

Sfat: este bine când cărțile aruncă o umbră, arătând adâncimea - asta este confirmă vizual posibilitatea de a face clic pe card.

3. Faceți cărțile atractive

Designul cardului funcționează pentru că design bunși o utilizare excelentă. Adăugând estetică cardurilor, le faceți recunoscute și creative.

Când vine vorba de designul cardurilor, trebuie să vă concentrați asupra următoarelor puncte:

Imagini

Un accent pe imagini este puterea designului cardului. Cercetare confirma că imaginile „elevează” designul. Astfel, concentrarea pe utilizarea imaginilor face ca designul interfeței cardului să fie mai atractiv pentru utilizatori.

Umbre și degrade

Umbrele și gradienții au parcurs un drum lung pentru a fi simțite și asociate cu omologii lor fizici. Dar gândiți-vă cu atenție la modul în care folosiți umbrele și degradeurile: dacă umbrele sunt proiectate din toate unghiurile și laturile, iluzia că cardul este un obiect fizic va fi distrusă.

Tipografie

De asemenea, puteți atrage atenția utilizatorului folosind text. Totul din designul cardului ar trebui să fie ușor de citit și de înțeles:

Utilizare fonturi simpleŞi palete de culori(textul este cel mai bine citit pe un fundal contrastant).
Încercați să utilizați un număr minim de fonturi. Pentru designul cardului, un font este mai mult decât suficient.

Sfaturi: fontul obișnuit sans-serif este excelent pentru carduri.

Citeste si:

4. Limitați conținutul cardului

Cardurile sunt de obicei concise și conțin un link pentru a accesa informații mai detaliate. Când încercați să împachetați prea mult conținut într-un card făcându-l prea lat sau prea lung, acesta își pierde mesajul original, deoarece nu mai arată ca un card.

Mai jos este un exemplu de interfață de card. Observați cardul din mijloc. Problema este că există o mulțime de informații pe el, ceea ce face cardul greu de înțeles.

5. Profită de animație și mișcare

Animațiile pot avea un impact pozitiv asupra UX dacă sunt utilizate corect. Ele ajută oamenii să navigheze mai bine prin interfața cardului și să stabilească conexiuni vizuale între conditii diferite pentru fiecare card.

Indicații vizuale

Indiciile vizuale îi ajută pe utilizatori să înțeleagă cum să interacționeze cel mai bine interfata utilizator. Acest tip de animație este utilizat atunci când trebuie să demonstrați cum funcționează anumite funcționalități de design.

Feedback vizual

Feedback-ul vizual este foarte important în proiectarea interfeței. Funcționează pentru că satisface dorința naturală a utilizatorului pentru confirmare. În viața reală, obiectele răspund la interacțiune și asta se așteaptă oamenii de la obiecte. Pentru aplicații desktop sau site-uri web pe care le puteți utiliza efect de hover pentru a arăta că obiectele pot fi interacționate. Animația Hover crește nivelul de înțelegere și, în același timp, face experiența utilizatorului mai distractivă.

Folosind efectul de hover, puteți deschide și opțiuni. În exemplul de mai jos, efectul de hover permite utilizatorilor să schimbe culorile, să răspundă la mesaje, să le trimită sau să le ștergă.