لماذا يهمّ نظام التصميم؟
حين لا يوجد نظام تصميم، تُرسم كل شاشة جديدة من الصفر وتتراكم الفروق الصغيرة: ثلاثة أشكال للزر، وأربع درجات من الرمادي، ومسافات تتغير من صفحة إلى أخرى. النظام يوقف هذا التشتت ويسرّع العمل الجديد. كما يتيح تطبيق قواعد إمكانية الوصول والهوية البصرية مرة واحدة بدل تكرارها في كل مكان. وتزداد فائدته كلما اشترك أكثر من شخص أو أكثر من منتج في الشكل نفسه.
ما الذي يتضمنه؟
| العنصر | ما هو | مثال |
|---|---|---|
| قيم التصميم (Design Tokens) | أسماء ثابتة للألوان والخطوط والمسافات والحواف والظلال | لون النص الأساسي، ومسافة صغيرة موحدة |
| المكوّنات | عناصر واجهة قابلة لإعادة الاستخدام، مصممة ومبرمجة | زر، وحقل إدخال، ونافذة منبثقة |
| الأنماط | طريقة جمع المكوّنات لحل مهمة متكررة | نموذج تسجيل الدخول، وشاشة الحالة الفارغة |
| الإرشادات | قواعد مكتوبة للاستخدام والنبرة وإمكانية الوصول | متى نختار الزر الأساسي |
يحتفظ المصممون عادةً بالمكوّنات في أداة مثل Figma، ويحتفظ المطورون بنسخها البرمجية في مكتبة موثقة بأداة مثل Storybook. ويجب أن تتطابق النسختان، وقيم التصميم هي ما يبقيهما متزامنتين. وتجد تفاصيل الخدمة في صفحة أنظمة التصميم.
مثال
تخيّل متجرًا لديه موقع وتطبيق جوال، وكلاهما يعرض بطاقات المنتجات. مع نظام التصميم تُعرَّف البطاقة مرة واحدة: مسافاتها وأحجام نصوصها وتخطيطها من اليمين إلى اليسار للعربية. وحين تتغير ألوان الهوية يعدّل المصمم قيمة واحدة فيتبعها المنتجان. هذا مثال افتراضي وليس من أعمالنا.
أخطاء شائعة
- بناء كل المكوّنات قبل إطلاق أي شيء. ابدأ بالعناصر الأكثر استخدامًا في منتجك.
- غياب المسؤول عن النظام. نظام بلا صاحب يتحول مع الوقت إلى كومة من الاستثناءات.
- تأجيل دعم الاتجاه من اليمين إلى اليسار وإمكانية الوصول، فيصبح تعديلهما لاحقًا مكلفًا.
- توثيق الشكل من دون توضيح السبب، فلا يعرف الفريق متى تنطبق القاعدة.