حسّن واجهة وتجربة المستخدم لتطبيق قائم

أنت مهندس Full-Stack أول ومعماري تجربة وواجهة مستخدم (UX/UI) بخبرة تتجاوز 10 سنوات في بناء تطبيقات ويب جاهزة للإنتاج. أنت متخصص في أنظمة التصميم المتجاوبة، أنماط UX/UI الحديثة، وتحسين الأداء عبر مختلف الأجهزة. --- ## المهمة أنشئ **خطة تطوير شاملة وقابلة للتنفيذ** لتحسين تطبيق الويب الحالي، مع التأكد من تحقيق المعايير التالية: ### 1. التجاوب والتوافق عبر الأجهزة - تأكد أن التطبيق يتكيّف بسلاسة مع: الجوال (320px+)، الأجهزة اللوحية (768px+)، سطح المكتب (1024px+)، والشاشات الكبيرة (1440px+) - حدّد **استراتيجية نقاط توقف (Breakpoints) واضحة** بناءً على التطبيق الحالي، مع توضيح مبررات أي تعديلات مقترحة - وضّح ما إذا كان الأنسب اعتماد نهج **Mobile-first أو Desktop-first** بناءً على بيانات المستخدمين الحالية - عالج: مناطق اللمس، إيماءات اللمس والنقر، حالات التحويم (hover)، والتنقل عبر لوحة المفاتيح - تعامل مع: نتوءات الشاشة (notches)، مناطق الأمان (safe areas)، ووحدات العرض الديناميكية (dvh/svh/lvh) - غطِّ: تحجيم الخطوط وتحسين الصور (srcset, art direction)، مع الاستفادة من الأصول الحالية ### 2. الأداء والسلاسة - استهدف مؤشرات الأداء التالية: رسوم متحركة بمعدل 60fps، ‏LCP أقل من 2.5 ثانية، ‏INP أقل من 100ms، ‏CLS أقل من 0.1 ضمن Core Web Vitals - طوّر استراتيجيات لـ: التحميل الكسول، تقسيم الكود، وتحسين الأصول، مع تقييم اختناقات الأداء الحالية - وضّح طريقة التعامل مع: CSS containment وGPU compositing للرسوم المتحركة - ضع خطة لـ: دعم العمل دون اتصال أو التدهور التدريجي المقبول، مع تقييم تنفيذات Service Worker الحالية إن وجدت ### 3. نظام تصميم حديث وأنيق - حسّن أو عرّف **بنية Design Tokens** تشمل: الألوان، المسافات، الخطوط، مستويات الرفع (elevation)، والحركة - حدّد استراتيجية ألوان تدعم الوضعين الفاتح والداكن - أدرج مقياس مسافات، منهجية لاستخدام border radius، ونظام ظلال متسق مع النمط البصري الحالي - غطِّ: أنماط الأيقونات والرسوم التوضيحية بما يضمن توافقها مع عناصر التصميم الحالية - فصّل: قواعد الاتساق البصري على مستوى المكونات، والتعديلات المطلوبة للمكونات القديمة ### 4. أفضل ممارسات UX/UI الحديثة طبّق وخطط للمبادئ التالية بما يناسب التطبيق الحالي: - **التسلسل البصري وسهولة القراءة السريعة**: ضمان استخدام فعّال للوزن البصري والمساحات البيضاء - **استجابة النظام ووضوح قابلية التفاعل**: تنفيذ حالات التحميل، الشاشات الهيكلية (skeleton screens)، والتفاعلات الدقيقة - **أنماط التنقل**: تحسين التنقل المتجاوب مثل قائمة الهامبرغر، شريط التنقل السفلي، والشريط الجانبي، مع مسارات التنقل (breadcrumbs) وإشارات توضّح موقع المستخدم داخل التطبيق - **إمكانية الوصول (WCAG 2.1 AA كحد أدنى)**: تحليل إمكانية الوصول الحالية واقتراح تحسينات مثل نسب التباين وأدوار ARIA - **النماذج والإدخال**: التحقق من تجربة النماذج وتحسينها، بما يشمل رسائل الخطأ داخل الحقول (inline errors) وأنواع الإدخال المناسبة لكل جهاز - **تصميم الحركة**: دمج حركات هادفة مع مراعاة تفضيلات تقليل الحركة reduced-motion - **الحالات الفارغة والسيناريوهات الطرفية**: التعامل بذكاء مع عدم وجود بيانات، الأخطاء، والصلاحيات ### 5. خطة البنية التقنية - اقترح تحديثات على **الحزمة التقنية** إذا لزم الأمر، مع تبرير واضح بناءً على التقنيات المستخدمة حاليًا - عرّف: تحسينات بنية المكونات، وتطوير هيكلة المجلدات - حدّد: آلية تطبيق نظام السمات (theming) واستراتيجية CSS المناسبة (modules, utility-first, CSS-in-JS) - أدرج: استراتيجية اختبار للتجاوب تعالج الفجوات الحالية، وتشمل الأدوات، نقاط التوقف التي يجب اختبارها، والأجهزة المستهدفة --- ## صيغة المخرجات رتّب الخطة وفق الأقسام التالية: 1. **الملخص التنفيذي** – فقرة واحدة تلخّص النهج المقترح 2. **استراتيجية التجاوب** – نقاط التوقف، تعديلات نظام التخطيط، ونهج التدرّج المرن 3. **مخطط الأداء** – الأهداف، التقنيات، وتقييم المؤشرات الحالية 4. **مواصفات نظام التصميم** – Tokens، لوحة الألوان، الخطوط، وتعديلات المكونات 5. **خطة مكتبة أنماط UX/UI** – الأنماط الأساسية، التفاعلات، وقائمة تحقق إمكانية الوصول المحدثة 6. **البنية التقنية** – الحزمة التقنية، الهيكلة، وتعديلات التنفيذ 7. **خطة الإطلاق المرحلي** – مراحل مرتبة حسب الأولوية للتكامل (MVP → صقل التجربة → تحسين الأداء) 8. **قائمة تحقق الجودة** – تحقق ما قبل الإطلاق للتجاوب والجودة على جميع الأجهزة --- ## القيود والأسلوب - كن **محددًا وقابلًا للتنفيذ** — تجنب التوصيات العامة أو المبهمة - قدّم **قيمًا ملموسة** عند الحاجة، مثل: مقياس مسافات بأساس 8px، أو 400ms ease-out للنوافذ المنبثقة - نبّه إلى **الأخطاء الشائعة** عند دمج التغييرات، ووضّح طريقة تجنبها - عند وجود أكثر من نهج، **رشّح خيارًا واحدًا مع السبب** بدل سرد الخيارات فقط - افترض أن الهدف هو **** - المستخدمون المستهدفون هم **[]** --- ابدأ بالملخص التنفيذي، ثم انتقل قسمًا بعد قسم.