Mastering Group Ændre størrelse på funktion i sketch

Fra grundlæggende til avancerede teknikker til design responsivt.

Opdatering: min nye artikel om dette emne:

Jeg forberedte et konceptdesign til Sketch-appen for at demonstrere mine funktionsideer. Jeg brugte beta-versionen af ​​Sketch (3.9) til at prøve de nye funktioner og også til at teste mine plugins for at se, om de fungerer stadig.

Efter et stykke tid indså jeg, at den nye funktion, der kaldes “gruppens størrelse”, er virkelig enkel, men alligevel kraftig, hvis du bruger den rigtigt.

Naturligvis leveres denne enkelhed med begrænset funktionalitet sammenlignet med alternative layoutsystemer som auto-layout. Men stadig, indtil det er forbedret eller skiftet til noget andet, vil det tjene godt, tror jeg.

De grundlæggende

Det er virkelig nemt at opsætte gruppens størrelse i en gruppe. Vælg et lag eller flere lag i gruppen, og vælg den passende størrelse til ændring, det er det. Du vil forstå det bedre i eksemplerne senere i artiklen, hvis det virkede lidt kompliceret.

I øjeblikket har vi fire størrelsesindstillinger

Denne funktion kan også bruges i formgrupper! Yaaay!

Eksempler og teknikker i det virkelige liv

Som du kan se, er det grundlæggende enkelt, men at opbygge mere avancerede layouts kræver undertiden brug af skjulte hjælperlag, formgrupper eller maskering. Jeg vil forklare hver af disse i eksemplerne nedenfor.

Jeg skal også nævne, at gruppehekker understøttes, du kan reden så mange, som du vil. Lige nu har det en ulempe: når du ændrer størrelse på en gruppe, kan lagene i efterkommergrupper muligvis få flydende tal i deres position, selvom de direkte børn ikke får flydende tal - kun hvis indstillingen "pixel-fit når lagene justeres" er aktiveret, ellers kan du i begge situationer få flydende tal. Jeg synes, det ville være godt at have en ramme for det i fremtiden.

Lad os se på eksemplerne for at lære flere detaljer:

1. Chat UI-elementer

1.1. Tekstmeddelelsesvisningen

Indstillingen "ændre størrelse på objekt" fungerer muligvis forskelligt afhængigt af hvor mange kanter af objektet skærer hinanden med gruppens grænser. Faktisk bortset fra det tredje tilfælde nedenfor, fungerer det som forventet.

Det kan være en fejl eller den naturlige dynamik i implementeringen. Under alle omstændigheder kan vi i øjeblikket finde nogle løsninger, der gør det muligt, her en af ​​dem:

Et tip til ændring af højden

1.2. Stemmemeddelelsesvisningen

Ændring af størrelsen på masken manuelt er den bedste løsning, jeg kunne komme med på nu. Jeg eksperimenterede meget med at ændre størrelsen på masken automatisk ved hjælp af størrelsesfunktioner; men når maskeindholdet er større end gruppestørrelsen, skubber det indholdet til at strække sig ind i gruppestørrelsen ved at klemme det, så jeg tror, ​​det ikke er muligt at gøre dette endnu.

1.3. Fotobeskedvisningen

1.4. Inputvisning

2. Skitse farvevælger

Panelet og baggrundslaget

Panellets baggrundslag er en formgruppe, der bruger gruppeformålende funktioner. Vi er nødt til at bruge booleske operationer for at gøre det lydhør. Hvis du bare forener en trekant og et afrundet rektangel, fungerer det ikke på grund af den samme grund i eksempelet "3 kanter" i tekstmeddelelsesvisningen.

3. Sketch brugergrænseflade

Hovedstrukturen

Som du kan se, er hovedstrukturen virkelig enkel. Ingen grund til at gennemgå de mindre elementer, de fleste af dem er lette at finde ud af efter at have set alle disse eksempler. Nogle af dem er det bare ikke muligt at designes responsivt på grund af de nuværende begrænsninger.

Konklusion

Det er klart, at den nye funktion gør det lettere at ændre størrelsen på grupper end før, og så designe også. Men det at være så enkelt begrænser de ting, du kan udrette. I en verden, hvor alt skal designes responsivt, har vi helt sikkert brug for mere komplekse funktioner. Det er stadig godt at se, at vi er et skridt nærmere det! Tak for at have læst!