اتصل بنا

كيف ننظم نظام التصميم لدينا

Totoi

أبريل 26, 2023 • 4 min read

Warning: Some parts of the content are automatically translated and may not be completely accurate.

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

ستوضح هذه المقالة الخطوط العريضة لـ Lasting Dynamics طريقة الفريق في إنشاء وتنظيم نظام التصميم الخاص بنا. سنستخدم بعض العناصر الداخلية لدينا، كمثال ونقوم بوصفها خطوة بخطوة.

ولكن قبل التسجيل في الخطوات، يجب أن نعرف ما هو نظام التصميم؟ وكيف يساعدنا؟

ما هو نظام التصميم؟

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

كيف يساعد؟

الهدف الرئيسي من نظام التصميم هو تحسين نظام التصميم هو تحسين كفاءة التصميم وجودته وقابليته للتطوير و أعمال التطوير. يساعد الفرق على توسيع نطاق جهود التصميم والتطوير من خلال توفير إطار عمل لبناء المنتجات الرقمية والحفاظ عليها بمرور الوقت.

تُعد أنظمة التصميم أداة قوية لتبسيط وتعزيز العمل داخل الفريق ولكنها تتطلب تخطيطًا وتنفيذًا دقيقًا لتكون فعالة.

فيما يلي كيفية تنظيم نظام التصميم لدينا في Lasting Dynamics: كما ينبغي أن يكون، يتكون نظام التصميم لدينا من 2 قسمان رئيسيان:

  1. المؤسسة
  2. المكونات

الأسس

في هذا القسم، وصفنا معظم الأجزاء الرئيسية: الألوان، الطباعة، الطباعة، الأيقونات، المسافات, الشبكة والظل كما هو موضح في العرض

نظام التصميم

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

نظام التصميم

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

المكونات

كل مكون من هذه المكونات له صفحة فردية مقسمة إلى 4 نقاط أو جوانب رئيسية، سنقوم بشرح كل جانب بمثال لمكون التبديل من نظام التصميم الخاص بنا:

  1. التوثيق: لكل مكون، نقدم وثائق مفصلة لاستخدام هذا المكون وأنواعه وحالاته وأحجامه المتاحة وكذلك عناصره الفرعية.
نظام التصميم


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

النهج الجيد هو إنشاء مثيل واختبار المكوّن مع جميع الحالات الممكنة لفهم كيفية استخدامه، والتأكد من إجراء مراجعة حوله - باتباع عملية المراجعة الخاصة بنا - والإبلاغ عن أي أخطاء يتم العثور عليها.

نظام التصميم
  1. الرسوم المتحركة: بالإضافة إلى تصميم المكوّنات، تمتلك بعض المكوّنات حالات مختلفة مع تفاعلات بين هذه الحالات، وهذا ما نسميه بالرسوم المتحركة بين المثيلات. في المثال أدناه، يمكننا أن نرى التفاعلات المختلفة بين النُسَخ من حالة إلى أخرى، أثناء التحويم، أثناء الضغط على...
نظام التصميم

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

نظام التصميم

إليك بعض النصائح التي أعددناها لمساعدتك في إنشاء المكونات:

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

نشر المكونات وتحديثها

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

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

مع أحدث إصدارات Figma، أصبح من الأسهل نشر التغييرات الخاصة بك وتتبع تلك التغييرات من أي حقيقة أخرى. في الواقع، أصبح من الممكن الآن تطبيق التغييرات على بعض المكونات والاحتفاظ بالنسخة الأخرى من المكونات الأخرى، وبهذه الطريقة تمنحنا Figma حرية أكبر في إدارة مكوناتنا وتغييراتنا.

نظام التصميم

Totoi

فتح مشروط