Retningslinjer for komponentdesign

Skriv ordene og tilføj billederne til Empower Designers

# 4 af 7 i serien Documenting Components:
Oversigt | Intros | Eksempler | Design | Kode | Forfatter | Myter

Jeg kan huske den morgen. September 2014. McLean, Virginia. Jeg ankommer til arbejde omkring kl. 7.30. Jeg åbner Googles retningslinjer for materialedesign for første gang. Jeg kan huske nøjagtigt, hvor jeg stod, i 90 minutter og blødlægte det hele ind. Det var så, så godt. I slutningen kendte jeg ikke bare materiale bedre. Jeg var en bedre designer, og mit sind var vild med, hvordan jeg kunne dokumentere bedre.

I løbet af denne forbløffende oplevelse fandt jeg retningslinjer behagelige. Imidlertid er komponentretningslinjer ikke behagelige at læse. De er en reference, der orienterer designere mod gode beslutninger. Retningslinjer skal give hurtig læring og hurtig opslag, alt sammen mens designere handler om deres forretning.

Retningslinier kan således ikke skrives af en uinformeret solist, der trækker en kedelig skriveopgave. Retningslinjerne skal være klare. Retningslinjer skal organiseres. Retningslinjer skal formulere beslutninger, der er smedet af den inkluderende dialog fra et deltagende designsamfund. Retningslinjer skal give læserne mulighed for ikke at fylde dem med tæt, beskidt prosa, som de ikke har læst.

For at producere retningslinjer for kvalitetskomponenter har du brug for en indholdsarkitektur, skrivekonventioner og tilgang til billeder og demoer, der fungerer bedst for dit publikum. Måske denne guide giver inspiration til at komme i gang.

Start med ordene

Designretningslinjer begynder som en skrivøvelse, selvom de til sidst ikke kun er ord (mere om det senere). Velskrevne ord betyder noget. Med en forudsigelig struktur, der organiserer rådgivning, kan enhver læser - især designere - træffe bedre valg, når man bruger en komponent.

Organiser retningslinjer pr. Sektion efter disciplin

Nogle retningslinjer er bedre end ingen. En massiv liste over uorganiserede kuglepunkter fraråder dog læserne. Konsistente overskrifter, organiseret efter typen af ​​designproblemer, skaber et velkendt mønster for læserne og opfordrer forfattere til at overveje implikationer på tværs af bekymringer.

Når en skriveplanformular og komposition begynder, anbefaler jeg følgende kategorier (i rækkefølge):

  • Brug når, ofte med en modregning Brug ikke hvornår som en underoverskrift (alternativt hvis afskrækket overskrift: Hvornår skal bruges).
  • Visuel stil for at informere bedømmelse om farve, type, rum og mere (alternative overskrifter: Visuelt sprog, designsprog, fundamenter).
  • Opførsel til at dække, hvordan man håndterer hændelser, resultater og overgange (alternative overskrifter: Interaktion).
  • Redaktionel rådgivning, der dækker kopier og billeder, der strømmer ind i hvert element (alternative overskrifter: Voice & Tone, Content).
  • Tjeklister over tilgængelighed, der informerer designbeslutninger som farvekontrast.

Ikke hver komponent tilbyder retningslinjer i hver kategori, så udelad overskrifter, der mangler indhold.

Forskellige komponenter kan resultere i forskellige tilgængelige retningslinjer. Skjul overskrifter på tomme sektioner.

Med en fælles struktur signalerer en komponentsides lokale navigation (f.eks. En klistret højre link-liste), hvad der er der, og forankres til hvert afsnit.

Brug når

Mens en komponentindledning kan antyde, at relevant brug er, skal du stole på et brug Når-afsnit for at illustrere de mange tilfælde, hvornår en komponent skal bruges eller ikke.

Mens nogle systemer vælger “Hvornår de skal bruges” som overskrift, er det ikke min stil. “Brug når” giver en konsistent og mere kortfattet struktur ved at begynde med en gerund (verb, der slutter på “… ing”) som Visning…, Krav…, Gruppering… eller Indlæser…. Eksempler inkluderer:

Visning af indstillinger i en menu. (Morningstar's List Group)
Fremhævning af et vares status for hurtig genkendelse. (Atlassians lozenges)
At lave et billede skal du udfylde den tilgængelige plads, mens den faktiske billeddimension ikke overskrides. (Australske regeringsdesignsystemers responsive medier)
Fremhæv korte, ubestemte aktiviteter (mellem 2 og 5 sekunder). Længere aktiviteter kan kræve alternative kommunikationsmetoder, såsom snackbars eller underretninger. (Indikator for fremgang for Google-materiale)

Når kontrasterende eksempler opstår, skal du afklare, hvad du ikke skal gøre. Disse bruges ikke, når emner skrives med samme stemme inden for en søskende- eller efterkommergruppe.

Visuel stil

Retningslinjer i visuel stil hjælper designere med at skræddersy stil på baggrund af deres forhold. Emner inkluderer farve, typografi, ikonografi, rammer, plads, størrelse og andre visuelle egenskaber. Lige så almindeligt uddyber dette afsnit, hvordan man arrangerer flere forekomster (eksempel: justering af primære og flere sekundære knapper) og relaterer komponenten til tilstødende elementer.

Eksempler inkluderer:

Placer en primær knap højst til højre i en gruppe af knapper. (USAC Indigos knap)
Juster opacitet på tværs af interaktive tilstande, så den passer til [Knappens] baggrundsfarve.
Centrer altid en stepper over indholdet. (Morningstar's Stepper)

Retningslinjer for visuel stil er ikke specifikationer. Undgå fristelsen til at gøre dette afsnit til den endelige destination for overdrevne redlines. Specifikationer er vigtige for en ingeniør, der bygger komponenten. Når læserne støder på denne dokumentation, er sådanne visuelle detaljer imidlertid allerede indbygget i den tilgængelige funktion.

Opførsel

Uanset om din indbyggede komponent tilbyder tung indbygget logik eller ej, giver en adfærdssektion dig muligheden for at uddybe alle de interaktive detaljer, der er nyttige for en designer, der skaber en oplevelse. Eksempler inkluderer:

Luk popover, når der klikkes på trigger UI-elementet igen, når brugeren klikker uden for popover-panelet, når brugeren åbner en anden popover, eller når brugeren trykker på ESC-tasten. (NetApp LUCI's popover)

Hvis et bibliotek kun tilbyder HTML & CSS uden indbygget logik, kan et opførselsafsnit ballonere for at give vejledning til både designere og ingeniører. Indhold kan have en mere struktureret tone, såsom tabeller, der tilbyder potentielle begivenheder og tilknyttede resultater.

Leder

Uanset om det er atomisk (som en knap eller input) eller komponerbar (som et kort eller menu), har komponenter næsten altid ord eller billeder. Den redaktionelle sektion kan tilbyde råd om etiketter, tone, længde, tegnsætning og skrivning af prøver. Eksempler inkluderer:

Brug pladsholdertekst til at give yderligere kontekst omkring de data, der søges. (Morningstars søgefelter)
Brug sætningstilfælde, hvor kun det første ord i en sætning og alle korrekte navneord aktiveres. (IBM Carbon's afkrydsningsfelt)

Redaktionelle retningslinjer drager især fordel af do and don 't prøver, som en læser kan sammenligne og imod hvilken model, deres egen skrivning.

Top tip til skrivning af effektive designretningslinjer

Stemme- og toneretningslinjer varierer efter designsystem. Når et team begynder at forfattere, vil jeg foreslå følgende konventioner som udgangspunkt:

  1. Skriv imperativer, der begynder med ord som Skjul…, Inkluder…, Forhindre…, Begræns… og Aktivér….
  2. Udelad unødvendige ord. Hvis du kan sige noget med færre ord, skal du gøre det.
  3. Anfør ikke-omsætningspapirer med altid… eller aldrig….
  4. Tilskynde en læsers dom med overvejelse ... eller undgå ....
  5. Omdirigerer hurtigt til et passende alternativ med en efterfølgende sætning, der begynder med "I stedet skal du bruge værktøjstip."
  6. Foretrukne positive i forhold til negativer, såsom "Inkluder altid et logo i global navigation" over "Undlad aldrig at have et logo fra global navigation."
  7. Favoritlister over afsnit. Læsere ønsker at lære hurtigt eller finde et emne. Så begrav ikke rådgivning i tæt prosa, medmindre det er absolut nødvendigt.
  8. Begræns retningslinjernes længde til to sætninger eller mindre.
  9. Foretrukne specifikke råd, der er objektive, kortfattede og ofte kvantitative i forhold til subjektive, kvalitative og mødefulde forklaringer.

Tidligt undgår gode vaner forfattere. Indledende redaktionelle passeringer over knap, input og værktøjstip kan resultere i et blodig rod med Google Doc-forslag.

Før: Virkelig brede logoer og webstedsetiketter kan resultere i forringede skærme, hindre brugervenlighed og være uforenelige med andre præsentationer ved at forårsage unødvendig indpakning eller optage for meget plads. Forsøg derfor at holde logoer under 100 pixels brede og lad ikke etiketter blive for lange.
Efter: Begræns produktidentiteten til et logo <100px bredt eller en tekstetiket ≤ 15 tegn lang.

Bliv alvor, mine redigeringsvenner. Forfattere justerer sig ved at acceptere redigeringer, iterere og tilpasse sig konventioner, når de forfatter den næste komponent. Disse skrivemønstre vil gribe fat, undertiden gradvist for forfattere, men hurtigt for læsere.

Forbedre med billederne

Et billede er værd 1.000 ord. Eller det er i det mindste ofte over de mange, mange ord, det erstatter, især for det vigtigste råd, du giver.

Når du skriver eller redigerer designretningslinjer, skal din indre stemme konsekvent udfordre hvert kuglepunkt, afsnit eller overskrift med:

”Ville et billede fungere bedre her? I bekræftende fald, er det det værd? ”

Lav ikke fejl, billeder er mere dyre at komponere, justere og styre indhold end at notere et par ord. For mange billeder kan skabe en overvældende rullet oplevelse ned på en dokumentationsside. Billeder bliver også forældede og skaber vedligeholdelseshovedpine.

Så find den rigtige balance mellem ord og billeder, f.eks. 1 billede for hver 5 til 10 retningslinjer, der kun er til kopi. Når du er forfatter, skal du altid være opmærksom på, hvordan du kan forbedre historiefortællingen med billedtekstbilleder, do's and don'ts og andre brugerdefinerede indstillinger til din rådighed.

Brug gør og må ikke, især sammenligneligt

Når jeg redigerer, udløser ofte vigtige eller ordrette retningslinjer en kommentar til:

"Overvej en Do / Don't."

Do / Don’ts giver en velkomstpause fra tekstens tekst. Blokkene er definitive, kortfattede, fokuserede og kan scannes. Hvert par kobler et billede med en kortfattet retningslinje, der er udskrevet med et Do eller Don’t imperativ og med accentgrøn eller rød. Klarhed er ikke vanskelig, og mønsteret kan genanvendes i noget afsnit.

Som navnet antyder, parrer optimale do / don're den ene ved siden af ​​den anden. Javisst, ethvert antal af Do'er efterfulgt af ethvert antal Don’ts kan arbejde. Men at give læseren mulighed for visuelt at ping pong visuelt til venstre og højre forstærker et mindeværdigt undervisningspunkt. Overvej derfor at begrænse Do / Don’ts til to pr. Række.

At forfatter Do’s and Don’ts drager fordel af en standardhøjde og bredde lige under 50% af indholdet godt, hvilket tyder på en designskabelon (som en Sketch-fil med premade tegnebræt) til oprettelse af aktiver. Undertiden er dette 4x3ish-billedforhold en uvelkommen begrænsning for større eller vandret orienterede billeder. Overvej derfor en Do / Don-variant i fuld bredde som et alternativ.

Arbejde / fungerer ikke godt til ord og kodestykker også. Den sædvanlige mistænkte, der udløser mine systemhold til at udvide Do / Don’t-displayet til at rumme ord? Fejlmeddelelser, ofte som en stak sensibiliserende eksempler, som det ses på websteder som Shopify Polaris og Morningstar.

Selv ikke / ikke-afdækning vises i form af forsigtighedshistorier med accent med gult eller orange, som det ses på Google Materiale.

Berig historiefortælling med overbevisende hvis dyre tilpassede demonstrationer

Efterhånden som en investering i designretningslinjer uddybes, gør det også et holds vilje til at investere i mere tilpassede udstillinger, herunder:

  • Lavtidelighedsdiagrammer af komponenteksempler (eksempel: Salesforce Lightning Loading), strømme eller tilstande. Som et supplement til kodede eksempler på fuld tro, i nærheden, kan en sådan historiefortælling være billigere at fremstille og fokusere en læser på elementer, der er relevante for historien.
  • Videoer, animerede GIF'er og andre tilpassede demoer, der fanger en bue med interaktion, animation eller hurtig-looping-prøve. (Eksempel: Google Material Motion)
  • Yderligere eksempler på live kode, der beriger forståelsen ud over listen over variationer.

Givetvis er brugerdefinerede demoer sjældne på de fleste komponentsider på tværs af de fleste designsystemer. Det er normalt dyrere, kan bremse forfatter og kræver normalt værktøjer og aktiver, der er mindre kendte eller tilgængelige for forfattere. Vælg derfor dine øjeblikke, men tøv ikke med, når det lærbare øjeblik garanterer investering.

Undgå redundans med kodede eksempler

Hvis læsere allerede har stødt på en liste med gengivne eksempler med kodeækvivalenter (som foreslået i komponenteksempler), skal du kraftigt undgå at gentage eksemplerne i designretningslinjer for at fortælle den samme historie. Sådanne eksempler - effektivt mærket og ideelt kombineret med kortfattede ”Use When” -stil-udsagn - har allerede udstillet række relevante sager.

Forbehold derfor designretningslinjerne til dybere historiefortælling, der uddyber snarere end gentager, hvad eksemplerne allerede har lært.

# 3. Eksempler ← Forrige | Næste → # 5. Retningslinjer for kode