قائمة تدقيق لتسليم التصميم إلى المطورين

01لماذا تفيد قائمة التسليم

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

تجعل القائمة التسليم مكتملًا ومتوقعًا، وتوفر وقت المصمم أيضًا لأنه يجيب عن أسئلة متكررة أقل.

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

02الحالات والتخطيط والملفات

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

اعرض الحالات جنبًا إلى جنب في إطار واحد بدل ملفات منفصلة ليقارن المطورون بينها بسرعة. سمِّ كل حالة باسمها، مثل «حقل إدخال / خطأ»، واستخدم الأسماء نفسها في الكود.

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

03الحركة وإمكانية الوصول والمحتوى

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

اكتب السلوك في قواعد قصيرة لا فقرات. مثال: «عند الإرسال عطّل الزر واعرض مؤشر تحميل. عند الخطأ انقل التركيز إلى أول حقل غير صالح.» تسهل القواعد القصيرة تحويلها إلى مهام واختبارات.

04الحالات الحدّية والمراجعة

1. اذكر الحالات الحدّية: لا بيانات، عنصر واحد، مئات العناصر، أسماء طويلة جدًا، طلبات بطيئة أو فاشلة، وصور مفقودة.
2. اجمع التصميم وقائمة الرموز والملاحظات المكتوبة في مكان واحد يعرفه المطورون.
3. اتفقوا على من يجيب عن الأسئلة وكيف، حتى لا تضيع في المحادثات.
4. بعد البناء راجع النتيجة الفعلية على أجهزة حقيقية مقابل التصميم. تحقق من الحالات والمسافات والتركيز وطول النص واتجاه RTL، وسجّل الفروق في مهام صغيرة وواضحة.

لا ينتهي التسليم عند مشاركة الملف، بل عندما تطابق النتيجة المبنية التصميم.

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