5 strategier til brug af symboler i Sketch: til voksende teams og projekter

Symboler er Sketches mest kraftfulde funktion.

Symboler har potentiale - potentiale til at linke, synkronisere, dele, fusionere, skalere, finpusse, indlejre og bedst af alt nem prototype. Hvis jeg støder på et prototype-værktøj, der ikke har symbolfunktionalitet, rabatter jeg det næsten direkte.

Symboler er fleksible designelementer knyttet til en redigerbar kilde, også kendt som en enkelt sandhedskilde. Kort sagt, de er magiske.

Dette er magien ved symboler. Det er okay, hvis alle brikkerne ikke klikker sammen for dig - vi ser nærmere på symbolssystemer.

Dine skissesymboler behøver ikke at overleve dig, men de skal kunne vokse, som dine projekter gør. De skal også kunne deles bekvemt med andre. Her er tre strategier til brug af skissesymboler på skalerbare, brugervenlige måder.

1. Byg symboler på den rigtige måde

Byg symboler godt, og de ældes godt. Det er ikke sjovt at skulle genopbygge et symbol, fordi du ikke gjorde det fleksibelt nok første gang, især når du har brugt det et dusin steder. Her er nogle tip, der hjælper dig og dit team med at opbygge symboler, der ikke behøver konstant renovering.

Start med det grundlæggende

Start med de mest basale komponenter, du kan. Alt skal begynde på atomniveau. Når dine frimærker er modulære, passer de pænere sammen og er lettere at arbejde med.

Rede symboler

Du kan indlejre symboler inden for andre symboler for at gøre prototyping enkel og fleksibel. Indlejring er, når du lægger et stempel i et større stempel. Og med en funktion, der kaldes overstyrer, vil du være i stand til at bytte og tilpasse frimærkeindtryk på et dusin forskellige steder på et dusin forskellige måder.

Rede vil tvinge dig til at tænke i niveauer. Niveau 1-symboler kan være ikoner og tekstblokke, niveau to-symboler kan være knapper og lister, og niveau tre-symboler kan være hele paneler og pop-ups. Bits, stykker og niveauer vil se forskellige ud afhængigt af projektets kompleksitet, men pointen med indlejringssymboler er altid det samme. For at tilsidesætte elementer på højere niveauer.

Mens et symbol fungerer som et stempel, fungerer et eksempel på et symbol som et frimærkes indtryk. Og fordi frimærker er magi, kan indtryk fra det samme stempel være forskellige. Disse variationer kaldes tilsidesættelser. Hvis dit store frimærke har et daterstempel inden i det, kan du bruge tilsidesættelser til at gøre et indtryk siger 1. juni og et andet siger 22. december. Ligeledes med et udskifteligt sætningstempel kan et indtryk sige MODTAGET og et andet kan sige BETALT. Selv ved tilsidesættelser er indtrykene stadig knyttet tilbage til det magiske stempel. Hvis du ændrer daterstemplets blæk til rødt, bliver både 1. juni og 22. december rødt! ‍ ​​Magi.

Her er overstyringsindstillingerne for et kraftfuldt knopsymbol. Med denne knap kan du tilsidesætte A) det indlejrede tekststilsymbol, B) selve teksten og C) knapformen og D) udfyldningstil.

Men hvor langt skal indlejringen gå? Hvor mange symboler inden for symboler er nødvendige for at have et smart designsystem? Svaret er i forhold til hvert projekt. En god tommelfingerregel er at have enkle sandhedskilder til dine symboler, men ikke at have overvældende eller unødvendige muligheder. For et kraftfuldt designbibliotek, der bruges til mange forskellige projekter, vil du for eksempel have et knopsymbol som din sandhedskilde - med indlejrede symboler til form, farveudfyldning, tilstand og tekstformater. Hvis du imidlertid bygger grundlæggende wireframes, skal du ikke gå i vild. Byg dit knappesymbol med den eller to overstyringer, du har brug for.

Teslers lov, også kendt som The Law of Conservation of Complexity, siger, at for ethvert system er der en vis mængde kompleksitet, som ikke kan reduceres.
(UX-love)

Udnyt tekstformater som symboler

I Sketchs nuværende version kan du ikke tilsidesætte en tekststil i et symbol. Når du vil ændre tekststilen i din yndlingsknap fra cta-rød-fed til cta-blå-kursiv, gør det ondt! Men der er gode nyheder. Der er en løsning.

Vi designer f.eks. En meddelelsesapp. Brugergrænsefladen har brug for en skuffe, hvor samtaler kan vises i sort, rød eller grå afhængigt af en vens tilgængelighed:

en. Lav et symbol med rød tekst, et symbol med sort tekst og et symbol med grå tekst. Hvert symbols tegnebræt skal have samme størrelse.

b. Lav et symbol til samtaleskuffen.

c. Indlejr navnesymbolerne fra trin 1 inden i skuffesymbolet. Gør dette så mange gange som nødvendigt, indtil du har en liste:

Du kan se, at “Navn” -symbolerne til højre er indlejret inde i “Liste over navne” -symbolet til venstre.

d. Hvis jeg nu bringer skuffesymbolet ind i min prototype på sideniveau, kan jeg tilsidesætte tekstformaterne i egenskabspanelet:

Når symbolet er placeret på en side, vises dets tilsidesættelsesindstillinger i kontrolpanelet til højre.

Arranger lag

Inden for komplekse symboler, se: indlejrede symboler, sørg for at arrangere lag intuitivt. Det venstre panel i dit vindue er hvor du kan finde og organisere dine lag. Sæt de øverste elementer øverst og de nederste elementer i bunden. Giv dine indlejrede symboler enkle navne som "Text-Here" og "Icon" i stedet for "Icon 10 Copy of Copy 2."

Lagrækkefølge dikterer, hvordan tilsidesættelser arrangeres. Når du navngiver dine tekstbokse og symboler, skal du huske, at deres navne vises ved siden af ​​deres tilsidesættelsesindstillinger.

Hvis du er flink til det, vil dine tilsidesættelsesindstillinger være så enkle, at enhver kan bruge dem. En drøm for så mange designteam.

Det er også vigtigt at arrangere lag ved at låse dem. Et låst lag kan ikke have tildelt overstyringer. F.eks. Kan dit nav-bar-symbol have en tekstbyline, som ikke behøver at ændres; lås laget med ⌘⇧L, og det bliver skjult for dine muligheder for tilsidesættelse. Vær en god kurator ved at fjerne tilpasning, hvor det ikke er nødvendigt.

Brug symbolindstillinger til nem ændring af størrelse

Inspektørpanelet til højre har en masse nyttige begrænsninger for at opbygge størrelser, der kan ændres til størrelse. Brug dem. Du ønsker, at dine frimærkeindtryk skal se godt ud på alle papirstørrelser.

Ændring af størrelse på begrænsninger er her for at hjælpe. Du finder dem i dit kontrolpanel, når du har valgt et objekt eller symbol.

Invester tid i et symbols smarte ændring af størrelsesforhold - Link fastlagt Jan. 2018. Brug ændring af størrelsesbegrænsninger til at fastgøre elementer på en eller flere sider af deres beholder, fix et elements bredde og / eller fikse et elementets højde. Nogle ting skal strækkes, nogle ting skal forblive i hjørnet; Ændring af størrelsesbegrænsningerne fortæller en symbolinstans, hvordan man skal opføre sig, når dens dimensioner ændres.

https://www.sketchapp.com/images/pages/docs/03-layer-basics/video/after@2x.mp4 - Link fastlagt januar 2018

Bemærk nr. 1: Hvis du vil beholde jævn polstring, når du ændrer størrelse på et symbol, skal du fastlægge dine objekter til alle fire kanter. (Videokilde)

Bemærk nr. 2: Symbolerne ændres bedre, hvis du designer dem på en kondenseret måde. Når alt kommer til alt er et symbol lettere at udvide, end det er at komprimere.

Symboler, der indeholder billeder, kan nemt ændres, hvis de er konfigureret som udfyldning. I stedet for at indsætte et billede (Indsæt> Billede), skal du bruge et mønsterfyld. Dette betyder først at oprette beholderens form (Indsæt> Form), vælge "Mønsterudfyldning" i inspektørens udfyldningsafdeling og derefter vælge dit billede som mønster. Jeg indrømmer, at dette kan føles rundkørsel eller modintuitivt, men fyldeteknikken bevarer dit billedes integritet, når du ændrer størrelsen, i sidste ende for at forhindre akavet forvrængning.

Du kan angive, hvordan billederne skal udfylde formen: Fyld, Tilpas, Stræk eller Flise.Billedet til venstre er et mønsterfyld for en form, og billedet til højre er et standardbillede. Jeg har strakt dem lodret for at vise, hvor godt mønsterpåfyldningen fungerer. Lektion 1: Stræk ikke hvalpe.

2. Organiser dine symboler

At være organiseret er kritisk. Hvis din frimærkesamling bliver stor, har du brug for en desk-arrangør. Hvis din frimærkesamling bliver større, bør du få nogle skuffer. Du vil have dine frimærker så organiserede, at når du er på ferie på Bali, kan en praktikant sidde ved dit skrivebord og finde det stempel, de leder efter. Her er nogle råd til det.

Navngiv dine symboler

Med skissesymboler er der meget til et navn. Et navn angiver ikke kun, hvad et symbol er, men det specificerer også, hvor et symbol er; et symbol kaldet knap / primær har knapmappen som sin overordnede.

Navngiv og organiser dine symboler konsekvent. Vigtigere end at have gode navne på dine ikoner er, at deres navne giver mening blandt de andre symboler på dit bibliotek. Navngiv helst dine symboler efter funktion snarere end visuelle signaler. En visuel signal som 'blå' kan ændres, mens en funktion som 'presset-tilstand' holder sig rundt i lang tid.

Brug stiloverskridelser

Dit ikonsystem har muligvis et dusin farve-, kontur- eller kantvariationer - et muligt mareridt til ethvert symbolbibliotek. 20 sorte ikoner betyder sortering af 20 symboler. 20 ikoner i 12 farver betyder sortering af hele 240 symboler.

Heldigvis, siden Sketch 52, kan du bruge stiloverskridelser, kan du nemt foretage symbolredigeringer. Det er et meget pænere alternativ til den crap, vi måtte gøre i Sketch 51.

Heldigvis dækker Jon Moore fra UX Power Tools, hvordan man gør det.

Style tilsidesætter i handling. (Lånt fra Jons artikel)

Organiser dine symboler visuelt - hvor som helst

Præsentation betyder noget! Selv hvis du har et lille designteam med relativt lave forventninger, skal du adskille, gruppere og mærke symboler for at gøre dem lettere for alle at finde.

Et sted for hvert symbol og ethvert symbol på dets sted.

Metode nr. 1 til organisering af symboler: Hver gang du opretter et symbol, skal du vælge indstillingen Send symbol til 'symboler' side markeret. Lad siden med symboler blive rodet. Opret en ny side med ⌘⇧N, hvor du vil tilføje og organisere alle dine symboler.

Designer Javier Cuello kan lide metode nr. 1. Til venstre er hans symbolside. Til højre er den side, hvor han holder sin handling sammen. (Billedkilde)

Metode nr. 2 til organisering af symboler: Organiser dine symboler på din symbolside. Det er ligetil! Jeg vælger at sortere mine symboler på siden Symboler, og her er et plugin, jeg bruger til at hjælpe mig med at gøre det hurtigt.

3. Del symbolbiblioteker

Nu hvor dine frimærker er pænt bygget, navngivet konsekvent og organiseret intelligent, er det tid til at dele dem. I en nylig opdatering tilføjede Sketch biblioteker - en funktion til intelligent at linke, synkronisere og dele skissesymboler.

Der er dog en fangst, hvis du og en kollega ønsker at linke til det samme bibliotek: du har begge brug for at få adgang til den samme fil på det samme sted. Du kan få adgang til den samme fil via en delt skymappe, eller hvis du har et team som mit, der ikke fungerer meget fra kontoret, skal du opsætte et delt netværksdrev.

Få adgang til dine præferencer, fundet ved hjælp af ⌘, eller under 'Sketch' i din applikationsmenu for at navigere til dine bibliotekspræferencer. Derfra kan du tilføje et bibliotek fra en hvilken som helst Sketch-fil, så længe det har symboler i sig. Bibliotekpræferencerne er, hvor du vil tilføje din delte fil. Hvis du vil lære mere om biblioteker, skal du kigge gennem Sketchs dokumentation.

Bemærk: Et mål med Sketch Biblioteker er at forhindre dig i at utilsigtet redigere symboler, der deles med andre. Pænt, vil Sketch give dig en popover for at bekræfte de symbolredigeringer, du prøver at udføre; Er du sikker på, at du gerne vil redigere kildefilen? Eller vil du fjerne linket til det og derefter redigere biblioteket?

Hvis du eller en teamkammerat opdaterer et delt bibliotek, får du muligheden for at vælge, hvilke ændringer der gælder for tilsluttede Sketch-filer.

Jeg har snublet over brand.ais Sketch-plugin et par gange, og det er en dyr delingsindstilling, jeg gerne ignorerer. Det blev udviklet som et plugin, før Sketch biblioteker-funktionen var omkring, og designet til at løse det samme problem. Der er ingen grund til at fordoble sig. Det er også for nylig blevet erhvervet af InVision og vil blive integreret i deres kommende Design System Manager. DSM kan være en hård konkurrence om prototype-værktøjer som Adobe XD, Framer og Sketch selv. Indtil da skal du fortsætte med at dele dine Sketch-biblioteker. Dit team vil takke dig for det.

4. Opret versionskontrol

I et designteam risikerer du at overskrive filer eller miste oversigt over filversioner. Nogle teams løser dette ved at bruge GitHub til at forgrene, flette og begå Sketch-filer. Da GitHub er en udviklerfokuseret løsning, skabte Elastic Projects Abstract, et tredjeparts Sketch-plugin, der gør versionskontrol mere designervenlig.

Cloudopbevaring kan også hjælpe dig med versionstyring. Dropbox holder øjebliksbilleder af alle ændringer, der er foretaget i et dokument, for eksempel inden for 30 dage. Ud over disse 30 dage kan ændringer dog ikke gendannes, medmindre du har DropBox Business eller Extended File Recovery. Der er endda nogle visste rundkørselsmåder til versionskontrol med Google Drev.

5. Lær af de bedste

Den bedste måde for en frimærke at lære er at lære af frimærke mestere. Ved at grave i de mest populære og / eller komplekse Sketch-biblioteker lærer du en masse avancerede tricks. Hvordan lager Apple-teamet deres symboler? Hvordan indlejres symboler i et professionelt UI-kit? Jeg anbefaler, at du bruger din handy-dandy internet-søgelinje til at jage tophemmelige Sketch-filer som den i iOS UI Design Resources.

Måske planlægger du at bygge noget komplekst som et bord eller en dropdown i flere lag. Whoah nu! Læg dig op, du raser! Gennemse først rundt. Tjek Sketch App-ressourcer og se, om nogen har bygget noget lignende.

Låne, låne, låne. Og glem ikke at prøve overstyringsindstillingerne i de filer, du finder.

For at lukke, her er nogle valg, skitse filer fyldt med symboler for dig at grave i, trække fra hinanden og eksperimentere med:

  • Form Library af Davide Pisauri
  • Smart knap af Domenico Laricchia
  • Android 7.0 Nougat Material Design GUI Kit af Great Simple
  • Materiale design klistermærke af Google
  • Tabel UI Kit af O / M Studio