Skica 39 Promjena veličine: Cheat Sheet

Kako detalje funkcioniraju Symbol & Group Resizing

Skica je upravo izdala verziju 39, dodajući mogućnost dodjeljivanja odgovarajućih pravila slojevima unutar simbola ili grupe. Iako to ne donosi sveobuhvatne mogućnosti prilagodljivog ili prilagodljivog dizajna na Sketch-u, ove su četiri mogućnosti mijenjanja veličine nevjerojatno snažne. I oni se mogu naviknuti, pogotovo zato što ...

... neka od ovih pravila mijenjanja veličine sadrže skrivenu funkcionalnost.

Dok sam izrađivao Sketch-ov videozapis za novu značajku (dolje), našao sam neophodnim stvoriti varalicu o tome kako točno funkcionira svaka značajka za promjenu veličine. Stalno sam to pozivao, pa vam ga ovdje stavljam na raspolaganje.

rastezanje

  • Ovo je zadana opcija i ponašanje je veličine na koje smo svi navikli.
  • Zamislite to kako mijenjate veličinu svih slojeva na temelju postotaka. Ako sloj zauzima 50% širine grupe, nastavit će se - bilo koje veličine.

Prikvači u kut

  • Slojevi unutar grupe ostaju iste veličine.
  • Svaki sloj održava udaljenost do najbližeg ugla u grupi.
  • Kad su podjednako blizu dva ugla, Pin-Corner se mijenja kako bi taj sloj bio centriran. Sloj će zadržati jednaku udaljenost od tog zajedničkog ruba između tih uglova.

Promjena veličine objekta

  • Sloj mijenja veličinu tako da održava iste udaljenosti od svakog ruba grupe.
  • Ali, kada sloj dodirne 3 od 4 ruba grupe, veličina objekta mijenja svoje ponašanje - omogućujući da udaljenost od četvrtog ruba bude fleksibilna i da sloj ostane iste veličine duž te osi. To je samo slučaj kada je udaljenost od četvrtog ruba manja od polovice dimenzije grupe u tom smjeru (hvala što je ovo istaknuo, Raphael Schaad). Ponašanje je posebno korisno za naslovne trake, kao što je prikazano u ovoj usporedbi:

Lebdi na mjestu

  • Nema sličnosti s Float-om u CSS-u
  • Slojevi unutar grupe ostaju iste veličine
  • Slojevi se repozicioniraju na temelju postotaka. Na primjer, sloj može imati x-položaj od 25% unutar te skupine i zadržavat će taj relativni položaj bez obzira na širinu grupe.
  • Slojevi smješteni uz rubove grupe ostat će tamo
  • Lebdenje u mjestu složenije je pod kapuljačom nego samo postavljanje koordinata postotka gornjem lijevom kutu ili središnjoj točki svakog sloja, o čemu svjedoči sposobnost pozicioniranja ruba. Osim slojeva smještenih na 0% (rub), 100% (drugi rub) i 50% (u sredini), primijetio sam da može doći do laganog pomaka u položaju sloja nakon mijenjanja veličine grupe. Drugim riječima, sloj repozicije Float in Place smjesti na približno točno mjesto, ali može biti isključen za postotak ili dva. Kad je točnost najvažnija, dvostruko provjerite Lebdi u mjestu nakon mijenjanja veličine grupe.

savjeti i trikovi

  • Nadam se da u Sketch preferencijama uključite opciju "Pixel fit kad promijenite veličinu slojeva". Povremeno to isključujem kada radim s elementima iz UI kompleta (koji često koriste decimale na veličinama ili položajima sloja, kako bi se što bolje replizirao izvorni element).
  • I Pin to Corner i Float in Place zadržati će sloj u središtu. Ako centrirate samo po jednoj osi, razlika je u tome što će Pin do ugla održavati istu udaljenost od najbližeg ruba grupe, dok će Float in Place promijeniti tu udaljenost jer se sloj postavlja korištenjem postotaka za koordinate. Ako se centrirate na obje osi, za sigurnije rezultate koristite Float in Place.
  • Imajte na umu da se pravila promjene veličine smatraju dijelom atributa jezgre, a ne atributi stila sloja, i stoga su isključeni iz dijeljenih stilova.
  • Prečaci na tipkovnici ⌃1, ⌃2, ⌃3 i ⌃4 dodijelit će svakom odabranom sloju veličinu.
  • U njihovom trenutnom obliku ne preporučujem upotrebu ovih pravila za promjenu veličine za slojeve koji se protežu izvan maskirane skupine. Ova bi funkcionalnost bila nevjerojatna pri radu s maskama i slojevima unutar njih, pa se nadamo da će biti dodana u budućem ažuriranju.

Prijavite se za moj newsletter koji ću prvi znati kada objavljujem nove članke i resurse za dizajn.
 
Ako ste uživali u ovom članku, svidjet će vam se Sketch Master - moji internetski tečajevi za profesionalce koji uče Sketch. Naučit ćete mnogo trikova i praktičnih tijekova rada dizajnirajući stvarne UI / UX i projekte ikona aplikacija.