Raskere UI Design med Symboler og Delt Stiler i Skisse

Hva du skal skape

I denne opplæringen bruker du en mobil handlekurvdesign til å øve med to svært viktige funksjoner i Sketch. Vi legger stor vekt på: "Symboler" og "Deltestiler".

Sketch Symbols

Symboler lar deg duplisere elementer i designet ditt og gjenbruk dem. Eventuelle endringer du gjør til innholdet i et symbol, reflekteres over alle forekomster av det aktuelle symbolet.

For å lage en, med en klynge av objekter som er valgt, klikker du på Opprett symbol:

Det er to viktige tips for effektiv bruk av symboler. Først må du være sikker på at symbolene dine er ukompliserte. La oss ta eksemplet på min Overskrift symbol:

Du får se bakgrunnen, statuslinjen, titteletiketten og ikonene, alle vist her i undermappene i topptekst-symbolet: 

Fremdriftslinjen vil ikke bli inkludert i symbolet fordi dets tilstand endres på hver skjerm.

Den andre tingen er å sjekke alternativet Utelukke Tekst Verdi fra symboler for hvert av dine tekstlag i symbolene dine. På denne måten kan du redigere teksten for hver av de dupliserte symbolene på individuell basis.

Skiss Delte stiler

Funksjonen "Deltestiler" er like framover som "Symboler". Det er nyttig å endre utseendet på flere elementer, på tvers av ulike symboler og objekter, med ett enkelt klikk. La oss ta en titt på overskriften og fremdriftslinjen igjen. Her kan du se at jeg har endret bakgrunnen til fremdriftslinjen, men det ser ikke bra ut mot toppteksten:

For å unngå å endre hver enkelt fremdriftslinje bakgrunn manuelt, kan du angi en delt stil. Her søker vi header-bg stil som jeg forberedte tidligere, ved å klikke Opprett ny delt stil når toppteksten ble valgt:

Vi bruker deretter det samme for hvert lag som må gjenspeile samme stil. Nå når du endrer bakgrunnen for fremdriftslinjen, vil bakgrunnen på alle elementene med den delte stilen bli endret:

Konklusjon

Med disse to funksjonene i verktøykassen din, bør utformingen av neste app-brukergrensesnitt i skisse være mye mindre tidkrevende!

Takk for at du leser og ikke nøl med å stille spørsmål i kommentarene nedenfor.