A Microsoft Outlook tervezési folyamatának összefoglalása

Hogyan javította az absztrakt a fájlszervezetet és az együttműködést a tervező csapatunkban

Kép leírása: A felhasználói felület összetevőinek kiválasztása a tervező rendszerünkből.

Tervezőként különféle eszközöket használtam a fájlok tárolására és a csapat kommunikációjára, de egyikük sem volt túl robusztus. Számtalanszor gondolok arra, hogy elvesztettem egy fájlt vagy órákat töltöttem, hogy valaki legfrissebb dizájnját keressem - értékes időt és energiát pazarolva.

A fejlesztőknek egy ideje olyan verziókontroll-rendszerük volt, mint a Git, de a tervezőkhöz hasonló mechanizmusok - ez idáig nem álltak rendelkezésre.

Az absztrakt egy olyan eszköz, amelyet arra terveztek, hogy segítsünk tervezőinknek a projektekben való együttműködésben. Ez a csapatunkkal központi csomópontot biztosít a tervezési munkákhoz, segítve a tervezési elemek és fájlok kezelését és karbantartását. A tervezők vázlatfájlokat egyszer importálnak az absztraktba, majd egyszerűen onnan kinyitjuk a fájlokat.

Néhány évvel ezelőtt Miles és Victor elkezdték használni az Abstract alkalmazást az Outlook csapatában, és azóta a Microsoft egész tervezőcsoportjában alkalmazták. Ebben a bejegyzésben azt fogom megvitatni, hogy hogyan használjuk az Összegzést, és meg fogom osztani veled a fájlszerkezetet, az egyesítési folyamatot, a fájlkarbantartási gyakorlatokat és a folyamat néhány olyan területét, amelyeket véleményünk szerint javítani lehetne. Ez a folyamat egy nagy csapat számára működik, de még mindig kitaláljuk, és szeretnénk hallani, hogyan javíthatjuk ezt.

Projekt fájlszerkezetének megtervezése

Projekteinket platformonként kell megosztani - Android, iOS, Mac, Web és Universal (Mail és Naptár a Windows 10 rendszeren). Ezen projekten belül a fájlokat alkalmazásunk különféle szakaszaira osztjuk. Az alábbiakban egy példát mutatunk az absztrakt iOS-fájlszerkezetünkre, ahol a fájlokat részekre bontjuk, például „iOS UI-Kit”, „Mail” és „Naptár”, hogy a fájlok gyorsan futhassanak.

Először: a Start Itt egy fájl az új tervezők és külső partnerek számára. Információkat tartalmaz a tervezési alapelveinkről, az Absztrakt felhasználásáról, az eszközök exportálásáról, valamint néhány tippet és trükköt a Sketch pluginek használatáról.

Start itt fájl

Ezután az UI-Kit a Sketch könyvtár, amely tartalmazza az összes összetevőt, tipográfia, ikonok és színek. A tervezési fájlok összes képernyője csatolt szimbólumokat használ e könyvtárból.

Az UI-készlet két oldalra oszlik - az egyik a szimbólumokra, a másik az összes design alkotóelem matrica lapjára. Ez utóbbi részletes információkat tartalmaz az egyes elemekről és egy intuitív elrendezést, így gyorsan megtalálhatjuk azt, amit keresünk.

Az iOS UI-Kit fájl mind az összetevők matricalapját, mind a szimbólumokat tartalmazza

A többi fájl az alkalmazás különböző részeit képviseli - Beépítés, Levelek, Naptár, Keresés, Beállítások és így tovább. Az egyes kategóriák elválasztása segít elkerülni a lassú fájlokat és a késést munka közben. Előnye is a tervek egyesítésekor, mivel új funkciók létrehozásakor gyakran csak az alkalmazás bizonyos részeire kell megérinteni, ami cserébe kevesebb konfliktust jelent

Lépés a tervezési folyamaton

Az első lépés egy ág létrehozása, amely elfoglalja az összes Sketch fájlt a mesterben, és létrehoz egy replikát. Gondoljon úgy, mint egy mappa lemásolása. Az ág azonosításához egyszerűen felcímkézzük a darabot, amelyen dolgozunk, és a cím után csatoljuk a megfelelő címet. Általában olyan címkéket használunk, mint a „Feature”, „Kit” vagy „Exploration” a projekt leírására. Az Outlookban arra ösztönözünk minket, hogy próbáljon ki új ötleteket, és változtasson meg bármit, amelyről úgy gondoljuk, hogy javítható - erre akkor van szükség, ha olyan címkét használunk, mint a „Felfedezés”. Ezek a címkék más csoporttagok számára adnak némi összefüggést, és segítenek nekik megtalálni és megérteni, mi vagyunk dolgozik. Az ág létrehozása hatalmas előnye, mert azt jelenti, hogy több tervező ugyanazon fájlokon dolgozhat, majd később összeolvaszthatja azokat a mesterrel.

Ágazati címkézési példa

Az új ágban létrehozom egy új fájlt az Absztrakt részből. A fájlt úgy nevezem, mint „Munka”, amely segít másoknak megérteni, hogy hol vannak a legújabb iterációk. Ezután másolhatom rajztáblákat más fájlokból ebbe a fájlba - ez segít az áramlás megjelenítésében vagy a meglévő képernyő megváltoztatásában.

Hozzon létre egy „dolgozó” fájlt

Az Absztraktból megnyitott vázlatfájl tartalmaz egy kicsit lebegő párbeszédablakot az Előnézet és elkötelezettség lehetőséggel. Ez munkát takarít meg a szerver számára, és lehetővé teszi a csapat többi tagjának, hogy bármilyen változást megfigyeljen. A kötelezettségvállalás nem érinti a mestert, csak frissíti az ágot. Csapatomban szeretnénk követni azt az általános szabályt, hogy naponta egyszer vállaljuk a munkát. Mielőtt elköteleztem a változtatásokat, hozzáteszek egy leíró megjegyzést, amely felvázolja az általam elvégzett változtatásokat. Mindig hozzáférhetek minden változtatáshoz, tehát szükség esetén visszaállíthatom a módosítást, vagy átnézem a fájl korábbi verzióit.

Vállaljon minden nap

Miután a terv kész, eljön az ideje, hogy megtisztítsa a rétegeket, és egyesítse azt a törzsfájlokba. Győződjön meg arról, hogy a rétegek neve pontos és a sorrend megegyezik-e a képernyőn láthatóval (fentről lefelé). Ezt meg kell ismételni minden képernyőn. Létrehozhatok egy újabb [Kit] feliratú ágot, és másolhatok az új képernyőkön a megfelelő fájlba, vagy ezeket a képernyőket a semmiből újból létrehozhatom a legújabb könyvtári összetevők segítségével. Egy új fájl elindítása az, hogy csak a főképernyőket hozzuk be a mesterhez. Később mindig újra megtekinthetem a régi ágakat az Absztrakt archívumban. Ez egy kicsit időigényes és elriaszt minket a funkciók rendszeresebb egyesítésétől. Szeretnénk hallani bárkit, aki javaslatokat tesz az egyesítési folyamat fejlesztésére.

Az alábbiakban bemutatjuk, hogyan lehet fiókot létrehozni, és hogyan használhatjuk a könyvtár felhasználói felületének elemeit képernyők megtervezéséhez alkalmazásunkban. Ez az Absztrakt és az összetevő könyvtár ez a kombinációja teszi lehetővé, hogy gyorsan és hatékonyan dolgozzunk, miközben teljes átláthatóságot és láthatóságot biztosítunk a csapatnak. Ugyanazokból a fájlokból dolgozunk, és új fájljaink mindenki számára elérhetők.

Kép leírása: Az Outlook képernyőinek felépítése az UI komponenseinkkel.

Az egyesítés gomb kiválasztása előtt a csapat bármelyikétől kérhetek felülvizsgálatot. Figyelembe vesszük a kapcsolt szimbólumrétegeket, a helyes elnevezéseket, a szimbólumok másolatát és a könyvtár változásait. Az értékelők visszajelzéseket általában az Összegzés kommentár szakaszában vagy az egyes táblákon hagynak, és mindent ugyanabban a helyen tartanak. Amint a felülvizsgálat befejeződik, egyesítjük a tervrajzot és archiváljuk a régi ágot.

A karbantartás bevált gyakorlata

Csapatom megosztja a felelősséget a készlet frissítésével azok tulajdonságaival, és munkámhoz veszem a Sketch fájlok egészséges állapotának fenntartását, valamint a készlet folyamatos fejlesztését és frissítését - különös tekintettel az operációs rendszer frissítéseire vagy a jelentős tervezési átalakításokra.

A tervezők bármikor visszajelzést adhatnak a készletekről, felvehetnek kérdéseket vagy kezdeményezhetnek beszélgetéseket a lehetséges fejlesztésekről. Ezt a visszajelzést egy GitHub kiadásban nyomon követjük, lehetővé téve bárki számára, hogy időben hozzá tudjon járulni. Az alábbiakban bemutatunk egy példát az UI-Kittel kapcsolatos visszajelzésekről, ideértve a duplikált ikonok eltávolítását és az összes ikonra vonatkozó színes felülbírálások hozzáadását.

Github kiadás az UI-készlettel kapcsolatos problémák nyomon követésére

A folyamatot és az UI-készletet a Microsoft egész tervezőcsoportjai átfogták, amikor nyitottabb és együttműködőbb megközelítést tervezünk. Ahogy a Fluent Design mobiltelefonon fejlődik, a Microsoft termékein keresztül közös elemeket fogunk látni.

Még mindig tanulunk és folyamatosan keresünk módszereinket folyamatunk fejlesztésére. Szeretnénk hallani, hogy más csapatok hogyan használják az Abstraktet a tervezési folyamatban, és javaslatokat teszünk arra, hogyan javíthatjuk a miénket.

Nyugodtan ossza meg ötleteit a megjegyzésekben .

A Microsoft Design ismereteinek követése érdekében kövessen minket a Dribbble, a Twitter és a Facebook webhelyen, vagy csatlakozzon a Windows Insider programhoz. És ha érdekli a csapatunkhoz való csatlakozás, lépjen az aka.ms/DesignCareers oldalra.

Írta: , Miles Fitzgerald és az Outlook csapata segítségével.