Videnskab i systemet: Flydende design og materiale

Brug af fysiske elementer til at skabe et visuelt hierarki og organisere indhold på en måde, der er let for brugeren at behandle

At fremstille en origami-kran ud af et ark acetat var lidt vanskeligere end jeg havde forventet.

Materialevidenskab er et voksende felt fuld af banebrydende opdagelser og opfindelser, der ser ud til at trodser fysikkens love.

Tag for eksempel carbon nanorør. Hver nanorør er ca. 10.000 gange mindre end et menneskehår. Når kulstofnanorør rulles ind i plader, har den 100 gange styrken af ​​stål - men kun 1/6 af vægten. Ud over at være små er de halvledere, der kan bruges til at oprette chips, der er mindre, mere effektive og hurtigere end deres silicium-kolleger.

MIT skaber fluorescerende polymergeler, der ændrer farve, når de forstyrres ved opvarmning, omrystning eller udsættelse for syre. Dette nye farveændrende materiale kan bruges til at opdage strukturelle fejl, hvilket kan hjælpe med at gøre køretøjer og bygninger mere sikre.

Mindst en teoretisk fysiker mener, at de rigtige eksotiske materialer kunne generere en varpboble, der ville muliggøre rejser hurtigere end lys ...

På en mere praktisk note er materiale kommet til Windows-brugergrænsefladen.

Før materiale: Glas i UI

Vi har eksperimenteret med materialelignende visuelle effekter i UI i årevis. I slutningen af ​​90'erne og begyndelsen af ​​2000'erne var "glas" og "plastik" knapper så almindelige, at populære billedredigeringsprogrammer, som Adobe Elements, leverede forudindstillinger til oprettelse af dem. Til sidst omfattede mainstream-operativsystemer gennemsigtighedseffekter: Apple introducerede gennemsigtige, glaslignende effekter til macOS i 2000, og Microsoft tilføjede Aero Glass-temaet til Windows Vista i 2005.

De rigtige materialer kan hjælpe dig med at skelne ellers lignende elementer. Det fungerer i origami, og det fungerer også i brugergrænsefladen.

Med Windows 10 Fall Creators Update, der blev frigivet sidste år, har vi tilføjet materiale til OS. Vores første materiale, akryl, er en gennemsigtig overflade.

Du kan tilpasse Acryl og give det en farvet farve eller ændre dens opacitet.

Mere end en særlig effekt

Tidlige glas- og plastikeffekter anvendte typisk en eller to lineære gradienter og en skråkant.

En old-school glaseffekt.

Akrylmateriale er mere sofistikeret. På en pc er det en todimensionel simulering af et 3D-objekt i den virkelige verden, der bruger lys, sløring, støj og farve til at gentage et fysisk, akrylmateriale.

Opskriften på akryl bruger flere lag, hver med deres eget subtile touch.

Ved at simulere et faktisk materiale, snarere end at anvende en simpel 2D-specialeffekt, betyder vi, at vi gør nogle interessante ting med akryl i blandede virkelighedsmiljøer ...

Materielle fordele

Brugbarhedsundersøgelser viser, at folk foretrækker attraktivt brugergrænseflade. Uanset om det rent faktisk demonstrerer et godt brugergrænseflade, finder brugerne dem sjovere at bruge. Men ud over at forbedre udseendet på en app tjener akrylmateriale et formål; Som andre komponenter i Fluent Design-systemet er materiale mere end blot en speciel effekt.

Som jeg har nævnt i mine andre artikler, er en af ​​de største udfordringer i UI-design at organisere indhold og præsentere det på en måde, der er let for brugeren at behandle. Nogle apps giver så meget funktionalitet, at brugeren bombarderes med menuer og knapper og kontekstmenuer og tekst. Det kan være overvældende.

Vi kan reducere overbelastning af information og gøre indholdet lettere at behandle ved at give signaler, der hjælper brugeren mentalt at gruppere det i bidder. At skabe et stærkt visuelt hierarki kan hjælpe.

Teknikker til oprettelse af visuelt hierarki

Konceptet med det visuelle hierarki i layoutdesign har eksisteret i lang tid, længe før computere og grafisk brugergrænseflade - selv før du sætter og udskriver. Takket være århundreder med eksperimentering har vi et solidt sæt teknikker til at skabe et stærkt visuelt hierarki.

Kontrast: Forskellene mellem elementer er det, der fastlægger det visuelle hierarki. Brug af forskellige baggrundsfarver eller forskellige skrifttyper skaber for eksempel kontrast mellem to ellers lignende elementer.

Størrelse: Brug størrelse til at oprette forhold mellem elementer. Gør f.eks. Dominerende elementer (såsom sektionsoverskrifter) større end deres underordnede elementer.

Microsoft-type rampe til UWP-apps

Nærhed: Brugere antager, at elementer, der er ved siden af ​​hinanden, er relateret. Udnyt denne antagelse ved at placere handlinger og indhold, der er relateret ved siden af ​​hinanden.

Negativt rum: Dette er det modsatte af nærhed. Brug negativt rum til at adskille elementer, der ikke er relateret til hinanden.

Gentagelse: Det modsatte af kontrast, gentagelse får elementer til at ligne hinanden, hvilket opfordrer brugerne til at gruppere dem mentalt. Effektiv brug af gentagelse skaber en følelse af konsistens og forudsigelighed.

Materiale: Akrylmateriale er en anden teknik til at skabe et visuelt hierarki. Brug det som baggrund for en region for at få den region til at skille sig ud. Akryl skaber en kontrast, der er mere subtil end en farvebaggrundsændring - og den føles også mere åben, fordi det er gennemsigtig kvalitet, der lader lys skinne igennem.

Hvornår skal man bruge akryl

Akryl er en letvægtsmekanisme til at skabe en kontrast mellem et sæt elementer og resten af ​​UI. Jo mere omhyggeligt du bruger den, desto kraftigere er effekten. Generelt anbefaler vi at bruge akryl til understøttende eller sekundære elementer, såsom navigations- og kommandoelementer.

Dette eksempel bruger akryl til at skelne navigationsmenuen fra appens primære indhold.En anden version af den samme app, dette eksempel bruger akryl til at adskille den vandrette navigationsmenu fra appens primære indhold.

Acryls gennemsigtige karakter gør det især nyttigt til dialoger og flyouts, fordi brugeren kan se forbi dialogen og blive mindet om det brugergrænseflade, der udløste den.

Sådan bruges Acrylic i din UWP-app

I UWP-termer er akryl en type pensel, du kan bruge til at male baggrunden på ethvert element. Du kan oprette dine egne og tilpasse det, eller du kan bruge en af ​​de 20+ foruddefinerede akrylbørster, vi leverer, som vist i dette eksempel:

Nogle kontroller, såsom navigationsvisning, bruger automatisk Acryl.

Find ud af mere

For en komplet liste over akrylbørster og detaljerede instruktioner (med kodeeksempler), se vores artikel om akrylmateriale på docs.microsoft.com.

Følg mig på Instagram.

Lær mere om Flydende Design, og vær med i det forskellige skabersamfund

Se Fluent Designs LinkedIn-gruppe

Tjek #FluentFridays på Twitter @MicrosoftDesign

Følg Microsoft Design på Dribbble, Twitter og Medium

For at forblive viden om Microsoft Design skal du følge os på Dribbble, Twitter og Facebook eller tilmelde dig vores Windows Insider-program. Og hvis du er interesseret i at blive medlem af vores team, skal du gå til aka.ms/DesignCareers.