سيعمل Steady على هواتف يتراوح عرضها بين نحو 360 و440 نقطة، والارتفاعات تتفاوت أكثر من ذلك. تصميم شاشة منفصلة لكل حجم فخّ في الصيانة: غيّر صف العادة في واحدة وعليك أن تتذكّر تغييره في أربع أخرى. الهدف شاشة واحدة تتكيّف، مبنية من القطع التي لديك أصلًا.
\nانظر إلى شاشة Today وصنّف أجزاءها إلى نوعين.
\nعناصر مثبّتة على الشاشة: شريط التبويبات في الأسفل، وزر الإضافة العائم في الزاوية. يجب أن تبقى ملتصقة بحافّة مهما فعل المحتوى. هذه مهمّة الـ constraints (الدرس 1.4).
\nعناصر تتدفّق: الترويسة، وكتلة التقدّم، وقائمة العادات. تتراصّ واحدة بعد الأخرى، وتطول القائمة مع كل عادة. هذه مهمّة الـ Auto layout (الدرسان 2.1 و2.2).
\nالبنية الناتجة بسيطة وتعمل مع معظم شاشات التطبيقات:
\nالـ 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 بدل التخمين.
تعرض شاشة Habit detail أربع بطاقات إحصاءات: الـ streak الحالي، وأفضل streak، ونسبة الإنجاز، وإجمالي مرّات التسجيل. على الهاتف تجلس في عمودين؛ وعلى الجهاز اللوحي، أربعًا في صف.
\nوقت كتابة هذا الدرس، للـ Auto layout flow من نوع Grid لهذا الغرض بالضبط. الـ frame الشبكي بـ Auto layout له عدد من الأعمدة والصفوف، وفجوات بينها، وأبناء يمكن أن يمتدّوا على أكثر من خلية. اضبط frame الإحصاءات على عمودين بفجوات 16 px (مطابقة للـ gutter في الـ Layout guide) في الهاتف؛ وفي نسخة الجهاز اللوحي، غيّره إلى 4 أعمدة. فتُرتَّب البطاقات الأربع نفسها من جديد دون إعادة رسمها.
\nالـ Wrap (الدرس 2.2) سينقل البطاقات إلى أسطر جديدة أيضًا، لكن مع الـ Wrap تحتفظ كل بطاقة بعرضها، فتحصل على بقايا غير منتظمة. أما الـ Grid فيُبقي الأعمدة متساوية، وهذا ما تحتاجه لوحة إحصاءات.
\nقبل أن تقبل صوفيا أي شاشة، تُجري الاختبار نفسه، ويجب أن تفعل مثلها:
\nثم اختبر المحتوى تحت الضغط، لأن المحتوى يكسر تخطيطات أكثر مما تكسرها العروض. استخدم اسم عادة من 40 حرفًا، وstreak من أربعة أرقام، وقائمة فارغة (“No habits yet”). وأخيرًا، كبّر كل text style بنحو 30% في نسخة. كثيرون يضبطون حجم نص أكبر في إعدادات هواتفهم، والصف الذي لا يعمل إلا عند 17 px سينكسر عندهم أولًا.
\n\nانتهى القسم 2: شاشاتك تتراصّ وتتمدّد وتلتفّ وتثبت بشكل صحيح. في القسم 3 تتوقّف عن إعادة بناء صف العادة في كل شاشة، وتحوّله إلى component.
\n","toc":[{"id":"sec-1","text":"نوعان من العناصر على الشاشة","level":2},{"id":"sec-2","text":"احترم مناطق النظام","level":2},{"id":"sec-3","text":"المحتوى ثنائي البعد: الـ Grid","level":2},{"id":"sec-4","text":"طقس تغيير الحجم","level":2}],"takeaways":["استخدم الـ constraints للعناصر المثبّتة على حوافّ الشاشة (شريط التبويبات، الزر العائم) والـ Auto layout للمحتوى الذي يتدفّق.","صمّم على عرض متوسط واحد، ثم أثبت أن الشاشة تعمل عند أصغر عرض وأكبر عرض تدعمهما.","أبعد المحتوى عن منطقتي شريط الحالة ومؤشّر الشاشة الرئيسية، وخذ أحجامهما الدقيقة من UI kit رسمي للمنصّة.","الـ Grid في الـ Auto layout يتعامل مع المحتوى ثنائي البعد مثل بطاقات الإحصاءات، ويمكن أن يتغيّر عدد الأعمدة بين الـ breakpoints.","اختبر تحت الضغط بنصوص طويلة وأحجام خط أكبر وحالات فارغة، لأن المحتوى الحقيقي يكسر التخطيطات أكثر مما يكسرها عرض الشاشة."],"further":[{"title":"Combine vertical, horizontal, and grid auto layout flows","url":"https://help.figma.com/hc/en-us/articles/31441443713047-Combine-vertical-horizontal-and-grid-auto-layout-flows"},{"title":"Use the grid auto layout flow","url":"https://help.figma.com/hc/en-us/articles/31289469907863-Use-the-grid-auto-layout-flow"},{"title":"Layout (Apple Human Interface Guidelines)","url":"https://developer.apple.com/design/human-interface-guidelines/layout"}],"quiz":[{"q":"شاشة Today في Steady عبارة عن frame عمودي كبير واحد بـ Auto layout يضمّ الترويسة والقائمة وشريط التبويبات. في هاتف طويل ينتهي شريط التبويبات في منتصف الشاشة، تحت آخر عادة مباشرة. لماذا؟
","options":[{"text":"الـ Auto layout يضع شريط التبويبات مباشرة بعد إخوته، فيتبع المحتوى بدل الحافّة السفلية للشاشة.","why":"صحيح. في الـ flow يعتمد موضع شريط التبويبات على ما يسبقه. التثبيت على حافّة مهمّة الـ constraint."},{"text":"شريط التبويبات يحتاج الـ constraint Scale.","why":"Scale سيغيّر حجم الشريط بشكل نسبي، ولن يثبّته في الأسفل مع ذلك."},{"text":"الهواتف الطويلة تحتاج ملف تصميم منفصلًا.","why":"شاشة واحدة يمكن أن تخدم ارتفاعات كثيرة. الملفات المنفصلة تضاعف عبء الصيانة."},{"text":"الـ Layout guide فيه صفوف قليلة.","why":"الـ Layout guides لا تحرّك الطبقات أبدًا. إنها أدوات بصرية مساعدة فقط."}],"answer":0},{"q":"ما أكفأ طريقة للتحقّق من أن شاشة تعمل عبر أحجام الهواتف المختلفة؟
","options":[{"text":"إعادة رسم الشاشة من الصفر لكل عرض.","why":"إعادة الرسم لا تختبر شيئًا عن تكيّف تصميمك الواحد، وتخلق نسخًا تتباعد مع الوقت."},{"text":"تكبير لوحة العمل وتصغيرها.","why":"التكبير يغيّر طريقة عرضك، لا حجم الـ frame، فلا تُنفَّذ الـ constraints ولا قواعد تغيير الحجم أبدًا."},{"text":"الطلب من المطوّرين إخبارك إن انكسرت.","why":"اكتشاف أخطاء التخطيط بعد البناء يكلّف أكثر بكثير من تغيير حجم frame الآن."},{"text":"تكرار الـ frame وتغيير حجم النسخ إلى أضيق عرض وأعرض عرض تدعمهما.","why":"صحيح. تغيير الحجم يشغّل كل constraint وكل قاعدة Auto layout، فتظهر الأخطاء فورًا."}],"answer":3},{"q":"في شاشة Habit detail، تجلس أربع بطاقات إحصاءات في عمودين على الهواتف. وعلى الأجهزة اللوحية تريدها أربعًا في صف واحد. أيّ أداة تناسب أكثر؟
","options":[{"text":"Auto layout أفقي مع Wrap وبطاقات بعرض ثابت.","why":"الـ Wrap قد يعمل، لكن البطاقات الثابتة العرض تترك فجوات غير منتظمة في معظم العروض. الـ Grid يُبقي الأعمدة متساوية."},{"text":"Auto layout من نوع Grid، بعمودين في frame الهاتف و4 في frame الجهاز اللوحي.","why":"صحيح. الـ Grid يضع العناصر في صفوف وأعمدة منتظمة، وتغيير عدد الأعمدة يعيد ترتيب البطاقات نفسها."},{"text":"أربعة frames منفصلة موضوعة يدويًا بالـ constraints.","why":"التموضع اليدوي يجب أن يُعاد لكل حجم ولكل بطاقة جديدة."},{"text":"Auto layout عمودي مع gap سالب.","why":"الـ gap السالب يجعل العناصر تتداخل؛ ولا يصنع أعمدة."}],"answer":1}],"exercise":{"kind":"order","items":["design-mid","content-frame","fill-children","constraints","resize-copies","stress","fix-original"],"title":"اجعل شاشة Today متجاوبة","prompt":"لديك شاشة Today ثابتة وُضع كل شيء فيها يدويًا. رتّب هذه الخطوات بالترتيب الذي ستتّبعه لتجعلها تتكيّف من هاتف بعرض 360 px إلى آخر بعرض 440 px، بالطريقة التي تتّبعها صوفيا.
\n","hints":["لا يمكنك ضبط Fill container قبل أن يكون الأبناء داخل frame بـ Auto layout.","الاختبار يأتي بعد اكتمال البنية، والإصلاحات تذهب إلى الأصل لا إلى نسخ الاختبار.","صمّم، ثم لُفّ المحتوى، ثم اضبط الـ Fill، ثم ثبّت الحوافّ وتأكّد أن الصفوف تتمدّد، ثم اختبر العروض، ثم اختبر المحتوى تحت الضغط، ثم أصلح."],"explanation":"ابدأ من تصميم واحد متقن بعرض متوسط حتى يكون لديك شيء يستحق التكييف. لُفّ الأجزاء المتدفّقة في frame محتوى عمودي بـ Auto layout، لأن Fill container لا يوجد إلا لأبناء الـ Auto layout. ثم اضبط عرض الصفوف والنصوص على Fill container لتتمدّد. بعد ذلك أضف الـ constraints في frame الشاشة لـ frame المحتوى وللعناصر المثبّتة؛ ولا يُظهر اختبار السحب السريع تمدّد الصفوف إلا لأن الـ Fill مضبوط عليها مسبقًا. الآن فقط تغيّر حجم النسخ إلى أضيق عرض وأعرضه، ثم تختبر المحتوى تحت الضغط بأسماء طويلة وقوائم فارغة ونص أكبر. وأخيرًا تصلح الأصل وتحذف النسخ، فيبقى هناك مصدر حقيقة واحد.
\n","checkLabels":{},"itemText":{"design-mid":"صمّم الشاشة بعرض متوسط مثل 393 px.","content-frame":"لُفّ الترويسة والتقدّم وقائمة العادات في frame عمودي بـ Auto layout اسمه Content.","fill-children":"اضبط عرض الصفوف والنصوص داخل Content على Fill container.","constraints":"اضبط الـ constraints (Content على Left and right وTop and bottom؛ وشريط التبويبات على Left and right وBottom؛ وزر الإضافة على Right وBottom)، ثم اسحب حافّة الشاشة لتوسيعها وتأكّد أن الصفوف تتمدّد معها.","resize-copies":"كرّر الشاشة وغيّر عرض النسخ إلى 360 و440 px.","stress":"اختبر النسخ تحت الضغط باسم عادة طويل، وقائمة فارغة، ونص أكبر بنحو 30%.","fix-original":"أصلح ما انكسر في الشاشة الأصلية، ثم احذف نسخ الاختبار."}},"words":631,"readMinutes":4}