نظام تصميم للفرق الصغيرة: ابدأ بعشرة مكونات بدل مكتبة ضخمة

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

نظام التصميم باختصار

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

الأساس: متغيرات قبل المكونات

• الألوان بأسماء وظيفية: لون أساسي، لون خلفية، لون نص، لون خطأ، لون نجاح — مو «أزرق ٢».
• مقياس مسافات محدود: مجموعة قيم ثابتة تتضاعف، وممنوع أي رقم خارجها.
• مقياس خطوط: أربعة أو خمسة أحجام تكفي أغلب المنتجات.
• قيمتين أو ثلاث للزوايا الدائرية، ومستويين أو ثلاثة للظلال.

لما تسمّي الألوان بوظيفتها، الوضع الداكن يصير تغيير قيم فقط، مو إعادة تصميم.

أول عشرة مكونات تستحق البناء

• الزر بحالاته: أساسي، ثانوي، معطّل، جاري التحميل.
• حقل الإدخال مع العنوان ورسالة الخطأ.
• البطاقة (Card).
• القائمة والعنصر داخلها.
• شريط التنقل العلوي والسفلي.
• النافذة المنبثقة والورقة السفلية.
• رسالة التنبيه القصيرة (Toast).
• الشارة (Badge) والوسم.
• الحالة الفارغة.
• هيكل التحميل (Skeleton).

التوثيق الخفيف يكفي

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

متى يصير النظام عبئاً؟

• لما تبني مكونات لحالات ما صارت بعد.
• لما يحتاج تعديل بسيط اجتماعاً وموافقات.
• لما يصير كل مكون فيه عشرين خياراً يربك من يستخدمه.
• لما يتوقف المنتج نفسه عشان «نرتّب النظام أولاً».

القاعدة: أي عنصر يتكرر ثلاث مرات، حوّله لمكون. غير كذا، خلّه كما هو.

النظام العربي له قواعد إضافية

أغلب أنظمة التصميم المشهورة مبنية للإنجليزية أولاً. لو منتجك عربي، ضمّن هذي القرارات في النظام نفسه بدل ما تحلها في كل شاشة:

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

كيف تبدأ لو عندك منتج قائم وفوضوي؟

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

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

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