Vodiči za skice

Sve što trebate znati o novom upravitelju sustava dizajna InVision, uključujući način izrade

Timska suradnja, pojednostavljena.

Njegovo ime možda sada zvuči poznato, ali Ransom E. Oldssa mnogi smatraju osnivačem automobilske industrije i patrijarhom masovne proizvodnje. Možda ste čuli za Oldsmobile? On je taj tip

Ovaj zaboravljeni pionir zaslužan je za razvoj montažne linije, što mu je pomoglo u izgradnji prvog svjetskog automobila za masovnu proizvodnju, Oldsmobile Curved Dash. Sada je automobil!

Zasluga za izum montažne trake često je zaslužna za Henryja Forda zbog jednog vrlo kritičnog dodatka - Ford je automobile stavio na svojevrsni transportni trag, stvarajući sve važne pokretne montažne linije.

Montažna linija jedna je od najneobičnijih inovacija ikada razvijenih. Po prvi se put proizvodi mogli sastaviti brzo i dosljedno, a da pritom ne žrtvuju kvalitetu. Nije bilo nagađanja - proizvodi koji dolaze sa linije izgledali su isto i radili su isto, svaki put.

Koncept je poboljšan i prilagođen u svim industrijama kako bi se ubrzala proizvodnja i poboljšala proizvodnja, a konačno je ušao u uobičajenu dizajnersku praksu s dizajnerskim sustavima.

Pravo vrijeme

Ako digitalne proizvode gradite u mjeri s vlastitim dizajnerskim timom više osoba, možda je vrijeme da započnete s dizajniranjem sustava dizajna.

Postoje različite razine sofisticiranosti i složenosti, ali svi sustavi uključuju neku vrstu kolekcije elemenata i komponenti za višekratnu uporabu. Kada se smjestite na elementarni skup dizajnerskih komada, možete početi kodificirati kako i kada će se oni koristiti i spremite ih na središnje mjesto za izradu stilova prema stilu od strane vašeg dizajnerskog tima.

InVision Design System Manager (DSM)

Prolazimo kroz svojevrsnu industrijsku revoluciju gdje se svaki dan otvaraju novi alati za dizajn, a to može biti teško vidjeti kroz nered.

Nakon provjere raznih alata, na kraju sam se vratio InVision DSM dodatku jer InVision je i uvijek će biti središnji u našem procesu isporuke dizajna. Jednostavno mi je imalo smisla ostati u ekosustavu.

Napomena: Nisam prešao na Studio jer je moja agencija jako uređena u Sketch-u. U ovom trenutku to bi bilo skupo mijenjanje, ali to ne isključujemo. Čujem sjajne stvari, a vrijeme će možda biti bolje u budućnosti.

DSM je Ford dizajnerskih sustava koji nudi poboljšanje koncepta koji olakšava ažuriranje i razmjenu dizajnerskog sustava bez napuštanja vašeg dizajnerskog alata po izboru.

Zašto jednostavno ne biste koristili Knjige skica?

Potpuno razumljivo pitanje - isto sam pitao. Evo zašto mi se sviđa:

  • Sučelje povuci i ispusti
  • Možete tražiti komponente
  • Simboli se u okviru alata organiziraju vizualno
  • Dijeljenje tima je jednostavnije
  • Povijest verzija i implementacija verzije
  • Automatski generirani mrežni vodič za stil

Izgradnja vašeg dizajnerskog sustava

Raščlanimo svaki korak koji je potreban za izgradnju vašeg dizajnerskog sustava u InVision DSM-u. Vrijedi napomenuti da potpuno razvijeni dizajnerski sustavi obično uključuju dizajn, filozofiju i kôd. Pokrivat ću dio dizajna u ovom članku, ali samo ću prepoznati da je to samo jedan dio veće montažne linije.

Pretpostavljam da ste već izradili svoje stilove i simbole ... ako to još niste učinili, slobodno slijedite pomoću Rendera, uzorka dizajnerskog sustava koji pruža InVision DSM.

Otvorite datoteku za dizajn sustava Sketch gdje izrađujete razne komponente dizajnerskog sustava i pokrenimo.

1. korak: Stvaranje biblioteke

Krenite na svoju internetsku nadzornu ploču InVision i kliknite na DSM.

Na isti način na koji morate stvoriti novi InVision Project prije nego što započnete sinkronizaciju zaslona, ​​moramo stvoriti i novu biblioteku sustava dizajna. Kako vaš sustav dizajna raste, najbolja je praksa da dijelite komponente sustava u više knjižnica - jedna knjižnica za radnu površinu, jedna za iOS mobilne, jedna za Android mobitel, jedna za osnovne komponente, jedna za komponente specifične za proizvod itd.

Kliknite Stvori novu biblioteku da biste započeli:

2. korak: Preuzimanje dodatka

Vaš "dizajn" školjke spreman je, a vrijeme je da ga počnete ispunjavati elementima, komponentama i spremljenim stilovima.

Preuzmite i instalirajte dodatak InVision Craft ako ga već niste. Ako ga nikad prije niste koristili, možete se zbuniti kad otvorite aplikaciju jer ne vidite da se ništa pokreće. Pronaći ćete ga na traci izbornika za Mac.

Obavezno aktivirajte DSM alat na kartici Alati pri vrhu.

Ako ste ga ispravno instalirali, vidjet ćete novu vertikalnu alatnu traku Sketch-a:

3. korak: Razumijevanje odjeljaka knjižnice

Kliknite oblik zupčanika na dnu (mogao bi biti na drugom mjestu, ovisno o alatima koje ste aktivirali u Craft Manageru). Vidjet ćete da se DSM alatni okvir otvara u novom prozoru, a vaša nova ljuska biblioteke već bi trebala biti odabrana:

Savjet savjeta: Pokažite i sakrijte ovaj prozor pritiskom na Command + L!

DSM biblioteka je prema zadanim postavkama podijeljena u pet odjeljaka (naziva se „Mape“):

  • Boje: ovdje ćete staviti sve boje koje se koriste u vašem sustavu
  • Tekstualni stilovi: tu ćete staviti sve spremljene stilove teksta
  • Stilovi sloja: ovdje ćete staviti sve spremljene stilove slojeva (ispune, obrube, sjene itd.)
  • Ikone: ovdje možete organizirati sve simbole ikona vašeg dizajnerskog sustava.
  • Komponente: ovdje ćete staviti sve svoje simbole.

mape

Mape su vjerojatno najprikladniji alat u DSM-u jer vam omogućuju promišljeno organiziranje dijelova vašeg dizajnerskog sustava tako da imaju smisla za sve koji ga koriste. Možete čak i stvoriti mape unutar drugih mapa kako biste dodali dublju organizaciju (trenutno ograničenu na dvije razine gniježđenja).

4. korak: dodavanje boja

Odaberite mapu Colors (Boje) i kliknite gumb + u donjem desnom kutu. Pojavit će se modal sa upitom da nazovete ovu paletu boja. Možete imati više paleta boja na temelju vašeg sustava boja, stoga slobodno stvorite jednu ili više njih.

DSM će skenirati vaš dokument kako bi pronašao sve boje koje koristite. Odaberite one koje želite dodati ovoj paleti, a zatim kliknite Dodaj boje.

Kliknite tekst ispod uzorka boja da biste svoje boje preimenovali u nešto malo korisnije:

DSM vam omogućuje dodavanje opisa komponentama u vašoj biblioteci, što je izvrsno za dodavanje smjernica za upotrebu i načela dizajna:

Uređivač bogatih tekstova prilično je lupav - ne moram ga hakirati uz vlastito oblikovanje u kući.

Korak 5: Dodavanje stilova teksta

Ako već ne upotrebljavate stilove teksta, molim vas da započnete odmah. Kada dizajnirate proizvode koristeći tekstualne stilove, umnožavanje je lako ažurirati na fontu ažuriranjem fonta samo ažuriranjem stila i sinkronizacijom.

U svakom slučaju, dodavanje stilova teksta super je jednostavno jer DSM radi sve za vas. Kliknite mapu Tekstovni stilovi, a zatim u donjem desnom kutu kliknite gumb +:

Izgleda da povlači duplikate, ali nije. Postavljena su dva stila teksta za poravnanje ulijevo i središte!

DSM će automatski prepoznati svaki stil teksta u vašem dokumentu. Samo kliknite Odaberi sve i dodajte stilove teksta.

Korak 6: Dodavanje slojeva slojeva

Kliknite u mapu Slojevi slojeva, a zatim ponovite prethodni korak. Poprilično jednostavno!

7. korak: Dodavanje ikona

Važno je napomenuti da ikone ne moraju biti simboli da biste ih dodali u svoju DSM biblioteku.

!!! Vrlo VRLO važna napomena !!!
DSM podržava duboko umetanje u simbole. To znači da ako koristite tehniku ​​simbola u boji da biste omogućili promjenu boje ikona, DSM će automatski izbrisati datoteku za sve ugniježđene simbole i automatski ih uvesti u biblioteku. To znači da vam nije potrebno uvoziti simbole u boji. Samo uvezite svoje konačne kompozitne simbole ... a ne pojedinačne ugniježđene simbole koji čine konačnu komponentu.

Kliknite u mapu Ikone, odaberite sloj ili simbol ikone, a zatim kliknite gumb + za dodavanje. Napomena: Možete istovremeno odabrati više ikona i dodati ih jednim potezom. Ne treba ih raditi jedno po jedno. Uf.

Toplo vam preporučujem da odvojite malo vremena da organizirate svoje ikone u razumljivu strukturu podmape. Kasnije ćete ih lakše pronaći:

Ja obično dijelim svoje na sljedeće:

  • Ikone aplikacija: ikone proizvoda za stvari poput Twittera i Facebooka.
  • Ikone UI: Standardne ikone korisničkog sučelja poput postavki, brisanja, korisničkog profila itd.
  • Prebaci ikone: stvari poput potvrdnih okvira, radija i sklopki.
  • Razne ikone: sve drugo što se ne ubraja u gornje kategorije.

Korak 8: Dodavanje komponenti

Trebao si to već objesiti! Kliknite u mapu Komponente, a zatim kliknite gumb + da biste započeli dodavati elemente i komponente koji se mogu ponovo upotrebljavati.

Ovdje želite biti super organizirani sa strukturom mape:

Imajte na umu da će DSM automatski uvesti sve duboko ugniježđene simbole koji čine vaše veće kompozitne simbole, tako da samo „konačnu komponentu“ trebate uvesti u DSM:

Čipovi gore imaju puno ugniježđenih simbola koji omogućuju odabir različitih stilova avatar (slika, inicijala, ikone), boje čipa i boje teksta. Morao sam samo uvesti svoj konačni simbol čipa u DSM. Kad koristim čipove iz svog dizajnerskog sustava u drugoj datoteci, DSM će sa sobom donijeti sve one ugniježđene simbole, uključujući i sve ugniježđene simbole iste veličine matične ploče.

Stvarno je stvarno lijepo.

9. korak: implementacija i uporaba sustava

Kada završite s dodavanjem svih potrebnih komponenti u vaš sustav dizajniranja, oni će odmah biti dostupni svima u vašem timu! Morat će kliknuti sinkronizaciju da ažuriraju svoju datoteku s najnovijim i najboljim iz zajedničke biblioteke DSM-a.

Na Enterprise planu imat ćete mogućnost raditi fantastične stvari poput verzije biblioteke, korisničkih dozvola i kontrole pristupa knjižnici.

Ako imate poslovni plan i želite objaviti novu verziju, samo kliknite padajući gumb u gornjem lijevom kutu, a zatim odaberite Izdanje nove verzije ...

Vaša nova verzija dizajnerskog sustava sada postoji, a ako ste već objavili stariju verziju, klikom na Povijest verzije možete vidjeti što se promijenilo ...

To će vas odvesti do web prikaza dnevnika promjena, baš kao što biste mogli vidjeti kada ažurirate aplikaciju na računalu:

Stvarno biste trebali ciljati na puno detaljnije i detaljnije detalje nego što sam bio na gornjoj snimci zaslona, ​​tako da vaš tim zna što se promijenilo.

Kada govorimo o timu, vjerojatno ćete poželjeti pozvati neke druge dizajnere na upotrebu, uređivanje i upravljanje novom DSM bibliotekom.

Iz vaše biblioteke u web sučelju kliknite gumb Pozovi u gornjem desnom kutu zaslona. Vidjet ćete propust gdje možete pozvati druge dizajnere.

Napomena: Ako imate Enterprise plan, imat ćete dodatnu mogućnost da pozovete korisnike da pogledaju, uredi ili upravljaju (administracija) ovom bibliotekom.

Također možete posjetiti karticu Osobe na početnom zaslonu DSM-a da biste pogledali, uredili i dodali suradnike u svoje knjižnice.

Ta su dopuštenja i uloge dostupni samo na Enterprise planu.

Na ovu stranicu možete brzo doći i s dodatka DSM:

Korak 10: Ažuriranje sustava

Budući da ste "glavni knjižničar" svog novog dizajnerskog sustava, ima smisla da s vremena na vrijeme želite ažurirati, bilo da se dodaju nove komponente ili ažuriraju postojeće.

Kliknite u mapu koja sadrži komponentu koju želite ažurirati, a zatim kliknite gumb +. Ako DSM otkrije da simbol već postoji, dobit ćete dijaloški okvir koji izgleda ovako:

Odlučite želite li stvoriti novu ili zamijeniti postojeću i promjena će se širiti u vašu DSM biblioteku:

Kada se izvrše nadogradnje u vašoj biblioteci, članovi vašeg dizajnerskog tima dobit će obavijest da su komponente ažurirane:

Sve što trebate učiniti je kliknuti biblioteku Sinkroniziranje za dokumentiranje i promjene će se odraziti u njihovom dokumentu, sa svim postojećim poništenjima (poput teksta) sačuvanim:

Zaista brzo, napomena: Svatko tko ne bi trebao lutati po simbolima knjižnice može biti postavljen kao preglednik umjesto Admin ili Uređivač unutar dozvola suradnika. Zaštitite svoj sustav od neželjenih promjena!

Sažetak

U ovom smo članku naučili kako stvoriti knjižnicu, instalirati Craft dodatak, izgraditi biblioteku i implementirati svoj sustav. Vi i vaš tim sada ste spremni započeti koristiti svoj potpuno novi sustav dizajna!

Pomogao sam InVisionu stvoriti uzorak dizajnerskog sustava zvanog Render, tako da možete vidjeti kako lijepo to izgleda u njihovom web prikazu. Preuzmite datoteku Sketch i dodatak Craft i možete početi sastavljati vlastitu biblioteku s DSM alatom koristeći Render sustav kao početnu točku.

Kliknite gore da biste vidjeli završeni sustav dizajna na InVisionu!

Kad ne gradim sustave dizajna, radim na alatima Sketch na UX Power Tools kako bih bio bolji i učinkovitiji dizajner.

Slijedite UX Power Tools na Twitteru
Slijedite me na Twitteru
Pozdravi na LinkedInu
Naučite neke stvari s bloga moje agencije