دليل تصميم تطبيقات الاجهزة الذكية
مقدمة
واجهة تطبيق بتصميم جذاب يمكن أن تكون بمثابة حافز رئيسي للمستخدم لاختيار منتج معين من عدة بدائل متساوية وغني عن القول إن التصميم الجيد قد يعزز رضا المستخدم تصميم جميع عناصر واجهة التطبيق يجب ان تكون على نفس النمط هذا يمكن المستخدم من معرفة انه مازال في نفس التطبيق وايضا من المهم للحفاظ على تناسق تصميم العناصر الرسومية ومعلومات الواجهة اتباع قواعد مطابقة اللون، الخط، والمحاذاة الخ كل هذا يجعل واجهة التطبيق تبدو متسقة، بدلا من ان تكون العناصر منتشرة في جميع أنحاء الشاشة إبراز عناصر معينة في واجهة التطبيق من خلال اللون والشكل والمساحة، والرسوم المتحركة أو بطرق أخرى ذلك سيكون جميلا ولكن لا يكون ذلك على حساب الخدمة الاساسية لتطبيق
الألوان
واحدة من المعايير الأساسية لتصميم واجهة بصرية تقع على عاتق اختيار لوحة الألوان في هذه المرحلة التقيد بالقواعد المتعلقة بهوية المؤسسية وهناك العديد من الميزات التي تؤثر على سهولة الاستخدام على سبيل المثال، الارتباطات القائمة على اللون:
اللون الأحمر يرمز الى تحذير المستخدم الا امر ما
اللون الازرق يرمز الى معلومات اضافيه
اللون الأخضر يرمز الى نجاح العملية
اللون الاصفر يرمز الى تنبيه المستخدم
ان تطبيق تطابق الألوان لتصميم العناصر يسمح بربط وترتيب العناصر وفقا لتصميم التركيبي، مما يسهل ويسرع تحديد العلاقة بين هذه العناصر ونتيجة لذلك فإننا نحقق أفضل إنتاجية وكفاءة ان قابلية استخدام التطبيق تتوقف حول قواعد الامداد اللوني وهي تقلل الضغط على عيني المستخدم،
الصور
أثر الصور والرسومات على المستخدم قوية إلى حد ما كل صورة تنقل كمية ضخمة من المعلومات، الا ان الامر سيستغرق الكثير من المساحة و، ومع ذلك، تفتقر إلى المقوم النفسي اللازم فإنه من المهم لموضوع الصور ان تعكس طبيعة المنتجات المعروضة او مناسبة الاستخدام وبعبارة أخرى يجب ان تناسب الجمهور المستهدف في حالة إذا كانت الصور غير واضحة للمستخدم قد يعتقد ان التطبيق موجة إلى شخص آخر، وسوف يكون من الصعب ان يربط نفسه مع التطبيق وهذا التصور يتداخل مع سيناريوهات استخدام المنتج ويقلل من كفاءة التطبيق وايضا جودة الصور تؤثر دائما على رضا المستخدم
الايقونات
استجابة المستخدم العقلية للأيقونات أسرع من نص يصف العملية او الخدمة، لذلك سيتم اتخاذ قرار الضغط على الزر أسرع، الأمر الذي سيؤدي إلى زيادة فعالية التطبيق ومع ذلك إذا كانت الايقونات لا تحمل روابط واضحة لعملية او الخدمة، سوف يجد المستخدم صعوبة في فك رموزها وفي هذه الحالة سوف تنخفض فعالية التطبيق الايقونات مثل أي عنصر تؤثر على درجة رضا المستخدمين: إذا كانت جذابة وذات جودة عالية وبتصميم موحد وواضحة سيزيد ذلك رضا المستخدمين أي تصميم واجهة بصرية هو في الواقع تأثير بصري على المستخدم له تأثير إيجابي أو سلبي عموما
مقاسات التصميم
تختلف المقاسات من نوع جهاز لأخر لكن نعتمد المقاس الافتراضي طول 1920 عرض 1080
لعمل تطبيق يجب ان تعرف بعض الامور اولا :
- الفئة المستهدفة
- ماهي الخدمة
- الحصول على وثيقة عمل تحتوي على كل ما يحتويه التطبيق من خدمات
ملاحظة:
الوثيقة تحتوي على كل شيء يخص التطبيق المسميات وانواع الحقول والازرار والعمليات والإجراءات وهي تقدم للمبرمج ليعمل بناء عليها
قواعد عامة
- هي قواعد توجيهية فقط وليست ملزمة تم اقتباسها من guidelines لتصميم تطبيقات الاندرويد هي:
- 16px تباعد بين عناصر المحتوى
- 96px تباعد بين صندوق المحتوى وشريط التطبيق الدائم
- 112px اقل ارتفاع لشريط الخدمات
- 45px المحاذاة بين العنوان والنص
- 48px البعد عن الاطراف
- 70px ارتفاع ازرار الاوامر
- 48px احجام الايقونات
- 32px على الاقل تباعد صندوق النص بجميع الاتجاهات
- مناطق الايقونات داخل الصور في الزوايا الاعلى او الاسفل
- مناطق النص داخل الصور في الاعلى او الاسفل
- ازرار الاوامر يجب ابرازها بإطار في بعض الحالات
- ايستخدم قياس موحد لجميع الأزرار.
- استخدام لون لنص الأزرار المسطحة لجعلها تبرز عن النص العادي.
- حافظ على نسبة التباين لنصوص في الحد الأدنى
- ينبغي أن يكون طول السطر 60 حرفا إذا كنت ترغب في القراءة الجيدة.
- تجنب استخدام الوان مختلفة للايقونات
- لليقونات لا تجمع بين تسميات نصية مع رموز. استخدام إما (نص ورمز معا ) أو رمز او نصية فقط .
انواع الشاشات
قبل العمل نقوم بتقسيم الشاشة الى 11 مستطيل متساوية الطول هذه الامر تنظيمي فقط وليس اساسي
الشاشة الرئيسية
- شعار مع نص وزر امر يكون التقسيم 4 مستطيلات: للشعار 1 مستطيل: منطقه فارغة 3 مستطيلات: نص 1 مستطيل: منطقه فارغة 1: زر اوامر 1 مستطيل: منطقه فارغة
- شعار مع زر امر يكون التقسيم 1 مستطيل: منطقه فارغة 4 مستطيلات: للشعار 2 مستطيل: منطقه فارغة 1 مستطيل: زر اوامر
شاشة تسجيل الدخول
- شعار ونص وحقول ادخال وزر اوامر 4: للشعار 3 مستطيلات: نص 1 مستطيل: لكل حقل ادخال او زر اوامر والبقية فارغ
- شعار وحقول ادخال وزر اوامر 4 مستطيلات: للشعار 1 مستطيل: منطقه فارغة 1 مستطيل: لكل حقل ادخال او زر اوامر
شاشة عرض صورة
- صورة مع نص تقسيمها 5 مستطيلات: صورة 1 مستطيل: منطقه فارغة 3 مستطيلات: نص والبقية فارغة
- صورة بدون نص 1 مستطيل: منطقه فارغة 8 مستطيلات: صورة والبقية فارغة
- نص داخل الصورة 9 مستطيلات: صورة والبقية فارغة بحيث يتم اخذ 3 مستطيلات من الصورة تكون في الاعلى او الاسفل للنص في حال وجود زر يكون في اخر مستطيل اما الايقونات تكون في الاسفل في شريط الخدمات
شاشة عرض نص
- نص بدون زر اوامر 1 مستطيل: منطقه فارغة 8 مستطيلات: نص والبقية فارغة
- نص مع زر اوامر 1 مستطيل: منطقه فارغة 8 مستطيلات: نص 1 مستطيل: منطقه فارغة 1 مستطيل: زر اوامر
شاشة عرض فيديو والصوتيات
- فيديو بدون وصف وزر امر 2 مستطيل: منطقه فارغة 5 مستطيلات: فيديو 2 مستطيل: منطقه فارغة 1 مستطيل: زر اوامر 1 مستطيل: منطقه فارغة
- فيديو مع وصف وزر امر 1 مستطيل: منطقه فارغة 4 مستطيلات: فيديو 1 مستطيل: منطقه 3 مستطيلات: نص 1 مستطيل: منطقه فارغة 1 مستطيل: زر اوامر
- فيديو بدون وصف او زر امر يكون العرض بكامل الصفحة بالعرض او ان يكون في منتصف الصفحة
شاشة عرض الجداول
تقسيمات حقول الجدول متعددة
- جدول، صورة، عنوان 1 مستطيل: منطقه فارغة كل 2 مستطيل عنصر
- جدول، صورة، عنوان، وصف 1 مستطيل: منطقه فارغة كل 2 مستطيل عنصر
- جدول، صورة، عنوان، وصف، زر اوامر 1 مستطيل: منطقه فارغة كل 3 مستطيلات عنصر
- جدول، ايقونات 1 مستطيل: منطقه فارغة كل 2 مستطيل عنصر
- جدول، زر اوامر 1 مستطيل: منطقه فارغة كل 1 مستطيل عنصر
- جدول صور 1 مستطيل: منطقه فارغة كل 3 مستطيلات عنصر
شاشة حقول ادخال
- حقول فقط 1: منطقه فارغة 1 مستطيل: حقل 1 مستطيل: زر اوامر
- حقول مع نص 1 مستطيل: منطقه فارغة 3 مستطيلات: نص 1 مستطيل: حقل 1 مستطيل: زر اوامر
تطبيق عملي
مثال لدينا مشروع شركة تبيع منتجات زيت الزيتون ولدينا الشعار والالوان الاساسية كما اننا قمنا بتحديد الخطوط واحجامها
التطبيق لعرض منتجات الشركة وبعد دراسة الوثيقة قمنا بتحديد النقاط الاساسية للتصميم:
- شاشه رئيسية تحتوي شعار ونص عن الشركة ورابط لتصفح المنتجات
- شاشه عرض المنتجات لكل منتج صوره، اسم، وصف
- شاشه عرض المنتج: صوره، اسم، بيانات، أيقونة ارسال، أيقونة طلب
- شاشة ارسال: اسم المنتج، بيانات المنتج زر ارسال
- شاشة طلب: الاسم، رقم الاتصال، ايميل، الكمية السعر
- حقل بحث في كل شاشات التطبيق
الرسم التوضيحي
بعد رسم الشكل المتوقع لشاشه بشكل سريع سأكتفي بثلاث شاشات فقط لأنه القصد هو معرفه الطريقة والقواعد لتصميم التطبيق
هذا رسم توضيحي لشكل الشاشات
تستطيع عدم التقيد بنفس الشكل ولكن هو لتسهيل معرفه العناصر الموجودة في كل شاشه
بعد تسجيل كل ملاحظاتنا وجمع المعلومات ورسم الاشكال المتوقعة نبدأ تصميم شاشات التطبيق سوف استخدم
برنامج illustrator لكن تستطيع استخدام اي برنامج تحب
Sketch , Photoshop , Illustrator
باستطاعتك عمل التصميم كما تريد وليس كما في الشكل التوضيحي
الشاشة الرئيسية
منطقة فارغة
هذه المنطقة في جميع الشاشات هي منطقه ايقونات الجهاز يجب ان لا يكون فيها شيء من التصميم مثل الشعار او أيقونة او نص وهي تدخل في تصميم الخلفية
الشعار
حين وضع الشعار يجب الانتباه انه يجب ترك مسافة يمين ويسار بقياس 48PX
النص
المحتوى النصي تم وضعه مع ترك منطقه فارغة في الاعلى والاسفل هذه المنطقة هي فراغ بين الشعار في الاعلى وبين الايقونة في الاسفل
منطقه فارغة
هذه المنطقة هي منطقه توازن لعناصر التصميم ويجب ان تكون بنفس القياس في الاعلى والاسفل وفي جميع شاشات التطبيق
ايقونة او نص
هنا بدل وضع كلمة تصفح المنتجات وضعنا كلمة المنتجات مع سهم للأسفل وهو دلاله بوجود شيء غير هذه الصفحة وتستطيع وضع أيقونة او اي شيء تريد ولكن بشرط عدم تعدى مساحة هذه المنطقة
شاشة عرض المنتجات
قمنا بتصميم الشاشة مع مراعاة ان تكون مريحة للاستخدام
منطقة فارغة
هذه المنطقة في جميع الشاشات هي منطقه ايقونات الجهاز يجب ان لا يكون فيها شيء من التصميم مثل الشعار او أيقونة او نص وهي تدخل في تصميم الخلفية
شريط الخدمات الاعلى
في هذه المنطقة يتم وضع الشعار وكذلك اي ايقونات اخرى تريد ان تكون في جميع الشاشات
العنوان
هو عنوان الشاشة لمعرفه انت اين وممكن ان تكون مع شريط الخدمات الاعلى تكون في جميع شاشات التطبيق
منطقه عرض المنتج
هذه المنطقة تحتوي على الكثير من العناصر ولكل عنصر قواعد لوضعه
صورة المنتج
بدون اي زر اوامر تكون محاذاة الطرف في حال كانت تحتوي على زر اوامر يجب ترك مسافة في الطرف بقياس 32PX على الاقل
محاذاة الصورة
المحاذاة بين الصورة والنص تم عملها في التصميم لان النص يحتوي على اوامر ضغط
عنوان المنتج
عنوان المنتج يكون اقل حجما من عنوان الشاشة
محاذاة العنوان
المحاذاة العنوان عن منطقه عرض المنتج تكون في اقل تقدير 35PX
نص المنتج
يجب مراعاة ترك مسافة اسف النص تكون فارغة
محاذاة نص المنتج
المحاذاة عن الاطراف تكون على الاقل بقياس 32PX
شريط الخدمات الاسفل
في شريط الخدمات يتم وضع ايقونات الخدمات مثل العودة الى الرئيسية او اتصل بنا او خدمات الشاشة
شاشة عرض المنتج
في شاشه عرض المنتج تم تقسمها الى 4 اقسام وهي: العنوان، الصورة، النص، أيقونة الخدمات
منطقة فارغة
هذه المنطقة في جميع الشاشات هي منطقه ايقونات الجهاز يجب ان لا يكون فيها شيء من التصميم مثل الشعار او أيقونة او نص وهي تدخل في تصميم الخلفية
شريط الخدمات الاعلى
في هذه المنطقة يتم وضع الشعار وكذلك اي ايقونات اخرى تريد ان تكون في جميع الشاشات
العنوان
عنوان الشاشة لمعرفه انت في اي منتج وكذلك تم وضع سهم دلاله على الرجوع الى صفحة المنتجات
مساحة الصورة
مساحة الصورة هي ضعف مساحة النص إذا كانت كلمات النص قليلة اما إذا كان كثيرة يكون العكس
مساحة النص
مساحة النص هي نصف مساحة الصورة إذا كانت كلمات النص قليلة اما إذا كان كثيرة يكون العكس
المحاذاة
المحاذاة عن الاطراف تكون على الاقل بقياس 32PX وتكون متساوية
محاذاة الايقونات في شريط الخدمات الاسفل
محاذاة الايقونات تختلف عن النص ولكن يفضل ان تكون بقياس 32PX والأيقونة بقياس 48PX
بعد تصميم الشاشات يتم رفعها على جهاز الجوال ومشاهدتها لمراجعتها واصلاح اي نقص او خطا وبذلك تكون قد انتهيت من تصميم شاشات التطبيق
1,892 total views, 1 views today