Skitsevejledninger

Den mest effektive måde at bruge ikoner på, hvis du er en designer eller udvikler.

Ikke bare hvordan man gør det, men HVORFOR det er bedre end nogen anden måde.

Tilståelse: Denne artikel polariserer med vilje, så nogen skriver en vred kommentar og giver mig en mere effektiv løsning.
Måske er det manipulation. Jeg kalder det internetets forudsigelighed

Ikoner er en enorm smerte i min røv:

  • De skal se homogene ud (lignende visuel stil)
  • De skal have afgrænsningsbokse
  • De er nødt til at arbejde, når de er virkelig store og virkelig små
  • De skal være lette at designe med
  • De skal være lette at kode med
  • De skal være performante (sidebemærkning: Peter Nowell er kongen af ​​SVG'er)
  • De er nødt til ikke at forvirre dit designteam
  • De er nødt til ikke at forvirre dit udviklingsteam

Okay, så hvad med ikonskrifttyper?

Ikonskrifter som FontAwesome kom ud som en måde at blødgøre smerterne ved at arbejde med ikoner, men de er stadig ikke perfekte. At designe med dem er bare ... okay; du er stadig nødt til at gå op for at finde glyphen, kopiere den og indsætte den i tekstlaget. Du kan ikke rigtig symbolisere dem, og hvis du gør det, kræver ændring af farve noget tekstsymbol-trickery. Udvikling med ikonskrifter er enkel, men ikke uden problemer. Hvis browseren ikke indlæser ikonskrifttypen, er du uden for en padle. Og du er alene. I en kajak. Trist.

Nå… hvad nu?

Så… bruge SVG'er derefter?

Nå, det er designere, at SVG'er er bestemt lettere at symbolisere i Sketch, men det kan være en smert at ændre deres farve. Så bare ikke lav dem til symboler, ikke? Derefter kan du bruge lagformater til at gøre dem forskellige farver! Men hvad nu hvis du vil opdatere den lille dropdown-pil fra en caret til en trekant? Held og lykke med at finde alle 398 forekomster af den lille pil og opdatere dem en efter en. Så det er… godt, ikke godt. Og jeg ved af erfaring, at udviklere ikke elsker andet end at bruge fristående SVG'er til hvert ikon i mit design. Vær ikke bange for fyre, der er kun 207 unikke ikoner. Dette bør ikke påvirke sideindlæsningen. Jeg lover. / s

Ugh, hvad så ?!

Fortsæt med at læse, knucklehead Og inden vi dykker ind, her er noget gratis. Dette vil hjælpe dig med at følge med resten af ​​selvstudiet.

Min arbejdsgang

Min tilgang er opdelt i to dele: Hvad jeg gør for design og hvad jeg gør for udvikling. Ingen af ​​teknikkerne er helt perfekte, men det har været succes indtil videre og gør de fleste glade undervejs.

Det er vigtigt!

Hvad jeg gør for designere

Jeg elsker absolut Nucleo-ikonsættet. Der er 8.300 ikoner tilgængelige i alle slags forskellige stilarter (skitseret, solid, mini, fuld farve, to-tonet), og de har endda inkluderet de irriterende sociale ikoner, du har brug for til stort set hvert projekt. Du kan få fat i dem nedenfor ($ 49 for et år, $ 129 for livet).

Den absolutte hurtigste og mest bæredygtige måde at bruge ikoner i Sketch er ved at bruge farvesymboler og masker. Du har set denne teknik før takket være min ven Francesco, men her er en hurtig opdatering:

Trin 1: Lav symboler til de udfyldningsfarver, du vil bruge til dine ikoner. Sørg for, at hvert farvesymboltavle er af samme størrelse.

Trin 2: Lav et nyt tegnebræt til dit ikonsymbol. Indsæt dit ikon på dit nye tegnebræt. Hvis du bruger Nucleo Icon-skrivebordsappen, skal du bare trække ikonet direkte i Sketch og derefter sætte det på dit nye tegnebræt.

Trin 3: Sørg for, at dit ikon er en enkelt form, og indstil det som en maske. Hvis dit ikon ikke er en enkelt form, skal du vælge de forskellige stier og knytte dem sammen.

Trin 4: Indsæt et af farvesymbolerne oven på din ikonmaske, og ændre størrelsen på størrelsen på dit tegnebræt. Du kan tilsidesætte denne farve, når du tilføjer en forekomst af dit ikon!

Trin 5 (valgfrit): Hvis dit ikon er et logo (se ovenfor), skal du indstille maskeudfyldningen til appens mærkefarve. Det er let at hurtigt finde officielle mærkefarver på brandcolors.net. Dette sparer dig for at skulle oprette farvesymboler til en masse forskellige appfarver - hvis du nogensinde ønsker at bruge mærkefarven, skal du bare slukke for farvesymbolets tilsidesættelse:

Advarsel: Hvis du har farvesymboler med halvtransparente fylder, kan du se masken udfylde gennem gennemsigtigheden. Så hvis du ønsker, at 25% sort skal være en tilgængelig farve, skal du ikke bruge en udfyldning på masken.

Hvorfor dette fungerer for designere

  • Alle mine ikoner er symboler, så hvis jeg nogensinde vil opdatere dem, kan jeg gøre det et sted og straks se det opdatere på tværs af alle mine design.
  • Jeg kan hurtigt tilsidesætte farven fra inspektøren.
  • Hvis jeg opdaterer et farvesymbol, opdaterer det alle ikoner, der bruger denne farve.
  • Jeg kan indlejre ikoner inde i andre symboler og hurtigt skifte dem ud.

Hvorfor dette ikke fungerer for udviklere

  • Zeplin og InVision læser ikke farveoverskridelser, så de vil kun nogensinde vise dig den farve, du brugte i basissymbolet.
  • Farvesymbolet + masketeknikken tilføjer noget oppustethed til SVG-filstørrelsen.
  • De er alle individuelle SVG'er, så devs vil hoppe fra en bro.
Side note: Alle ikoner i UX Power Tools er konstrueret på denne måde. Det er super hurtigt at bytte farver og endnu lettere at bytte ikoner inde i elementer som knapper, felter og underretninger.

Hvad jeg gør for udviklere

Zeplin fungerer utroligt godt til layout, farve og typografi, men er ikke meget effektiv til aktiver. I stedet for at have devs til at trække ikoner direkte fra Zeplin (eller sende dem en zip af SVG'er), bruger jeg Nucleo til at opbygge en SVG-sprite og derefter sende det til udviklere. Ikke for at prale, men de mig for det

Trin 1: Opret et nyt projekt i Nucleo-webappen.

Trin 2: Føj ikoner til dit Nucleo-projekt, som du agter at bruge (eller allerede har brugt) i dine design.

Trin 3: Åbn projektet, vælg alle ikoner i højre panel, og klik på Download.

Trin 4: Vælg dine eksportpræferencer. “Eksport som symbol” bruger xlink: href, som udskrives i SVG 2 (endnu ikke ud). Når det er sagt, er det bare “xlink” -delen, der ikke længere er behov for, så “Eksport som symbol” er stadig en sikker mulighed. Jeg vælger normalt "Export CSS", som opretter en enkelt SVG-sprite, og opretter derefter en CSS-fil med klasser for hvert ikon.

Men vent, det er ikke engang den bedste del!

Sammen med SVG-sprite og genereret CSS opretter Nucleo også en HTML-side, der viser hvert ikon, og CSS-klassen til at bruge dette ikon i kode.

Hvorfor dette fungerer for designere

  • Du behøver ikke at ændre din designproces
  • Der er en smuk GUI til valg af ikoner
  • Tilføjelse af nye ikoner er enkel for begge parter

Hvorfor dette fungerer for udviklere

  • Det genererer en enkelt SVG-sprite og den rigtige CSS
  • Det giver udviklere en GUI til at finde ikoner og kopiere koden
  • De kan ændre ikonets farve og størrelse i kode. Halleluja!

Resumé

Der er hurtige måder at designe med ikoner og hurtige måder at udvikle med dem. Det er lidt ekstra arbejde at gøre tingene optimale for begge parter, men det vil gøre alles liv lettere.

Hvis du ikke bruger Nucleo, kan du finde masser af tjenester som Iconizr, der hjælper dig med at generere en SVG-sprite. Hvis du er heldig nok til at have din egen ikondesigner (r), skal du alligevel gøre dette, da alt bliver tilpasset! Din heldige hund.

Se UX Power Tools for at se, hvordan du kan bruge disse ikoner i alle former for sofistikerede indlejrede symboler. Det er virkelig den hurtigste måde at designe.

Når jeg ikke kæmper med ikoner, arbejder jeg på Sketch-designværktøjer hos UX Power Tools for at gøre dig til en bedre og mere effektiv designer.

Følg UX Power Tools på Twitter
Følg mig på Twitter