Du har brug for et formsystem

Sådan bruges form til at forbedre dit brand, direkte opmærksomhed og støtte interaktioner

Når designere udtrykker brand og hierarki i UI, vil de ofte henvende sig til velkendte systemer for farve, typografi og billedmateriale. Men der er et andet, overset element i designerens værktøjskasse: form.

Fra knapper til kort, tekstfelter, menuer og flydende handlingsknapper (FAB'er) er form et ubestrideligt aspekt af enhver grænseflade. Og nu er den nyeste sektion i retningslinjerne for materialedesign helt dedikeret til bedste praksis til brug af form i UI. Det følgende er lidt inspiration til, hvordan du kan bruge form til at forbedre dit brand, direkte opmærksomhed og støtte interaktioner.

Form forstærker dit brand

En af de mere holistiske måder at nærme sig form i UI på er at overveje dets evne til at udtrykke brand, når de anvendes tankevækkende i en app. Et mærke med en mere organisk eller venlig fornemmelse kan vælge afrundede former, mens et mærke med en geometrisk stil eller et ønske om at udtrykke præcision kan vælge en mere kantet form. F.eks. Bruger Shrine-appen skarpe udskæringer i hele dets brugergrænseflade til at afspejle det vinkelformede logo på det.

Form driver hierarki

Stærke forskelle i form kan udtrykkeligt bruges til at rette opmærksomheden. Hvis en brugergrænseflade for eksempel for det meste har afrundede figurer, kan introduktion af en skarp, diamantformet knap henlede opmærksomheden til denne komponent. Det klassiske Material Design UI af en rund FAB foran rektangulære kort er et andet eksempel på, hvordan form kan bruges til vægt. En mere harmonisk eller subtil brug af form inden for det visuelle hierarki kan kommunikere forhold mellem elementer, såsom lignende-formede kort, der fremstår som kammerater, eller form, der hjælper med at skelne adskilte overflader - en tilgang, der anvendes af baggrundskomponenten.

Form peger på interaktion

Form kan også bruges mere taktisk til at indikere specifikke tilstande eller muligheder for interaktion. Ændring af hjørnet på et kort for at indikere en markeringstilstand kan supplere teknikker som at bruge ikoner, ændre kortets indhold eller ændre kortets størrelse. Ændringer i form kan også subtilt indikere muligheden for interaktion med en overflade. For eksempel kan afrundede hjørner antyde, at et bundark kan trækkes opad, mens firkantede hjørner kan antyde, at alt indhold vises i øjeblikket. Brug af denne type visuelle sprog til at indikere interaktionsmuligheder er imidlertid ikke veletableret eller systematiseret, så undgå at stole udelukkende på form for at kommunikere mening.

Kom i gang med at opbygge dit formsystem

  1. Overvej attributterne for dit brand. Hvilken kerneform udtrykker dit brands vibe og personlighed? Brug dette udgangspunkt til at udvikle en komplementær familieform. Er din kerneform afrundet? Prøv at parre rundvinklede kort med en opmærksomhedsfangende, udvidet FAB-form. Mere ind i vinkler? Overvej skærede hjørner på knapper og bundplader.
  2. Tænk igennem hierarkiet i dit brugergrænseflade, og hvordan form kan bruges til at henlede opmærksomheden på de passende dele af skærmen.
  3. Brug form konsekvent og målrettet i hele din app, så dine formvalg udvikler mening for dine brugere. Inkonsekvent brug af form kan være forvirrende, og overforbrug kan fortynde dit brand-udtryk. Sørg også for, at rent dekorativ form ikke forekommer funktionel eller interaktiv, og at den form, der bruges til at kommunikere mening, er indlysende og entydig.
  4. Test også din formhistorie med brugerne. Formen kan alene være tvetydig og kan bedst parres med et ikon eller tekst for at kommunikere eksplicit betydning. I sidste ende er brugertest den bedste måde at bestemme, om din påtænkte brug af form fungerer og forstås på den måde, du har til hensigt.

Hjælp os med at designe fremtiden

I modsætning til eksisterende systemer som type og farve, har form ikke veldefinerede regler for anvendelse i UI. Brug denne mulighed til at eksperimentere med form alene eller i kombination med mere etablerede brugergrænseflademønstre for at finde den mest effektive måde at kommunikere med dine brugere.

Del dine formeksperimenter med os @materialdesign.