Sketch Symbol beste praksis

Symbolene fikk en stor oppgradering i Sketch 39. De er mye kraftigere enn de pleide å være, og vi prøver alle å finne ut hvordan vi best kan bruke dem.

Det er en oppdatert versjon av denne guiden tilgjengelig:

På Tradeshift begynner vi å opprettholde et sentralt skissedokument med alle symbolene våre. For å bli lagt til i dette dokumentet, trenger et symbol å gjennomføre noen få kvalitets- og konsistenskontroller. Alle som designer for oss vil benytte seg av dette dokumentet, så vi ønsker ikke å distribuere annet enn de beste symbolene på våre vanlige brukergrensesnittkomponenter. Symboler skal oppføre seg på lignende måter, være små nok til å være modulære, være store nok til å være nyttige og være organisert godt for enkel redigering (eller innebygd i et dokument når det er koblet fra).

Forhåpentligvis finner du ideene mine for å lage symboler av god kvalitet nyttige, men dette er absolutt et levende dokument, og jeg vil oppdatere det, da vi uunngåelig finner bedre måter å gjøre mer komplekse ting på. Jeg er ikke helt sikker på at dette er den perfekte tilnærmingen, men jeg vil gjerne starte en samtale rundt symbolkvalitet.

Lag de mest grunnleggende komponentene

Ideelt sett bør du ikke løsrive symboler ofte, fordi det beseirer formålet. Lag den mest grunnleggende versjonen av en komponent, individuelle symboler som du kan kombinere senere for å skape en mer vedlikeholdbar helhet.

For eksempel: på Tradeshift har vi en ikon-fane som ser slik ut, men du kan se at komponenten vår lar deg plassere et ikon på toppen, utenfor symbolet, som deretter lar deg enkelt veksle fanen til aktive / inaktive modus uten å måtte løsrive eller lage for mange varianter av det som egentlig er det samme symbolet.

Etabler en navnekonvensjon

Navngi lagene dine på riktig måte. Vi prøver å holde oss til alle små bokstaver, atskilt med bindestreker. Sketch organiserer symboler automatisk i mapper når du setter en / i navnet.

Jeg anbefaler et kontroll / definering av eiendomskonvensjon om navngivning. Standardtilstander skal ikke ha en tilstand - fane-inaktiv og faneaktiv er overflødig. fane, faneaktiv er veien å gå.

Eksempel:

  • knapp / farge-mouse
  • tab / ikon aktive

Pete Lacey gjorde et godt poeng at navn ikke skulle være for tett knyttet til deres fysiske attributter, siden de sannsynligvis vil utvikle seg. For oss er vi ganske strenge grønne og blå, så det er virkelig deres definerende eiendom. Men kanskje primær, sekundær osv. Ville være mer passende.

Når du bruker Sketch Runner, betyr det å etablere et navnekonvensjon at du alltid vil kunne finne det du leter etter, fordi det er et organisasjonsmønster å overholde.

Ingen liker å arve en dårlig organisert skissefil generelt, så la oss ikke distribuere dårlig organiserte symboler.

Bruk generisk tekst

Gi lagene generisk plassholdertekst - ikke bare teksten du brukte i den spesifikke bruksaken du hadde da du opprettet dette symbolet. Plassholderteksten vår for knapper er "ACTION INTENT" som en passiv påminnelse om hvordan du skal uttale mikrokopien din.

Gi lag passende navn

Gi lagene i seg passende og konsistente navn. Bakgrunner skal alltid kalles bakgrunn og ikke blandes med bg osv. Forbann deg hvis du lar den ha navnet Rektangel 100! Hvis du kobler fra symbolet, bør det forbli et ryddig og selvforsynt objekt.

Tekst er spesielt viktig. Forsikre deg om at symboler du regelmessig vil erstatte (dvs. med lignende symboler i forskjellige tilstander) har de samme tekstlagnavnene. Du kan redigere tekst i et symbol i overstyringsredigeringsprogrammet - hvis du erstatter symbolet, vil det fortsette teksten i det nye symbolet hvis det deler det samme tekstlagnavnet. Den viser også navnet på tekstlaget, ikke innholdet, som feltidentifikator.

Implementere et rent og konsistent hierarki

Legg eventuell redigerbar tekst på toppen.

Gruppér ryddig, og pass på at det ikke er noen ekstra grupper eller elementer som ikke tjener noe formål (som kan skje hvis du limer inn et ikon osv.).

Symboler blir gjenbrukt, fjernet og omblandet - de skal være veldig godt organisert, slik at hvem som helst kan forstå hva som skjer når de ser under panseret.

Forsikre deg om at størrelsen på symbolene endres korrekt

Lek med symbolene dine, test dem og prøv å bryte dem. Du bør ta sikte på å bygge noe skuddsikkert. Ytterligere noen minutter av tiden din til å perfeksjonere symbolet, sparer du hodepine på veien, og gjør designere som må opprettholde skissefiler og symboler glade.

Sjekk ut Peter Nowells størrelse Cheat Sheet

Teksten skal fikses

Teksten skal festes og justeres riktig, slik at når du endrer størrelse på et symbol, beholder den posisjonen og polstringen riktig. Teksten skal ha et "Endre størrelse på objekt" som endrer størrelse på egenskapen.

Design den minste versjonen av et symbol

Det er enklere å designe rundt stretching-symboler enn å komprimere dem.

For oss ønsker vi at fanen skal ha en minimumsbredde på 99px, uansett hva teksten er. Så den minste versjonen av fanen er 99px bred, og vi vet å ikke gjøre den noe mindre.

Forsikre deg om at symboler du skal bytte ut har samme tegnebrettstørrelse

Skisse erstatter ett symbol med et annet, og komprimerer / strekker symbolet for å passe inn i samme størrelse. Kanskje dette er forsettlig, kanskje er det en feil - men til syvende og sist bør du prøve å lage symboler du regelmessig vil bytte i samme størrelse. Hvis det strekker dem ut, kan du høyreklikke-> Sett til originalstørrelse for å fikse det.

Hit meg med ideer og tilbakemeldinger! Jeg er ikke helt sikker på at dette er den perfekte tilnærmingen, men jeg vil gjerne starte en samtale rundt symbolkvalitet.