---
title: "التخطيط"
description: "فئات حجم النافذة، وسلّم التباعد، وكيف تتكيف التخطيطات بينها."
url: "https://tanrei.chnotchy.com/ar/foundations/layout/"
last_updated: 2026-10-23T17:33:05.000Z
---

# التخطيط

> فئات حجم النافذة، وسلّم التباعد، وكيف تتكيف التخطيطات بينها.

## فئات حجم النافذة

يصف 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 حرفًا تقريبًا في السطر. وفي النوافذ الكبيرة والكبيرة جدًّا، ضع حدًّا أقصى لعمود النص ودع الهوامش أو جزءًا مساندًا يستوعب الباقي.