Skitsymbol bedste praksis (nu, at indlejrede overstyringer er en ting)

Hos Tradeshift begynder vi at vedligeholde et centralt sketchedokument med alle vores symboler. For at blive føjet til dette dokument skal et symbol være af en bestemt kvalitet. Alle, der designer til os (og potentielt vores partnere) vil bruge dette dokument, så vi ønsker ikke at distribuere andet end de mest solide symboler.

Symbolerne skal opføre sig på lignende måder, være små nok til at være modulære, være store nok til at være nyttige og være organiseret godt til let redigering (eller indlejring i et dokument, når det er adskilt).

Ingen kan lide at arve en dårligt organiseret Sketch-fil, så lad os ikke distribuere dårligt organiserede symboler.

Opret den mest basale komponent, du kan

Ideelt set skal du ikke fjerne symboler ofte, fordi det besejrer formålet. Opret den mest basale version af en komponent, individuelle symboler, som du senere kan kombinere for at skabe en mere vedligeholdelig helhed. Du kan foretage ændringer mere fortroligt, hvis symbolet ændrer, du foretager ændringer med et mindre omfang.

Indlejrede symboler gør dette lidt mere til en nuanceret affære, men brug din sunde fornuft, og du opretter kraftfulde, vedligeholdelige symboler.

Vær smart ved at opdele symboler og kombinere dem for nem manipulering

Navngiv dine symboler

Navngiv dine lag korrekt. Vi prøver at holde os til alle små bogstaver, adskilt med bindestreger.

Sketch organiserer automatisk symboler i mapper, når du lægger en / i navnet:

Afhængigheder af inputfelt ryddes væk i mappen / in /

Jeg anbefaler en kontrol / definering af ejendomstilstands navnekonvention. Standardtilstande bør ikke have en tilstand - fane-inaktiv og faneblad er overflødig. fane, faneaktiv er vejen at gå. Dine navne bør ikke være for tæt bundet til en kontrol af fysiske egenskaber, da de sandsynligvis vil udvikle sig.

knap / primær-mouseover
knap / primær-handicappede
i / input / bane / aktiv

Angiv indlejrede symbolafhængigheder

Jeg anbefaler også at bruge din navnekonvention til at betegne afhængigheder, nu hvor indlejrede symboler er en ting. Når du kopierer symboler mellem dokumenter, er det godt at vide, at du er nødt til at kopiere alle symbolerne med præfikset i / til inputfelter for at opføre sig som du forventer. Det holder også dit insert-symbolpanel ryddig.

Organiserede symboler gør dit liv lettere

Når du bruger Sketch Runner, betyder det at etablere en navnekonvention, at du altid kan finde det, du leder efter, fordi der er et mønster for det, du leder efter.

Navngiv dine lag

Giv lagene i sig selv passende og ensartede navne. Baggrunde skal altid kaldes baggrund og ikke blandes med f.eks. Bg. Hvis du løsner symbolet, skal det forblive et ryddeligt og selvstændigt objekt.

Tekst er især vigtig. Sørg for, at indlejrede symboler, som du regelmæssigt erstatter (dvs. for forskellige tilstande) har de samme tekstlagnavn. Hvis du udskifter et symbol, vil det fortsætte enhver overskydende tekst, hvis det deler det samme tekstlags navn.

Du kan omdøbe forekomster af symboler, og det påvirker ikke linket til originalen. Som sådan har jeg brugt navngivning af forekomster af symboler med små bogstaver og tekst, som de redigerer som alle kasketter. Dette er bare et spørgsmål om præference.

Laghierarki

Læg enhver redigerbar tekst oven på dine grupper som regel. Når du derefter rammer tilbage to gange for at udvide en gruppe, redigerer du straks tekst!

Symboler genanvendes, løsnes og genblandes - de skal være rigtig godt organiserede, så enhver hurtigt kan forstå, hvad der foregår, når de ser under hætten.

Dit laghierarki afspejles i overstyringspanelet. Hvis dit forældresymbol har indlejrede symboler, der ville blive redigeret i en logisk rækkefølge, skal du sørge for, at overstyringspanelet afspejler det.

Brug af indlejrede symboler i overstyringspanelet

Symboler, der er de samme dimensioner, vil være tilgængelige i overstyringspanelet som en erstatningsmulighed. Dette er især nyttigt til ikoner:

alle disse ikoner deler de samme dimensioner

Det er virkelig magtfuldt til at ændre stater også:

Ved at bruge indlejrede symboler kan du oprette superfleksible kontroller, der efterligner deres mulige tilstande i ethvert UI-bibliotek, du muligvis bruger (som vores UI-komponentbibliotek på Tradeshift)

Disse er alle det samme symbol:

Det samme symbol med forskellige tilsidesættelser håndhævet

Skudsikker størrelse på størrelse

Hvis du distribuerer symboler, der går i stykker, når du ændrer størrelse på dem, har du allerede mistet krigen. En person, der ikke er bekendt med symbolernes indre arbejde, løsner fra symbolet hurtigere, end du kan blinke, og alt dit arbejde var for intet.

Leg med dem, test dem, prøv at bryde dem. Byg noget skudsikkert! Yderligere få minutter af din tid til at perfektumere symbolet sparer hovedpine ned ad vejen og gør alle, der skal bruge og vedligeholde dine symboler glade.

Se Peter Nowells størrelse Cheat Sheet

Diverse tip

Teksten skal rettes

Teksten skal rettes og justeres korrekt, så når du ændrer størrelse på et symbol, opretholder den sin position og polstring korrekt. Teksten skal have et "Ændre størrelse på objekt", der skal ændre størrelsen på egenskaben. Dette bryder bageste justering af størrelse, men jeg kan aldrig få det til at arbejde pålideligt under alle omstændigheder.

Pladsholdertekst er en mulighed for at styrke bedste praksis

For eksempel er vores pladsholdertekstindhold (ikke lagnavnet) "ACTION INTENT" som en passiv påmindelse om, hvordan en knappes mikrokopi skal formuleres.

Design den mindste version af et symbol

Det er lettere at designe omkring strækning af symboler end at komprimere dem.

Udskiftning af symboler

Skitse erstatter det ene symbol med det andet og komprimerer / strækker symbolet for at passe ind i de samme dimensioner. Hvis du udskifter symboler med uoverensstemmende dimensioner, kan du bruge højreklik-> Indstil til originalstørrelse for at løse det.

Brug alt + enter for at indsætte en linjeskift på indlejrede tekstobjekter

Multi-line support til tekst, boom!

Lås indlejrede symboler for at forhindre, at de vises i overstyringspanelet

Ved at låse indlejrede symboler på symbolerne originale tegnebræt, vises de ikke længere som en tilsidesættelse i inspektøren. Tak til Matt Healy!

Symboler skal være selvforklarende at bruge

Det skader dog ikke at give noget baggrund for de mere komplekse - især hvis dit team ikke er så fortroligt med dem.

Eksempler på filer

I kommentarerne er jeg blevet bedt om en eksempelfil. Det er ikke noget, jeg kan give væk endnu, men UX Power Tools har gjort et godt stykke arbejde! Tjek det ud.

Efterlad en kommentar eller @Lloyd på Twitter med feedback og ideer til v3.

Vi ansætter også hos Tradeshift!