Tutoriale de schiță

Tot ceea ce trebuie să știți despre noul manager de sistem de proiectare al InVision, inclusiv cum să construiți unul

Colaborarea în echipă, simplificată.

Numele lui ar putea suna acum familiar, dar mulți Ransom E. Olds este considerat ca fiind fondatorul industriei auto și patriarhul producției de masă. Poate ai auzit de Oldsmobile? El este tipul acela.

Acest pionier uitat i se atribuie dezvoltarea liniei de asamblare, ceea ce l-a ajutat să construiască primul automobil produs în masă din lume, Oldsmobile Curved Dash. Acum există o mașină!

Creditul pentru invenția liniei de asamblare este de cele mai multe ori pentru Henry Ford din cauza unei adăugări foarte critice - Ford a pus mașinile pe un transportor de acest fel, creând linia de asamblare importantă.

Linia de asamblare este una dintre cele mai extraordinare inovații dezvoltate vreodată. Pentru prima dată, produsele pot fi asamblate rapid și constant, fără a sacrifica calitatea. Nu a existat niciun ghicit - produsele care veneau din linie arătau la fel și funcționau la fel, de fiecare dată.

Conceptul a fost îmbunătățit și adaptat în toate industriile pentru a accelera producția și a îmbunătăți producția și, în cele din urmă, și-a făcut drum în practica de proiectare mainstream cu sisteme de proiectare.

Timpul potrivit

Dacă construiți produse digitale la scară cu o echipă de proiectare internă formată din mai mult de o persoană, s-ar putea să fie momentul să începeți să construiți un sistem de proiectare.

Există diferite niveluri de rafinament și complexitate, dar toate sistemele includ un fel de colecție de elemente și componente reutilizabile. Când vă bazați pe un set elementar de piese de design, puteți începe să codificați cum și când vor fi utilizate și să le salvați într-o locație centrală pentru fabricarea stilului de linie de asamblare de către echipa dvs. de proiectare.

Manager de sistem de proiectare InVision (DSM)

Trecem printr-o revoluție industrială de felul în care sunt lansate noi instrumente de proiectare în fiecare zi și poate fi greu de observat prin dezordine.

După ce am examinat diverse instrumente, am ajuns în cele din urmă să revin la pluginul InVision DSM, deoarece InVision are și va fi întotdeauna esențial pentru fluxul nostru de lucru de proiectare. Pur și simplu a avut sens să rămân în ecosistem.

Notă: nu am trecut la Studio deoarece agenția mea este foarte gravată în Sketch. În acest moment, ar fi un comutator costisitor, dar nu îl eliminăm. Aud lucruri grozave și s-ar putea ca timpul să fie mai potrivit în viitor.

DSM este Ford-ul sistemelor de proiectare, oferind o îmbunătățire a conceptului, ceea ce facilitează actualizarea și scalarea unui sistem de proiectare, fără a renunța la instrumentul ales.

De ce nu folosiți doar Sketch Libraries?

Întrebare total de înțeles - am pus același lucru. Iată de ce îmi place:

  • Interfață drag-and-drop
  • Puteți căuta componente
  • Simbolurile sunt organizate vizual într-o cutie de instrumente
  • Partajarea echipei este mai simplă
  • Istoricul versiunilor și implementarea versiunii
  • Ghid de stil online generat automat

Construirea sistemului dvs. de proiectare

Să descompunem fiecare etapă necesară pentru crearea sistemului dvs. de proiectare în InVision DSM. Merită menționat faptul că sistemele de proiectare completă includ de obicei design, filozofie și cod. Voi acoperi porțiunea de design din acest articol, dar recunosc doar că este doar o parte a unei linii de asamblare mai mari.

Voi presupune că ați creat deja stilurile și simbolurile voastre ... dacă nu ați făcut-o încă, nu ezitați să urmați împreună Render, sistemul de proiectare a exemplelor furnizat de InVision DSM.

Deschideți-vă fișierul de schițare a sistemului de proiectare în care ați creat diferitele componente ale sistemului de proiectare și să începeți.

Pasul 1: Crearea unei biblioteci

Mergeți la tabloul de bord InVision și faceți clic pe DSM.

În același mod în care aveți nevoie pentru a crea un nou proiect InVision înainte de a putea începe sincronizarea ecranelor, trebuie să creăm o nouă bibliotecă de sistem de proiectare. Pe măsură ce sistemul de proiectare crește, este cea mai bună practică să compartimentezi componentele sistemului pe mai multe biblioteci - o bibliotecă pentru desktop, una pentru iOS mobil, una pentru Android mobil, una pentru componente de bază, una pentru componente specifice produsului etc.

Faceți clic pe Creare bibliotecă nouă pentru a începe:

Pasul 2: Descărcarea pluginului

Sistemul dvs. de proiectare „shell” este gata și este timpul să începeți să-l completați cu elemente, componente și stiluri salvate.

Descărcați și instalați pluginul InVision Craft dacă nu ați făcut-o deja. Dacă nu l-ați folosit niciodată, s-ar putea să vă confundați atunci când deschideți aplicația, deoarece nu vedeți nimic lansat. O vei găsi în bara de meniu Mac.

Asigurați-vă că activați instrumentul DSM sub fila Instrumente din partea de sus.

Dacă ați instalat-o corect, veți vedea o nouă bara de instrumente verticală în Sketch:

Pasul 3: Înțelegerea secțiunilor de bibliotecă

Faceți clic pe forma butonului din partea de jos (poate fi într-un loc diferit, în funcție de instrumentele pe care le-ați activat în Craft Manager). Veți vedea caseta de instrumente DSM deschisă într-o fereastră nouă, iar noua dvs. shell de bibliotecă ar trebui să fie deja selectată:

Sfat Pro: Afișați și ascundeți această fereastră apăsând Command + L!

În mod implicit, o bibliotecă DSM este împărțită în cinci secțiuni (numite „Foldere”):

  • Culori: Aici veți pune toate culorile utilizate în sistemul dvs.
  • Stiluri de text: aici veți pune toate stilurile de text salvate
  • Stiluri de strat: Aici veți pune toate stilurile de strat salvate (umpleri, margini, umbre etc.)
  • Icoane: Acesta este locul în care puteți organiza toate simbolurile dvs. de sistem de proiectare.
  • Componente: Aici veți pune toate simbolurile.

Dosare

Dosarele sunt probabil cel mai convenabil instrument în DSM, deoarece vă permit să organizați cu atenție piesele sistemului de proiectare, astfel încât să aibă sens tuturor celor care îl folosesc. Puteți crea chiar și foldere în alte foldere pentru a adăuga o organizare mai profundă (limitată în prezent la două niveluri de cuibărire).

Pasul 4: Adăugarea de culori

Selectați folderul Culori și faceți clic pe butonul + din dreapta jos. Va apărea o modalitate care vă va cere să numiți această paletă de culori. Puteți avea mai multe palete de culori bazate pe sistemul dvs. de culori, așa că nu ezitați să creați una sau mai multe.

DSM va scana documentul dvs. pentru a găsi toate culorile pe care le utilizați. Selectați care doriți să adăugați la această paletă, apoi faceți clic pe Adăugați culori.

Faceți clic pe textul de sub arhiva de culori pentru a redenumi culorile în ceva mai util:

DSM vă permite să adăugați descrieri la componentele din biblioteca dvs., ceea ce este excelent pentru a adăuga ghiduri de utilizare și principii de design:

Editorul de text bogat este destul de obraznic - nu trebuie să-l piratez cu formatarea mea proprie.

Pasul 5: Adăugarea stilurilor de text

Dacă nu utilizați deja stiluri de text, vă rog să începeți imediat. Atunci când proiectați produse folosind stiluri de text, este ușor de numărat minte să efectuați actualizări la nivel de fișier, doar prin actualizarea stilului, apoi sincronizarea.

Oricum, adăugarea de stiluri de text este super ușoară, deoarece DSM face doar totul pentru tine. Faceți clic în folderul Stiluri text, apoi faceți clic pe butonul + din dreapta jos:

Se pare că trage duplicate, dar nu. Am două stiluri de text setate pentru aliniere stânga și centru!

DSM va detecta automat fiecare stil de text din documentul dvs. Doar faceți clic pe Selectați toate și Adăugați stiluri de text.

Pasul 6: Adăugarea stilurilor de strat

Faceți clic în folderul Stiluri straturi, apoi repetați pasul anterior. Destul de ușor!

Pasul 7: Adăugarea pictogramelor

Este important să rețineți că pictogramele nu trebuie să fie simboluri pentru a le adăuga în biblioteca DSM.

!!! O notă foarte importantă !!!
DSM acceptă cuibărire profundă în simboluri. Acest lucru înseamnă că, dacă utilizați tehnica simbolului de culoare pentru a vă permite să schimbați culoarea pictogramelor, DSM vă va răzui automat fișierul pentru toate simbolurile cuibărate și le va importa automat în bibliotecă. Aceasta înseamnă că nu trebuie să importați simbolurile de culoare. Importați doar compozitele simbolului final ... nu simbolurile individuale care alcătuiesc componenta finală.

Faceți clic în folderul Icoane, selectați un strat de simbol sau simbol, apoi faceți clic pe butonul + pentru a adăuga. Notă: Puteți selecta mai multe pictograme simultan și le puteți adăuga într-o singură picătură. Nu este nevoie să le faceți din când în când. Pfiu.

Vă recomand să vă ocupați puțin de timp pentru a vă organiza pictogramele într-o sub-folder de înțelegere. Va fi mai ușor să le găsiți mai târziu:

De obicei, o împărțesc pe a mea în următoarele:

  • Pictograme pentru aplicații: pictograme de produs pentru lucruri precum Twitter și Facebook.
  • Icoane UI: pictograme UI standard precum setări, ștergere, profil de utilizator etc.
  • Icoane de comutare: lucruri precum casetele de selectare, radiourile și comutatoarele.
  • Icoane diverse: orice altceva care nu se încadrează în categoriile de mai sus.

Pasul 8: Adăugarea de componente

Ar trebui să-l ai acum pe acesta! Faceți clic în folderul Componente, apoi faceți clic pe butonul + pentru a începe să adăugați elementele și componentele reutilizabile.

Acesta este locul în care doriți să fiți super organizat cu structura folderului:

Nu uitați, DSM va importa automat orice simboluri cu adâncime care alcătuiesc compozitele de simboluri mai mari, astfel încât nu trebuie decât să importați „componenta finală” în DSM:

Jetoanele de mai sus au o mulțime de simboluri cuibărite în ele pentru a permite alegerea diferitelor stiluri de avatar (imagine, inițiale, pictograme), culoarea cipului și culoarea textului. A trebuit să import doar simbolul meu cip final în DSM. Când folosesc cipuri din sistemul meu de proiectare într-un alt fișier, DSM va aduce toate simbolurile cuibărite, inclusiv toate simbolurile cuibărite care au aceeași dimensiune.

Este foarte drăguț.

Pasul 9: Implementarea și utilizarea sistemului

După ce ați terminat de adăugat toate componentele necesare sistemului dvs. de proiectare, acestea vor fi disponibile instantaneu tuturor celor din echipa dvs. Trebuie doar să facă clic pe sincronizare pentru a-și actualiza fișierul cel mai recent și cel mai mare din biblioteca DSM partajată.

În planul Enterprise, veți avea posibilitatea de a efectua anumite lucruri mai interesante, cum ar fi versiunea bibliotecii, permisiunile utilizatorului și controlul accesului la bibliotecă.

Dacă sunteți în planul întreprinderii și doriți să lansați o nouă versiune, trebuie doar să faceți clic pe meniul vertical din stânga sus, apoi alegeți Versiunea nouă ...

Noua dvs. versiune de sistem de proiectare există acum și dacă ați lansat deja una anterioară, puteți vedea ce a fost modificat făcând clic pe Istoricul versiunilor ...

Aceasta vă va duce la o vizualizare web a jurnalului de modificări, la fel cum ați putea vedea când actualizați o aplicație pe computer:

Ar trebui să tinti cu adevărat să fii mult mai veros și detaliat decât eram în ecranul de mai sus, astfel încât echipa ta să știe ce s-a schimbat.

Vorbind despre echipă, probabil că veți dori să invitați unii alți designeri să folosească, să editeze și să gestioneze noua dvs. bibliotecă DSM.

Din biblioteca dvs. din interfața web, faceți clic pe butonul Invitați în partea dreaptă sus a ecranului. Veți vedea un popover în care puteți invita alți designeri.

Notă: Dacă sunteți în planul Enterprise, veți avea posibilitatea de a invita utilizatorii să vizualizeze, să editeze sau să gestioneze (admin) această bibliotecă.

Puteți vizita, de asemenea, fila Oameni din ecranul de start DSM pentru a vizualiza, edita și adăuga colaboratori la bibliotecile dvs.

Aceste permisiuni și roluri sunt disponibile numai în planul Enterprise.

Puteți sări rapid la această pagină din pluginul DSM, de asemenea:

Pasul 10: Efectuarea de actualizări la sistemul dvs.

Deoarece sunteți „bibliotecarul principal” al noului dvs. sistem de proiectare, este logic că veți dori să faceți actualizări din când în când, fie că adăugați noi componente, fie că le actualizați pe cele existente.

Faceți clic în folderul care conține componenta pe care doriți să o actualizați, apoi faceți clic pe butonul +. Dacă DSM detectează că simbolul există deja, veți primi o casetă de dialog care arată astfel:

Decideți dacă doriți să creați un nou sau să înlocuiți cele existente, iar modificarea se va propaga în biblioteca dvs. DSM:

Când actualizările sunt făcute în biblioteca dvs., membrii echipei de proiectare vor primi o notificare despre faptul că componentele au fost actualizate:

Tot ce trebuie să facă este să facă clic pe Sincronizarea bibliotecii pentru a se documenta, iar modificările vor fi reflectate în documentul lor, cu toate înlocuirile existente (cum ar fi textul) păstrate:

Notă foarte rapidă: Oricine nu ar trebui să se uite în simbolurile bibliotecii poate fi setat să fie un Viewer în loc de Admin sau Editor în permisiunile colaboratorului. Protejați-vă sistemul de orice modificări nedorite!

rezumat

În acest articol, am învățat cum să creăm o bibliotecă, să instalăm pluginul Craft, să vă construim biblioteca și să desfășurăm sistemul. Tu și echipa dvs. sunteți acum pregătiți să începeți să folosiți noul dvs. sistem de design!

Am ajutat InVision să creeze un sistem de proiectare a probelor, numit Render, pentru a putea vedea cât de frumos arată în vizualizarea lor web. Descărcați fișierul Sketch și pluginul Craft și puteți începe să asamblați propria bibliotecă cu instrumentul DSM folosind sistemul Render ca punct de plecare.

Faceți clic mai sus pentru a vizualiza sistemul de proiectare completat pe InVision!

Când nu construiesc sisteme de proiectare, lucrez la instrumente Sketch la UX Power Tools pentru a vă face un designer mai bun și mai eficient.

Urmați UX Power Tools pe Twitter
Urmărește-mă pe Twitter
Spune salut pe LinkedIn
Aflați câteva lucruri de pe blogul agenției mele