Supercharge mobil design arbejdsgang i Sketch

Sketch er ret mest berømt inden for designværktøjsfeltet på det aktuelle tidspunkt. Jeg tror altid, at en af ​​grundene hertil er, at Sketch har et stort plugin-bibliotek - community. I dag vil jeg introducere 2 plugins: Paddy og RenameDet vil hjælpe dig med at skære tid i at replikere handlinger og strømline din Mobile Design-arbejdsgang. Især hvis du bygger et designsystem, tror jeg, at du finder det meget nyttigt.

Jeg skriver denne artikel baseret på min erfaring, så jeg er virkelig åben for diskussion, så vi kan forbedre designarbejdsgangen. Jeg prøvede også Auto-Layout før, men ser ud til, at vi ikke hører sammen.

På grund af GIF's begrænsning. Undskyld for hastigheden på GIF-billeder i dette indlæg! Du kan tjekke min originale artikel her for at se videoer med fuld / langsom hastighed.

Min gamle nuværende design-arbejdsgang

Lad os gå videre til hovedemnet. Hvad er det aktuelle problem? Ser du nedenstående designarbejdsgang velkendt?

Når du tackle UI-design, skal du passe på indhold, hvordan det ser ud på variant af skærmstørrelse. Hver gang vi opdaterer indhold, er vi nødt til at omlayout alt igen. Du kan se det normalt, er det ikke designjobbet? Men hvis du har hundrede komponenter, der skal opdateres, vil du se smerten her.

Der er mange måder at løse dette problem på, du kan bruge mange plugins til at organisere lagene. Men det er stadig ikke automatisk eller i det mindste ikke på den praktiske måde som i denne artikel. Vi vil gennemgå fra at bygge grundlæggende komponenter til en hel side, som Atomic Design Method.

Knap

Jeg tror, ​​det er en af ​​de mest populære komponenter, så vi vil prøve det først. Hvis du tidligere har brugt en dynamisk knap, vil du kende den hurtigt. Dette er strukturen på en knap: Baggrund, tekst. Vi tilføjer [topPadding rightPadding bottomPadding leftPadding] i navnet på baggrundslag. Derefter vil den automatisk opdatere din baggrundsbase på tekstlængde. Hvis top polstring og bundpolstring er den samme, venstre polstring, højre polstring er de samme, kan du bruge stenografi som CSS-kort:

Det ville være mere nyttigt, hvis vi opretter Buttonsymbol som sådan:

Knap med ikon

Anvend denne mekanisme, vi kan oprette en knap med ikon to:

Knapvarianter

Jeg tror, ​​at du er bekendt med: knap-standard, knap-fare, knap-advarsel, ... Det er her, omdøb det plugin vil være den perfekte kombination med Paddy. Jeg gik til den situation, der skaber mange symboler på knap, gjorde derefter nogle eksperimenter, så fandt jeg ud af, at jeg er nødt til at reducere knapstørrelsen. Nu vælger vi bare al knapbaggrund> Fin og erstatt lagnavn> Ændr størrelse for at passe indhold. Vagabond! alt er pænt igen.

Komponent

Nu bygger vi en populær komponent, en vandret artikel:

Før jeg går ned, vil jeg introducere Paddys funktion for automatisk justering. Denne funktion hjælper os med at justere alt og opdatere, når hvert lag ændrer størrelse. For mere detaljer, se venligst hele snydearket nedenfor:

Paddy Auto Align Cheet Sheet

Ved at bruge atommetodologi opdeler vi komponenten i: Avatar og Info. Info inkluderer titel og undertekst:

Takket være funktionen Auto Align i Paddy kan jeg vandret midt på Avatar og Info. Afstanden mellem Avatar og Info er 16px, så gruppen skal have navnet “[16h m]”. Mellemrummet mellem titel og undertekst er 2px, og to elementer justeres til venstre, så vi tilføjer “[2v l]” til Info-gruppen. Endelig skal gruppestrukturen være sådan:

Mere komplekse komponenter

Nu bygger vi en mere kompleks komponentbredde, indlejret komponent, et listesektion:

Følg den ånd, der går i stykker, hvad som helst, vi opdeler dette i mindre komponenter:

Nu vil vi se, hvad der sker, når jeg tilføjer en ny vare:

Den nye vare justeres i gruppen ligesom elementerne. Super praktisk!

Side / skærm

Nu ved vi hvordan man bygger nogle komponenter, vi er klar til at opbygge en komplet side. Vi bygger 2 sider: På boardingskærm og startskærm:

onboarding

Nu tester vi denne skærm i forskellige skærmstørrelser:

Startskærmen

Vi deler skærmen op i 3 hovedafsnit:

  • Sideoverskrift: Sidetitel og brugeravatar
  • Horisontalt snit.
  • Lodret sektion.

Vi tilføjer flere detaljer for at se, hvordan hver komponent er konstrueret:

Sidetitlen og Avatar er lodret justeringscenter.

Horisontalt snit

  • Afstanden mellem titel og liste er 24px → [24v l].
  • Afstanden mellem Element på listen er 16px → [16h t].

Lodret sektion

  • Afstanden mellem titel og liste er 24px → [24v l].
  • Afstanden mellem Element på listen er 24px → [24v l].

Endelig har vi en side, der automatisk arrangerer og justerer dine komponenter på din måde. Nu vil vi rodet listen lidt op:

  • Ændre størrelse på miniature i vandret afsnit.
  • Tilføj flere elementer i lodret sektion.

Bum! Alt er pænt igen!

Nu kan jeg teste alt på en hurtig måde. Så jeg kan fokusere på at opbygge oplevelse i stedet for at skubbe til hver pixel. Derudover opretholder den også nøjagtigheden af ​​en komponent og konsistensen mellem dem.

Konklusion

Brugte plugins

  • Paddy
  • Omdøb det

4 ting at huske

Del din side i mindste stykker som i denne bog Atomic.

Auto-størrelse baggrund ved at tilføje [øverste højre nederste venstre] størrelse til baggrundslagets navn.

Juster alt i en gruppe ved at føje den streng til overordnet gruppens navn:

  • Lodret: [t] => øverst, [m] => midt, [b] => bund
  • Vandret: [l] => venstre, [c] => centrum, [r] => højre

Placer alt i en gruppe ved at tilføje disse strenge til forældregruppenavnet:

  • Lodret: [Xv], dvs. [16v] => mellemrummet mellem børn i lodret akse er 16px.
  • Horisontalt: [Xh], dvs. [24v] => Mellemrummet mellem børn i vandret akse er 24px.

Jeg blev inspireret af denne geniale artikel, jeg anvendte denne lignende mekanisme på min arbejdsgang og regne ud nogle gode fremgangsmåder, som jeg nævnte ovenfor.

Tak for at have læst! Glad skitse!

Denne artikel er oprindeligt placeret på min hjemmeside her. Vil du vide mere? Jeg er Duy Luong, produktdesigner og front-end-udvikler. Tjek min portefølje her!