Microsoft Outlooki kujundamise protsessi kokkuvõte

Kuidas Abstract parandas failide korraldamist ja koostööd meie disainimeeskonnas

Kujutise kirjeldus: valik meie kujundussüsteemi kasutajaliidese komponente.

Kujundajana olen kasutanud mitmesuguseid tööriistu failide salvestamiseks ja meeskonnaga suhtlemiseks, kuid ükski neist pole olnud eriti jõuline. Ma võin mõelda lugematu arv kordi, kui olen kaotanud faili või veetnud tunde, otsides kellegi kõige ajakohasemat kujundust - raiskades väärtuslikku aega ja energiat.

Arendajatel on juba mõnda aega olnud versioonikontrollisüsteeme nagu Git, kuid sarnaseid mehhanisme disainerite jaoks pole seni olnud - seni.

Abstrakt on tööriist, mis on loodud meie disainerite projektide aitamiseks. See pakub meie meeskonnale projekteerimistöö keskpunkti, aidates meil disainikomponente ja faile hallata ja hooldada. Disainerid impordivad eskiisfailid korra abstraktsesse faili ja siis avame need failid lihtsalt sealt.

Mõni aasta tagasi hakkasid Miles ja Victor Outlooki meeskonnas kasutama abstrakti ning see on pärast seda Microsofti disainitiimides kasutusele võetud. Selles postituses räägin ma sellest, kuidas me abstrakti kasutame, ja jagan teiega oma failistruktuuri, liitmisprotsessi, failihooldustavasid ja mõnda meie protsessi valdkonda, mida võiksime meie arvates paremaks muuta. See protsess sobib suurele meeskonnale, kuid alles mõtleme selle välja ja tahaksime teada, kuidas saaksime seda paremaks muuta.

Projekti failistruktuuri kujundamine

Meie projektid jagunevad platvormide kaupa - Android, iOS, Mac, Web ja Universal (Windows 10 ja Mail ja kalender). Nendes projektides jagunevad meie failid meie rakenduse erinevateks osadeks. Allpool on toodud näide meie iOS-i failistruktuurist abstraktne sisu, kus failide kiireks käitamiseks jaotame oma failid jaotisteks nagu „iOS UI-Kit“, „Mail“ ja „Calendar“.

Esiteks on Start Here - fail uute disainerite ja väliste partnerite jaoks. See sisaldab teavet meie kujundamispõhimõtete, abstraktsuse kasutamise, varade eksportimise kohta ja mõned näpunäited Sketchi pistikprogrammide kasutamise kohta.

Alustage siit faili

Järgmisena on UI-Kit visandite kogu, mis sisaldab kõiki meie komponente, tüpograafiat, ikoone ja värve. Kõik disainifailide ekraanid kasutavad selle raamatukogu lingitud sümboleid.

UI-komplekt on jagatud kaheks leheks - üks sümbolite jaoks ja teine ​​kogu kujunduskomponendi kleebise lehe jaoks. Viimane sisaldab üksikasjalikku teavet iga elemendi kohta ja intuitiivset paigutust, et saaksime kiiresti leida otsitava.

IOS UI-Kit -fail sisaldab nii komponentide kleebise lehte kui ka sümboleid ise

Ülejäänud failid tähistavad rakenduse erinevaid osi - sissetulek, e-post, kalender, otsing, seaded ja palju muud. Iga kategooria eraldamine aitab meil töötamise ajal vältida aeglaseid faile ja viivitust. See on eeliseks ka kujunduste ühendamisel, kuna uute funktsioonide loomisel peame sageli puudutama ainult rakenduse teatud osi, mis omakorda tähendab vähem konflikte

Projekteerimisprotsessi läbimine

Esimene samm on haru loomine, mis võtab kõik isandis olevad sketšifailid kokku ja loob koopia. Mõelge sellele nagu kausta kopeerimine. Oksa tuvastamiseks määrame tüki, millega me töötame, lihtsa sildi, lisades sildi järele vastava pealkirja. Projekti kirjeldamiseks kasutame tavaliselt silte, nagu “Feature”, “Kit” või “Exploration”. Outlookis julgustatakse meid proovima uusi ideid ja muutma kõike, mida meie arvates saaks paremaks muuta - see on siis, kui kasutame silti nagu “Exploration”. Need sildid annavad teistele meeskonna liikmetele teatud konteksti ja aitavad neil leida ja mõista, mis me oleme. töötan. Haru loomine on tohutu eelis, kuna see tähendab, et mitu disainerit saavad töötada samade failidega ja hiljem need uuesti ülemrühma ühendada.

Haru märgistamise näide

Uues haru loon uue faili kokkuvõtte alt. Ma nimetan faili näiteks toimivaks, mis aitab teistel teada saada, kus on viimased iteratsioonid. Siis saan kopeerida teistest failidest artboards sellesse faili - see aitab voogu visualiseerida või olemasolevat ekraani muuta.

Looge toimiv fail

Abstraktist avatud sketšifail sisaldab väikest hõljuvat dialoogi eelvaate ja kinnitamise võimalusega. See säästab tööd serverisse ja võimaldab teistel meeskonna liikmetel muudatusi näha. Kohustus ei mõjuta ülemat, see lihtsalt värskendab haru. Minu meeskonnas meeldib meile järgida üldreeglit, et üks kord päevas tuleb tööle panna. Enne muudatuste tegemist lisan kirjeldava märkuse, mis kirjeldab tehtud muudatusi. Mul on alati juurdepääs igale muudatusele, nii et vajadusel saan muudatuse tagasi võtta või vaadata faili eelmisi versioone.

Pühenduge iga päev

Kui kujundus on valmis, on aeg kihid korrastada ja kujundus põhifailideks liita. Veenduge, et kihtide nimed on täpsed ja järjekord vastab ekraanil kuvatule (ülalt alla). Seda tuleks korrata igal ekraanil. Ma võin luua uue uue haru sildiga [Kit] ja kopeerida uutes ekraanides sobivasse faili või saan need ekraanid nullist uuesti luua, kasutades uusimaid raamatukogu komponente. Uue faili loomise põhjus on ainult põhiekraanide toomine kaptenisse. Saan alati hiljem abstraktsete arhiivis oleva vana filiaali uuesti vaadata. See on pisut aeganõudev ja ei lase meil funktsioone regulaarsemalt ühendada. Meile meeldiks kuulda kõigilt, kellel on ettepanekuid liitmisprotsessi parandamiseks.

Allpool on toodud näide sellest, kuidas saame luua haru ja kasutada teegi kasutajaliidese komponente oma rakenduse ekraanide kujundamiseks. Just see abstrakti ja meie komponentide raamatukogu kombinatsioon võimaldab meil töötada kiiresti ja tõhusalt, andes samas meeskonnale täieliku läbipaistvuse ja nähtavuse. Töötame samade failide järgi ja meie uued failid on kõigile kättesaadavad.

Pildi kirjeldus: Outlooki ekraanide loomine meie kasutajaliidese komponentide abil.

Enne liitmisnupu valimist võin meeskonnalt nõuda ülevaatamist. Otsime lingitud sümbolikihte, korrektset nimetamist, dubleeritud sümboleid ja muudatusi raamatukogus. Tavaliselt jätavad arvustajad tagasiside abstraktsete kommentaaride sektsiooni või konkreetsete seinatahvlite juurde, hoides kõike samas kohas. Kui ülevaatused on lõpule viidud, ühendame kujunduse ja arhiivime vana haru.

Hoolduse parimad tavad

Minu meeskond jagab vastutust komplekti ja selle funktsioonide värskendamise eest ning ma teen tööd sketšifailide korrashoidmise ja komplekti pideva täiustamise ja värskendamise nimel - eriti operatsioonisüsteemi värskenduste või suuremate disainilahenduste remondi jaoks.

Disainerid saavad komplektide kohta igal ajal tagasisidet anda, tõstatada küsimusi või algatada vestlusi võimalike paranduste kohta. Jälgime seda tagasisidet GitHubi numbris, võimaldades kõigil õigel ajal oma panuse anda. Allpool on toodud näide tagasisideliikide kohta, mida UI-komplekti jaoks jälgisime, sealhulgas dubleerivate ikoonide eemaldamine ja värvide alistamise lisamine kõigile ikoonidele.

Githubi väljaanne UI-komplektiga seotud probleemide jälgimiseks

Meie protsess ja UI-komplekt on kogu Microsofti disainimeeskondade poolt omaks võetud, kui kujundame avatuma ja koostööl põhineva lähenemisviisi. Kuna Fluent Design areneb mobiilis, näeme Microsofti toodete kaudu ühiseid elemente.

Me alles õpime ja otsime pidevalt võimalusi oma protsessi parendamiseks. Meil oleks hea meel kuulda, kuidas teised meeskonnad kasutavad abstraktneid oma kujundusprotsessis ja soovitusi, kuidas saaksime oma paremaks muuta.

Jagage julgelt oma ideid kommentaarides .

Microsoft Designiga kursis hoidmiseks jälgige meid Dribbble'is, Twitteris ja Facebookis või liituge meie Windows Insider programmiga. Ja kui olete huvitatud meie meeskonnaga liitumisest, minge aadressile aka.ms/DesignCareers.

Kirjutatud ning Miles Fitzgeraldi ja Outlooki meeskonna abiga.