مقارنةمدخل إلى التطبيقاتمبني على مادة أحمد دومي

خريطة التطبيق والمخطط الشبكي والنموذج الأولي ودليل النمط

App Map, Wireframe, Prototype and Style Guide

الجواب المختصر

خريطة التطبيق مخطط يوضح الشاشات الرئيسية والعلاقة بينها فيعرف الفريق عدد الشاشات وترتيبها. المخطط الشبكي (Wireframe) رسم بسيط للشاشة يوضح أماكن العناصر (العنوان، الأزرار، منطقة المحتوى، مربعات الصور، قوائم التنقل، رسائل التنبيه) دون اهتمام كبير بالألوان، لاختبار ترتيب العناصر قبل الشكل النهائي. النموذج الأولي (Prototype) نسخة تجريبية توضح طريقة التنقل بين الشاشات وقد تكون بلا برمجة حقيقية. دليل النمط (Style Guide) مجموعة قواعد توحد شكل التطبيق: الألوان والخطوط والأزرار والأيقونات والمسافات ورسائل الخطأ.

الأداة	ما هي؟	فائدتها
خريطة التطبيق	مخطط للشاشات الرئيسية والعلاقة بينها	معرفة عدد الشاشات وترتيبها
المخطط الشبكي	رسم أولي لأماكن العناصر في الشاشة	اختبار ترتيب العناصر قبل تصميم الشكل النهائي
النموذج الأولي	نسخة تجريبية توضح التنقل بين الشاشات	اختبار الفكرة مبكرًا، كشف الأخطاء قبل البرمجة، عرض الفكرة على العميل، تجربة أكثر من شكل
دليل النمط	قواعد توحّد شكل التطبيق	يمنع اختلاف الشاشات خاصة إن عمل أكثر من شخص

ماذا يتضمن دليل النمط؟

الألوان: لون أساسي للأزرار ولون للتنبيهات.
الخطوط: نوع الخط وحجمه للعناوين والنصوص.
الأزرار: شكل الحفظ والإلغاء والرجوع.
الأيقونات: رموز متشابهة في كل الشاشات.
المسافات ورسائل الخطأ: فراغ مناسب وصيغة واضحة ومباشرة.

التصميم بحسب الجهاز

للهاتف: أزرار كبيرة مناسبة للمس، نصوص قصيرة، شاشات غير مزدحمة، قائمة تنقل بسيطة. للحاسوب: مساحة أكبر للجداول والتقارير، قوائم جانبية، سهولة التعامل مع لوحة المفاتيح والفأرة. وللتطبيق الذي يعمل على الاثنين يتغير ترتيب العناصر بحسب حجم الشاشة (بطاقة منتج في صف واحد على الهاتف وضمن شبكة بطاقات على الحاسوب).

وانظر مراحل التطوير ووثيقة التصميم وUX وUI.