التخطيط
فئات حجم النافذة، وسلّم التباعد، وكيف تتكيف التخطيطات بينها.
يصف Tanrei العرض المتاح بخمس فئات. وهي تشير إلى النافذة أو الحاوية التي يعيش فيها التخطيط، لا إلى نوع الجهاز: جهاز لوحي في وضع العرض المقسوم هو من الفئة المضغوطة، وهاتف مفتوح الطيّ ليس منها.
| الفئة | العرض | التخطيط المعتاد |
|---|---|---|
| مضغوطة (Compact) | أقل من 600 | عمود واحد. التنقل في شريط بالأسفل أو خلف قائمة. |
| متوسطة (Medium) | من 600 إلى 839 | عمود واحد بهوامش أوسع، أو عمودان حيث يسمح المحتوى. يصير درج تنقل مطويّ (عمود من الأيقونات) ممكنًا. |
| موسَّعة (Expanded) | من 840 إلى 1199 | جزءان، مثل القائمة والتفاصيل. تنقل دائم الظهور. |
| كبيرة (Large) | من 1200 إلى 1599 | جزءان أو ثلاثة. طول السطر، لا النافذة، هو ما يحدّ عرض النص. |
| كبيرة جدًّا (Extra-large) | 1600 فأكثر | مثل الكبيرة، بهوامش سخية؛ لا تمدّ المحتوى ليملأ النافذة. |
العروض بوحدات مستقلة عن كثافة الشاشة: بكسلات CSS على الويب، ونقاط (points) على منصات Apple، و dp على Android، وبكسلات منطقية في Flutter.
حين يعبر التخطيط حدًّا بين فئتين، غيِّره بإحدى طرق قليلة يمكن توقّعها:
- اكشف جزءًا كان خلف نقرة، مثل عرض التفاصيل بجانب قائمته.
- اقسم عمودًا واحدًا إلى عمودين.
- غيِّر حجم الأجزاء والهوامش بالتناسب.
- انقل عنصرًا من موضعه، كأن ينتقل شريط التنقل من الأسفل إلى درج تنقل مطويّ في الجانب.
- استبدل بالمكوّن نظيره المخصص للشاشات الأكبر، كأن تصير اللوحة السفلية لوحة جانبية.
ثلاثة ترتيبات تغطي معظم الشاشات: خلاصة (feed) من البطاقات في شبكة متجاوبة، وقائمة وتفاصيل (list–detail)، ومحتوى مع جزء مساند (supporting pane).
رموز التباعد (tokens) مضاعفات وكسور لأساس مقداره 8 وحدات. الرقم في اسم الرمز نسبة مئوية من ذلك الأساس، فقيمة space100 هي 8، وقيمة space50 هي 4، وقيمة space200 هي 16.
| الرمز | القيمة | معاينة |
|---|---|---|
--tanrei-sys-space-space0 | 0px | |
--tanrei-sys-space-space25 | 2px | |
--tanrei-sys-space-space50 | 4px | |
--tanrei-sys-space-space75 | 6px | |
--tanrei-sys-space-space100 | 8px | |
--tanrei-sys-space-space125 | 10px | |
--tanrei-sys-space-space150 | 12px | |
--tanrei-sys-space-space175 | 14px | |
--tanrei-sys-space-space200 | 16px | |
--tanrei-sys-space-space250 | 20px | |
--tanrei-sys-space-space300 | 24px | |
--tanrei-sys-space-space400 | 32px | |
--tanrei-sys-space-space450 | 36px | |
--tanrei-sys-space-space500 | 40px | |
--tanrei-sys-space-space600 | 48px | |
--tanrei-sys-space-space700 | 56px | |
--tanrei-sys-space-space800 | 64px | |
--tanrei-sys-space-space900 | 72px |
مولَّد من design/tokens/tanrei.light.tokens.json, tokens/sys/space.tokens.json
استخدم الدرجات الصغيرة داخل المكوّنات، ووسط السلّم بين المكوّنات، والدرجات الكبيرة بين الأقسام. ولا يقلّ التباعد بين أهداف اللمس عن space100 أبدًا.
أبقِ النص المتصل بين 45 و 80 حرفًا تقريبًا في السطر. وفي النوافذ الكبيرة والكبيرة جدًّا، ضع حدًّا أقصى لعمود النص ودع الهوامش أو جزءًا مساندًا يستوعب الباقي.