صمّم لطريقة حمل الهاتف
يُستخدم تطبيق الجوال بيد واحدة في جلسات قصيرة، وغالبًا والمستخدم منشغل بشيء آخر، وأحيانًا مع اتصال ضعيف. اكتب المهمة الواحدة التي يفتح الناس التطبيق لإنجازها، وصمّم مسارها أولًا، وليأتِ كل ما سواها بعدها.
منطقة وصول الإبهام
حين يُمسك الهاتف بيد واحدة يصل الإبهام بسهولة إلى الجزء الأوسط السفلي من الشاشة، ويصعب عليه بلوغ الزاويتين العلويتين. ضع الإجراء الرئيسي والتنقل الأساسي قرب الأسفل، وأبعد الإجراءات التي تحذف أو تلغي عن موضع استقرار الإبهام، وتذكّر أن الهواتف الكبيرة تزيد الأعلى بعدًا. ولا تخبّئ عنصرًا أساسيًا في ركن.
أحجام أهداف اللمس
تقترح إرشادات الواجهات من Apple ألا يقل عنصر التحكم عن 44 في 44 نقطة، وتقترح إرشادات Material Design من Google حجم 48 في 48 بكسلًا مستقلًا عن الكثافة. اعتبر ذلك حدًّا أدنى. ويجوز أن تكون منطقة اللمس أكبر من الأيقونة المرئية، ويلزم ترك مسافة بين الأهداف المتجاورة كي لا يصيب الإبهام الهدف الخطأ. وأي إيماءة، مثل السحب للحذف، يجب أن يقابلها زر ظاهر.
أنماط التنقل ومتى يناسب كل منها
اختر التنقل بحسب عدد الأماكن الرئيسية في التطبيق وعدد مرات انتقال الناس بينها.
| النمط | يناسب | انتبه إلى |
|---|---|---|
| شريط التبويبات السفلي | من ثلاثة إلى خمسة أماكن رئيسية يتنقل بينها الناس كثيرًا | أكثر من خمسة تبويبات يزحم الشريط ويصغّر الأهداف. اكتب اسمًا تحت كل أيقونة. |
| التنقل المتدرج | الانتقال من قائمة إلى تفاصيل عنصر ثم الرجوع | اجعل طريق الرجوع واضحًا واحفظ موضع المستخدم في القائمة. |
| القائمة الجانبية | أماكن ثانوية كثيرة قليلة الزيارة | الوجهات المخفية تُستخدم أقل. أبقِ الرحلة الرئيسية خارجها. |
| نافذة منبثقة أو ورقة سفلية | مهمة مركّزة يعود بعدها المستخدم إلى موضعه | أظهر دائمًا كيف تُغلق، ولا تكدّس ورقة فوق ورقة. |
قاعدة عملية: إن استطعت تسمية الأماكن الثلاثة التي يزورها الناس أكثر فمكانها الشريط السفلي، وما عداها يكون على مستوى أعمق.
أعراف iOS وأندرويد: ما تتبعه وما تشاركه
يأتي الناس بعاداتهم من الهاتف الذي يملكونه، فتبدو الشاشة التي تخالف هذه العادات غير سليمة حتى لو كانت جميلة. شارك الهوية والمحتوى والمسارات بين المنصتين، واتبع المنصة حيث يكون السلوك متوقعًا:
- الرجوع. يتوقع مستخدم iOS زر رجوع في الأعلى وسحبة من الحافة. ويتوقع مستخدم أندرويد أن تعمل إيماءة الرجوع في النظام أو زره في كل شاشة، وأن تعيده خطوة خطوة داخل التطبيق قبل أن يُغلق.
- عناصر النظام. منتقيات التاريخ وأوراق المشاركة والمفاتيح ونوافذ الأذونات تختلف في شكلها وسلوكها بين المنصتين. استخدم عناصر النظام ما أمكن.
- الإيماءات. لا تضف إيماءة تتعارض مع إيماءة النظام، مثل السحب من الحافة للرجوع.
والإطار الذي يرسم واجهته بنفسه، مثل Flutter، يحوّل هذه الفروق إلى قرارات تتخذها عن قصد بدل إعدادات افتراضية ترثها. سجّل كل قرار مرة واحدة في نظام التصميم، وللجانب البرمجي راجع تطوير تطبيقات iOS وأندرويد.
التعريف بالتطبيق وطلب الأذونات
أرِ القيمة قبل أن تطلب أي شيء. جولة أولى من شاشتين أو ثلاث على الأكثر، مع زر تخطٍّ ظاهر، وتأجيل التسجيل إلى أن يحتاج المستخدم حسابًا فعلًا، تُبقي الناس في حركتهم. وإن كان الحساب لازمًا فاذكر السبب وقدّم أسرع طريق للدخول، مثل رمز يُستخدم مرة واحدة، أو فتح القفل بالبصمة للعائدين.
اطلب الإذن في سياقه
اطلب الكاميرا حين يضغط المستخدم للمسح، والموقع حين يبحث عن شيء قريب، لا عند أول تشغيل. وضع قبل نافذة النظام شاشة قصيرة من عندك تشرح الفائدة، لأن نافذة النظام يصعب أن تنال فرصة ثانية فيها. وتسري القاعدة نفسها على الإشعارات: اطلبها بعد أن يثبت التطبيق نفعه.
صمّم حالة الرفض
سيرفض بعض الناس. صمّم ما تعرضه الشاشة عند رفض الإذن: رسالة واضحة، وبديلًا مثل كتابة العنوان يدويًا، ورابطًا إلى إعدادات النظام.
حالات الفراغ والتحميل والخطأ وانقطاع الاتصال
انقطاع الاتصال في مصعد أو موقف سيارات أو بين مدينتين أمر عادي. صمّم هذه الحالات جزءًا من المنتج لا بقايا:
- الفراغ. ما تعرضه القائمة قبل أن يكون فيها محتوى، مع الخطوة التالية.
- التحميل. هياكل شاشة أو عناصر نائبة تُبقي التخطيط ثابتًا، بدل مؤشر دوّار فوق صفحة فارغة.
- انقطاع الاتصال. اعرض آخر بيانات لديك، وبيّن مدى قِدمها، وقل أي الإجراءات ستنتظر.
- الخطأ. قل ما حدث بكلمات بسيطة وما يفعله المستخدم بعد ذلك، وقدّم إعادة المحاولة. ولا تعرض رمزًا خامًا أبدًا.
تخيّل تطبيق توصيل يسجّل فيه سائق تسليم طرد داخل موقف سيارات تحت الأرض. يحفظ التطبيق العملية ويعرض «بانتظار الإرسال»، ثم يرسلها حين يعود الاتصال. اتفق على هذا السلوك مع المهندسين قبل البناء.
إمكانية الوصول على الهاتف
تأتي الهواتف بميزات وصول يعتمد عليها كثيرون، ويجب أن يعمل التصميم معها.
- حجم النص. يستطيع Dynamic Type في iOS وتكبير الخط في أندرويد أن يكبّرا النص كثيرًا فوق الافتراضي. اختبر التخطيط بأكبر الأحجام، واترك النص يلتف، وتجنب الحاويات ثابتة الارتفاع.
- قارئات الشاشة. يقرأ VoiceOver في iOS وTalkBack في أندرويد التسميات بصوت عالٍ. يحتاج كل عنصر تحكم إلى تسمية ذات معنى ودور وترتيب قراءة منطقي.
- التباين واللون. حقق نسب التباين في WCAG، ولا تعتمد على اللون وحده في إظهار خطأ أو حالة.
واحتفظ بأزواج التباين وأنماط التركيز والحد الأدنى لحجم الهدف في نظام التصميم ليعفى الفريق من تذكّرها شاشةً شاشة.
العكس للعربية ومن اليمين إلى اليسار
في التطبيق العربي يُقرأ التخطيط كله من اليمين. تستطيع مكوّنات iOS وأندرويد الأصلية أن تنعكس تلقائيًا حين تكون لغة الجهاز من اليمين إلى اليسار، لكن العناصر المخصصة والأيقونات والصور والإيماءات تحتاج إلى قراراتك.
- اعكس ترتيب التبويبات وسهم الرجوع وأشرطة التقدم والمنزلقات واتجاه السحب.
- أبقِ الشعارات والساعات وعلامة الصح والخرائط وأزرار تشغيل الوسائط كما هي.
- اختر نظام الأرقام الغربي أو الهندي العربي مرة واحدة للمنتج، وطبّقه في كل مكان.
- امنح الخط العربي ارتفاع سطر أكبر، واختبر بأسماء طويلة، فالنص العربي قد يأتي أقصر من الإنجليزي أو أطول.
صمّم الشاشات العربية في إطارات مستقلة، لا بتصدير مقلوب. وتجد التفاصيل في صفحتنا عن التصميم للعربية ومن اليمين إلى اليسار.
النماذج الأولية والاختبار على أجهزة حقيقية
النموذج الأولي المعروض على حاسوب محمول يُخفي معظم ما يهم على الهاتف. ابنِ نموذجًا تفاعليًا في Figma وشغّله على هواتف فعلية مبكرًا، ليشعر الناس بمنطقة الوصول والتمرير والانتقالات. ثم اختبر في ظروف تشبه الواقع:
- أنجز مهام حقيقية بيد واحدة، واقفًا وماشيًا.
- استخدم هاتفًا صغيرًا وهاتفًا كبيرًا وجهاز أندرويد أقدم وأبطأ.
- جرّب الضوء الساطع وأكبر حجم نص مع تشغيل قارئ الشاشة.
- شغّل النسخة العربية مع قرّاء عرب بنصوص طويلة ومختلطة الاتجاه.
تستطيع أدوات مثل Maze اختبار النموذج عن بُعد، لكنها لا تغني عن مشاهدة شخص يستخدم نسخة حقيقية. وأعد الاختبارات على أول نسخ تعمل.
التسليم إلى المهندسين
ينجح التسليم حين يتلقى المهندسون قرارات لا صورًا. نقدّم لكل شاشة:
- مكوّنات ورموزًا من نظام التصميم المشترك، بالأسماء نفسها في Figma وفي الشيفرة.
- كل الحالات: الافتراضية والضغط والتعطيل والتحميل والفراغ وانقطاع الاتصال والخطأ.
- قواعد تخطيط بدل أحجام ثابتة: سلوك الشاشة على الهواتف الصغيرة والكبيرة وفي الوضع الأفقي ومع ظهور لوحة المفاتيح وحول الحواف المقتطعة من الشاشة ومؤشر الصفحة الرئيسية.
- ملاحظات الحركة: ما الذي يتحرك ولكم من الوقت، وما يحدث مع تقليل الحركة.
- أصول متجهة، ومجموعة أيقونات عُلّمت فيها الأيقونات المنعكسة، والنصوص باللغتين بما فيها أطول العبارات.
يراجع المصممون والمهندسون النسخة نفسها معًا في العرض الأسبوعي، فتظهر الفجوات وإصلاحها ما زال يسيرًا. ويتبع عملنا في تطوير تطبيقات الجوال الرموز نفسها، سواء كان التطبيق أصليًا أو مبنيًّا بـ Flutter أو React Native.