كل منتج ينمو يصطدم بالحائط نفسه. أزرار بخمسة درجات زرقاء متقاربة. ثلاث أدوات لاختيار التاريخ بناها ثلاثة مطورين. صفحة إعدادات تبدو وكأنها تنتمي إلى تطبيق آخر. لم يقرر أحد ذلك عن قصد. لقد تراكم ميزةً عاجلة بعد أخرى.
نظام التصميم هو الحل، لكن كثيرًا منها يفشل بطريقة مختلفة: مكتبة مكونات جميلة لا يستخدمها أحد لأنها بُنيت بمعزل عن الفرق، أو يصعب تبنيها، أو تصبح قديمة خلال ربع سنة. النظام الذي ينجح هو الذي يلجأ إليه الناس تلقائيًا لأنه يجعل عملهم أسرع.
في هذا الدليل ستتعرف على:
- ما الذي يجب أن يتضمنه نظام التصميم وما الذي يمكن تأجيله
- كيف تبنيه حول شاشات حقيقية بدلًا من مثال مجرد
- كيف تجعل المصممين والمطورين يتبنونه ويحافظون على حيويته
تنطبق المبادئ نفسها سواء كان فريقك ثلاثة أشخاص أو ثلاثين.
جدول المحتويات
1. ابدأ بجرد لا بلوحة فارغة
قبل تصميم أي شيء جديد، اجمع ما هو موجود. التقط صورًا لكل شاشة في منتجك وجمّع العناصر المتشابهة: كل الأزرار، وكل حقول النماذج، وكل النوافذ المنبثقة، وكل الألوان وأحجام الخطوط المستخدمة.
النتيجة عادةً متواضعة ومفيدة دائمًا. سترى كم عدد الصيغ الموجودة، وأي الأنماط الأكثر استخدامًا، وأين تضر التناقضات الحقيقية بالمستخدمين. هذا الجرد يصبح قائمة مهامك وحجتك أمام الإدارة. كما يمنعك من تصميم نظام مثالي يتجاهل ما يحتاجه المنتج فعلًا.
نصيحة: اعرض الجرد على أصحاب المصلحة. ثلاث وعشرون درجة من الرمادي على شريحة واحدة تقدم حجة نظام التصميم أسرع من أي جدال.
2. حدد الأسس: الرموز أولًا
الأسس هي القرارات الصغيرة التي يُبنى عليها كل شيء آخر. خزّنها كرموز تصميم، أي قيم مسماة تستطيع أدوات التصميم والشيفرة قراءتها معًا.
- الألوان. لوحة محدودة بأدوار دلالية مثل الأساسي والخطر والسطح والنص، لا مجرد قيم سداسية خام. افحص التباين لإتاحة الوصول من البداية.
- الخطوط. سلم طباعي بأحجام وأوزان قليلة، وخطوط تدعم اللاتينية والعربية إذا كان منتجك ثنائي اللغة.
- المسافات. سلم متسق، مثل مضاعفات أربعة أو ثمانية بكسل.
- الزوايا والظلال والحركة. بضعة خيارات مسماة بدلًا من قيم فردية متفرقة.
الرموز تتيح لك تغيير لون العلامة أو إضافة الوضع الداكن في مكان واحد بدل البحث في مئات الملفات.
3. ابنِ المكونات من احتياجات حقيقية
قاوم رغبة بناء خمسين مكونًا دفعة واحدة. ابدأ بتلك التي أظهر الجرد أنها مستخدمة في كل مكان: الأزرار والمدخلات وقوائم الاختيار ومربعات الاختيار والنوافذ المنبثقة والتنبيهات والجداول والتنقل.
لكل مكون، حدد صيغه وحالاته: الافتراضية والتمرير والتركيز والتعطيل والتحميل والخطأ. ابنِ إتاحة الوصول أثناء العمل، بدعم لوحة المفاتيح وتركيز مرئي وتسميات سليمة. إضافتها لاحقًا أغلى بكثير.
- 1لاحظ التكرارمستخدم في ثلاثة أماكن أو أكثر
- 2صمم الصيغالحالات والحالات الحدية
- 3ابنِ واختبرلوحة المفاتيح وقارئ الشاشة
- 4وثّقمتى يُستخدم
- 5أصدربنسخة ومع إعلان
قاعدة جيدة: يصبح النمط مكونًا حين يظهر في ثلاثة أماكن على الأقل. قبل ذلك أبقِه محليًا ومرنًا.
4. وثّق الاستخدام لا المظهر فقط
معرض المكونات يخبر الناس كيف تبدو الأشياء. أما التوثيق فيخبرهم متى وكيف يستخدمونها، وهذا ما يمنع سوء الاستخدام.
لكل مكون، دوّن:
- الغرض. ما المشكلة التي يحلها ومتى تختاره بدل المكونات المشابهة.
- أمثلة افعل ولا تفعل. المقارنات البصرية القصيرة أسرع طريقة للتعليم.
- إرشادات المحتوى. طول التسميات والنبرة وصياغة رسائل الخطأ.
- ملاحظات إتاحة الوصول. سلوك لوحة المفاتيح وتوقعات قارئ الشاشة.
- مقاطع شيفرة. أمثلة جاهزة للنسخ في إطار العمل الفعلي لديك.
إذا لم يجد مصمم أو مطور إجابة في أقل من دقيقة فسيخترع إجابته الخاصة.
5. اربط التصميم بالشيفرة
أكبر أسباب الانحراف هو الفجوة بين ملف التصميم والمنتج المُسلَّم. أغلقها بجعل الطرفين يسحبان من المصدر نفسه.
- احتفظ بالرموز بصيغة مشتركة تغذي مكتبة التصميم والشيفرة معًا، فينتقل التغيير إلى الاثنين.
- سمِّ المكونات بالاسم نفسه في التصميم والشيفرة. إذا قال المصممون "Toast" وقال المطورون "Snackbar" فالارتباك آتٍ.
- استخدم بيئة عرض للمكونات مثل Storybook ليرى المطورون والمصممون كل حالة ويختبروها بمعزل.
- أصدر نسخًا للنظام وانشر ملاحظات الإصدار ليعرف الفرق ما الذي تغير ومتى يحدّثون.
| الطبقة | المسؤول | مثال المخرج |
|---|---|---|
| الرموز | التصميم والهندسة | قيم الألوان والمسافات المشتركة |
| المكونات | الهندسة | مكونات واجهة مختبرة وموثقة |
| الأنماط | التصميم | إرشادات التخطيط والتفاعل |
6. ادفع التبني وضع الحوكمة
نظام التصميم منتج له عملاء داخليون. اعتبر التبني هو العمل الحقيقي.
- اجعل الطريق السهل هو الصحيح. إذا كان استخدام النظام أسرع من البناء من الصفر فسيستخدمه الناس.
- سمِّ مالكًا أو فريقًا أساسيًا صغيرًا. المسؤولية المشتركة دون مالك تعني غياب الصيانة.
- أنشئ عملية مساهمة بسيطة. يجب أن تستطيع الفرق طلب المكونات أو اقتراحها، مع معايير مراجعة واضحة واستجابة سريعة.
- قِس الاستخدام. تتبع عدد الشاشات التي تستخدم مكونات النظام وعدد التجاوزات الفردية.
- انتقل تدريجيًا. استبدل الأنماط القديمة كلما لُمست الشاشات بدل إعادة كتابة شاملة محفوفة بالمخاطر.
توقع أن تكون النسخة الأولى غير مثالية. نظام متواضع مستخدم ومصان يتفوق على نظام مثالي مهمل.
7. الأسئلة الشائعة
متى تكون الشركة جاهزة لنظام تصميم؟
عندما يبني أكثر من مصمم أو مطور شاشات وتبدأ التناقضات في إبطاء التسليم أو إرباك المستخدمين. يمكن للمنتج الصغير أن يبدأ بالرموز وعدد قليل من المكونات الأساسية ثم ينمو مع ظهور الاحتياجات.
هل نبني نظام التصميم بأنفسنا أم نستخدم نظامًا قائمًا؟
البدء من أساس مفتوح المصدر راسخ قد يوفر وقتًا، خصوصًا لإتاحة الوصول والمكونات المعقدة. وكثير من الفرق تضيف فوقه رموزها ومكونات مخصصة قليلة ليحتفظ المنتج بهويته.
ما هي رموز التصميم؟
رموز التصميم قيم مسماة للقرارات الأساسية مثل الألوان وأحجام الخطوط والمسافات والزوايا. ولأن أدوات التصميم والشيفرة تقرآنها معًا، فإن تغيير رمز واحد يحدّث كل مكان يُستخدم فيه.
كيف نمنع نظام التصميم من أن يصبح قديمًا؟
امنحه مالكًا محددًا أو فريقًا أساسيًا صغيرًا، وعملية مساهمة بسيطة، وإصدارات بنسخ وملاحظات، ومقاييس للتبني. وحدّثه ضمن العمل المعتاد على المنتج لا كمشروع جانبي منفصل.
الخاتمة
ينجح نظام التصميم حين ينمو من احتياجات المنتج الحقيقية: اجرد الموجود، وضع الرموز كأساس، وابنِ المكونات الأكثر تكرارًا أولًا، ووثّق كيفية استخدامها، واربط التصميم بالشيفرة، وعامل التبني كإطلاق منتج. العائد هو تسليم أسرع وتناقضات أقل وواجهات تبدو كمنتج واحد.
ابدأ صغيرًا، وأطلقه، ودع الاستخدام يخبرك بما تبنيه بعد ذلك.
💬 ما أكثر عنصر غير متسق في واجهة منتجك اليوم؟
التعليقات