أساسيات نظام التصميم: من أين تبدأ
ما الذي يتضمنه نظام التصميم
نظام التصميم مجموعة قرارات مشتركة يعيد المصممون والمطورون استخدامها لكي يظهر المنتج ويتصرف بتناسق. وهو أكثر من مكتبة في Figma أو حزمة برمجية.
الرموز
قيم مسماة للألوان والخطوط والمسافات والزوايا والظلال.
المكونات
أجزاء قابلة لإعادة الاستخدام مثل الأزرار وحقول الإدخال والبطاقات.
الأنماط
حلول تجمع عدة مكونات، مثل النماذج والحالات الفارغة.
التوثيق
إرشادات عن متى وكيف يُستخدم كل عنصر.
لا يحتاج كل فريق إلى نظام كبير. يمكن لمنتج صغير أن يبدأ بدليل أنماط مشترك وبضعة مكونات. المهم أن تُدوَّن القرارات مرة واحدة وتُستخدم مجددًا.
ابدأ بالجرد ثم انطلق من نطاق صغير
قبل إنشاء أي شيء اجمع لقطات من الواجهة الحالية وصنّف العناصر المتشابهة. غالبًا ما يكشف الجرد تكرارات متقاربة: عدة درجات رمادية وعدة أنماط للأزرار وعدة أحجام لعنوان واحد. وهذا يبين أين سيفيد النظام أكثر.
- عرّف رموز الألوان وسلّم الخطوط وسلّم المسافات.
- ابنِ أكثر المكونات استخدامًا أولًا: الزر وحقل الإدخال.
- استخدمها في شاشة حقيقية من المنتج قبل إضافة المزيد.
أضف مكوّنًا فقط حين يظهر في موضعين على الأقل، أو حين يسبب غياب الاتساق مشكلات فعلية. يُبقي ذلك النظام صغيرًا ومبنيًا على الاستخدام.
التسمية والإرشاد والملكية
- التسمية. سمِّ الرموز بحسب الغرض لا القيمة: <code>;color-text-primary<;/code>; أصمد من <code>;dark-grey<;/code>;. واستخدم الأسماء نفسها في التصميم والكود.
- إرشادات الاستخدام. اكتب لكل مكوّن متى يُستخدم ومتى لا يُستخدم، مع مثال قصير على ما يُفعل وما لا يُفعل، وأضف ملاحظات إمكانية الوصول والحالات.
- الملكية. حدّد من يتولى صيانة النظام، وصِف كيف يقترح الآخرون تغييرًا: طلب ثم مراجعة ثم قرار.
- الإصدارات. رقّم الإصدارات واحتفظ بسجل للتغييرات، ليعرف الفريق ما الذي تغير وهل قد يكسر التحديث شاشاته.
يجب أن يوجد التوثيق حيث يعمل الناس فعلًا، وأن يعرض أمثلة حقيقية مع الكود بجوار التصميم. والصفحة القديمة أسوأ من غيابها، لذا عيّن لكل صفحة مسؤولًا وراجعها كلما تغير المكوّن.
خطط للتغيير منذ البداية. علّم المكونات القديمة بأنها مهملة لفترة، وبيّن ما يحل محلها، ولا تحذفها إلا بعد أن يحصل الفرق على وقت كافٍ للانتقال.
قِس الاعتماد لا عدد المكونات
المكتبة الكبيرة التي لا يستخدمها أحد فاشلة. الإشارات الأفضل هي عدد الشاشات التي تستخدم مكونات النظام، وعدد الاستثناءات الفردية، وهل يجد المصممون والمطورون ما يحتاجون إليه بسرعة.
نمِّ النظام من الاحتياجات الفعلية لا من الرغبة في الاكتمال.
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.