Begrænsningslayout (for designere)

En introduktionsvejledning til overdragelse af responsive mobile layouts

Tilbage i min dag * justerer briller * designere måtte tage udviklingsklasser og rød linje alle vores filer for hånd!

Nu med smarte værktøjer som Zeplin og Abstract, bruger designere næsten ingen tid på overdragelse. Desværre kan meget gå tabt i oversættelse. Er denne knap en fast størrelse eller reagerer det på skærmstørrelsen? Er det dette specifikke beløb fra bunden eller centreret inden for et større objekt? Lad os bringe håndværket fra overdragelsen tilbage med symboler for begrænsningslayout.

Begrænsningslayout definerer reglerne, der styrer indholdet i din app. Reglerne tilskynder til konsistens på tværs af platforme, miljøer og skærmstørrelser ved at bruge ensartede elementer og afstand. Det findes i iOS og Android.

Begrænsningerne

Denne sketch-fil, der har alle disse elementer klar til at komme i gang!

Base enhed

8x8

Du starter med at definere din basisenhed, som hver måling er et multiplum af. Jeg anbefaler det lige antal 8 til størrelse og pladselementer, fordi det gør skalering til en lang række enheder let og konsistent.

  • 8 er mere delelig! 10/4 = 2,5 vs 8/4 = 2
  • De fleste af de populære skærmstørrelser kan deles med 8, hvilket giver en nem pasform (mod 6 eller 10.)
  • Enheder, der har en opløsning på 1,5x, vil have svært ved at gøre rent et ulige antal. Skalering 5 med 1,5x resulterer i en forskydning på en halv pixel.

I Sketch> Præferencer> lærred skal du skifte "flyt objekter [10] px vha. Shift-piletasterne" til [8]. Det sparer dig for meget hovedpine.

Afstandsenheder

Afstandsenheder er visuelle repræsentationer af fælles afstand mærket med den multiplicerede mængde af baseenheden. For eksempel er en "2 afstandsenhed" 16 pt / dp, fordi 2x8 = 16. Disse symboler skal bruges i design, og aliaset skal bygges som kode, så du taler det samme sprog ved aflevering.

Lodrette og vandrette mellemrum

Nogle gange er der ikke nok tid på dagen til at være pixel-perfekt - du vil lave fejl. Ved at bruge disse symboler i stedet for den auto-magiske røde foring, fortæller den din ingeniør afstandens intention mod den faktiske afstand. Tallealiaset matcher antallet af gange, du 'Skift + piletast' flytter et objekt i stedet for at huske multiplikationstabellen i 8s.

Responsive knapper: iPhone 8, Samsung Galaxy S8 og iPhone SE

Afstandsstykkerne ændrer aldrig størrelse. Hvis det er en vandret afstand, er den lodrette højde låst og for en lodret afstand afstand omvendt. Betydning på tværs af forskellige telefonbredder vil komponentens størrelse ændre sig, men afstandsstykkerne, der bruges til at oprette dets marginer, vil forblive de samme.

Justeringsindikatorer

Nogle gange samles elementer mellem hinanden. De vigtigste måder at justere mellem mellemstykkerne er centerjustering og basisjustering.

Center lodret, vandret og begge dele. Oprettet af Sam

Centerjustering er, når du ønsker, at et objekt eller en gruppe objekter skal centreres mellem to mellemrum. Objekter kan centreres vandret, lodret eller begge dele.

Baseline Alignment

Basisjustering er, når du ønsker, at objekter skal justeres til basen på et af objekterne. Dette er almindeligt, når du har to forskellige tekststørrelser, og du vil justere derefter ved baseline.

Tryk på Mål

48 x 48

På mobil er den minimale trykmålstørrelse 48x48 dp / pt. Dette stammer fra retningslinjerne for materialedesign for en afstand på ~ 12 ". (HIG anbefaler 44x44pt, så jeg går sammen med den større.) Redegør for tapmålstørrelsen, når du placerer elementer ved siden af ​​hinanden. Du kan også bruge hanen målsymbol for at angive, hvilke dele af et element der kan tappes.

Komponentlayout

Lad os teste uddelingen ved hjælp af alle begrænsningerne med nogle eksempler på komponenter:

Eksempel Komponenter: Listepost, knap og markering

Basisstørrelse

Komponentens basestørrelse, det er minimumshøjde og bredde, skal baseres på den minimale trykmålstørrelse. Komponenter, der er visuelt mindre end tapmålet, skal stadig udløses af den samme minimum tapstørrelse. Dette betyder, at hvis en bruger rører lidt uden for afkrydsningsfeltet, anerkender vi, at de bankede på afkrydsningsfeltet.

Visuel størrelse på komponenten i forhold til minimum trykmålhøjde: nøjagtig, over og under.

polstring

Brug afstandsstykker til at indikere polstring i en komponent.

Vandret polstring med lange strenge

Du kan indstille en vandret grænse for et element, som en tekstboks, ved at indstille vandret polstring. Når kopien bliver for lang, skal du angive, om teksten skal ændre størrelse, ombrydes og / eller afkortes. Indpakning til to linjer er bedre end at beskære en til oversættelser!

Vandret og lodret polstring med dynamisk type

Lodret polstring bruges oftest som forberedelse til oversættelser og dynamisk type. Selvom dine komponenter muligvis ser godt ud på den aktuelle telefonstørrelse, det aktuelle sprog og den aktuelle type størrelse - er alle disse faktorer variabler, der har worst case-scenarier. Når typen vokser, bliver komponenten større end det er basestørrelse, og du vil sikre dig, at den stadig har lodret polstring.

Justering

Brug markerede og baseline-markører til at indikere, hvordan du har til hensigt, at elementer, der ikke berører afstandsstykker på alle sider, skal opføre sig.

Lodret centreret listeposttekst, basisjusteret pris og centreret markering

Skærmlayout

Nu er du klar til at sammensætte en skærm! Brug afstandsstykker, tryk på mål og justeringssymboler på samme måde som du gjorde i komponenten.

Illustration af Meg

... og voila! Der har du det folk - et lydhørt mobillayout!

Tip - Opret separate symboltavle til dine komponenter, som du refererer til inden i skærmlayouten. I komponentsymbolerne kan du medtage alle komponentspecifikationerne i en mappe, der let kan tændes og slukkes. Intet ligner mere dagbøger fra en gal mand end at forsøge at markere en komponent og skærmlayouten på samme tid.

Sidste tanker

Selv en perfekt udformet overdragelsesfil erstatter ikke verbal kommunikation med god mode med din ingeniør. Dette skal bruges sammen med kickoffs, handoffs og skriftlig dokumentation. Jo mere du holder dine ingeniører i løkken med dit design, jo tættere vil det være, hvad der faktisk skibes. Og! Overfør specifikke filer til begge mobile platforme - altid.

Råb til ingeniørerne, der lærte mig alt, hvad jeg ved: Kathy og Sam! Jeg er Linzi Berry, i øjeblikket design system manager hos Lyft. Jeg sveder detaljerne, så du ikke behøver det. Abonner venligst!