Kort og komposibilitet i designsystemer

Struktur, indhold, stil og opførsel af sammensatte komponenter

Jeg er en sucker efter en kortkomponent. Det bringer mig nostalgisk tilbage til min ungdomstid, da baseballkort introducerede mig til informationsdesign. Jeg indsamlede og organiserede tusinder, der hver udstillede en heltens foto, hold som tema, positioner som identitet. Min hjerne beskæftigede sig med design, data og dybdegående undersøgelse, de fremmede.

Dagens digitale kort tjener det samme formål. Mere end blot en generisk beholder er et kort et scannbart øjebliksbillede af et objekts vitalitet. Det forhåndsvisninger nok til at identificere. Det inviterer os til at lære mere og interagere i den rækkefølge.

Et kort er et ark materiale, der fungerer som et indgangspunkt for mere detaljerede oplysninger. Kort kan indeholde et foto, tekst og et link om et enkelt emne. - Google Material Design's Card

Ofte signalerer kortet også en drejning i væksten af ​​et komponentbibliotek. I modsætning til primitiver som knap og input kræver et kort sammensætning. Det relaterer mange elementer (nogle findes allerede i vores bibliotek), og når indholdet strømmer ind i hver. Også kort vises næsten altid som et sæt, søskende side om side. Komposition udløser tænkning af højere orden kritisk for systemdesign.

Hærdning af en komposition som kort tvinger et system til at modnes. Nogle gange løser et system udfordringerne og øger bibliotekets kompleksitet. Andre gange styrer et systems voksende modenhed væk fra kompleksitet og holder tingene enkle. Disse udfordringer har form af struktur, indhold, stil og opførsel. Må lektionerne her inspirere dine systemsammensætninger, der kommer.

Komponeringsstruktur

Biblioteker starter med primitiver - input, overskrift, afkrydsningsfelt, radioknap, etiket, ikon - til at fungere som byggesten. En knaps komposibilitet er temmelig dagligdags: et ikon til venstre eller højre for en etiket, måske en delt bjælke eller animation. Thenbutton-gruppe kombinerer knap, tvinger søskneforhold. Dette er udfordringer på lavt niveau. Ting bliver mere interessant, når man komponerer komponenter som kort med mange elementer.

Identificer kerneelementer

En komponerbar komponent starter med en vigtig kerne af nødvendige elementer, så du ønsker at spørge:

Hvilke elementer kræves af hver skærm?
Hvad sker der, hvis der kræves et påkrævet element?

kort kræver ofte:

  • billede parret med en ...
  • titel (normalt en stylet overskrift), måske suppleret med en ...
  • beskrivelse (eller "dæk" eller andet uddybende indhold).

Identificer alle mulige elementer og sager

Kast opdagelsesnet bredt over mange produkter. Inventar hvert eksempel. Analyse bør give en voksende mangfoldighed af sager, og elementer skal informere et design og vejledning, der er nyttigt til senere dokumentation.

Hvad er en komplet mulig elementer inkluderet?
Hvilke elementkombinationer afskrækkes eller forbydes? For eksempel kan et kort indeholde knapper eller ikoner til handlinger, men aldrig begge dele.

kort tjener forskellige behov på tværs af mange oplevelser og kan omfatte en række andre indholdstyper:

  • etiket eller type, der ofte signalerer en gruppe, som objektet tilhører og muligvis vises som et tag eller et ikon / etiketpar.
  • handling (er), der tilbydes som knap (er), ikon (er) eller begge dele.
  • pris og vurdering af produkter
  • metadata, adskilt fra en beskrivelse for at fremhæve nøgleegenskaber
  • relaterede liste (r) som et sæt af poster relateret til objektet

Stiv elementrelationer

En komposibel komponents mange elementer rejser spørgsmål om rækkefølge, kombinationer, grupper og mere:

Er der navngivne zoner, f.eks. Handlinger?
Er der elementer undergrupper? Kan undergrupper ombestilles eller skjules?
Hvilken logik er nødvendig for at sortere, kombinere eller adskille kombinationer?
Hvor mange alternative arrangementer skal vi teste?
Hvor mange variationer skal afsløres og beskrives i doc?

For mange kort er den stablede rækkefølge fast: billede, derefter titel og derefter handlinger. I andre systemer kan mere fleksible behov antyde, at elementer ombestilles. F.eks. Giver Morningstar Design System's kort brugere mulighed for at placere et billede over eller under en titel.

Som en modal og en dialog, kunne kort identificere zoner for en header, main og sidefod eller medie, kopi og handlinger for at identificere indholdsrelationer.

Omfang med regioner, der tillader fleksibel input

Jo større komponenten er, desto mere sandsynligt tilbyder den en region, der velkommen, hvad end en systembruger ønsker at placere der. Regionens indhold kan være lige så uskadeligt som et afsnit eller en liste med punkter.

Er der generiske regioner, som du kan placere fleksibel markering i?
Hvordan påvirker regionzoner væske og / eller faste skærme?
Forventer eller anbefaler du bestemte indholdstyper til sådanne containere?

Men regionen åbner en farlig dør. Måske tilføjer en adopter en legende… under et diagram… med en tilstødende datakabel med fire kolonner… i indholdsdelen af ​​et kort. Tip: det er ikke det, et kort er til.

Fleksible regioner, hvor en systembruger kan injicere deres eget indhold.

Regioner tilbyder fleksibilitet, men inviterer misbrug. Ingen argumenterer for at åbne et modals hovedindholdsområde for usikker markering. For et kort kan en handlingslinjezone indeholde knap, ikon og menu. Det er dog ikke op til kort til hård tråd i hvert tilfælde. Nogle komponenter har muligvis behov for at tilbyde regioner og opgive kontrol med og ansvar for det, der er inde.

Takeaway: Med stor containerkraft kommer det store ansvar at vedtage hold. Lad ikke narre dig selv til at tro, at du kan forudsige, bygge, teste eller dokumentere alle mulige tilfælde. Hvis en region er beregnet til et par forventede varianter, gør adoptørerne en fordel og skab eksempler, der viser hver enkelt.

Komponering af indhold

Titler, prosa, metadata, prisfastsættelse. Et billede, der pakker en kraftig stans. Uanset hvilke elementer du inkluderer, kræver et kort omhyggelig overvejelse af medier og kopi. I modsætning til primitiver, som du håndterede dig selv, kræver kompositkomponenter samarbejde med dem, der kender indhold bedst.

Indhold varierer. Formkonventioner baseret på reelt indhold.

Et billede over teksten. Det er enkelt, ikke? Ikke altid. Billedets billedformat er centralt, ikke kun for visuel harmoni, men også indholdsproduktion.

Hos en klient analyserede vi eksisterende inkonsekvente kort på tværs af produkter. Det var en skattekiste af rigtigt indhold. Bortset fra: yikes, billedernes størrelsesforhold varierede vildt! Nogle produkter rystede med et forhold på 16x9 eller 3x2. Andre har kun firkantede billeder. Søgning præsenterede spektret, inklusive ekstremt høje portrætter.

Forskellige aspektforhold, der findes på rigtige billeder spredt over eksisterende produkter

Indholdseksperter blev forståeligt nok udmattet af mange års design flip flop. For dem var systemet en mulighed for at afslutte samtale i billedstørrelse. Et standardformatforhold ville ikke kun forbedre skærmkonsistensen, men også meget forenkle deres leverandørkrav og billedlevering.

Som et resultat afregnes kortet med et landskabsforhold på 16x9, forstærket af et firkantet alternativ. Denne proces gav også kode til at løse forholdspecifik visning på frontend. Som et resultat førte komposibilitet til en miniature-komponent, der også var nyttig for andre komponenter.

For at adressere ældre indhold tilbød kortet en prop til at indeholde billeder (ved hjælp af CSS-egenskaben i baggrundstørrelse) inden for 16x9-rummet. Designere opnåede visuel gitterharmoni i søgeresultaterne, mens producenterne justerede skærme pr. Kort for at adressere uønskede fotografiafgrøder.

Takeaway: Jo mere komponerbar en komponent er, desto mere vigtigt er det, at du inkorporerer indholdshensyn. Stresstestdesign og bygger med reelt indhold. Engagér dem, der håndterer det indhold, der flyder ind i dine komponenter hver dag. Du kan blive deres nye bedste ven.

For meget indhold? Adresseindpakning og afkortning

Mens billeder dominerer en skærm, spiller kopi også en kritisk rolle i overskrifter, beskrivelser og metadata. Men det er et kort, ikke et opus, så kopi kan ikke gå vild.

Længere titler og beskrivelser er bundet til at pakke en gang eller - hvis du kan mave det - to gange. Så design til margener og liniehøjde. Men hvis kopien forlænges, formindskes kortets effektivitet hurtigt.

Hvad er den maksimale længde for hvert kopielement?
Hvad er det maksimale og minimale antal tegn, vi har en behagelig bredde?

Trunkering giver en flugtluge, der beskytter mod kopilængde, som vi ikke kan forudsige. Trunkering deler mening: Nogle klienter afsky trunkeringen, mens andre frigiver et trunkeringsværktøj i en første komponentbatch. Afkort en korttitel eller endda undertekst eller beskrivelse, og du risikerer at skade kontekst og forståelse. I sammensatte komponenter, udsæt til prioriteter: afkort en beskrivelse før titel, eller efter tre linjer i stedet for to, midt i et udseende, der tilstrækkeligt bøjes.

Trunkering resulterer i en kortere, men potentielt ikke at foretrække, beskrivelse.

Det er heller ikke kun indpakning af kopier. Overvej rækker med handlinger som en vandret knap og ikonliste, der kan kollidere, når indstillingerne bliver smalle.

Smal kortbredde får en venstrejusteret knap til at kollidere med en højrejusteret ikonliste.

Afhentning: Maksimum for kopielængde og trunkering appellerer til vores følelse af kontrol over flowet indhold. Efterhånden som komponenternes kompleksitet vokser, styrkes den redaktionelle mening og kodekontrol på kopilængde, linjemål og påvirkninger af fluidkortsbredde. Hvis du tilbyder værktøjer, skal du gøre det som moderering ikke en krykke.

Ikke nok indhold? Når billed (er) og / eller kopi mangler

På den anden side er indholdet undertiden ikke tilgængeligt. Kortindhold når ofte ned i dybderne ved at plukke denne relaterede artikel eller den gamle profil til visning. Er dit kort klar til fravær af en beskrivelse, metadata eller endda et billede? Intet billede, åh, skandalen! Hvad laver du?

De mest udtalte af os siger: Aldrig! Vil du bruge et kort? Medtag nødvendige elementer, eller giv det ikke noget. Alligevel er det hårdt. Ofte urealistisk. Elegante komponerbare komponenter skal bøjes, men ikke gå i stykker, når indholdet flyder.

Tilfælde med indpakning af titler og manglende beskrivelser.

I mangel af kopi er kortsammensætning afhængig af et stabilt plads, der kan stables, under hensyntagen til de mange kombinationer, du måske eller måske ikke forventer.

Forekomster med manglende billeder erstattet af baggrundsfyld & ikon for at indikere aktivtype.

I mangel af image har vi muligheder. Du kan attraktivt skelne typer via en flad farve, et websteds overlagte identitetsmærke eller endda et ikon / farvekombo for type (aktivformat? Aktivitetstype? Indholdskanal?).

Komponerende stil

At atomere elementer er lettere (elementer kræver færre beslutninger) og sværere (disse beslutninger har grundlæggende virkning). Kort rejser dog udfordringer og udvider vores stilvalg, når elementer interagerer i trange rum.

Udvid et systems visuelle sprog

Min erfaring antyder, at komponenter som kort udløser trinvis samtale om systemkonventioner om modulær form og lagdeling. Samtaler kan styre mod grænseradius, skygge og subtiliteter i baggrundsfarvekontrast mellem objektet og lærredet nedenfor.

Takeaway: En sammensat komponent sætter en tone for formen på mange fremtidige designs, både på et bibliotek og for de arbejdsprojekter. Sådanne beslutninger bløder ind i oplevelsen på ufattelige måder, både farlige og dejlige.

Stil inden for og på tværs af komponenter

Et kort fremkalder farveforhold, der begynder med kontrast mod lærredet nedenfor. Nogle vælger enkelhed: kun hvidt kort på et hvidt lærred, ingen alternative baggrunde og bruger andre egenskaber som skygge til kontrast.

Rigere visuelle miljøer løser til forgrunds / baggrundskombinationer i lyse og mørke indstillinger. Discovery Education's Comet-system tilbyder mange baggrunde, der ofte vises sammen på en enkelt side. Derfor tilbød systemet lette og mørke kort på tværs af hver ved hjælp af mixins og tokens. Sådanne kort skaber et andet niveau af hierarki: tekst på komponentbaggrund på lærredsbaggrund.

Takeaway: Composability udfordrer din tolerance for visuel kompleksitet. Kraftfulde, meningsfulde komponenter frister et systemteam til at løse enhver kombination i håb om at spare tid til samarbejdspartneren. Men komplekse, velmodellerede løsninger påkalder en større omkostning ved oprettelse og vedligeholdelse. "Lige nok" kompleksitet er ikke altid klar.

Arrangering i layout

Adskillelse, ofte via margin, spiller også en rolle. Et kortlayout kan udnytte et layout_grid eller definere dets eget for at arrangere mange kort i en række eller gitter. Mens netmekanik er ligetil, rejser kortlayout flere spørgsmål:

Hvor mange kort kan vi have i en enkelt række?
Omarrangerer kortene baseret på lydhøre overvejelser?
Bøges kortbredde flydende inden i et væskegitter? I bekræftende fald, hvor bredt eller smalt kan et kort være? Er der lydhøre regler, der justerer elementer inde i et kort?
Skal alle kort i træk eller i et helt gitter altid være i samme højde?

Komponerende adfærd

Kortets primære formål er som gateway til dybere detaljer et andet sted. Et kort hæver også subtile interaktioner. Førstnævnte er ikke op til debat. Sidstnævnte kan føre til kontroversielle diskussioner om "Hvad kan klikkes?"

Som en indgangsgang er et korts navigation simpelt, når hele kortet kan klikkes. I dette tilfælde kan hele kortet reagere på markørhændelser som: hover og: fokus for at udløse et billede eller blok for at zoome, titel til genfarve og skygge til at mørkne. Hvis et kort ikke indeholder mere specifikke interaktioner, forenkler disse bekymringer at gøre hele blokken til rådighed for en enkelt interaktion.

Mange elementer, der potentielt kan reagere på begivenheder som klik og hover

På den anden side kan en sammensat komponent som kort indeholde mange interaktive zoner - titel, billede, knap, ikon, link - der påvirker både markering, stil og opførsel. Gør din ingeniør en tjeneste og diskuter disse under design iteration og overdragelse, før du ændrer implementeringen bliver smertefuld.

Om at gå i gang med et designsystem eller har brug for at dykke dybere for at diskutere produkter og spillere? EightShapes afholder systemplanlægningsworkshops og coacher klienter i designsystemer. Lad os tale!