Model de proiectare a cardurilor

Rezumatul problemei

Utilizatorul trebuie să parcurgă conținut de diferite tipuri și lungimi

Exemplu

model

▲ Pinterest folosește cărți pentru a grupa articole eterogene împreună: fiecare carte diferă prin cantitatea de informații și ocupă o cantitate diferită de spațiu vertical.

Utilizare

  • Folosiți pentru a afișa conținut compus din diferite elemente
  • Utilizați pentru a prezenta elemente a căror dimensiune sau acțiuni acceptate variază - cum ar fi fotografiile cu subtitrări de lungime variabilă.
  • Folosiți atunci când afișați conținut care ...
    • Ca o colecție, constă din mai multe tipuri de date (imagini, filme, text)
    • Nu necesită comparație directă
    • Suportă conținut de lungime foarte variabilă (subtitrări, comentarii)
    • Conține conținut interactiv
  • Folosiți pentru a grupa vizual porțiuni de informații digestibile care necesită o acțiune; cum ar fi acceptarea unei cereri sau accesarea mai multor detalii.
  • Folosiți pentru a aduna diverse informații despre un singur subiect pentru a forma o bucată de conținut coerentă.
  • Cardurile sunt mai potrivite atunci când utilizatorii caută informații decât atunci când caută.
  • Cardurile funcționează cel mai bine pentru colecțiile de articole eterogene (atunci când nu tot conținutul este de același tip de bază).

Această carte face parte din pachetul de cărți tipărit UI Patterns

O colecție de 60 de modele de proiectare a interfeței de utilizator, prezentate într-un mod ușor de referințat și utilizat ca instrument de brainstorming.

Mai multe exemple

Soluţie

Afișați punctele de intrare către conținut detaliat și variat în forme similare. Un card poate conține o fotografie, un text și un link despre un singur subiect.

Luați în considerare doar colecțiile de cărți defilate într-o singură direcție: orizontal sau vertical. Conținutul cardului care depășește înălțimea maximă a cardului (dacă derulează pe verticală) sau lățimea (dacă derulează pe orizontală) este trunchiat și nu derulează, dar poate fi extins. Odată extins, o carte poate depăși înălțimea/lățimea maximă a vizualizării.

Un card include de obicei câteva tipuri diferite de suporturi media, cum ar fi o imagine, un titlu, un scurt rezumat și un buton de îndemn.

Cardurile pot fi manipulate

Unul dintre cele mai importante lucruri despre cărți este abilitatea lor de a fi manipulate aproape infinit. Pot fi transformate pentru a dezvălui mai multe, stivuite pentru a economisi spațiu, pliate pentru un rezumat - și extinse pentru mai multe detalii, sortate și grupate.

Putem sugera ce este pe partea din spate sau că cardul poate fi pliat. Asemănarea cărților cu lumea fizică le face o mare metaforă conceptuală pentru care putem raporta cu ușurință tot felul de manipulări.

Raţional

Navigarea este o mare parte a interacțiunii, iar utilizatorii doresc să poată scana rapid porțiuni mari de conținut și să se adâncească în interesele lor. Utilizatorii pot întâmpina dificultăți în navigarea pe site-uri cu conținut ridicat de text, deoarece afișarea detaliilor suplimentare pentru fiecare articol poate aglomera ecranul și poate preveni scanarea eficientă.

Cardurile sunt excelente pentru prezentarea elementelor agregate a căror dimensiune sau acțiuni acceptate variază. Fiecare carte servește drept punct de intrare pentru informații mai detaliate, deci nu ar trebui să fie supraîncărcată cu informații sau acțiuni străine. Acestea sunt respingibile, glisabile, sortabile și filtrabile.