Ș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 sunt foarte asemănătoare cu cele reale, tangibil carduri. Înainte de dispozitivele mobile, acestea erau peste tot: cărți de vizită, cărți de baseball, carti 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țiile cheie de care aveți nevoie despre jucător.

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 pentru carduri pe desktop-ul lor și aplicatii 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 Dribbble, un site binecunoscut în comunitatea creativă, unde designerii își prezintă munca. Un design de card este poate cel mai potrivit pentru a afișa acest tip de conținut.

Site-ul Dribbble.

Cum să proiectați un card

Cardurile din același aspect ar trebui să aibă aceeași lățime, dar înălțimea poate fi diferită. Înălțimea maximă a hărții este limitată de spațiul disponibil pe 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 vor aduce la design ușor picant vizual 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, conținut principal. Cardurile din design sunt recipiente 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 usor la conținutul care este interesant în mod specific lor- 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 adaptiv pentru că servesc containere de informații, care poate fi ușor scalat.

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

Design al degetului mare

Cardurile sunt simple creat sub deget 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ță confortabilă de interacțiune. 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 modelul cardului 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.

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ă

Urma Legea lui Fittsși permite utilizatorilor să facă clic/atinge pe orice parte a cardului, nu doar pe linkuri text sau imagini. Zona mare atingerea îmbunătățește semnificativ capacitatea de utilizare 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 a 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 utilizaț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).
• Incearca sa folosesti cantitate minimă fonturi. Pentru designul cardului, un font este mai mult decât suficient.

Sfat: 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ă instaleze conexiuni vizualeîntre diferite stări pentru fiecare card.

Repere vizuale

Indiciile vizuale îi ajută pe utilizatori să înțeleagă cum să interacționeze cel mai bine interfața cu utilizatorul. 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ție cu mouse-ul 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ă.

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 corespund în volum atenției 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 model de interfață a cardului la vedere: ce este bun la el, cum se încadrează în conceptele de design adaptiv și material și la ce să ne așteptăm de la el î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, cu o distanță specificată între ele.

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 o experiență de utilizator unificată și să o difuzați 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 ecranul 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 carduri fara niciuna efort suplimentar se transformă în nasturi. Ideea este simplă: atingeți cardul pentru a începe să interacționați cu conținutul.

Viitorul cărților

Modelul de interfață bazat pe carduri evoluează în mod constant pentru a face față noilor provocări, cele mai multe dintre ele în design responsive și aplicații. 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 numar mare detalii, de exemplu, conținut de auto-actualizare, în timp ce interacțiunea cu interfața nu va încetini.

În lumea designului web apar în mod constant noi tendințe, care ulterior capătă amploare. Cine poate uita de paralax scrolling, care a apărut în urmă cu câțiva ani și este popular și astăzi? Deși în În ultima vreme, pagini din pergament lung atrage mai multă atenție din partea vizitatorilor site-ului.

O tendință care nu a primit la fel de multă recunoaștere ca altele și a fost oarecum populară de ceva vreme este designul cardurilor.

Cel mai popular site web care prezintă această tendință de design este Pinterest, dar există și alte site-uri care folosesc adesea această abordare de design și trebuie remarcat faptul că motiv bun. Când vizitatorii vizualizează un site web care utilizează această tehnică de design, ei vor observa imediat ordinea și structura bine organizată din spatele abordării designului simplu, dar elegant.

Există multe beneficii în utilizarea acestei abordări de design pe propriul site web.

Abordarea grilă a arhitectura informatiei

Când te uiți la designul oricărui card, nu poți să nu vezi o grilă la bază. Acest lucru se datorează faptului că fiecare margine a cardului este de fapt alcătuită din diferite grile într-un mare, ok sistem organizat, care promovează o mai mare consistență și armonie în modul în care arată site-ul.

Acest lucru, la rândul său, ajută foarte mult arhitectura informațională a site-ului. Arhitectura informației este ordinea și secvența inteligentă în care vizitatorii dvs. percep informațiile site-ului, în mod ideal în conformitate cu scopul fiecărei pagini și al întregului site.

Gândește-te: designul cardurilor „ghidează ochii” vizitatorilor tăi pe o cale logică. Fiecare card face parte dintr-un rând sau coloană care direcționează câmpul vizual al vizitatorilor de-a lungul liniilor orizontale și verticale uniforme. Acest aranjament îi ajută pe vizitatori să înțeleagă care informații sunt mai importante.

Luați Contrastly, o revistă de fotografie, de exemplu. Urmărirea aspectului grilei/cartelelor vă va ajuta să înțelegeți ce este cel mai important în ierarhia informațiilor. Cele mai recente articole sunt postate pe linia de sus, în timp ce articolele mai vechi apar în rândul de jos. Noutatea tinde să fie asociată cu o importanță mai mare, așa că urmărirea acestei ordini descrescătoare într-un sistem de carduri permite utilizatorilor să înțeleagă rapid ce conținut este mai important. În acest fel, ei pot prioritiza în ce ordine să citească aceste informații.

Dependență puternică de imagini

Am auzit vechea zicală că oamenii iubesc cu ochii de atâtea ori încât a devenit un clișeu, deși în designul cardurilor capătă un nou sens. Designul cardului se bazează aproape exclusiv pe modalități vizuale; orice copie de pe aceeași pagină este de obicei secundară vizualului, din punct de vedere al arhitecturii informaționale.

Utilizarea imaginilor este punct forte design de card, deoarece cercetările confirmă că imaginile determină designul web. De exemplu, și fotografii de înaltă calitate și utilizare chipuri umane fotografiile cresc rata de conversie. De fapt, în afară de tot ce s-a menționat mai sus, există câteva alte moduri prin care, dacă folosești imagini în designul tău, poți crește rata de conversie a site-ului tău.

Cu alte cuvinte, concentrarea pe utilizarea imaginilor face ca designul cardului să fie mai atractiv pentru vizitatori. Nu este o coincidență că Pinterest este al 15-lea cel mai popular site din SUA, potrivit Alexa.

Privind rezultatele Pinterest după ce ați introdus cuvântul „mâncare” în motorul de căutare, puteți vedea că imaginile sunt primul lucru care atrage atenția atunci când sunteți pe site. Nu-ți pasă ce scrie sub fotografii, dar macar, nu este o chestiune de primă importanță. Calitate superioară, poze uluitoare care iti atrag atentia, si abia atunci, dupa ce ai luat o decizie, vrei sa afli mai multe (dar deja din prezentarea acestei poze), motiv pentru care citesti pana la urma descrierea.

Experiență îmbunătățită a utilizatorului

Orice designer vă poate spune că experiența utilizatorului este cel mai important lucru. Acestea sunt cele pentru care ar trebui să le proiectăm în primul rând. Un alt motiv este că designul cardului rezonează atât de bine și va continua să o facă în viitorul apropiat, deoarece ajută experiența utilizatorului. Și acesta este ceea ce îi face pe vizitatorii site-ului să revină în continuare și, la rândul său, îi ajută să petreacă mai mult timp acolo, ceea ce duce în cele din urmă la Mai mult tranziții!

O experiență excelentă de utilizator se bazează pe faptul că oamenii pot găsi ceea ce au nevoie pe site-ul dvs. fără bariere; Practic, trebuie să găsească ceea ce își doresc și să-l găsească imediat și fără bătăi de cap.

Dribbble este un site care înțelege bine acest lucru, deoarece dezvoltatorii săi au folosit carduri pentru a face experiența utilizatorului mai ușoară și mai bună. Site-ul este bine cunoscut în comunitatea creativă online ca un model pentru arta generată de utilizatori.

Ideea site-ului este ca oamenii să admire ilustrațiile, graficele și imaginile de tot felul, așa că designul cardurilor este cu adevărat cel mai mod potrivit pentru a implementa o asemenea idee. Deoarece imaginile atrag ochiul vizitatorului în mod eficient și imediat, experiența utilizatorului este mult îmbunătățită atunci când vizitatorii pot scana rapid carduri într-un aspect de grilă pentru a vedea care îi interesează. Odată ce văd ceva ce îi interesează, pot face clic instantaneu pe card pentru a arunca o privire mai atentă.

Un site precum Dribbble permite vizitatorilor să găsească Locul potrivitîntr-un mod super convenabil. Acesta este simbolul experienței excelente pentru utilizator!

Ideal pentru design mobil

Poate ați auzit că dispozitivele mobile au depășit deja computerele desktop o cantitate mare utilizatorii. Numai în 2015 în SUA, utilizarea mobilă medii digitale mass media ajunge la 51% comparativ cu computere desktop, care au 42%. Designul bazat pe card este ideal, deoarece ține cont de această tendință, fiind ușor compatibil cu cadrele receptive. Deoarece cardurile oferă conținut în „porțiuni digerabile”, făcând mai ușor afișarea pe cadrele mobile.

Priviți cardurile din acest punct de vedere: forma și dimensiunea lor sunt aproape o imitație a formei și dimensiunii unui smartphone sau tabletă. Desigur, nu chiar o asemănare perfectă din cauza un numar mare variat modele disponibile, dar totuși o asemănare destul de apropiată atunci când este privit dintr-o perspectivă a raportului de aspect.

Drept urmare, cardurile nu vor fi niciodată din uz atâta timp cât cererea pentru dispozitive mobile și Internet crește și nu există semne de încetinire a utilizării cardurilor în curând.

Acesta nu este doar un alt moft

Problema cu unele tendințe de design este că acestea devin moduri, făcându-le de scurtă durată și de nememorat. Deși, designul cardului poate fi o excepție! Din cauza cantitate mare aplicație practică iar beneficiile pe care le oferă, va deveni mai popular în timp. Aceasta înseamnă că va „supraviețui”.

Asigură consecvența arhitecturii informaționale a site-urilor și susține obsesia utilizatorilor pentru imagini clare, care la rândul lor acționează ca o modalitate de creștere a traficului pe site. În consecință, întreaga experiență a utilizatorului beneficiază, de asemenea, foarte mult de pe urma designului cardului, pur și simplu pentru că, de fapt, face mai ușor pentru utilizatori să găsească ceea ce au nevoie pe site. Datorită creșterii internet mobilÎn ultimii câțiva ani, această abordare a designului a devenit una curentă de care tot mai mulți oameni o experimentează și se bucură.

Ideea de carduri este de fapt un concept vechi, dar i s-a dat o altă încercare și a fost actualizat la o nouă abordare în web design. Acesta este doar un exemplu pentru a vă arăta că designerii creativ pot lua ceva vechi și banal și îl pot transforma în ceva extrem de relevant și util în secolul XXI.