تصميم 3 واجهات لتطبيق تنافس وتحديات

تصميم تطبيقات الهواتف الذكية اختبار تطبيقات الجوال تصميم UI UX تطوير البرمجيات تصميم تطبيقات الهواتف الذكية اختبار تطبيقات الجوال تصميم UI UX تطوير البرمجيات

متطلبات تصميم واجهات برنامج مسابقة التحدي المتطلبات الرئيسية : جميع الواجهات يتم تصميمها على منصة Figma ويتم إضافتها للمشروع الحالي وتدعم التحويل بين اللغة العربية والإنجليزية من ناحية الاتجاهات والنصوص مع وجود رمز صغير لكرة أرضية مثلاً لتغيير اللغة في أعلى كل واجهة. 1. واجهة اختيار التحدي العناصر الرئيسية: - العنوان: مثل: "اختر التحدي الخاص بك!" مع رمز مميز (مثل أيقونة علم أو لعبة). - تصنيف التحديات: عرض أنواع التحديات في شكل بطاقات أو شبكة مثال (اللغة العربية - اللغة الإنجليزية - الرياضيات - الكيمياء .. ) مع وجود أيقونات مميزة لكل نوع مستوى الصعوبة: (سهل، متوسط، صعب) باستخدام رموز أو ألوان. الحركات البسيطة: عند المرور فوق أيقونة التحدي، تظهر تفاصيل إضافية أو تتحرك البطاقات بشكل جذاب. شريط التقدم: أعلى الشاشة شريط يوضح إنجاز الطالب في التحديات السابقة (مثلاً: "5/10 تحديات مكتملة"). شارات تحفيزية: شارات يمكن للطالب الفوز بها (مثل "نجم الرياضيات" أو "ملك السرعة"). -إضافة 4 أيقونات أيقونات : لعرض الرسائل والإشعارات - قائمة الترتيب - الإنجازات - الإعدادات أسفل الواجهة. 2. واجهة الترتيب (Leaderboard) العناصر الرئيسية: - العنوان: "لوحة الترتيب" مع أيقونة مميزة (مثل كأس أو نجمة) لإبراز أهمية اللوحة. - البحث والتصفية: تشمل قائمة منسدلة بأنواع التحديات - التصنيفات: 3 أزرار (الأعلي مطلقاً - هذا الشهر - هذا الأسبوع) - الرتب المميزة: استخدم ألوانًا أو رموزًا (مثل الميداليات الذهبية والفضية والبرونزية) للطلاب في المراتب الثلاثة الأولى. - ترتيب المستخدمين (الاسم - البلد - عدد النقاط) مع مراعاة أن يحتوي الترتيب: الصورة الشخصية: صورة رمزية أو صورة شخصية للطالب (يمكن تخصيصها). اسم الطالب: الاسم الكامل مع إمكانية عرض الاسم الأول فقط للخصوصية. النقاط أو الرصيد: العدد الإجمالي للنقاط المكتسبة في التحديات. 3. واجهة نتيجة التحدي (الفوز أو الخسارة) يجب أن تكون الواجهة حماسية، واضحة، ومصممة لتحفيز الطالب على المشاركة في المزيد من التحديات. العنوان: "نتيجتك!" أو "لقد أنجزت التحدي!" مع رمز مميز (مثل كأس، نجمة، أو صورة مبهجة). النقاط الرئيسية: -إضافة رسومًا متحركة عند عرض النتيجة (مثل نجوم متطايرة أو نقاط تتزايد تدريجيًا). -الدرجة: عرض النتيجة النهائية بطريقة جذابة وكبيرة (مثلاً: "90/100"). -المرتبة: إذا كانت هناك منافسة بين عدة طلاب، أظهر المرتبة (مثلاً: "أنت في المركز الثاني!"). -النقاط المكتسبة: عرض عدد النقاط التي أضافها الطالب إلى رصيده العام. -الإنجازات: أظهر الشارات أو الأوسمة المكتسبة (مثل "متميز في الرياضيات" أو "سرعة البرق"). -إضف رسالة تحفيزية قصيرة بناءً على الأداء (مثلاً: في حالة الفوز "أحسنت! استمر في التقدم!") وفي حالة الخسارة "لا تقلق، يمكنك المحاولة مرة أخرى وتحقيق الأفضل!". -عرض جدول بالأسئلة والإجابات التي تم اختيارها سواء صحيحة أو خاطئة : (مثلاً: "8/10 إجابات صحيحة") مع زر "عرض التوضيح) أمام الإجابة الخاطئة. -أزرار واضحة: "أعد المحاولة": لتشجيع الطالب على تحسين نتيجته. "شارك النتيجة": للسماح للطالب بمشاركة إنجازه مع أصدقائه عبر التطبيق أو وسائل التواصل.