كيفية إنشاء دليل نمط: ابدأ باستخدام إطار عمل واجهة المستخدم

سؤال وجواب مع AdRoll’s UX Designer حول سبب قيامنا بذلك وما تعلمناه

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

مرحبا! أنا آريا سرينيفاسان ، باحث في UX في AdRoll. جلست مع Mason Lee ، مصمم UX الذي يعمل على منتج API الخاص بإعلانات AdRoll الأصلية ، للحديث عن عمله في تطوير دليل أنماط AdRoll.

آريا: لإطلاق الأشياء ، لماذا بدأت مشروع دليل الأنماط؟ ما هي المشكلة التي تحتاج إلى حل؟

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

تبدو الأزرار مختلفة في تصميم المصممين الأفراد وتطبيقاتنا.

النمو السريع في AdRoll يعني أننا كنا نركز على السرعة. نحن الآن شركة أكبر مع العديد من المنتجات ، لذلك كمصمم أعتقد أنه من المهم بالنسبة لنا التأكيد على الاتساق في كيفية تقديم منتجاتنا: من خلال التصميم.

للتركيز على التصميم ، نحتاج أولاً إلى إصلاح التناقضات الحالية. يركز مصممو UX هنا عادةً على منتج واحد أو اثنين ، لذلك من أجل جعل فريقنا يفكر في التصميم في جميع المنتجات ، قمت بإعداد اجتماع أسبوعي "UI Smackdown" لمناقشة إرشادات واجهة المستخدم.

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

آريا: لقد ذكرت أنك تريد أن تكون AdRoll شركة تصميم مركزية - ماذا تقصد بذلك؟

ماسون: أريد أن يضع AdRoll التصميم في المقدمة بحيث يكون أداة تمييز تنافسية - معترف بها من قبل العملاء كمنتج مصمم جيدًا يحل احتياجاتهم حقًا.

آريا: ما هي أهدافك المباشرة لدليل الأزياء؟ هل لديك رؤية طويلة المدى لهذا المشروع؟

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

هدفي في منتصف المدة هو تحديد هذا النمط في التعليمات البرمجية الخاصة بنا في "RollUp" ، مكتبة مكونات واجهة المستخدم الداخلية لـ AdRoll. إذا كان لدينا ورقة أنماط محددة مسبقًا ، فإن كل ما يحتاجه مهندسونا هو نسخه. يمكن للمصممين والمهندسين التحدث باللغة نفسها.

آريا: هل واجهت أي مشاكل أثناء إنشاء دليل الأنماط؟ كيف قمت بحلهم؟

ماسون: واحدة من أكبر العقبات كان الحصول على موافقة من الناس عبر فرق المنتج. لإشراك الجميع ، قمت بإعداد اجتماع بقائمة واضحة من بنود جدول الأعمال التي يجب تغطيتها. لقد قدمت تناقضات في التصميم ، مثل اختلاف القوائم المنسدلة بين المنتجات. يؤدي تقديم أدلة مرئية إلى تشغيل المحادثات ، وفي النهاية يهتم الأشخاص بمنتجاتهم ويريدون الاتساق.

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

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

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

الدلالات صعبة. تسمية لدينا يحتاج إلى معنى. استخدمنا بعض أدوات التعاون الرائعة للحصول على إجماع عندما نتخذ قرارًا بشأن الاسم. على سبيل المثال ، ساعدنا Wake على جمع جميع الأسئلة والقضايا المفتوحة ومناقشة الحلول ومراقبة قرارات UI Smackdown ومواصلة المحادثة مع فريق المنتج الأكبر من خلال التكامل مع Slack.

كيف استخدمنا ويك لمناقشة تناقضات واجهة المستخدم والتعاون في قواعد المكون.

آريا: هل هناك أي شيء فريد حول واجهة المستخدم في AdRoll ، والتي كان عليك أن تفكر فيها عند إنشاء دليل الأنماط؟

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

آريا: هل هناك بعض الأشياء التي ترغب في معرفتها عند بدء إنشاء دليل الأنماط؟

ماسون: أتمنى لو كان لدي فهم أعمق لكيفية عمل جميع منتجاتنا من البداية. على سبيل المثال ، نشارك كيف يعمل منتجنا في اجتماعنا للتصميم الأسبوعي ، لذلك أعرف كيف يعمل SendRoll (منتجنا لإعادة توجيه البريد الإلكتروني) على السطح ، لكن ليس لدي معرفة عميقة بـ SendRoll كما يفعل مصممها. أعتقد أن الفهم الدقيق للمنتج يساعد بالتأكيد عند العمل على دليل الأنماط ، لأنني أفهم بعد ذلك بشكل أفضل جميع حالات الاستخدام المحتملة.

آريا: إذن ما هي أفضل طريقة لتحقيق هذا الفهم المشترك لعملية المصمم ومنتجه؟

ماسون: على الرغم من أننا نركز اهتمامًا فعليًا على شحن منتجاتنا ، فإننا نقوم بعمل جيد في مشاركة عملية التصميم الخاصة بنا في اجتماعنا للتصميم الأسبوعي. أعتقد أننا يمكن أن نكون أفضل حول إغلاق الحلقة بعد كل اجتماع - كيف قام المصمم بتضمين ملاحظات الاجتماع؟ بمجرد أن يتم شحن المنتج واستخدامه من قِبل المعلنين لدينا ، يمكننا أيضًا مشاركة كيفية استخدام المعلنين للمنتجات بناءً على رؤى التحليلات.

آريا: هل كانت هناك أي موارد أشرت إليها أثناء العمل في هذا المشروع؟

ماسون: قرأت التصميم الذري لـ Brad Frost وأجري بحثًا على الإنترنت وتحدثت إلى مصممي UX الآخرين في MeetUps. إذا كنت تعتقد أن شركة معينة تمارس التصميم الجيد ، فمن المحتمل جدًا أنها تحدثت عن دليل أساليبها في مكان ما عبر الإنترنت.

آريا: ما هو وضع دليل الأسلوب الخاص بنا؟

ماسون: لقد قمت بالتقاط وإعادة النظر في جميع عناصر واجهة المستخدم التي نستخدمها في منتجاتنا المختلفة ، وقمنا بتجميعها في مؤسسات ومكونات وأنماط وصفحات ، والتي ستكون بمثابة مصدر للحقيقة لتصاميم واجهة المستخدم الخاصة بنا.

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

شكرا للقراءة!

ابحث عن هذه الموضوعات القادمة بينما نطور دليل أسلوبنا:

  • كيف يبسط إطار عمل واجهة المستخدم التعاون
  • تطوير أوراق أنماط جديدة تستند إلى إطار واجهة المستخدم
  • كيفية بناء موقع دليل الأسلوب
  • الرحلة إلى إيجاد صوتنا ونغماتنا