التكيّف مع أحجام الشاشات المختلفة

سيعمل Steady على هواتف يتراوح عرضها بين نحو 360 و440 نقطة، والارتفاعات تتفاوت أكثر من ذلك. تصميم شاشة منفصلة لكل حجم فخّ في الصيانة: غيّر صف العادة في واحدة وعليك أن تتذكّر تغييره في أربع أخرى. الهدف شاشة واحدة تتكيّف، مبنية من القطع التي لديك أصلًا.

نوعان من العناصر على الشاشة

انظر إلى شاشة Today وصنّف أجزاءها إلى نوعين.

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

عناصر تتدفّق: الترويسة، وكتلة التقدّم، وقائمة العادات. تتراصّ واحدة بعد الأخرى، وتطول القائمة مع كل عادة. هذه مهمّة الـ Auto layout (الدرسان 2.1 و2.2).

البنية الناتجة بسيطة وتعمل مع معظم شاشات التطبيقات:

الـ frame الخاص بالشاشة نفسها بلا Auto layout. داخله يستخدم frame الـ Content ‏Auto layout عموديًا، وله الـ constraints ‏Left and right, Top and bottom، فيملأ دائمًا المساحة بين شريط الحالة وشريط التبويبات. شريط التبويبات وزر الإضافة إخوة لـ Content ولهما constraints على الحوافّ. وداخل Content، كل شيء عرضه Fill container، فتتمدّد الصفوف مع الشاشة.

احترم مناطق النظام

الهواتف الحديثة تحجز مساحة في الأعلى لشريط الحالة وفتحة الكاميرا، وفي الأسفل لمؤشّر الشاشة الرئيسية (home indicator). المحتوى تحتها صعب القراءة أو مستحيل النقر. أضف padding في أعلى frame الـ Content وفي أسفل شريط التبويبات حتى لا يقع هناك شيء مهم. الأحجام الدقيقة تختلف بين الأجهزة، فخذها من الـ UI kits الرسمية من Apple أو Google في Figma Community بدل التخمين.

المحتوى ثنائي البعد: الـ Grid

تعرض شاشة Habit detail أربع بطاقات إحصاءات: الـ streak الحالي، وأفضل streak، ونسبة الإنجاز، وإجمالي مرّات التسجيل. على الهاتف تجلس في عمودين؛ وعلى الجهاز اللوحي، أربعًا في صف.

وقت كتابة هذا الدرس، للـ Auto layout ‏flow من نوع Grid لهذا الغرض بالضبط. الـ frame الشبكي بـ Auto layout له عدد من الأعمدة والصفوف، وفجوات بينها، وأبناء يمكن أن يمتدّوا على أكثر من خلية. اضبط frame الإحصاءات على عمودين بفجوات 16 px (مطابقة للـ gutter في الـ Layout guide) في الهاتف؛ وفي نسخة الجهاز اللوحي، غيّره إلى 4 أعمدة. فتُرتَّب البطاقات الأربع نفسها من جديد دون إعادة رسمها.

الـ Wrap (الدرس 2.2) سينقل البطاقات إلى أسطر جديدة أيضًا، لكن مع الـ Wrap تحتفظ كل بطاقة بعرضها، فتحصل على بقايا غير منتظمة. أما الـ Grid فيُبقي الأعمدة متساوية، وهذا ما تحتاجه لوحة إحصاءات.

طقس تغيير الحجم

قبل أن تقبل صوفيا أي شاشة، تُجري الاختبار نفسه، ويجب أن تفعل مثلها:

1. كرّر frame الشاشة مرّتين.
2. غيّر عرض إحدى النسختين إلى 360 والأخرى إلى 440، واضبط الارتفاعات على هاتف قصير وآخر طويل.
3. اقرأ كل نسخة من الأعلى إلى الأسفل. ابحث عن التداخلات، والقصّ غير المقصود، والعناصر الطافية في منتصف الشاشة، والفجوات التي كبرت بشكل غريب.
4. أصلح الأصل، لا النسخ. واحذف النسخ حين ينجح الأصل.

ثم اختبر المحتوى تحت الضغط، لأن المحتوى يكسر تخطيطات أكثر مما تكسرها العروض. استخدم اسم عادة من 40 حرفًا، وstreak من أربعة أرقام، وقائمة فارغة (“No habits yet”). وأخيرًا، كبّر كل text style بنحو 30% في نسخة. كثيرون يضبطون حجم نص أكبر في إعدادات هواتفهم، والصف الذي لا يعمل إلا عند 17 px سينكسر عندهم أولًا.

انتهى القسم 2: شاشاتك تتراصّ وتتمدّد وتلتفّ وتثبت بشكل صحيح. في القسم 3 تتوقّف عن إعادة بناء صف العادة في كل شاشة، وتحوّله إلى component.