أنشئ خطة تطوير شاملة وقابلة للتنفيذ لبناء تطبيق ويب متجاوب.
View original English sourceأنت مهندس Full-Stack أول ومعماري تجربة مستخدم وواجهات مستخدم (UX/UI) بخبرة تتجاوز 10 سنوات في بناء تطبيقات ويب جاهزة للإنتاج والاستخدام الفعلي. تتخصص في أنظمة التصميم المتجاوبة، أنماط UX/UI الحديثة، وتحسين الأداء عبر مختلف الأجهزة. --- ## المهمة أنشئ **خطة تطوير شاملة وقابلة للتنفيذ** لبناء تطبيق ويب متجاوب يحقق المعايير التالية: ### 1. التجاوب والتوافق عبر الأجهزة - يتكيّف بسلاسة مع: الجوال (320px+)، التابلت (768px+)، أجهزة سطح المكتب (1024px+)، والشاشات الكبيرة (1440px+) - حدّد استراتيجية واضحة لـ **نقاط التوقف (breakpoints)** مع شرح سبب اختيارها - وضّح هل الأنسب اتباع نهج **mobile-first أو desktop-first** مع التبرير - عالج: أهداف اللمس، إيماءات اللمس/النقر، حالات التحويم (hover)، والتنقل بلوحة المفاتيح - تعامل مع: نتوءات الشاشة (notches)، المناطق الآمنة، ووحدات منفذ العرض الديناميكية (dvh/svh/lvh) - غطِّ: تحجيم الخطوط، تحسين الصور (srcset، art direction)، والطباعة المرنة ### 2. الأداء والسلاسة - الأهداف: حركات 60fps، و LCP أقل من 2.5s، و INP أقل من 100ms، و CLS أقل من 0.1 ضمن Core Web Vitals - ضع استراتيجية لـ: التحميل الكسول، تقسيم الكود، وتحسين الأصول والملفات - وضّح أسلوب التعامل مع: CSS containment، و will-change، و GPU compositing للحركات - خطط لـ: دعم العمل بدون اتصال أو التدهور التدريجي مع الحفاظ على تجربة مقبولة ### 3. نظام تصميم حديث وأنيق - عرّف بنية **design tokens** تشمل: الألوان، المسافات، الخطوط، طبقات الارتفاع/الظلال، والحركة - حدّد: استراتيجية لوحة الألوان مع دعم الوضع الفاتح/الداكن، ومنطق اختيار الخطوط وتناسقها - أدرج: مقياس المسافات، فلسفة زوايا الحواف، ونظام الظلال - غطِّ: منهجية الأيقونات، وتوجيهات أسلوب الرسوم/الصور - فصّل: قواعد الاتساق البصري على مستوى المكونات ### 4. أفضل ممارسات UX/UI الحديثة طبّق وخطّط للمبادئ التالية في UX/UI: - **التسلسل البصري وسهولة المسح**: تخطيطات F/Z، الوزن البصري، واستراتيجية المساحات البيضاء - **الاستجابة الراجعة والدلالات التفاعلية**: حالات التحميل، الشاشات الهيكلية، التفاعلات الدقيقة، وحالات الأخطاء - **أنماط التنقل**: تنقل متجاوب مثل hamburger، bottom nav، sidebar، مسارات breadcrumbs، وتوضيح موقع المستخدم داخل التطبيق - **إمكانية الوصول (WCAG 2.1 AA كحد أدنى)**: نسب التباين، أدوار ARIA، إدارة التركيز، ودعم قارئات الشاشة - **النماذج والإدخال**: تجربة التحقق من صحة المدخلات، الأخطاء داخل الحقول، autofill، وأنواع الإدخال المناسبة لكل جهاز - **تصميم الحركة**: حركات هادفة مثل easing curves و duration tokens، مع دعم reduced-motion - **الحالات الفارغة والسيناريوهات الحدّية**: عدم وجود بيانات، الأخطاء، انتهاء المهلة، ورفض الصلاحيات ### 5. خطة المعمارية التقنية - اقترح **حزمة تقنية (tech stack)** مع تبرير الاختيار: إطار العمل، أسلوب CSS، وإدارة الحالة - عرّف: معمارية المكونات، سواء atomic design أو بديل مناسب، وهيكلة المجلدات - حدّد: تنفيذ نظام السمات، واستراتيجية CSS مثل modules أو utility-first أو CSS-in-JS - أدرج: استراتيجية اختبار التجاوب، بما في ذلك الأدوات، نقاط التوقف التي يجب اختبارها، والأجهزة المستهدفة --- ## صيغة المخرجات نظّم الخطة في الأقسام التالية: 1. **الملخص التنفيذي** – فقرة واحدة تلخص النهج العام 2. **استراتيجية التجاوب** – نقاط التوقف، نظام التخطيط، وطريقة التحجيم المرن 3. **مخطط الأداء** – الأهداف، التقنيات، والأدوات 4. **مواصفات نظام التصميم** – التوكنز، لوحة الألوان، الخطوط، والمكونات 5. **خطة مكتبة أنماط UX/UI** – الأنماط الرئيسية، التفاعلات، وقائمة تحقق إمكانية الوصول 6. **المعمارية التقنية** – الحزمة التقنية، الهيكلة، وترتيب التنفيذ 7. **خطة الإطلاق المرحلي** – مراحل مرتبة حسب الأولوية من MVP إلى الصقل ثم تحسين الأداء 8. **قائمة تحقق الجودة** – التحقق قبل الإطلاق عبر كل الأجهزة والمعايير --- ## القيود والأسلوب - كن **محددًا وقابلًا للتنفيذ** وتجنب التوصيات العامة أو المبهمة - قدّم **قيمًا واضحة** عند الحاجة، مثل: «مقياس مسافات مبني على 8px»، أو «400ms ease-out للنوافذ المنبثقة» - نبّه إلى **الأخطاء الشائعة** وكيفية تجنبها - عند وجود أكثر من خيار، **رشّح خيارًا واحدًا مع السبب** بدل سرد كل الخيارات فقط - افترض أن المنتج المستهدف هو **[INSERT APP TYPE: e.g., SaaS dashboard / e-commerce / portfolio / social app]** - الفئة المستهدفة هي **[INSERT: e.g., non-technical consumers / enterprise professionals / mobile-first users]** --- ابدأ بالملخص التنفيذي، ثم انتقل قسمًا بعد قسم.
