GUI-skabeloner for 8pt Material Design

En gennemgang af Design Inc.s visuelle design og basismetrik

Otte..8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96. Dette er de tal, der løber gennem mit hoved om natten. Jeg har brugt en 8pt baseret siden min tid på Android Auto og har nydt at anvende de centrale Material Design-metodologier til Design Inc. brugergrænseflader. Sidste uge på vores ugentlige UNDO-show, spurgte en designer, Danaan Clarke, om 8pt gitteret, og hvad enten vi havde erfaring med det. Jeg har altid "nørdet" ud på strukturen, der understøtter design og troede, det ville vise det sjovt at dele nogle "bag kulisserne."

1. Baseline-gitter

Det første og vigtigste trin er at sikre kernestrukturen for dit dokumentnet. Du kan definere gitterværdier ved at navigere i Vis> lærred> gitterindstillinger ...

Google Material-designteamet gør et godt stykke arbejde med at definere metoden til, hvordan denne baseline påvirker værdierne af andre typeelementer i kerne-UI. Alt fra navigationsbjælker, typografi, keylines, afstand og minimering af målmål for mål for handlinger er struktureret omkring denne grundlæggende baseline. Jeg vil tilføje mere her, men jeg følger denne vejledning ganske nøje. Hvis det ikke er ødelagt, skal du ikke rette det.

Kilde: Google Material Design: https://material.io/guidelines

2. Layoutskabeloner

Det næste trin er at definere et kolonnesystem til layout på tværs af forskellige skærme. Jeg prøver at holde mig konservativ på mine lærredstørrelser, men prøver altid at bruge et 4, 8 eller 16 søjle gitter med en tagrend på 8pt (eller en multiplikator deraf). Til lodrette rytmer har jeg et enkelt gentaget 48pt gitter. Du kan definere layoutværdierne ved at navigere i Vis> Lærred> Layoutindstillinger ...

Nedenfor er et simpelt eksempel på, hvordan jeg udnytter mit kolonnetværk (8 kolonner, 16pt tagrend), baseline-metrics (8pt) og den vertikale rytme (48pt) på en ny anbefalingsgrænseflade, som vi sendte denne uge.

3. Ikoner

Ikoner er en enorm del af at få et basislinjenet til at fungere korrekt på tværs af en brugergrænseflade. Der er meget vanskelig matematik for at få dette perfekt, men hvis det gøres korrekt, opretholdes dit ikons integritet i spektret af skærmtætheder (nethinde, 1x, 2x, MDPI – XXXHDPI ... hvis dette ikke giver mening, skal du læse dette) . De er nøglen til at udføre ikoner på denne måde er at sikre, at alle former, streger og margener er "lige" (2, 4, 6, 8), så du har et centreret ikon i det 24 x 24pt område, der kan multipliceres også (x2, x3, x4) og skaleres jævnt.

https://material.io/guidelines/style/icons.html#icons-system-icons

Der er også masser af gratis ikonsæt, der allerede er designet til at passe inden for en 8pt basislinje. Materialedesign har igen nogle fantastiske ressourcer til dette, men du kan designe dine egne. Nedenfor er et billede af, hvordan jeg indekserer alle vores ikoner i vores centrale GUI-skabelon.

4. GUI-struktur

Der er virkelig ingen receptpligtige regler for, hvordan man bedst opretter disse guider, men disse dokumenter er en kilde til sandhed, der giver mig (og forhåbentlig mine tekniske kolleger) ro i sindet. Målet er at have en "pixel-perfekt" version af hver kernekomponent i ét dokument, så hver skærm og tilstand i applikationen ikke behøver at blive tegnet til produktion. Der er et væld af gode eksempler og ressourcer online til reference, men hvis du vil starte fra bunden af, kan du downloade min basisfil med de definerede gitre og kolonnestruktur.

Hent kildefilen ned

Tak!

Dette indlæg var kort, men ønskede at dele lidt om min proces. Hvis du fandt det nyttigt, så del det med en venner, der ville være til gavn. Hvis du nød videoen, lægger jeg også en ugentlig vlog ... ville elske, at du abonnerer.

Hvis du har brug for hjælp til dit næste projekt, skal du tilføje din anmodning til Design Inc. Hvis du er en designer og vil ansøge, vil vi meget gerne se dit arbejde.