ما نظام التصميم، ومتى تحتاج إليه
يتخذ كل فريق يبني منتجاً القرارات الصغيرة نفسها مرة بعد مرة: أي درجة من الأزرق، وكم تكون المسافة، وكيف يبدو الزر حين يكون معطّلاً، وكيف تُعرض رسالة الخطأ. وحين لا توجد إجابة مشتركة، يقرر كل مصمم وكل مطوّر من جديد، فيمتلئ المنتج شيئاً فشيئاً بعناصر متشابهة لكنها غير متطابقة. أما نظام التصميم فيسجّل القرارات مرة واحدة، ويحوّلها إلى أجزاء قابلة لإعادة الاستخدام، ويُبقي التصميم والشيفرة متوافقين.
| الطبقة | ما تتضمنه | مثال |
|---|---|---|
| الأسس | قيم مسمّاة للألوان، والخطوط، والمسافات، وانحناء الزوايا، والظلال، والحركة | سلّم للمسافات، ومجموعة من أنماط النصوص |
| المكوّنات | أجزاء من الواجهة قابلة لإعادة الاستخدام، بحالاتها وأنواعها | الزر، وحقل الإدخال، والجدول، والنافذة الحوارية، وقائمة التنقل |
| الأنماط | حلول مجرَّبة لمهام متكررة | نموذج يتحقق من المدخلات، وشاشة لا بيانات فيها بعد، وبحث مع عوامل تصفية |
| الإرشادات | متى يُستخدم كل جزء وكيف، مع قواعد الكتابة وإمكانية الوصول | متى تستخدم نافذة حوارية ومتى تستخدم صفحة |
| مكتبة الشيفرة | المكوّنات مبرمجة ومجمّعة في حزمة للمطورين | حزمة تُثبَّت في كل منتج |
الفريق الصغير الذي يعمل على منتج واحد يستطيع أن يقطع شوطاً طويلاً بمجموعة مرتبة من ملفات التصميم. أما النظام الكامل فيؤتي ثماره حين يبني عدة أشخاص أو فرق الواجهات في الوقت نفسه، أو حين يكون لديك أكثر من منتج أو منصة، أو حين يصبح عدم الاتساق ظاهراً للعملاء. وتساعدك مقارنتنا بين نظام التصميم ومجموعة عناصر الواجهة الجاهزة على تحديد القدر الذي تحتاج إليه.
ابدأ بمراجعة ما هو موجود
أسوأ بداية أن تصمم نظاماً مثالياً بمعزل عن المنتجات القائمة، ثم تطلب من الفرق أن تتبناه. ابدأ بدلاً من ذلك بجمع ما تحتويه منتجاتك فعلاً: التقط لقطات شاشة لكل زر وحقل إدخال وجدول وبطاقة ونافذة حوارية وعنوان فيها، ثم صنّفها في مجموعات. وغالباً ما تأتي النتيجة غير سارّة: اثنا عشر شكلاً للأزرار، وعدة درجات من الرمادي لا يكاد يفرّق بينها شيء، وثلاث طرق مختلفة لعرض الخطأ.
- 01
اجمع
كل نسخة مختلفة من كل عنصر في الواجهة، من المنتجات العاملة ومن الشيفرة.
- 02
صنّف وعُدّ
كم شكلاً مختلفاً يوجد لكل عنصر، وأيها الأكثر استخداماً.
- 03
حدّد ما هو مقصود
بعض الاختلافات مقصود، ومعظمها جاء مصادفة. علّم كلاً منها.
- 04
اختر ما يبقى
لكل عنصر، النسخة التي تعتمدها معياراً، بعد تحسينها حيث يلزم.
- 05
سجّل ما ينقص
حالات لم يصممها أحد: التحميل، والشاشة الفارغة، والخطأ، والتعطيل، والتركيز.
تمنح المراجعة النظامَ محتواه، وتُظهر لأصحاب القرار لماذا يحتاجون إليه، وتوفر نقطة بداية يُقاس عليها التقدم لاحقاً.
اتفق على الأسس
- رموز التصميم. أعطِ كل قيمة اسماً، فيُشار إلى اللون بوظيفته، مثل «الإجراء الأساسي» أو «حد خفيف»، لا برمزه أبداً. بهذه الرموز يُجرى التغيير مرة واحدة فيسري في كل مكان، وبها يتقاسم التصميم والشيفرة القيم نفسها.
- الألوان. لوحة محدودة لكل لون فيها دور محدد، يُفحص تباينها وفق إرشادات إمكانية الوصول في كل تركيبة ستُستخدم.
- الخطوط. سلّم صغير من أنماط النصوص بأحجامها وأوزانها وارتفاعات أسطرها، يُختبر بأطول محتوى لديك وبكل لغة يدعمها منتجك.
- المسافات والتخطيط. سلّم واحد للفراغات والهوامش الداخلية، وقواعد للشبكات ولنقاط التحول بين أحجام الشاشات.
- السمات. إن كنت تحتاج إلى وضع داكن أو إلى أكثر من علامة تجارية، فرتّب رموز التصميم لذلك من البداية، لأن إضافته لاحقاً عمل شاق.
- اتجاه الكتابة. إن كان أي من منتجاتك سيدعم لغة تُكتب من اليمين إلى اليسار، فابنِ المكوّنات من الآن بمسافات لا ترتبط باتجاه الكتابة.
- إمكانية الوصول. مؤشرات التركيز، وأحجام مساحات النقر، وسلوك لوحة المفاتيح، وتسميات قارئ الشاشة، تُحسم كلها في هذا المستوى ليرثها كل مكوّن.
ابنِ المكوّنات في التصميم والشيفرة معاً
المكوّن الموجود في ملف التصميم وحده صورة لا أكثر، والموجود في الشيفرة وحدها لا يراه المصممون. ولا يعمل النظام إلا حين يوجد كل مكوّن في الاثنين، بالاسم نفسه والأنواع نفسها والسلوك نفسه، وحين يبنيه مصمم ومطوّر معاً.
- 01
ما الغرض منه، وفيمَ لا يُستخدم؟
ما تحدده لكل مكوّنجملة واحدة عن الغرض تمنع أن تُلبّى الحاجة نفسها بثلاثة مكوّنات مختلفة.
- 02
ما أنواعه ومقاساته؟
ما تحدده لكل مكوّنأقل ما أظهرت المراجعة الحاجة إليه، فكل نوع إضافي عبء صيانة جديد.
- 03
ما حالاته؟
ما تحدده لكل مكوّنالحالة الافتراضية، ومرور المؤشر، والتركيز، والضغط، والتعطيل، والتحميل، والخطأ. والحالات الناقصة هي المواضع التي يبدو فيها المنتج غير مكتمل.
- 04
كيف يتصرف؟
ما تحدده لكل مكوّنالتفاعل بلوحة المفاتيح، وما يحدث مع النصوص الطويلة، وكيف يتكيف مع الشاشات الضيقة.
- 05
ما قواعد المحتوى التي تنطبق عليه؟
ما تحدده لكل مكوّنطول التسميات، واستخدام الأحرف الكبيرة في النصوص الإنجليزية، ونبرة الرسائل.
- 06
هل يلبّي معايير إمكانية الوصول؟
ما تحدده لكل مكوّنيُختبر بلوحة المفاتيح وبقارئ الشاشة قبل إصداره.
ابدأ بنحو عشرة مكوّنات تظهر في كل شاشة تقريباً، تختارها من نتائج المراجعة. فإطلاق هذه المكوّنات بجودة عالية، وضمان استخدامها فعلاً، أثمن من كتالوج كامل لم يتبنّه أحد.
وثّق النظام لمن سيستخدمه
التوثيق هو واجهة النظام. وسيحكم المصممون والمطورون على الجهد كله بسؤال واحد: هل يستطيعون، في دقيقة واحدة، أن يجدوا المكوّن، ويروا كيف يتصرف، وينسخوه إلى عملهم؟ لذلك ينبغي أن تعرض صفحة كل مكوّن أمثلة حية، والخيارات المتاحة، وإرشادات عن متى يُستخدم ومتى لا يُستخدم، والشيفرة اللازمة لإدراجه.
احفظ التوثيق إلى جانب الشيفرة، وولّد أكبر قدر منه من المكوّنات نفسها، حتى لا يتقادم. فالمستند المنفصل الذي يُحدَّث يدوياً يصف النظام كما كان، لا كما هو.
مثال تطبيقي
نظام تصميم لشركة برمجيات لوجستية
هذا مثال افتراضي يوضح نظاماً بُني انطلاقاً من مراجعة، وتبنّته الفرق تدريجياً. شركة برمجيات لوجستية لديها تطبيق ويب، وبوابة للعملاء، وتطبيق للسائقين، تبنيها ثلاثة فرق.
- المراجعةتكشف لقطات الشاشة 14 شكلاً للأزرار، و9 درجات من الرمادي للنصوص، و5 أدوات مختلفة لاختيار التاريخ. ولا يتطابق في المنتجات الثلاثة إلا الزر الأساسي.
- الأسسيُتفق على مجموعة من رموز التصميم: 6 أدوار للألوان مع درجاتها، و7 أنماط للنصوص، وسلّم واحد للمسافات. وتُصحَّح حالتان في الألوان الحالية لا تحققان التباين المطلوب.
- الإصدار الأوليبني مصمم واحد ومطوّر واحد، على مدى ربع سنة، اثني عشر مكوّناً اختيرت بحسب تكرارها في المراجعة، في أداة التصميم وفي حزمة برمجية، بينما تراجع الفرق الثلاثة العمل.
- التبنّيتعتمد بوابة العملاء الحزمة قبل غيرها، إذ كانت ميزات جديدة مقررة لها. ويرفع فريقها النواقص كل أسبوع، فتُوسَّع أربعة مكوّنات تلبيةً لها.
- الحوكمةمسؤول بدوام جزئي، وقناة مشتركة للطلبات، وإصدار كل أسبوعين مع ملاحظاته. ويحق لأي فريق أن يقترح مكوّناً جديداً إذا أثبت الحاجة إليه في موضعين.
بعد عام، صار منتجان من الثلاثة يستخدمان الحزمة في معظم شاشاتهما. وانخفض عدد أشكال الأزرار في المنتجات العاملة من 14 إلى 3، وصار تجميع الشاشات الجديدة في البوابة أسرع بوضوح مما كان عليه.
أدِر النظام وحافظ عليه
نظام يدوم
- مسؤول محدد بالاسم، له وقت مخصص لهذه المهمة
- مسار واضح للطلبات والمساهمات
- إصدارات مرقّمة مع ملاحظات بما تغيّر
- سياسة معلنة لإيقاف المكوّنات القديمة
- قياس لمدى الاستخدام، ومعالجة للنواقص
نظام يتآكل
- بُني على أنه مشروع ينتهي، ثم تُرك بلا مسؤول
- الفرق تنسخ المكوّنات وتعدّل نسخها الخاصة
- ملفات التصميم والشيفرة تتباعد شيئاً فشيئاً
- تغييرات تكسر التوافق تُطلق دون تحذير
- مكوّنات جديدة تُضاف عند الطلب دون التحقق من الحاجة إليها
- 01
حدّد نموذج المسؤولية
فريق مركزي صغير، أو مساهمون من فرق المنتجات ينسّق بينهم مسؤول واحد. كلا النموذجين ينجح، أما غياب المسؤول فلا.
- 02
ضع قواعد للمساهمة
كيف يقترح الفريق تغييراً، ومن يراجعه، وما مستوى الجودة الذي يجب أن يبلغه.
- 03
رقّم الإصدارات وأعلن عنها
إصدارات مرقّمة تتيح لكل منتج أن يحدّث حين يكون جاهزاً، مع ملاحظات وإرشادات للانتقال عند كل تغيير يكسر التوافق.
- 04
قِس مدى الاستخدام
نسبة الشاشات أو الشيفرة التي تستخدم مكوّنات النظام، وعدد التعديلات الفردية التي تتجاوزه. وراجع هذه الأرقام بانتظام.
- 05
شذّب النظام
احذف المكوّنات التي لا تكاد تُستخدم أو ادمجها في غيرها. فالنظام يزداد ثقلاً ما لم يتولَّ أحد إخراج ما زاد عن الحاجة.
قائمة التحقق من نظام التصميم
قائمة التحقق من نظام التصميم
0 من 11 منجزةماذا تفعل الآن
خصّص نصف يوم لجمع كل الأزرار وكل ألوان النصوص من منتجاتك العاملة في صفحة واحدة، ثم اعرضها على من يموّلون التصميم والتطوير. هذه الصفحة وحدها تقنع عادةً أكثر من أي عرض تقديمي، وهي الخطوة الأولى في المراجعة.
تشرح صفحة تطوير أنظمة التصميم كيف نبني هذه الأنظمة جنباً إلى جنب مع فرق المنتجات. أرنا منتجاتك، وسنقول لك أي قدر من النظام تحتاج إليه.
أسئلة شائعة
كم يستغرق بناء نظام التصميم؟
الإصدار الأول المفيد، بأسسه وأكثر مكوّناته استخداماً في التصميم والشيفرة، يحتاج إلى عمل مركّز يؤديه فريق صغير خلال مدة محدودة. لكن النظام لا يكتمل أبداً، فهو ينمو ويتغير مع المنتجات التي يخدمها. لذلك خطّط للإصدار الأول على أنه مشروع، ولكل ما بعده على أنه صيانة مستمرة لها ميزانيتها الخاصة.
هل نعتمد نظاماً جاهزاً مفتوح المصدر أم نبني نظامنا الخاص؟
البناء على مكتبة مكوّنات راسخة مفتوحة المصدر يوفّر قدراً كبيراً من العمل في السلوك وإمكانية الوصول، وكثير من المؤسسات تعدّل مظهر إحدى هذه المكتبات لتطابق علامتها التجارية. أما النظام المخصص بالكامل فيكون منطقياً حين تحتاج منتجاتك إلى أنماط تفاعل غير مألوفة، أو حين يكون تميّز التصميم في صميم ما تقدمه. وفي الحالتين، تبقى رموز التصميم والأنماط والإرشادات ملكاً لك.
من ينبغي أن يتولى نظام التصميم؟
شخص محدد بالاسم أو فريق صغير له وقت مخصص، وفي الغالب مصمم ومطوّر يعملان معاً، ويكونان مسؤولَين أمام من يقود المنتج. أما إسناد المسؤولية مهمةً جانبية لمن يعمل بدوام كامل على المنتج، فغالباً ما ينتهي بالفشل. وفي الشركات الأصغر، يمكن أن ينجح ترتيب يتولى فيه مسؤول بدوام جزئي وصلاحيات واضحة إدارة النظام، بدعم من مساهمين في كل فريق.
كيف نجعل الفرق تستخدمه؟
اجعله أسهل طريقة للبناء. فالمكوّنات يجب أن تكون موثوقة وموثّقة وسريعة التثبيت، والطلبات يجب أن يُرد عليها بسرعة. ابدأ بفريق واحد لديه حاجة حقيقية، وحُلّ مشكلاته على مرأى من الجميع، ودع النتائج تقنع الآخرين. أما الإلزام من غير جودة فلا ينتج إلا حلولاً التفافية صامتة، ونسخاً خاصة من المكوّنات.
كيف نعرف أن نظام التصميم يعمل كما ينبغي؟
تابع نسبة الواجهة المبنية من مكوّنات النظام، وعدد التعديلات الفردية التي تتجاوزه، والوقت الذي يستغرقه تجميع الشاشات الجديدة، وعدد حالات عدم الاتساق البصري التي تظهر في المراجعة. وآراء المصممين والمطورين مهمة أيضاً. وأوضح علامة على أن النظام يخدم مستخدميه نسبة استخدام ترتفع وتعديلات فردية تنخفض.