Rezumarea procesului de proiectare Microsoft Outlook

Cum Rezumatul a îmbunătățit organizarea și colaborarea fișierelor în echipa noastră de proiectare

Descrierea imaginii: o selecție a componentelor UI din sistemul nostru de proiectare.

În calitate de proiectant, am folosit diverse instrumente pentru stocarea fișierelor și comunicarea în echipă, dar niciuna nu a fost foarte robustă. Mă pot gândi de nenumărate ori în care am pierdut un fișier sau am petrecut ore întregi în căutarea celui mai actualizat design al unei persoane - pierdând timp și energie prețioase.

Dezvoltatorii au avut de ceva timp sisteme de control a versiunilor precum Git, dar mecanisme similare pentru designeri nu au fost disponibile până acum.

Abstract este un instrument construit pentru a ajuta proiectanții noștri să colaboreze la proiecte. Oferă echipei noastre un hub central pentru activitatea noastră de proiectare, ajutându-ne să gestionăm și să menținem componente și fișiere de proiectare. Proiectanții importă fișiere Sketch în Abstract, apoi deschidem pur și simplu fișierele de acolo.

Cu câțiva ani în urmă, Miles și Victor au început să folosească Abstract în echipa Outlook și de atunci a fost adoptat în echipele de proiectare din Microsoft. În această postare, voi discuta despre modul în care folosim Rezumatul și vom împărtăși cu dvs. structura noastră de fișiere, procesul de comasare, practicile de întreținere a fișierelor și anumite domenii ale procesului nostru despre care credem că ar putea fi îmbunătățite. Acest proces funcționează pentru o echipă numeroasă, dar încă ne-am gândit și ne-ar plăcea să auzim modalități prin care am putea îmbunătăți acest lucru.

Proiectarea structurii de fișiere a unui proiect

Proiectele noastre sunt împărțite pe platformă - Android, iOS, Mac, Web și Universal (Mail și Calendar pe Windows 10). În cadrul acestor proiecte fișierele noastre sunt împărțite în diferite secțiuni ale aplicației noastre. Mai jos este un exemplu al structurii noastre de fișiere iOS în Rezumat, în care separăm fișierele noastre în secțiuni precum „iOS UI-Kit”, „Mail” și „Calendar” pentru a menține fișierele să funcționeze rapid.

În primul rând, Start Aici este un fișier pentru noi designeri și parteneri externi. Conține informații despre principiile noastre de proiectare, despre cum să folosiți Abstract, exportul de active și câteva sfaturi și trucuri despre utilizarea pluginurilor Sketch.

Fișierul Start aici

În continuare, UI-Kit este biblioteca Sketch, care conține toate componentele noastre, tipografia, pictogramele și culoarea. Toate ecranele din fișierele de design utilizează simboluri legate de la această bibliotecă.

UI-Kit-ul este împărțit în două pagini - una pentru simboluri și alta pentru toată foaia de autocolant a componentelor de design. Acesta din urmă include informații detaliate despre fiecare element și un aspect intuitiv, astfel încât să putem găsi rapid ceea ce căutăm.

Fișierul UI-Kit iOS conține atât o foaie de autocolant, cât și simboluri

Restul fișierelor reprezintă diferite părți ale aplicației - Onboarding, Mail, Calendar, Căutare, Setări și multe altele. Separarea fiecărei categorii ne ajută să evităm fișierele lente și retardul în timp ce lucrăm. De asemenea, este un avantaj atunci când contopiți proiectele, deoarece atunci când creăm noi funcții, de multe ori trebuie doar să atingem anumite părți ale aplicației, ceea ce în schimb înseamnă mai puține conflicte

Trecerea prin procesul de proiectare

Primul pas este crearea unei ramuri, care preia toate fișierele Sketch din master și creează o replică. Gândiți-vă la asta ca la duplicarea unui folder. Pentru a identifica sucursala, atribuim o etichetă simplă piesei pe care lucrăm, adăugând titlul corespunzător după etichetă. De obicei folosim etichete precum „Caracteristică”, „Kit” sau „Explorare” pentru a descrie proiectul. La Outlook, suntem încurajați să încercăm idei noi și să schimbăm orice credem că poate fi îmbunătățit - atunci când folosim o etichetă de genul „Explorare”. Aceste etichete oferă celorlalți membri ai echipei un context și îi ajută să găsească și să înțeleagă ce suntem lucrând mai departe. Crearea unei sucursale este un avantaj uriaș, deoarece înseamnă că mai mulți designeri pot lucra la aceleași fișiere și ulterior să le îmbine în maestru.

Exemplu de etichetare sucursală

În noua ramură creez un nou fișier din Rezumat. Numesc fișierul ceva de genul „Funcționare”, care îi ajută pe alții să știe unde sunt ultimele iterații. Apoi pot copia tablouri de artă din alte fișiere în acesta - ajută la vizualizarea unui flux sau la schimbarea unui ecran existent.

Creați un fișier „de lucru”

Un fișier Sketch deschis din Abstract conține un mic dialog plutitor cu opțiunea Previzualizare și angajare. Salvează munca pe server și permite celorlalți din echipă să vadă orice modificări. Angajamentul nu afectează masterul, ci doar actualizează sucursala. În echipa mea, ne place să urmăm regula generală a angajării muncii o dată pe zi. Înainte de a comite modificări, adaug o notă descriptivă care conține modificările pe care le-am făcut. Am întotdeauna acces la fiecare modificare, așa că, dacă este necesar, pot reveni la o modificare sau să cercetez versiunile anterioare ale unui fișier.

Angajează-te zilnic

După terminarea proiectării, este timpul să ordonați straturile și să îmbinați designul cu fișierele master. Asigurați-vă că numele stratului sunt corecte și ordinea urmează ceea ce vedeți pe ecran (de sus în jos). Acest lucru trebuie repetat pentru fiecare ecran. Pot să creez o altă ramură nouă etichetată [Kit] și să copiez în noile ecrane în fișierul corespunzător, sau pot re-crea aceste ecrane de la zero folosind cele mai recente componente ale bibliotecii. Motivul pentru care încep un nou fișier este acela de a aduce numai ecranele principale către master. Pot revizui întotdeauna vechea ramură din arhiva Abstract mai târziu. Ne consumă puțin timp și ne descurajează să unim funcțiile mai regulat. Ne-ar plăcea să auzim de la oricine are sugestii pentru îmbunătățirea procesului de îmbinare.

Mai jos este o demonstrație a modului în care putem crea o sucursală și cum putem folosi componentele UI din bibliotecă pentru a proiecta ecrane în aplicația noastră. Această combinație de Abstract și biblioteca noastră de componente ne permite să lucrăm rapid și eficient, oferind în același timp transparență și vizibilitate completă echipei. Lucrăm din aceleași fișiere, iar noile noastre fișiere sunt disponibile tuturor.

Descrierea imaginii: Crearea de ecrane Outlook folosind componentele noastre de interfață.

Înainte de a selecta butonul de îmbinare, pot solicita o recenzie de la oricine din echipă. Ne uităm la straturi de simboluri legate, denumirea corectă, simbolurile duplicate și modificările din bibliotecă. Recenzorii lasă de obicei feedback în secțiunea de comentarii din Rezumat sau pe anumite tablouri de artă, păstrând totul în același loc. După finalizarea recenziilor, îmbinăm designul și arhivăm vechea ramură.

Cele mai bune practici pentru întreținere

Echipa mea împărtășește responsabilitatea de a actualiza kitul cu caracteristicile lor și mă ocup să lucrez pentru a menține fișierele Sketch sănătoase și pentru a îmbunătăți continuu și a actualiza setul - în special pentru a ține cont de actualizări ale sistemului de operare sau pentru reviziile majore de proiectare.

Proiectanții pot oferi feedback cu privire la kituri în orice moment, ridicând probleme sau inițieând conversații despre potențialele îmbunătățiri. Urmărim acest feedback într-o problemă GitHub, permițând oricui la timp să contribuie. Mai jos este un exemplu de tipuri de feedback pe care le-am urmărit pentru UI-Kit, inclusiv înlăturarea pictogramelor duplicate și adăugarea de substituții de culoare la toate pictogramele.

O problemă Github pentru a urmări problemele cu kitul UI

Procesul nostru și kit-ul UI au fost îmbrățișate de echipele de proiectare de pe Microsoft pe măsură ce proiectăm cu o abordare mai deschisă și mai colaborativă. Pe măsură ce Fluent Design evoluează pe mobil, vom vedea elemente comune prin produsele Microsoft.

Încă învățăm și căutăm în mod constant modalități de a ne îmbunătăți procesul. Ne-ar plăcea să auzim cum alte echipe folosesc Rezumat în procesul de proiectare și sugestii pentru cum ne-am putea îmbunătăți.

Simțiți-vă liber să vă împărtășiți ideile în comentarii .

Pentru a fi la curent cu Microsoft Design, urmați-ne pe Dribbble, Twitter și Facebook sau alăturați-ne programului nostru Windows Insider. Și dacă sunteți interesat să vă alăturați echipei noastre, accesați aka.ms/DesignCareers.

Scris cu și cu ajutorul lui Miles Fitzgerald și al echipei Outlook.