Fashion Store Ecommerce
تفاصيل العمل
نظرة عامة
Fashion Store هو تطبيق تسوق إلكتروني متكامل مخصص لمنصة iOS، يُتيح للمستخدمين تصفح وشراء منتجات الأزياء بسهولة ويُسر. يستهدف التطبيق ثلاث فئات رئيسية من العملاء: النساء، الرجال، والأطفال، ويوفر تجربة تسوق سلسة من التصفح حتى إتمام الدفع.
يتميز التطبيق بتصميم بصري أنيق يعتمد على اللون الأحمر كلون رئيسي، مع واجهات نظيفة تُركز على عرض المنتجات بأسلوب جذاب. يشتمل التطبيق على 10 شاشات رئيسية تغطي جميع مراحل رحلة المستخدم من التسجيل حتى تأكيد الطلب.
شاشات التطبيق
1. الصفحة الرئيسية (Home)
تُعدّ الصفحة الرئيسية واجهة الاستقبال الأولى للمستخدم، وتتكون من:
• بانر بطولي كبير يملأ الجزء العلوي من الشاشة، يعرض عرضاً ترويجياً حالياً (Fashion Sale) مع زر "Check" للانتقال إلى العرض.
• قسم "New" يعرض أحدث المنتجات المضافة في شكل بطاقات قابلة للتمرير الأفقي.
• قسم "Sale" يستعرض المنتجات المخفَّضة مع عرض نسب الخصم وشارات التمييز.
• شريط تنقل سفلي ثابت يشتمل على: Home، Shop، Bag، Favorites، Profile.
2. شاشة الفئات (Categories)
تُتيح هذه الشاشة للمستخدم تصفح المنتجات حسب الفئة، وتشمل:
• ثلاثة تبويبات للتصفية حسب الجنس: Women / Men / Kids.
• بانر ترويجي موسمي "Summer Sales – Up to 50% off".
• أربعة أقسام رئيسية: New، Clothes، Shoes، Accessories — كل قسم يظهر كبطاقة تحمل اسم القسم يساراً وصورة تعبيرية يميناً.
• أيقونة بحث في الزاوية العلوية للوصول السريع.
3. تسجيل الدخول (Login)
شاشة دخول مبسطة وآمنة تتضمن:
• حقل البريد الإلكتروني مع تحقق فوري (✓ أخضر عند الإدخال الصحيح).
• حقل كلمة المرور.
• رابط "Forgot your password?" ينقل المستخدم إلى شاشة الاسترداد.
• زر تسجيل دخول بتصميم بارز باللون الأحمر.
• خيارات تسجيل دخول بديلة عبر Google وFacebook.
4. إنشاء حساب جديد (Sign Up)
شاشة تسجيل جديد تحتوي على:
• حقل الاسم مع تحقق فوري.
• حقل البريد الإلكتروني.
• حقل كلمة المرور.
• رابط "Already have an account?" للعودة إلى تسجيل الدخول.
• زر "SIGN UP" بارز.
• خيارات التسجيل عبر الحسابات الاجتماعية (Google / Facebook).
5. نسيت كلمة المرور (Forgot Password)
شاشة مبسطة تطلب من المستخدم إدخال بريده الإلكتروني لإرسال رابط إعادة تعيين كلمة المرور. تعرض رسالة خطأ واضحة (إطار أحمر + نص توضيحي) في حالة إدخال بريد إلكتروني غير صالح.
6. الملف الشخصي (My Profile)
صفحة إدارة الحساب الشاملة، وتشتمل على:
• صورة المستخدم واسمه وبريده الإلكتروني في أعلى الصفحة.
• My orders: عرض الطلبات السابقة (12 طلباً للمستخدم في النموذج).
• Shipping addresses: إدارة عناوين الشحن (3 عناوين).
• Payment methods: إدارة بطاقات الدفع المرتبطة.
• Promocodes: عرض الأكواد الترويجية المتاحة.
• My reviews: تقييمات المستخدم السابقة للمنتجات.
• Settings: إعدادات الإشعارات وكلمة المرور.
7. عناوين الشحن (Shipping Addresses)
تعرض هذه الشاشة جميع العناوين المحفوظة في بطاقات منفصلة، تحتوي كل بطاقة على اسم المستلم والعنوان الكامل وخيار تعيينه عنواناً افتراضياً للشحن عبر Checkbox. كما تتضمن الشاشة زر (+) في الأسفل لإضافة عناوين جديدة، وخيار "Edit" لتعديل أي عنوان قائم.
8. طرق الدفع (Payment Methods)
تعرض البطاقات المالية المرتبطة بالحساب في شكل بطاقات بنكية مُصمَّمة بواقعية عالية: Mastercard بخلفية داكنة و Visa بخلفية رمادية، مع عرض اسم حامل البطاقة وآخر 4 أرقام وتاريخ الانتهاء. يمكن للمستخدم تعيين بطاقة افتراضية وإضافة بطاقات جديدة عبر زر (+).
9. تأكيد الطلب (Order Success)
شاشة احتفالية تظهر عقب إتمام الطلب بنجاح، تحتوي على أيقونة حقائب تسوق وعناصر كونفيتي ملونة ونص "Your order will be delivered soon. Thank you for choosing our app!"، مع زر "CONTINUE SHOPPING" لتشجيع المستخدم على الاستمرار في التسوق.
شريط التنقل الرئيسي
يُعرض شريط التنقل السفلي بشكل ثابت في جميع الشاشات الرئيسية، ويضم خمسة تبويبات:
• Home – الصفحة الرئيسية
• Shop – تصفح الفئات والمنتجات
• Bag – سلة التسوق
• Favorites – المنتجات المفضلة
• Profile – الملف الشخصي وإدارة الحساب
رحلة المستخدم
1. التوثيق
يُسجّل المستخدم حساباً جديداً أو يُسجّل دخوله ببريده وكلمة مروره أو عبر حساباته الاجتماعية.
2. الاستكشاف
يتصفح الصفحة الرئيسية ويطّلع على العروض والمنتجات الجديدة، أو ينتقل إلى شاشة الفئات لتصفح المنتجات حسب النوع والقسم.
3. الإضافة إلى السلة
يُضيف المنتجات المرغوبة إلى سلة التسوق أو قائمة المفضلة.
4. إتمام الشراء
يختار عنوان الشحن المناسب وطريقة الدفع المفضلة ثم يُؤكد الطلب.
5. التأكيد
تظهر شاشة النجاح الاحتفالية مُعلنةً استلام الطلب وبدء التجهيز للشحن