تصميم تطبيق جوال قبل برمجته يوفر وقت وفلوس كثيرة، لأنك تكتشف المشاكل وتعدل الأفكار قبل ما تبدأ البرمجة. وفيجما هي الأداة الأشهر لتصميم التطبيقات اليوم. في هذا الدليل نصمم مع بعض تطبيق بسيط لمتجر من الصفر.
الخطوة 1: حدد هدف التطبيق ورحلة المستخدم
اكتب وش أهم شي يبي المستخدم يسويه. في تطبيق متجر: يتصفح المنتجات، يشوف التفاصيل، يضيف للسلة، ويدفع. ارسم هذي الرحلة في FigJam كمربعات وأسهم. هذا يحدد الشاشات اللي تحتاجها.
الخطوة 2: قائمة الشاشات
- شاشة البداية وتسجيل الدخول.
- الصفحة الرئيسية.
- صفحة التصنيف.
- صفحة المنتج.
- السلة.
- الدفع وتأكيد الطلب.
- الحساب والطلبات السابقة.
الخطوة 3: الرسم المبدئي (Wireframe)
أنشئ إطارات بمقاس جوال، وارسم كل شاشة بمربعات رمادية ونصوص بسيطة بدون ألوان. ركز على ترتيب العناصر وسهولة الوصول. في التطبيقات العربية، صمم من اليمين لليسار وانتبه لاتجاه الأسهم والأيقونات.
الخطوة 4: نظام التصميم
- حدد الألوان: أساسي، ثانوي، خلفية، نص، نجاح، خطأ.
- حدد الخطوط وأحجامها للعناوين والنصوص.
- صمم المكونات: الأزرار، الحقول، بطاقة المنتج، شريط التنقل السفلي.
- احفظ الألوان والخطوط كأنماط (Styles).
الخطوة 5: التصميم النهائي
حول الرسوم المبدئية لتصميم نهائي باستخدام المكونات والأنماط. استخدم Auto Layout في البطاقات والقوائم عشان تتكيف مع النصوص المختلفة. واهتم بالمسافات الموحدة بين العناصر، مثل نظام مضاعفات 8 بكسل.
الخطوة 6: النموذج الأولي التفاعلي
- من تبويب Prototype اربط الأزرار بالشاشات.
- حدد نوع الانتقال مثل الانزلاق أو الظهور.
- جرّب التطبيق من تطبيق فيجما على جوالك.
- اعرضه على 5 أشخاص وسجل ملاحظاتهم.
الخطوة 7: التسليم للمطور
مع Dev Mode في فيجما برو، المطور يشوف المقاسات والألوان والخطوط وأكواد مقترحة لكل عنصر. نظم الملف بأسماء واضحة للصفحات والطبقات، وجهز صفحة فيها كل المكونات وحالاتها.
أخطاء شائعة في تصميم التطبيقات
- أزرار صغيرة يصعب الضغط عليها.
- نصوص صغيرة أو بتباين ضعيف.
- خطوات كثيرة للوصول لعملية الشراء.
- عدم تصميم حالات الخطأ والتحميل والشاشات الفاضية.
الخلاصة
تصميم التطبيق في فيجما يمر بمراحل واضحة: رحلة المستخدم، الرسم المبدئي، نظام التصميم، التصميم النهائي، النموذج الأولي، ثم التسليم. ابدأ بمشروع بسيط وطوره. اشترك في فيجما برو من ون بلو، واستخدم شات جي بي تي لكتابة نصوص الواجهات.
اطلبها الآن من ون بلو
اقرأ أيضًا
- أهم اختصارات فوتوشوب اللي توفر وقتك
- تعديل الصور بلايت روم للمبتدئين
- بريمير برو للمبتدئين: أول مشروع مونتاج
للتحديثات والتفاصيل الرسمية راجع مركز مساعدة فيجما الرسمي.
أسئلة شائعة
وش مقاس إطار الجوال المناسب؟
فيجما يوفر مقاسات جاهزة لأجهزة آيفون وأندرويد، واختر مقاس شائع وصمم بمرونة.
هل أصمم لآيفون وأندرويد بشكل مختلف؟
التصميم الأساسي ممكن يكون واحد، مع مراعاة بعض الفروقات في أنماط التنقل لكل نظام.
كم يحتاج تصميم تطبيق بسيط؟
يعتمد على عدد الشاشات والخبرة، والتطبيق البسيط ممكن ياخذ من أيام إلى أسابيع.