Cum se efectuează un inventar de interfață cu InVision

Prin definiție: un inventar este o adunare de elemente urmărite într-o listă. Acest termen nu este ceva nou, dar ideea utilizării acestui concept pentru interfețe este. Brad Frost, care a inventat termenul "Design Atomic", afirmă că crearea de modele agnostice ajută la construirea unor componente mult mai versatile care pot fi utilizate pe scară largă într-un sistem.

În acest scurt tutorial vom folosi InVision pentru a crea un inventar de interfață. Vom lucra pentru un produs finit cu componente și module care sunt perfect reutilizabile și portabile.

Noțiuni de bază

Un "modul" este un set de piese standard sau unități independente care pot fi asamblate pentru a construi o structură mai complexă. Construirea în acest fel face ca rezultatele previzibile să fie mai probabile.

Pentru a atinge acest vârf al utopiei de dezvoltare, vom folosi funcția InVision's Boards.

Aaron Stump pe Dribbble

Tabelele sunt nedureroase pentru a crea și fiecare poate fi intitulat cu un nume și o descriere. Odată ce informațiile dvs. sunt complete, faceți clic pe butonul "creați placa".

Firește, plăcile pot fi utilizate în diverse scopuri, indiferent dacă acestea sunt pentru un audit de inventar, cum ar fi cel pe care îl creăm, sau pentru descoperiri de branding și așa mai departe.

Vom concentra asupra inventarului de interfețe în scopul acestui tutorial, dar rețineți că plăcile pot fi utilizate și pentru alte nevoi contextuale.

Crearea auditului

Acum, când consiliul nostru a fost creat, este timpul să ajungem la afaceri și să începem munca reală pe care am ajuns să o facem; auditul inventarului de interfață. În funcție de fluxul de lucru, acest lucru se poate face în câteva moduri diferite, dar de obicei începe cu capturi de ecran ale "atomilor" interfeței, cum ar fi butoanele, titlurile, intrările, culorile și chiar și pictogramele. Deoarece designul Atomic include și "molecule" și "organisme", puteți să vă deplasați pe fiecare tip pe măsură ce vă ghidează procesul.

În cele mai multe cazuri, moleculele și organismele sunt un nivel mult mai ridicat de inspecție care include piese atomice / moleculare mai mici combinate în moduri unice pentru a crea un întreg mai mare.

Proiectul Alisa Law.

Organizația este cu siguranță cea mai importantă parte pe măsură ce începeți auditurile. După cum puteți vedea mai sus, am rupt o anumită secțiune în modele și variații, astfel încât am putut identifica porțiuni ale interfeței care repeta, dar au avut o ușoară variație. Acest lucru este grozav atunci când vine vorba de timp pentru a codifica, deoarece puteți găsi modele reutilizabile pentru a vă menține CSS lean, construind în cele din urmă un sistem mai modular.

Proiectul Camp Shalom.

Atomii vor ajuta la identificarea variațiilor și chiar vă vor ghida în căutarea convențiilor de nume; cea mai dificilă parte a postului. Atunci când descoperiți atomii, gândiți-vă la ceea ce este un "model de afișare" și care este un "tip de conținut", deoarece ambele vor diferi foarte mult. Dacă această întrebare nu are un răspuns corect, codul dvs. riscă să devieze de la a deveni o unitate portabilă și modulară potrivită pentru contexte diferite.

Exemple de culori sunt un caz de utilizare excelentă și cu plăcile InVision. Acesta poate fi un ghid uriaș de economisire atunci când se discută dacă consistența de culoare este folosită pe întreaga interfață. Modulele pot ajuta, de asemenea, să urmăriți valorile culorilor necesare atunci când utilizați variabilele pentru a stoca informații de culoare pentru a lucra cu pre-procesoarele CSS.

Murmuration Malts project

Beneficiați de panouri pentru a documenta și a discuta convențiile de denumire, funcționalitate, pluginuri / biblioteci și chiar identifica modele de la un nivel superior.

Identificarea modelului a fost utilizată împreună cu comentariul pentru proiectul Murmuration Malts Gif extras din postarea blogului Invision Board Design Collaboration Reimagined

Comentariile și schițarea sunt o caracteristică care poate fi folosită și cu plăci! Utilizați schițarea pentru a indica anumite părți ale interfeței în cauză sau utilizați comentarii pentru a discuta modelele descoperite pentru a consolida cerințele înainte de dezvoltare. Există o mulțime de alte caracteristici de comentare excelente care vin cu InVision Vă încurajez să citiți mai mult pe site-ul lor.

Concluzie

Tabelele sunt cu adevărat la îndemână pentru a fi utilizate pentru descoperiri initale, indiferent dacă sunt în dezvoltare sau vizuale în intenție. Dacă doriți să aflați mai multe, puteți citi totul despre forumurile de pe blogul Invision. Ca întotdeauna, codificare fericit și mulțumiri pentru lectură!