تصميم 10 شاشات اضافية لتصميم تطبيق سابق على فيجما

السلام عليكم ورحمة الله وبركاته

لدي تصميم لتطبيق سابق على فيجما ولدي طلب اضافة 10شاشاةت كالاتي :

المواصفات العامة

•الأداة: Figma.

•عدد الشاشات: 31 (21 موجودة + 10 إضافية).

•التدفق التفاعلي: Onboarding --> Style Picker --> Sign-up --> OTP --> Home --> File Upload --> Quotation --> Mood Board --> Reminder --> Chat --> Notifications --> Profile.

•الأسلوب التصميمي:

oالألوان: أزرق فاتح (#4A90E2) كلون أساسي، رمادي فاتح (#F5F5F5) كخلفية، أبيض (#) للعناصر.

oالخط: استخدم خط "Cairo" أو مشابه (متوفر مجانًا على Google Fonts) بحجم 16px للنصوص العادية و20px للعناوين.

oالأزرار: مستطيلات ذات زوايا دائرية (Radius: 8px) مع تأثير "Hover" بسيط.

قائمة الشاشات وتفاصيلها

الشاشات الموجودة (21 شاشة في الملف الحالي)

•تشمل:

1.Onboarding (3 شاشات): مقدمة عن التطبيق (مثل "صمم مكتبك بسهولة").

2.Sign-up: حقل لإدخال رقم الهاتف وزر "التالي".

3.Sign-in: حقل رقم الهاتف وزر "تسجيل الدخول".

4.Home: صفحة رئيسية تعرض خيارات مثل "ابدأ مشروعًا جديدًا".

5.Project Details: تفاصيل المشروع الحالي (حالة، ملفات).

6.Profile: معلومات المستخدم وخيارات الإعدادات.

7.Settings: إعدادات التطبيق (لغة، إشعارات).

8.Bottom Navigation: شريط سفلي بأيقونات (Home، Projects، Chat، Profile).

الشاشات الإضافية (10 شاشات جديدة)

1.Style & Color Picker

oالوصف: شاشة لاختيار أسلوب التصميم والألوان.

oالعناصر:

قائمة بـ 5-10 أساليب (مثل "حديث"، "كلاسيكي") مع صور مصغرة.

3 دوائر لونية (مثل أزرق، بيج، رمادي) مع أزرار اختيار.

زر "التالي" في الأسفل.

oالتفاعل: النقر على أسلوب أو لون يبرزه، ثم "التالي" ينتقل إلى Sign-up.

2.OTP Verification

oالوصف: شاشة لإدخال رمز التحقق.

oالعناصر:

4 مربعات لإدخال الأرقام (مع انتقال تلقائي بين الحقول).

نص "أدخل رمز OTP المرسل إلى رقمك".

زر "تأكيد" أسفل الحقول.

oالتفاعل: "تأكيد" ينتقل إلى Home.

3.File Upload/Service Request

oالوصف: شاشة لرفع ملفات أو طلب قياس.

oالعناصر:

زر "رفع ملف PDF" مع أيقونة تحميل.

زر "طلب قياس" مع نص "اطلب زيارة ميدانية".

نص توضيحي: "ارفع خططك أو اطلب مساعدة".

oالتفاعل: "رفع ملف" ينتقل إلى Upload Confirmation، "طلب قياس" ينتقل إلى Quotation.

4.Quotation

oالوصف: عرض تكلفة المشروع.

oالعناصر:

جدول بسيط (مثل: تصميم: 5000 ريال، تنفيذ: 15000 ريال).

زر "دفع" (أخضر) وزر "رفض" (رمادي).

oالتفاعل: "دفع" ينتقل إلى Mood Board، "رفض" يعود إلى Home.

5.Mood Board Selection

oالوصف: اختيار عناصر الديكور.

oالعناصر:

شبكة 3x3 تحتوي على 5-10 عناصر (مثل كرسي، إضاءة) مع صور.

زر "تأكيد الاختيار" أسفل الشاشة.

oالتفاعل: النقر على عنصر يضيفه إلى الاختيار، "تأكيد" ينتقل إلى Project Details.

6.Order Reminder Popup

oالوصف: تذكير بعد 24 ساعة من حالة الانتظار.

oالعناصر:

نافذة منبثقة تحتوي على نص: "أكمل تصميم أحلامك الآن".

زر "متابعة" وزر "تجاهل".

oالتفاعل: "متابعة" ينتقل إلى Mood Board، "تجاهل" يغلق النافذة.

7.Chat

oالوصف: شاشة للتواصل مع الفريق.

oالعناصر:

حقل نص للكتابة مع أيقونة إرسال.

عرض حالة الفريق (Online/Offline) في الأعلى

منطقة لعرض الرسائل (فارغة أو مع رسالة نموذجية).

oالتفاعل: النقر على أيقونة الإرسال يضيف رسالة، يمكن ربطها بـ Notifications.

8.Notifications

oالوصف: قائمة الإشعارات.

oالعناصر:

أيقونة جرس في الأعلى.

قائمة تحتوي على إشعارات (مثل "تم رفع ملفك"، "رد جديد في الدردشة").

oالتفاعل: النقر على إشعار ينتقل إلى الشاشة ذات الصلة (مثل Chat أو Project Details).

9.Upload Confirmation

oالوصف: تأكيد رفع الملف.

oالعناصر:

نص "تم الرفع بنجاح" مع أيقونة علامة صح.

زر "العودة إلى الرئيسية".

oالتفاعل: "العودة" ينتقل إلى Home.

10.Team Contact Hint

oالوصف: خيار تواصل في صفحة الملف الشخصي.

oالعناصر:

زر "تواصل مع المختص المهني" مع أيقونة هاتف أو رسالة.

يُضاف إلى شاشة Profile الموجودة.

oالتفاعل: النقر ينتقل إلى Chat.

التدفق التفاعلي الكامل

•Onboarding (3 شاشات): تعريف بالتطبيق --> زر "ابدأ" ينتقل إلى Style Picker.

•Style Picker: اختيار الأسلوب والألوان --> "التالي" إلى Sign-up.

•Sign-up: إدخال رقم الهاتف --> "التالي" إلى OTP.

•OTP Verification: إدخال رمز --> "تأكيد" إلى Home.

•Home: خيار "ابدأ مشروعًا جديدًا" --> File Upload.

•File Upload/Service Request: رفع ملف --> Upload Confirmation --> Home، أو طلب قياس --> Quotation.

•Quotation: عرض السعر --> "دفع" إلى Mood Board، "رفض" إلى Home.

•Mood Board Selection: اختيار عناصر --> "تأكيد" إلى Project Details.

•Order Reminder Popup: تظهر بعد 24 ساعة (محاكاة) --> "متابعة" إلى Mood Board.

•Chat: تواصل مع الفريق --> مرتبط بـ Notifications.

•Notifications: عرض الإشعارات --> النقر ينتقل إلى الشاشة ذات الصلة.

•Profile: إعدادات و"تواصل مع المختص" --> Chat.

إرشادات إضافية

•التناسق: حافظ على نفس الألوان والخطوط المستخدمة في الشاشات الموجودة (مثل الأزرق الفاتح للأزرار).

•التجربة: اجعل الانتقالات سلسة (استخدم "Smart Animate" في Figma إن أمكن).

•الاختبار: بعد الربط، تأكد من أن كل زر يعمل وينتقل إلى الشاشة الصحيحة.

التسليم

•رابط Figma محدث يحتوي على النموذج التفاعلي الكامل (31 شاشة).

•ملاحظات مختصرة (في Figma أو PDF) توضح التدفق إذا لزم الأمر.