تصميم تطبيقات اللياقة: إعادة تصميم الشاشة الرئيسية، قبل وبعد

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

الشاشة كاملة، قبل وبعد

مسودة المبتدئ

بعد الإصلاح

على اليسار، تصطدم العين بترويسة من أربعة عناصر، ثم أربع بطاقات بأربعة ألوان، ثم صورة وزرين وقلب، ثم مخطط، ثم صف ثانٍ من التمارين يقطعه شريط التبويبات. على اليمين ثلاث بطاقات وترويسة: كيف يسير اليوم، وماذا تفعل الآن، وكيف يبدو الأسبوع.

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

الإصلاح 1: بطاقة واحدة من الحلقات بدل أربع بطاقات

قبل

بعد

أربع بطاقات باستيل، لكل منها أيقونة ورقم وتسمية وشريط رفيع، مقابل بطاقة واحدة بثلاث حلقات، والهدف تحت كل تسمية، ونبض القلب كشارة صغيرة.

كل بطاقة في المسودة تقول رقمًا وترسم شريطًا رفيعًا، لكنها لا تقول مقارنةً بماذا. 8,432 خطوة قد تكون جيدة أو سيئة. على القارئ أن يخمّن الهدف من طول الشريط، والأشرطة رفيعة.

الحلقات تضع الهدف بالكلمات ("من 10,000" و"من 600 kcal" و"من 2 L") وبالشكل: الحلقة إما ممتلئة أو لا. نظرة واحدة تجيب عن سؤال "هل أنا على المسار اليوم؟". نبض القلب قراءة وليس هدفًا، فلا يستحق حلقة. ينزل إلى شارة في الزاوية، وهذا يقول إنه نوع مختلف من الأرقام.

القاعدة التي تستعيدها: إذا كان للرقم هدف فأظهر الهدف. وإن لم يكن له هدف فلا تلبسه ثوب التقدم.

الإصلاح 2: زر تشغيل واحد وظل خلف الكلمات

قبل

بعد

عنوان قسم وشارة جديد ونص أبيض بحجم 9 px على الصورة وثلاثة عناصر تحكم تحتها، مقابل صورة بتسمية واحدة ونص أكبر على ظل وزر تشغيل واحد.

النص الأبيض على صورة لا يُقرأ إلا حيث تكون الصورة داكنة بالصدفة. في المسودة يمر سطر التفاصيل فوق أفتح جزء في الصورة، أرضية الصالة وقميص رمادي، وبحجم 9 px يختفي. الإصلاح يضع ظلًا أسود فوق الصورة يصل إلى 72% عند الحافة السفلية، تمامًا حيث تقع الكلمات، ويكبّرها.

المسودة أيضًا تطرح سؤالًا قبل أن يتمكن المستخدم من التصرف: ابدأ الآن، أم التفاصيل، أم احفظه بالقلب؟ لتمرين اليوم شيء واحد يُفعل به، وهو أن يبدأ. زر تشغيل دائري واحد يقول ذلك بلا كلمة. التفاصيل على بعد نقرة حين يريدها أحد، لكنها لم تعد تنافس الإجراء الرئيسي.

شارة "جديد" وعنوان قسم "تمرين اليوم" كانا يقولان الشيء نفسه تقريبًا مرتين. الإصلاح يُبقي تسمية واحدة، شارة على الصورة.

الإصلاح 3: ابدأ المخطط بالمجموع

قبل

بعد

سبعة أعمدة برتقالية متساوية مع قائمة منسدلة ومفتاح، مقابل مجموع الأسبوع بخط كبير وشارة اتجاه وعمود واحد برتقالي صريح.

المخطط يجيب عن سؤال، ومخطط المسودة لا يقول أي سؤال. سبعة أعمدة بالبرتقالي القوي نفسه، بلا قيم، ومفتاح لسلسلة وحيدة، فيقرر القارئ بنفسه ماذا يأخذ منه. الإصلاح يجيب عن السؤال المرجح بالكلمات أولًا: 4 س 12 د هذا الأسبوع، بزيادة 18% عن الأسبوع الماضي.

الأعمدة الآن سياق وليست الرسالة. خمسة منها بدرجة باهتة من لون العلامة، واليوم، السبت، برتقالي صريح، فتقع العين على مكان الشخص في الأسبوع. يبقى الأحد جذعًا قصيرًا، فيُقرأ الأسبوع من اليسار إلى اليمين حتى اليوم. القائمة المنسدلة "هذا الأسبوع" ومفتاح "دقائق النشاط" اختفيا لأن العنوان يقول الأمرين أصلًا.

القاعدة التي تستعيدها: ضع في الأعلى الرقم الذي يحتاج المخطط دقيقة ليشرحه، ودع الأعمدة تتولى الباقي.

الإصلاح 4: زر واحد في الترويسة

قبل

بعد

صورة شخصية وتحية بعلامة تعجب وسطر ثانٍ بعلامتين أخريين وثلاث أيقونات، مقابل التاريخ وتحية وزر إشعارات واحد.

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

يُبقي الإصلاح الشيء الوحيد الذي يستحق الزاوية العليا: الإشعارات، بنقطة حين يكون هناك جديد. وتصبح التحية تاريخًا واسمًا بخط كبير، وهذا يخبر القارئ لأي يوم تعود أرقام اليوم، بلا علامة تعجب.

الإصلاحات الأصغر

• أربعة تبويبات لا خمسة. الرئيسية والتمارين والتقدم والملف الشخصي. الإحصاءات والمجتمع أفسحا الطريق لتبويب تقدم واحد.
• هامش واحد. استخدمت المسودة 14 px يسارًا و12 px يمينًا، فبدت البطاقات منحرفة قليلًا عن المنتصف. الإصلاح يستخدم 20 px على الجانبين و16 px بين البطاقات.
• لون واحد للإجراء. استخدمت المسودة بطاقات بالخوخي والأصفر والوردي والأزرق مع البرتقالي. الإصلاح يستخدم البرتقالي للإجراء ويُبقي العنبري والأزرق على حلقتين فقط، حيث يميّزان الحلقات بعضها من بعض.
• سلّم خطوط حقيقي. انتقل النص من 8 إلى 16 px إلى أحجام نص iOS من 11 إلى 28 pt، فلا شيء على الشاشة أصغر من أصغر تعليق في النظام.
• لا صف مقترحات. صف الصور الثاني في المسودة قطعه شريط التبويبات. الإصلاح ينهي الشاشة الرئيسية بعد المخطط.
• تحية أهدأ. "لنسحق أهداف اليوم!!" صارت التاريخ فوق الاسم.

دقّق تطبيق اللياقة الخاص بك

احصل على ملف Figma

يحتوي الملف المجاني على الشاشتين كمكوّنات، وكل إصلاح كزوج قبل وبعد، ومتغيرات الألوان وأنماط نص iOS.

ملف Figma مجاني

الشاشة الرئيسية للياقة، قبل وبعد

الشاشتان وكل جزء مُصلَح كمكوّنات Figma. مجاني، للعرض فقط، انسخه إلى مسوداتك.

افتح في Figma

الأسئلة الشائعة

ماذا يجب أن تعرض الشاشة الرئيسية لتطبيق اللياقة أولًا؟

كيف يسير اليوم: الخطوات والسعرات والماء مقابل أهدافها، في بطاقة واحدة. وضع تمرين اليوم تحتها مباشرة مع طريقة واحدة واضحة للبدء.

هل حلقات التقدم أفضل من أشرطة التقدم في تطبيق لياقة؟

مع عدد قليل من الأهداف اليومية، نعم. الحلقة تُقرأ بنظرة، وتُظهر ممتلئة أو غير ممتلئة بلا مقياس، وتتسع لرقم في وسطها. أبعد نبض القلب عن الحلقات، لأنه قراءة وليس له هدف يُملأ.

كيف تجعل النص الأبيض مقروءًا فوق صورة تمرين؟

ضع ظلًا داكنًا خلف الكلمات، أقوى ما يكون حيث يقع النص، واجعل النص بحجم مقروء. لا تعتمد على أن تكون الصورة داكنة في المكان المناسب.

كيف يجب تصميم مخطط نشاط اللياقة؟

ابدأ بالمجموع والاتجاه بالكلمات، ثم اعرض الأعمدة بدرجة ناعمة مع اليوم الحالي بلون العلامة. أسقط المفاتيح والقوائم المنسدلة التي يغطيها العنوان.

كم تبويبًا يجب أن يملك تطبيق اللياقة؟

أربعة أو خمسة. ادمج التبويبات التي تحمل أرقامًا متقاربة، مثل الإحصاءات والمجتمع، في مكان واحد مثل التقدم.

المصادر

• الشاشتان من تصميمنا، صُمّمتا وقيستا في Figma.
• الصور عبر Pexels من pessoas uem وJulia Larson وTima Miroshnichenko وVitaly Gariev.
• Apple Human Interface Guidelines: Typography، لأحجام نص iOS المستخدمة في الشاشة المُصلَحة.
• نُشر أولًا كشرائح على App Brainy.