Microsoft Outlook -suunnitteluprosessin tiivistäminen

Kuinka abstrakti paransi tiedostojen organisointia ja yhteistyötä suunnittelutiimissämme

Kuvan kuvaus: Valikoima käyttöliittymäkomponentteja suunnittelujärjestelmästämme.

Suunnittelijana olen käyttänyt erilaisia ​​työkaluja tiedostojen tallentamiseen ja ryhmäviestintään, mutta mikään niistä ei ole ollut kovin vakaa. Voin ajatella lukemattomia kertoja, kuinka olen kadonnut tiedoston tai viettänyt tunteja etsiessään jonkun uusinta mallia - hukkaan kallista aikaa ja energiaa.

Kehittäjillä on ollut jonkin aikaa Gitin kaltaisia ​​versionhallintajärjestelmiä, mutta vastaavia mekanismeja suunnittelijoille ei ole vielä ollut - toistaiseksi.

Tiivistelmä on työkalu, joka on rakennettu auttamaan suunnittelijaamme tekemään yhteistyötä hankkeissa. Se tarjoaa joukkueellemme keskusyksikön suunnittelutyöllemme ja auttaa meitä hallitsemaan ja ylläpitämään suunnittelukomponentteja ja tiedostoja. Suunnittelijat tuovat Sketch-tiedostot kerran tiivistelmään, ja sitten me vain avaamme tiedostot sieltä.

Muutama vuosi sitten Miles ja Victor aloittivat abstraktin käytön Outlook-tiimissä, ja sen jälkeen se on otettu käyttöön suunnittelutiimissä kaikkialla Microsoftissa. Tässä viestissä aion keskustella siitä, kuinka käytämme abstraktia, ja jaan kanssasi tiedostorakenteemme, yhdistämisprosessin, tiedostojen ylläpitokäytännöt ja joitain prosessimme alueita, joita mielestämme voitaisiin parantaa. Tämä prosessi toimii suurelle joukkueelle, mutta olemme silti selvittämässä sitä ja haluaisimme kuulla tapoja, joilla voimme parantaa tätä.

Projektin tiedostorakenteen suunnittelu

Projektimme on jaettu alustoille - Android, iOS, Mac, Web ja Universal (Mail ja kalenteri Windows 10). Näiden projektien sisällä tiedostot on jaettu sovelluksemme eri osioihin. Alla on esimerkki iOS-tiedostorakenteesta Tiivistelmän sisällä, jossa tiedostoja jaotellaan osiin, kuten “iOS UI-Kit”, “Mail” ja “Kalenteri”, jotta tiedostot pysyisivät nopeasti käynnissä.

Ensinnäkin Start Here on tiedosto uusille suunnittelijoille ja ulkoisille kumppaneille. Se sisältää tietoja suunnitteluperiaatteistamme, kuinka abstraktin käytöstä, omaisuuden viennistä ja muutama vinkki ja temppu Sketch-laajennusten käytöstä.

Aloita tästä tiedosto

Seuraavaksi UI-Kit on Sketch-kirjasto, joka sisältää kaikki komponentit, typografia, kuvakkeet ja värit. Kaikissa suunnittelutiedostojen näytöissä käytetään linkitettyjä symboleja tästä kirjastosta.

UI-Kit on jaettu kahdelle sivulle - yksi symboleille ja toinen kaikille suunnittelukomponenttien tarra-arkeille. Jälkimmäinen sisältää yksityiskohtaisia ​​tietoja jokaisesta elementistä ja intuitiivisen asettelun, jotta voimme löytää nopeasti etsimämme.

IOS UI-Kit-tiedosto sisältää sekä tarra-arkin komponentteja että itse symbolit

Loput tiedostot edustavat sovelluksen eri osia - Inboarding, Mail, Calendar, Search, Settings ja paljon muuta. Kunkin luokan erottaminen auttaa meitä välttämään hitaita tiedostoja ja viiveitä työskennellessämme. Se on etuna myös mallien yhdistämisessä, koska luotaessa uusia ominaisuuksia meidän on usein koskettava vain tiettyjä sovelluksen osia, mikä puolestaan ​​tarkoittaa vähemmän ristiriitoja

Suunnitteluvaiheen läpi

Ensimmäinen vaihe on luoda haara, joka vie kaikki master-luonnokset-tiedostot ja luo replikan. Ajattele sitä kuin kopioi kansio. Haaran tunnistamiseksi osoitamme parhaillaan työskentelevälle kappaleelle yksinkertaisen etiketin, joka lisää asianmukaisen otsikon tarran jälkeen. Käytämme tyypillisesti projektin kuvaamiseksi tarroja, kuten ”Feature”, “Kit” tai “Exploration”. Outlookissa meitä kannustetaan kokeilemaan uusia ideoita ja muuttamaan mitä tahansa, jota mielestämme voidaan parantaa - silloin käytämme tunnistetta, kuten ”Exploration”. Nämä etiketit antavat muille ryhmän jäsenille jonkinlaisen kontekstin ja auttavat heitä löytämään ja ymmärtämään mitä olemme työskentelee. Haaran luominen on valtava etu, koska se tarkoittaa, että useat suunnittelijat voivat työskennellä samoilla tiedostoilla ja yhdistää ne myöhemmin takaisin isäntään.

Esimerkki haaramerkinnöistä

Uuteen haaraan luon uuden tiedoston Abstraktista. Nimeni tiedostolle jotain ”Working”, joka auttaa muita tietämään missä viimeisimmät iteraatiot ovat. Sitten voin kopioida piirrostauluja muista tiedostoista tähän - se auttaa visualisoimaan virtausta tai muuttamaan olemassa olevaa näyttöä.

Luo toimiva tiedosto

Tiivistelmästä avattu luonnointitiedosto sisältää pienen kelluvan valintaikkunan, jolla on mahdollisuus Esikatsella ja sitoutua. Se säästää työtä palvelimelle ja antaa muiden ryhmän jäsenten nähdä muutokset. Sitoumus ei vaikuta päällikköön, se vain päivittää haaraa. Ryhmässämme haluamme noudattaa yleistä sääntöä, joka koskee työn tekemistä kerran päivässä. Ennen muutosten tekemistä lisään kuvaavan huomautuksen, jossa esitetään tekemäni muutokset. Minulla on aina pääsy kaikkiin muutoksiin, joten voin tarvittaessa palauttaa muutoksen tai tarkastella tiedoston aiempia versioita.

Sitoutu päivittäin

Kun suunnittelu on valmis, on aika siivota tasot ja yhdistää malli päätiedostoihin. Varmista, että tasojen nimet ovat oikeat ja järjestys noudattaa sitä, mitä näet näytöllä (ylhäältä alas). Tämä tulisi toistaa jokaiselle näytölle. Voin joko luoda uuden haaran, jolla on merkintä [Kit], ja kopioida uudet näytöt sopivaan tiedostoon, tai voin luoda nämä näytöt uudelleen tyhjästä uusimpien kirjastokomponenttien avulla. Syy, jonka vuoksi aloitan uuden tiedoston, on tuoda vain pääruudut isäntään. Voin aina käydä myöhemmin uudelleen vanhassa osassa Tiivistelmä-arkistossa. Se on vähän aikaa vievä ja estää meitä yhdistämästä ominaisuuksia säännöllisemmin. Haluaisimme kuulla kaikilta, joilla on ehdotuksia yhdistämisprosessin parantamiseksi.

Alla on esimerkki siitä, kuinka voimme luoda haaran ja käyttää kirjaston käyttöliittymäkomponentteja näytön suunnitteluun sovelluksessamme. Juuri tämä abstraktin ja komponenttikirjastomme yhdistelmä antaa meille mahdollisuuden työskennellä nopeasti ja tehokkaasti antaen tiimille täyden avoimuuden ja näkyvyyden. Työskentelemme samoista tiedostoista, ja uudet tiedostomme ovat kaikkien saatavilla.

Kuvan kuvaus: Outlook-näyttöjen rakentaminen käyttöliittymäkomponentteilla.

Ennen yhdistämispainikkeen valitsemista voin pyytää tarkistusta jokaiselta ryhmän jäseneltä. Tarkkailemme linkitettyjä symbolikerroksia, oikeita nimeämistä, kaksoismerkkejä ja kirjaston muutoksia. Arvioijat jättävät yleensä palautteen Abstraktin kommentti-osioon tai tietyille tauluille pitäen kaiken samassa paikassa. Kun arvostelut on valmis, yhdistämme mallin ja arkistoimme vanha haara.

Huoltomenetelmät

Tiimini jakaa vastuun päivittää paketti niiden ominaisuuksilla, ja johdan työhön Sketch-tiedostojen terveyden ylläpitämiseksi ja jatkuvan parantamiseksi ja päivittämiseksi - erityisesti ottaen huomioon käyttöjärjestelmän päivitykset tai suunnittelun suuret uudistukset.

Suunnittelijat voivat antaa palautetta sarjoista milloin tahansa, nostaa esiin kysymyksiä tai aloittaa keskusteluja mahdollisista parannuksista. Seuraamme tätä palautetta GitHub-kysymyksessä, jolloin kuka tahansa voi osallistua siihen. Alla on esimerkki UI-Kit-laitteiden seurannasta, mukaan lukien kaksoiskappaleiden poistaminen ja värien korvaamisen lisääminen kaikkiin kuvakkeisiin.

Github-kysymys UI-paketin ongelmien seuraamiseksi

Microsoftin suunnittelutiimit ovat omaksuneet prosessimme ja UI-paketin suunnitellessamme avoimempaa ja yhteistyöhakuisempaa lähestymistapaa. Sujuvan suunnittelun kehittyessä mobiililaitteissa näemme yleisiä elementtejä Microsoftin tuotteiden kautta.

Opimme edelleen ja etsimme jatkuvasti tapoja parantaa prosessiamme. Toivomme kuulevan, kuinka muut ryhmät käyttävät tiivistelmää suunnitteluprosessissaan ja ehdotuksia siitä, kuinka voisimme parantaa omaamme.

Voit vapaasti jakaa ideasi kommentteissa .

Pysyäksesi tietävänä Microsoftin suunnittelusta, seuraa meitä Dribbblessa, Twitterissä ja Facebookissa tai liity Windows Insider -ohjelmaan. Ja jos olet kiinnostunut liittymään tiimimme, siirry osoitteeseen aka.ms/DesignCareers.

Kirjoitettu : lla ja Miles Fitzgeraldin ja Outlook-tiimin avulla.