1–2–3 Vejledning til styring af designaktiver

Let som det lyder. Tjek oversigten, og nedenfor finder du en videoguide. Hvis du arbejder som freelancer eller i et team - her er ideen. Vi bruger:

Skitse → UI, abstrakt → Versionering, Zeplin → Handoff (valgfrit)

TL; DR

1 - Topniveau: Support & klientbiblioteker

I abstrakt skal du opsætte nyt projekt med navnet ___Support - ting, du ofte bruger, såsom UI-sæt, OS-sæt, Wireframe-sæt, Mockups. Brug en skitse-fil til hver aktivtype, og sørg for at indstille disse filer som biblioteker.

Dernæst, for hver klient, der skal oprettes et separat projekt, siger __Dreamland Inc., hvor du vil beholde brand Assets - ting, du vil bruge på tværs af projekter for den samme klient, såsom logoer, farver, typografi. Alle Sketch-filer her vil også være biblioteker.

Alle aktiver i bibliotekets filer skal være symboler. Brug / i symbolnavne til gruppering (f.eks. Tastaturer / hvid, tastaturer / sort). Jeg forlader symboler siden rodet og bruger yderligere sider til at holde elementer organiserede (ved hjælp af tegnebræt). Eksempel: Klient bruger forskellige farveskemaer til Spring Collection - Jeg opretter en Spring Colors Page med alle farverne forekomster i __color.sketch Library.

Sidetip: Brug batchoprettelse af symboler og omdøb det til bedre konvertering af lag til symboler, og hvis du bruger symbolside, skal du bruge symbolarrangør.

2 - Mellemniveau: projekter

Brug nyt projekt til hvert klientarbejde, siger Dreamland iOS-app. Importer understøttende biblioteker og klientbiblioteker i overensstemmelse med dine behov. Opret en sketch-fil til brugergrænsefladen eller del den i flere filer. Hvis du arbejder alene, skal du bruge en fil, der er opdelt i sider - en til hver brugerflow. For teamwork er det bedre at oprette flere sketch-filer for at undgå konflikter. Der er ikke noget galt i at arbejde med mange filer, faktisk kan det være mere effektivt.

Udover biblioteker på øverste niveau skal du bruge biblioteker på mellemniveau her. Disse vil være med almindelige projektdesignaktiver såsom - knapper, formelementer, ikoner osv. Det er normalt en overkill til at opbevare dem i separate filer, så hold dig til et _dreamland-ios-bibliotek og organiser symboler på sider for klarhed. Senere, når den samme klient ansætter dig til et andet projekt, siger Dreamland iOS-app til rejseguider, skal du bare linke _dreamland-ios-bibliotek og genbruge aktiverne.

Sidetips: For at organisere aktiver på sider for bedre forhåndsvisning skal du bruge Craft Plugin og genvej: Cmd + Shift + C.

3 - Nederste niveau: UI-designfiler

Dette er enten en Sketch-fil med flere sider, eller flere Sketch-filer, hvor du arbejder på UI. Medmindre det er et rigtig lille projekt, modstå trangen til at opbevare symboler i designfilerne. Opbevar ideelt kun de symboler, der er specifikke for den fil og ikke vil blive brugt udenfor. Eksempel: Hvis jeg bruger den samme baggrund til alle onboarding-skærme, men ikke udenfor, vil jeg beholde baggrunden som et symbol i filen User Onboarding.sketch. Hvis det er den baggrund, jeg måske bruger andre steder, flytter jeg den til _dreamland-ios-bibliotek.

Jeg holder _dreamland-ios-biblioteket åbent i baggrunden, og efter at have designet nogle skærme stopper jeg et øjeblik for at få navnet rigtigt, flytte symbolerne og erstatte dem i designfilen. Det er virkelig ikke så meget travlt. Pointen er, at du vil fokusere på designprocessen. Prøv ikke at bekymre dig for meget om, hvad der skal gå hvor. Når du har oprettet et par skærme, eller når du er lidt træt, skal du tage en kort pause og organisere aktiverne. På den måde opretter du hver følgende skærm hurtigere og i mellemtiden projektets bibliotek.

Sidetip: Brug Sketch Runner for hurtigt at kalde symboler ved navn

BONUS - Din udvikler ️ det

Hvis du spiller kortene rigtigt, er det ikke nødvendigt at oprette yderligere specifikationer - udviklere kan bruge Zeplin og biblioteksfilerne til først at oprette bits og stykker af kode (bygg atomer og molekyler - udtræk farver, skriftstørrelser). Bagefter lader designfilerne dem sammensætte det (opbygge organismer - måle afstandene og placere elementerne).

Hvis du leder efter nogle måder at organisere og opsætte et designramme på, kan du tjekke denne artikel.

Og du er i orden!

Video - Sådan fungerer det i detaljer + Tips!

Her er en 24-minutters lang videotutorial, der er opdelt i 3 dele, der viser dig, hvordan du anvender 1–2–3-regel i din design-arbejdsgang plus nogle ekstra tip:

Klik på billedet for at se lektionerne

Fordele

  • Klar struktur, let at følge for alle typer arbejde
  • Biblioteker kan forbindes mellem forskellige projekter
  • Nemme opdateringer og hurtigere levering til eksisterende klienter
  • Fordel ved versionkontrol - sikkerhedskopi til alle dine filer, versionhistorik, arbejde i et team og løsning af konflikter og mere!

Ulemper

  • Du skal gemme → Foretag biblioteksfil i det samme projekt, og Gem → Forpligtelse → Flet til masterbiblioteker fra andre projekter, før symbolerne bliver opdateret
  • Tekstformater såvel som delte stilarter er ikke tilgængelige fra det linkede bibliotek - husk at i dette tilfælde skal du bruge tekstblokke som symboler

Håber du har lært noget nyttigt! I så fald - tjek over 40 timers videotutorials til UI / UX-designere på learnux.io