Microsoft Outlook Tasarım Sürecini Soyutlama

Abstract, tasarım ekibimizdeki dosya organizasyonunu ve işbirliğini nasıl geliştirdi?

Görüntü açıklaması: Tasarım sistemimizden UI bileşenlerinin bir seçimi.

Bir tasarımcı olarak, dosya depolama ve ekip iletişimi için çeşitli araçlar kullandım, ancak hiçbiri çok sağlam olmamıştı. Bir dosyayı kaybettim ya da birisinin en güncel tasarımını aramak için saatlerce harcadım - değerli zaman ve enerji harcayarak sayısız kere düşünebilirim.

Geliştiriciler bir süredir Git gibi sürüm kontrol sistemlerine sahipti, ancak tasarımcılar için benzer mekanizmalar henüz mevcut değildi.

Özet, tasarımcılarımızın projeler üzerinde işbirliği yapmasına yardımcı olmak için oluşturulmuş bir araçtır. Tasarım çalışmalarımız için ekibimize merkezi bir merkez sağlayarak tasarım bileşenlerini ve dosyalarını yönetmemize ve korumamıza yardımcı olur. Tasarımcılar Sketch dosyalarını bir defa Özet'e aktarır, sonra dosyaları buradan açabiliriz.

Birkaç yıl önce Miles ve Victor, Outlook ekibinde Soyut'ı kullanmaya başladı ve o zamandan beri Microsoft'taki tasarım ekiplerinde benimsendi. Bu yazıda, Özet'i nasıl kullandığımızı tartışacağım ve dosya yapımızı, birleştirme sürecini, dosya bakım uygulamalarını ve sürecimizin iyileştirilebileceğini düşündüğümüz bazı alanları sizinle paylaşacağız. Bu süreç büyük bir ekip için işe yarıyor ancak hala bunu çözüyoruz ve bunu geliştirebileceğimizi duymayı çok isteriz.

Bir projenin dosya yapısını tasarlama

Projelerimiz platforma bölünmüştür - Android, iOS, Mac, Web ve Universal (Windows 10'da Mail ve Takvim). Bu projelerin içinde dosyalarımız uygulamamızın çeşitli bölümlerine ayrılmıştır. Aşağıda, dosyaları hızlı bir şekilde çalışır durumda tutmak için dosyalarımızı “iOS UI-Kit”, “Mail” ve “Calendar” gibi bölümlere ayırdığımız Özet içindeki iOS dosya yapımızın bir örneği verilmiştir.

Öncelikle, Buradan Başlayın, yeni tasarımcılar ve dış ortaklar için bir dosya. Tasarım ilkelerimiz, nasıl kullanılacağı hakkında Özet, ihracat varlıklarının ve Sketch eklentilerinin kullanımıyla ilgili birkaç ipucu ve püf noktası hakkında bilgiler içerir.

Buradan başlayın dosya

Daha sonra, UI-Kit tüm bileşenlerimizi, tipografimizi, simgelerimizi ve rengimizi içeren Eskiz kütüphanesidir. Tasarım dosyalarındaki tüm ekranlar bu kütüphaneden bağlantılı semboller kullanır.

UI-Kit iki sayfaya bölünmüştür - biri semboller için diğeri tüm tasarım bileşeni etiket sayfası için. İkincisi, her bir öğe ve sezgisel bir düzen hakkında ayrıntılı bilgiler içerir, böylece aradığımızı çabucak bulabiliriz.

İOS UI-Kit dosyası, hem bileşenlerin bir etiket yaprağını hem de sembollerin kendisini içerir

Dosyaların geri kalanı uygulamanın farklı kısımlarını temsil eder - Onboarding, Mail, Calendar, Search, Settings ve daha fazlası. Her kategoriyi ayırmak, yavaş dosyalardan kaçınmamıza ve çalışırken gecikmemize yardımcı olur. Aynı zamanda, tasarımları birleştirirken de bir avantajdır, çünkü yeni özellikler yarattığımızda, uygulamanın yalnızca belirli kısımlarına dokunmamız gerekir; bu da karşılığında daha az çatışma anlamına gelir

Tasarım sürecinde adım atmak

İlk adım, tüm Eskiz dosyalarını ana dosyaya alan ve bir kopya oluşturan bir dal oluşturmaktır. Bir klasörü kopyalamak gibi düşünün. Şubeyi tanımlamak için üzerinde çalıştığımız parçaya, etiketten sonra uygun başlığı ekleyerek basit bir etiket atarız. Projeyi tanımlamak için genellikle “Özellik”, “Kit” veya “Keşif” gibi etiketleri kullanırız. Outlook'ta, yeni fikirler denememiz ve geliştirebileceğimizi düşündüğümüz her şeyi değiştirmemiz isteniyor - işte o zaman “Keşif” gibi bir etiket kullanıyoruz. üzerinde çalışmak. Şube oluşturmak çok büyük bir avantajdır, çünkü birden fazla tasarımcı aynı dosya üzerinde çalışabilir ve daha sonra bunları ana şablonda birleştirebilir.

Şube etiketleme örneği

Yeni dalda Abstract içinden yeni bir dosya oluşturuyorum. Dosyaya, diğer kişilerin en son yinelemelerin nerede olduğunu bilmelerine yardımcı olan “Çalışıyor” gibi bir ad veriyorum. Sonra çalışma yüzeylerini diğer dosyalardan buna kopyalayabilirim - bu bir akışı görselleştirmek veya mevcut bir ekranı değiştirmek için yardımcı olur.

“Çalışan” bir dosya oluşturun

Özet bölümünden açılan bir Eskiz dosyası Önizleme ve Taahhüt seçeneğiyle birlikte küçük bir yüzer iletişim kutusu içerir. Çalışmayı sunucuya kaydeder ve ekipteki diğer kişilerin değişiklikleri görmesini sağlar. Gönderme, master'ı etkilemez, yalnızca şubeyi günceller. Takımımda, günde bir kez iş taahhüdünde bulunma genel kuralını izlemeyi severiz. Değişiklik yapmadan önce, yaptığım değişiklikleri özetleyen açıklayıcı bir not eklerim. Her değişikliğe her zaman erişebiliyorum, bu nedenle gerekirse, bir değişikliği geri alabilir veya dosyanın önceki sürümlerine bakabilirim.

Günlük taahhüt

Tasarım tamamlandıktan sonra katmanları düzenleme ve tasarımı ana dosyalarla birleştirme zamanı. Katman adlarının doğru olduğundan ve sıranın ekranda gördüklerinize uyduğundan emin olun (yukarıdan aşağıya). Bu, her ekran için tekrarlanmalıdır. [Kit] etiketli başka bir yeni şube oluşturabilir ve yeni ekranlarda uygun dosyaya kopyalayabilirim veya en son kütüphane bileşenlerini kullanarak bu ekranları sıfırdan yeniden oluşturabilirim. Yeni bir dosya başlatmamın nedeni ana ekrana sadece ana ekranları getirmektir. Daha sonra Özet arşivindeki eski şubeyi her zaman tekrar ziyaret edebilirim. Biraz zaman alıyor ve özellikleri daha düzenli bir şekilde birleştirmemize engel oluyor. Birleştirme işlemini geliştirmek için önerileri olan herhangi birinden duymayı çok isteriz.

Aşağıda, şubemizi nasıl oluşturabileceğimize ve uygulamamızdaki ekranları tasarlamak için kütüphaneden UI bileşenlerini nasıl kullanabileceğimize dair bir gösteri bulunmaktadır. Bu, Özet ve bileşen kütüphanemizin birleşimidir ve ekibe tam şeffaflık ve görünürlük sağlarken hızlı ve verimli çalışmamızı sağlar. Aynı dosyalardan çalışıyoruz ve yeni dosyalarımız herkese açık.

Görüntü açıklaması: Kullanıcı arayüzü bileşenlerimizi kullanarak Outlook ekranları oluşturma.

Birleştirme düğmesini seçmeden önce, ekipteki herhangi birinden inceleme isteyebilirim. Bağlantılı sembol katmanları, doğru adlandırma, yinelenen semboller ve kütüphanede yapılan değişiklikleri araştırırız. Hakemler genellikle Özeti'nin ya da belirli çalışma yüzeylerinin yorumlar bölümünde her şeyi aynı yerde tutarak geribildirimde bulunurlar. İncelemeler tamamlandıktan sonra, tasarımı birleştirip eski şubeyi arşivleriz.

Bakım için en iyi yöntemler

Ekibim kiti özellikleriyle güncelleme sorumluluğunu paylaşıyor ve Sketch dosyalarını sağlıklı tutmak ve kiti sürekli olarak geliştirmek ve güncellemek için çalışıyorum - özellikle işletim sistemi güncellemelerini veya büyük tasarım revizyonlarını dikkate almak için.

Tasarımcılar herhangi bir zamanda kitler hakkında geri bildirimde bulunabilir, sorun yaratabilir veya potansiyel gelişmeler hakkında konuşmalar başlatabilirler. Bu geri bildirimi GitHub sayısında izleyerek zamanında herkesin katkıda bulunmasına izin veriyoruz. Aşağıda, çift simgeleri kaldırmak ve tüm simgelere renk geçersiz kılmaları eklemek de dahil olmak üzere, UI-Kit için izlediğimiz geri bildirim türlerine bir örnek verilmiştir.

UI-kitiyle ilgili sorunları izlemek için bir Github sorunu

Daha açık ve işbirliğine dayalı bir yaklaşımla tasarlarken sürecimiz ve UI kitimiz Microsoft genelinde tasarım ekipleri tarafından benimsendi. Fluent Design mobilde geliştikçe, ortak ürünlerden Microsoft ürünleri aracılığıyla göreceğiz.

Hala öğreniyoruz ve sürecimizi iyileştirmenin yollarını sürekli arıyoruz. Diğer ekiplerin Tasarım sürecinde Özet'i nasıl kullandığını ve kendimizi nasıl geliştirebileceğimize ilişkin önerileri duymayı çok isteriz.

Fikirlerinizi yorumlarda paylaşmaktan çekinmeyin .

Microsoft Design ile tanıdık kalmak için, bizi Dribbble, Twitter ve Facebook'ta takip edin ya da Windows Insider programına katılın. Eğer ekibimize katılmak istiyorsanız, aka.ms/DesignCareers adresini ziyaret edin.

ve Miles Fitzgerald ve Outlook Ekibi'nin yardımıyla yazılmıştır.