ملخص عملية تصميم Microsoft Outlook

كيف الخلاصة حسنت تنظيم الملفات والتعاون في فريق التصميم الخاص بنا

وصف الصورة: مجموعة مختارة من مكونات واجهة المستخدم من نظام التصميم لدينا.

كمصمم ، استخدمت العديد من الأدوات لتخزين الملفات والتواصل مع الفريق ، لكن لم يكن أي منها قويًا للغاية. أستطيع أن أفكر في مرات لا تحصى لقد فقدت ملفًا أو قضيت ساعات في البحث عن أحدث تصميم لشخص ما - مما أهدر الوقت الثمين والطاقة.

كان لدى المطورين أنظمة التحكم في الإصدار مثل Git لفترة ، لكن آليات مماثلة للمصممين لم تكن متوفرة - حتى الآن.

الخلاصة هي أداة مصممة لمساعدة مصممينا على التعاون في المشاريع. إنه يوفر لفريقنا مركزًا رئيسيًا لأعمال التصميم لدينا ، مما يساعدنا في إدارة مكونات وملفات التصميم والحفاظ عليها. يقوم المصممون باستيراد ملفات Sketch إلى Abstract مرة واحدة ، ثم نقوم ببساطة بفتح الملفات من هناك.

قبل بضع سنوات ، بدأ Miles و Victor في استخدام Abstract في فريق Outlook ومنذ ذلك الحين تم اعتماده في فرق التصميم عبر Microsoft. في هذا المنشور ، سنناقش كيفية استخدام "الملخص" وسنشارك معك بنية ملفاتنا وعملية الدمج وممارسات صيانة الملفات وبعض مجالات عمليتنا التي نعتقد أنه يمكن تحسينها. تعمل هذه العملية مع فريق كبير ، لكننا لا نزال نكتشفها ونود أن نسمع طرقًا لتحسين ذلك.

تصميم هيكل ملف المشروع

يتم تقسيم مشاريعنا حسب النظام الأساسي - Android و iOS و Mac و Web و Universal (البريد والتقويم على Windows 10). داخل هذه المشاريع ، يتم تقسيم ملفاتنا إلى أقسام مختلفة من تطبيقنا. يوجد أدناه مثال على بنية ملف iOS الخاصة بنا داخل Abstract حيث نفصل ملفاتنا إلى أقسام مثل "iOS UI-Kit" و "Mail" و "Calendar" للحفاظ على تشغيل الملفات بسرعة.

أولاً ، ابدأ من هنا ملف للمصممين الجدد والشركاء الخارجيين. يحتوي على معلومات حول مبادئ التصميم الخاصة بنا وكيفية استخدام الخلاصة وتصدير الأصول وبعض النصائح والحيل حول استخدام مكونات Sketch الإضافية.

بدء هنا الملف

بعد ذلك ، UI-Kit هي مكتبة Sketch ، التي تحتوي على جميع مكوناتنا ، الطباعة ، الرموز ، والألوان. تستخدم جميع الشاشات في ملفات التصميم الرموز المرتبطة من هذه المكتبة.

تنقسم UI-Kit إلى صفحتين - واحدة للرموز وأخرى لكل ورقة ملصقات مكون التصميم. يتضمن الأخير معلومات مفصلة حول كل عنصر وتخطيط سهل الاستخدام حتى نتمكن من العثور بسرعة على ما نبحث عنه.

يحتوي ملف iOS UI-Kit على ورقة لاصقة من المكونات وكذلك الرموز نفسها

تمثل بقية الملفات أجزاء مختلفة من التطبيق - Onboarding ، Mail ، التقويم ، Search ، Settings والمزيد. يساعدنا فصل كل فئة على تجنب الملفات البطيئة والتأخر أثناء العمل. إنها أيضًا ميزة عند دمج التصاميم ، لأنه عندما نقوم بإنشاء ميزات جديدة ، غالبًا ما نحتاج فقط إلى لمس أجزاء معينة من التطبيق ، وهو ما يعني في المقابل تعارضًا أقل

التنقل خلال عملية التصميم

تتمثل الخطوة الأولى في إنشاء فرع ، يأخذ جميع ملفات Sketch في الرئيسي ويقوم بإنشاء نسخة متماثلة. فكر في الأمر مثل تكرار مجلد. لتحديد الفرع ، نقوم بتعيين تسمية بسيطة للقطعة التي نعمل عليها ، مع إلحاق العنوان المناسب بعد التصنيف. نستخدم عادة علامات مثل "Feature" أو "Kit" أو "Exploration" لوصف المشروع. في Outlook ، يتم تشجيعنا على تجربة أفكار جديدة وتغيير أي شيء نعتقد أنه يمكن تحسينه - وذلك عندما نستخدم علامة مثل "الاستكشاف". تمنح هذه التصنيفات لأعضاء الفريق الآخرين بعض السياق وتساعدهم على إيجاد وفهم ما نحن عليه يعمل على. يعد إنشاء فرع ميزة كبيرة لأنه يعني أن مصممين متعددين يمكنهم العمل على نفس الملفات ثم دمجهم لاحقًا في الملف الرئيسي.

مثال على وصف الفرع

في الفرع الجديد ، أقوم بإنشاء ملف جديد من داخل الملخص. أسمي الملف باسم "العمل" ، والذي يساعد الآخرين على معرفة أين توجد التكرارات الأخيرة. بعد ذلك ، يمكنني نسخ اللوحات الفنية من ملفات أخرى إلى هذا الملف - حيث يساعد ذلك في تصور التدفق أو تغيير شاشة موجودة.

قم بإنشاء ملف

يحتوي ملف Sketch المفتوح من Abstract على مربع حوار عائم قليلاً مع خيار Preview & Commit. إنه يحفظ العمل على الخادم ويسمح للآخرين في الفريق بمشاهدة أي تغييرات. الالتزام لا يؤثر على المعلم ، إنه فقط يقوم بتحديث الفرع. نود في فريقي اتباع القاعدة العامة المتمثلة في الالتزام بالعمل مرة واحدة في اليوم. قبل أن أقوم بإجراء التغييرات ، أضف ملاحظة وصفية توضح التغييرات التي أجريتها. لدي دائما إمكانية الوصول إلى كل تغيير ، لذلك إذا لزم الأمر ، يمكنني التراجع عن التغيير أو الاطلاع على الإصدارات السابقة من الملف.

ارتكب يوميا

بمجرد اكتمال التصميم ، حان الوقت لترتيب الطبقات ودمج التصميم في الملفات الرئيسية. تأكد من أن أسماء الطبقات دقيقة وأن الترتيب يتبع ما تراه على الشاشة (من الأعلى إلى الأسفل). يجب تكرار هذا لكل شاشة. يمكنني إما إنشاء فرع جديد آخر يسمى [Kit] ونسخه في الشاشات الجديدة إلى الملف المناسب ، أو يمكنني إعادة إنشاء هذه الشاشات من البداية باستخدام أحدث مكونات المكتبة. السبب في بدء تشغيل ملف جديد هو جلب الشاشات الرئيسية فقط للسيد. يمكنني دائمًا إعادة النظر في الفرع القديم في أرشيف الملخص لاحقًا. إنه يستهلك الكثير من الوقت ولا يشجعنا على دمج الميزات بشكل منتظم. نود أن نسمع من أي شخص لديه اقتراحات لتحسين عملية الدمج.

فيما يلي عرض توضيحي لكيفية إنشاء فرع واستخدام مكونات واجهة المستخدم من المكتبة لتصميم الشاشات في تطبيقنا. هذا المزيج من Abstract ومكتبتنا المكونة هي التي تتيح لنا العمل بسرعة وكفاءة مع إعطاء الشفافية والرؤية الكاملة للفريق. نحن نعمل من نفس الملفات وملفاتنا الجديدة متاحة للجميع.

وصف الصورة: بناء شاشات Outlook باستخدام مكونات واجهة المستخدم الخاصة بنا.

قبل تحديد زر الدمج ، يمكنني طلب مراجعة من أي شخص في الفريق. نحن نبحث عن طبقات الرموز المرتبطة ، والتسمية الصحيحة ، والرموز المكررة ، والتغييرات في المكتبة. يترك المراجعون عادةً تعليقاتهم في قسم التعليقات في الخلاصة أو على لوحات فنية محددة ، مع الاحتفاظ بكل شيء في نفس المكان. بمجرد اكتمال المراجعات ، ندمج التصميم وأرشفة الفرع القديم.

أفضل الممارسات للصيانة

يتشارك فريقي في مسؤولية تحديث المجموعة مع ميزاتها وأؤدي إلى الحفاظ على صحة ملفات Sketch وتحسينها وتحديثها بشكل مستمر - لا سيما لحساب تحديثات نظام التشغيل أو لإصلاحات التصميم الرئيسية.

يمكن للمصممين تقديم تعليقات على المجموعات في أي وقت ، أو إثارة مشكلات أو بدء محادثات حول التحسينات المحتملة. نحن نتتبع هذه التعليقات في مشكلة GitHub ، مما يتيح لأي شخص في الوقت المناسب للمساهمة. فيما يلي مثال على أنواع التعليقات التي قمنا بتتبعها لمجموعة أدوات واجهة المستخدم ، بما في ذلك إزالة الرموز المكررة وإضافة تخطيات الألوان إلى جميع الرموز.

مشكلة في Github لتتبع المشكلات في مجموعة أدوات واجهة المستخدم

تم تبني عمليتنا ومجموعة أدوات واجهة المستخدم من قبل فرق التصميم في جميع أنحاء Microsoft حيث نقوم بتصميم نهج أكثر انفتاحًا وتعاونًا. مع تطور Fluent Design على الهاتف المحمول ، سنرى عناصر شائعة من خلال منتجات Microsoft.

ما زلنا نتعلم ونتطلع باستمرار إلى طرق لتحسين عمليتنا. يسعدنا أن نسمع كيف تستخدم الفرق الأخرى الملخص في عملية التصميم والاقتراحات الخاصة بكيفية تحسيننا.

لا تتردد في مشاركة أفكارك في التعليقات .

للبقاء على اطلاع دائم مع Microsoft Design ، تابعنا على Dribbble و Twitter و Facebook أو انضم إلى برنامج Windows Insider. وإذا كنت مهتمًا بالانضمام إلى فريقنا ، فتوجه إلى aka.ms/DesignCareers.

كتب مع ومساعدة مايلز فيتزجيرالد وفريق Outlook.