إعداد مواصفات التصميم للاستخدام من قِبَل المطورين Design specs

تقدر تسمعها لو مستعجل 😊

يجب أن تحتوي مواصفات التصميم على جميع المعلومات اللازمة لضمان التوافق بين فرق التصميم وفرق التطوير.

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

محتويات المقال:

ما هي مواصفات التصميم؟
مكونات مواصفة التصميم
أمثلة على المواصفات
نصائح لتعزيز التوافق مع المطورين

ما هي مواصفات التصميم؟

مواصفات التصميم هي وسيلة فعالة لتنظيم التواصل بين فريق التصميم وفريق تطوير البرمجيات.

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

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

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

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

مكونات مواصفة التصميم

ينقسم ملف المواصفات عادةً إلى جزأين رئيسيين:

1. ملف التصميم (مثل Figma)
   
2. تذكرة التطوير

ماذا يتضمن ملف التصميم؟

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

يجب أن يحتوي ملف التصميم على ما يلي:

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

ماذا تتضمن تذكرة التطوير؟

تعتبر فرق التطوير التذكرة بمثابة اتفاق رسمي مع فريق التصميم. ما هو موضح في التذكرة هو ما سيلتزم المطورون بتنفيذه.

عادةً تحتوي التذكرة على معلومات سياقية ضرورية لفهم التصميم بالكامل، مثل:

• هدف التصميم
• ما يدخل ضمن نطاق المشروع وما يستثنى منه
• وصف المتطلبات الوظيفية (مثل خصائص النظام) وغير الوظيفية (مثل الأداء)
• الحالات التي يغطيها التصميم
• المخاطر المحتملة وخطط معالجتها

يتم تجهيز هذه المعلومات من قبل مالك المنتج أو القائد التقني لضمان توافقها مع التصميم المراد تنفيذه.

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

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

تجزئة المواصفات

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

متى يتم إعداد المواصفات؟

تُعدّ مواصفات التصميم خلال مرحلة التصميم ضمن عملية تصميم المنتج من بدايته حتى إطلاقه. بمعنى آخر، يتم إعداد المواصفات بعد إنجاز عمل كبير يتضمن:

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

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

من المسؤول عن إعداد المواصفات؟

عادةً يكون فريق التصميم (سواء كان مكوّناً من مصمم واحد أو عدة مختصين مثل مصمم بصري أو مختص محتوى) مسؤولاً عن إعداد ملف التصميم وإضافة التعليقات التوضيحية التي يحتاج إليها المطورون.

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

أمثلة على المواصفات

المثال الأول: تصميم صغير لتطبيق موبايل

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

في ملف Figma نفسه، توضَّح العلاقات بين الشاشات المختلفة باستخدام التعليقات التوضيحية، مما يمكّن المطورين من فهم طريقة تفاعل المستخدم مع كل جزء من التصميم.

المثال الثاني: تصميم صفحة ويب كبيرة

يتضمن ملف Figma في هذا المثال تفاصيل التخطيط والمحتوى والشكل البصري لصفحة ويب كاملة. يعرض التصميم كيف تبدو الصفحة عند نقاط التوقف المختلفة (Breakpoints) ويُظهر التغيرات اللونية التي يجب أن يدعمها التصميم.

تُستخدم الألوان المختلفة لتمييز التعليقات المخصصة لكل مطور، على سبيل المثال: التعليقات الخاصة بالخلفية (Back-end) باللون الأحمر ليسهل على المطور المختص الوصول إليها. كذلك تُستخدم تعليقات Figma كوسيلة للتنسيق المستمر بين الفريقين.

المثال الثالث: مواصفة لمكوّن تصميم

يوضح هذا المثال من مكتبة تصميم Google Material Design تفاصيل مكوّن زر معين، مثل الحالات المختلفة للأزرار والقيم الدقيقة لخصائصها (مثلاً: ارتفاع الزر يساوي 40dp)، إضافة إلى مراجع تفصيلية تفيد المصممين والمطورين معاً. يُعرض هذا النوع عادةً عبر موقع إلكتروني بدلاً من ملف تصميم فقط.

نصائح لتعزيز التعاون مع المطورين

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

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

 الخلاصة:

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