Mengurangkan Proses Reka Bentuk Microsoft Outlook

Bagaimana Abstrak organisasi file yang lebih baik dan kerjasama dalam pasukan reka bentuk kami

Penerangan imej: Pilihan komponen UI dari sistem reka bentuk kami.

Sebagai pereka, saya telah menggunakan pelbagai alat untuk menyimpan fail dan komunikasi pasukan, tetapi tidak ada yang sangat kuat. Saya boleh memikirkan banyak kali saya kehilangan fail atau menghabiskan berjam-jam untuk mencari reka bentuk seseorang yang paling terkini - membuang masa dan tenaga berharga.

Pemaju mempunyai sistem kawalan versi seperti Git sebentar, tetapi mekanisme serupa untuk pereka belum tersedia - sehingga sekarang.

Abstrak adalah alat yang dibina untuk membantu pereka kami untuk bekerjasama dalam projek. Ia menyediakan kami dengan pasukan hub pusat untuk kerja reka bentuk kami, membantu kami mengurus dan mengekalkan komponen dan fail reka bentuk. Pereka import Lakaran fail ke Abstrak sekali, dan kemudian kita hanya membuka fail dari sana.

Beberapa tahun yang lalu, Miles dan Victor mula menggunakan Abstrak dalam pasukan Outlook dan sejak itu telah digunakan dalam pasukan reka bentuk di seluruh Microsoft. Dalam post ini, saya akan membincangkan bagaimana kami menggunakan Abstrak dan akan berkongsi dengan anda struktur fail kami, proses penggabungan, amalan penyelenggaraan fail, dan beberapa bidang proses kami yang kami fikir dapat diperbaiki. Proses ini berfungsi untuk pasukan besar tetapi kami masih memikirkannya dan ingin mendengar cara kami dapat memperbaiki ini.

Merangka struktur fail projek

Projek kami dibahagikan dengan platform - Android, iOS, Mac, Web, dan Universal (Mail dan Calendar pada Windows 10). Di dalam projek-projek ini fail kami dibahagikan kepada pelbagai bahagian aplikasi kami. Berikut adalah contoh struktur fail iOS kami di dalam Abstrak di mana kami memisahkan fail kami ke dalam bahagian seperti "UI UI Kit", "Mel," dan "Kalendar" untuk memastikan fail berjalan dengan cepat.

Pertama, Mula Berikut adalah fail untuk pereka baru dan rakan kongsi luar. Ia mengandungi maklumat mengenai prinsip reka bentuk kami, cara menggunakan Abstrak, mengeksport aset, dan beberapa petua dan cara menggunakan plugin Sketch.

Mula di sini fail

Seterusnya, UI-Kit adalah perpustakaan Lakaran, yang mengandungi semua komponen, tipografi, ikon dan warna kami. Semua skrin dalam fail reka bentuk menggunakan simbol berkaitan dari perpustakaan ini.

UI-Kit dibahagikan kepada dua muka surat - satu untuk simbol dan satu lagi untuk semua helaian pelekat komponen reka bentuk. Yang terakhir ini termasuk maklumat terperinci mengenai setiap elemen dan susun atur intuitif supaya kami dapat dengan cepat mencari apa yang kami cari.

Fail UI-Kit iOS mengandungi kedua-dua helai pelekat komponen serta simbol itu sendiri

Selebihnya fail mewakili bahagian yang berlainan aplikasi - Onboarding, Mel, Kalendar, Cari, Tetapan dan banyak lagi. Mengasingkan setiap kategori membantu kami mengelakkan fail dan lambat perlahan semasa kami bekerja. Ia juga satu kelebihan apabila menyatukan reka bentuk, kerana apabila kita membuat ciri-ciri baru kita sering hanya perlu menyentuh bahagian-bahagian aplikasi tertentu, yang pada asalnya bermakna konflik yang lebih sedikit

Melangkah melalui proses reka bentuk

Langkah pertama ialah membuat cawangan, yang mengambil semua fail lakaran dalam tuan dan mencipta replika. Fikirkan seperti pendua folder. Untuk mengenal pasti cawangan, kami memberikan label mudah kepada sekeping yang kami sedang kerjakan, menambahkan tajuk yang sesuai selepas label. Kami biasanya menggunakan label seperti "Ciri," "Kit," atau "Eksplorasi" untuk menerangkan projek. Di Outlook, kami digalakkan untuk mencuba idea baru dan mengubah apa sahaja yang kami fikir dapat diperbaiki - ketika kami menggunakan tag seperti "Eksplorasi." Label ini memberi ahli pasukan lain beberapa konteks dan membantu mereka mencari dan memahami apa yang kami mengusahakan. Mencipta cawangan adalah satu kelebihan besar kerana ia bermakna bahawa banyak pereka boleh bekerja pada fail yang sama dan kemudian menggabungkannya kembali ke tuan.

Contoh pelabelan cawangan

Di cawangan baru saya buat fail baru dari dalam Abstrak. Saya menamakan fail seperti "Bekerja," yang membantu orang lain mengetahui mana lelaran terkini. Kemudian saya boleh menyalin papan iklan dari fail lain ke dalam satu ini - ia membantu untuk menggambarkan aliran atau menukar skrin yang sedia ada.

Buat fail

Fail lakaran yang dibuka dari Abstrak mengandungi dialog terapung kecil dengan pilihan untuk Preview & Commit. Ia menjimatkan kerja ke pelayan dan membolehkan orang lain dalam pasukan untuk melihat sebarang perubahan. Komit tidak menjejaskan tuan, ia hanya mengemas kini cawangan. Dalam pasukan saya, kami suka mengikuti peraturan umum untuk melakukan kerja sekali sehari. Sebelum saya membuat perubahan, saya menambah nota deskriptif yang menggariskan perubahan yang telah saya buat. Saya sentiasa mempunyai akses kepada setiap perubahan, jadi jika perlu, saya boleh membalikkan perubahan atau melihat melalui versi sebelumnya fail.

Komit setiap hari

Sebaik sahaja reka bentuk selesai, tiba masanya untuk merapikan lapisan dan menggabungkan reka bentuk kepada fail induk. Pastikan nama lapisan adalah tepat dan pesanan mengikuti apa yang anda lihat pada skrin (dari atas ke bawah). Ini perlu diulang untuk setiap skrin. Saya boleh mencipta satu lagi cawangan baru yang dilabel [Kit] dan menyalin di skrin baru ke fail yang sesuai, atau saya boleh membuat semula skrin ini dari awal menggunakan komponen perpustakaan terkini. Alasan saya memulakan fail baru ialah hanya membawa skrin utama kepada tuan. Saya sentiasa boleh menyemak semula cawangan lama dalam arkib Abstrak kemudian. Ia memakan masa yang sedikit dan tidak menggalakkan kami daripada menggabungkan ciri-ciri lebih kerap. Kami ingin mendengar daripada sesiapa yang mempunyai cadangan untuk meningkatkan proses penggabungan.

Berikut adalah demonstrasi bagaimana kita boleh membuat cawangan dan menggunakan komponen UI dari perpustakaan untuk merancang skrin dalam aplikasi kami. Ia adalah kombinasi Abstrak dan perpustakaan komponen kami yang membolehkan kami bekerja dengan cepat dan cekap sambil memberikan ketelusan dan keterlihatan penuh kepada pasukan. Kami bekerja dari fail yang sama dan fail baru kami tersedia untuk semua orang.

Penerangan imej: Membina skrin Outlook menggunakan komponen UI kami.

Sebelum memilih butang gabungan, saya boleh meminta semakan daripada sesiapa sahaja dalam pasukan. Kami mengamati lapisan simbol berkaitan, penamaan yang betul, simbol pendua, dan perubahan dalam perpustakaan. Penilai biasanya meninggalkan maklum balas di bahagian komentar Abstrak atau pada papan iklan tertentu, memelihara segalanya di tempat yang sama. Setelah ulasan selesai, kami menggabungkan reka bentuk dan mengarkibkan cawangan lama.

Amalan terbaik untuk penyelenggaraan

Pasukan saya berkongsi tanggungjawab untuk mengemas kini kit dengan ciri-ciri mereka dan saya membawa kepada kerja-kerja untuk mengekalkan fail Sketch yang sihat dan terus memperbaiki dan mengemaskini kit-terutamanya untuk akaun untuk kemas kini sistem operasi atau untuk reka bentuk utama yang overhauls.

Pereka boleh memberi maklum balas pada kit pada bila-bila masa, menimbulkan masalah atau memulakan perbualan mengenai potensi penambahbaikan. Kami mengesan maklum balas ini dalam isu GitHub, membolehkan sesiapa sahaja pada masa itu untuk menyumbang. Berikut adalah contoh jenis maklum balas yang kami dijejaki untuk UI-Kit, termasuk mengeluarkan ikon pendua dan menambah warna menimpa kepada semua ikon.

Isu Github untuk mengesan masalah dengan UI-kit

Proses kami dan UI-kit telah dipeluk oleh pasukan reka bentuk di seluruh Microsoft kerana kami bentuk dengan pendekatan yang lebih terbuka dan kolaboratif. Apabila Reka Bentuk Lancar berkembang pada mudah alih, kami akan melihat unsur-unsur biasa melalui produk Microsoft.

Kami masih belajar dan sentiasa mencari jalan untuk memperbaiki proses kami. Kami ingin mendengar bagaimana pasukan-pasukan lain menggunakan Abstrak dalam proses reka bentuk mereka dan cadangan bagaimana kami dapat memperbaiki kami.

Jangan ragu untuk berkongsi idea anda dalam komen .

Untuk terus mengetahui dengan Reka Bentuk Microsoft, ikuti kami di Dribbble, Twitter dan Facebook, atau menyertai program Windows Insider kami. Dan jika anda berminat menyertai pasukan kami, pergi ke aka.ms/DesignCareers.

Ditulis dengan ❃ dan bantuan Miles Fitzgerald dan Pasukan Outlook.