المسافات والشبكة والحركة | نظام تصميم أمانة

المسافات (شبكة 4px)

كل المسافات من مضاعفات 4px. نوزّع الإيقاع: مسافة صغيرة جوه المجموعة الواحدة، وكبيرة بين المجموعات. لو كل المسافات متساوية الشاشة بتبقى مسطحة وصعب تتقرا.

السلم

--space-14px

--space-28px

--space-312px

--space-416px

--space-520px

--space-624px

--space-832px

--space-1040px

--space-1248px

--space-1664px

--space-2080px

--space-2496px

الاستخدام	القيمة
أيقونة وكلمة، عناصر chip	4 إلى 8
بين حقل والتالي، عناصر قائمة	12 إلى 16
هوامش البطاقة واللوحة	16 (موبايل)، 20 إلى 24 (ويب)
بين أقسام الصفحة	32 إلى 48 (داشبورد)، 80 (موقع تسويقي)

كل الهوامش والـ padding بخصائص منطقية (margin-inline-start، padding-inline، inset-inline-end) عشان الاتجاه يتبدل من غير ما نعدّل CSS.

الزوايا والظلال

الزوايا (radius)

مفيش سقف 16px زي زمان: الزوايا كبيرة ودايرية عشان الواجهة تبقى دافية وودودة. والشكل المميز هو القوس (--arch): نص دايرة فوق وزاوية 26px تحت، وبيتحط عليه البورتريه والأيقونة الكبيرة.

سلم الزوايا. في تطبيق الأسرة والعاملة (data-surface) md بيبقى 20px وlg بيبقى 28px

xs · 8kbd، شارات صغيرة

sm · 12أزرار صغيرة، قوايم

md · 18كروت، حقول، تنبيهات

lg · 26لوحات، bottom sheet، pcard

xl · 34مراحل الـ flow، الأقسام الكبيرة

pillchips، شارات، بحث، tier

archبورتريه، أيقونة الخطوة

الارتفاع (elevation): خط حبر وظل صلب

القاعدة: الكروت العادية هادية: خط رفيع (--hair) وظل خفيف جداً. الحاجة الوحيدة المهمة في الشاشة (الزر الأساسي، الكارت المميز، الـ tab bar، بورتريه البروفايل) بتاخد خط حبر 2px وظل صلب مزاح بدون blur (--shadow-hard). الزر بيتحرك لجوه ويقف ظله لما تضغط عليه (:active). لو كل الكروت ليها ظل صلب، ماحدش بقى مهم.

درجات الارتفاع

sm
خط رفيع + ظل 1px
صفوف، حقول

md
خط رفيع + ظل ناعم
الكروت العادية

hard-sm
3px 3px 0 حبر
أزرار، chips مختارة

hard
4px 4px 0 حبر
الكارت المهم، tab bar

arch
8px 8px 0 ملوّن
بورتريه بظل لون

في الوضع الغامق خط الحبر بيتحول لفيروزي-رمادي مضيء والظل الصلب أسود، وفي Wireframe الرمادي الألوان بتتحول لرمادي والخطوط بتفضل.

الطبقات (z-index)

سلم دلالي، ممنوع الأرقام العشوائية (999 و 9999). كل طبقة فوق اللي قبلها بقصد.

--z-tooltip600Tooltip، تلميحات الرسوم

--z-toast500Toast: فوق كل حاجة حتى النوافذ

--z-modal410Dialog و Sheet (النافذة)

--z-modal-backdrop400الستارة (scrim) خلف النافذة

--z-drawer300Drawer الجانبي وsidebar على الموبايل

--z-sticky200الشريط العلوي، ترويسات الجداول، sidebar

--z-dropdown100Menu و Popover

--z-raised1عنصر فوق شقيقه في نفس السياق

--z-base0الافتراضي

القوائم المنسدلة جوه حاويات overflow: hidden بتتقص. استخدم <dialog> أو position: fixed أو popover API.

الشبكة والـ breakpoints

الموبايل أولاً. البريك بوينتس: 360 (أصغر موبايل أندرويد شائع) · 600 (موبايل كبير / تابلت صغير) · 840 (تابلت، sidebar بيتحول لـ Drawer تحتها) · 1200 (لابتوب) · 1440 (شاشة كبيرة). الـ CSS بيستخدم max-width: 599px و 839px و 1199px.

36060084012001440

العرض	الشبكة	التغييرات الهيكلية
أقل من 600	عمود واحد، هوامش 16px	Bottom tab bar، Bottom sheets، جداول تتحول لقوائم بطاقات، `.hide-sm`
600 إلى 839	2 عمود	نفس الموبايل لكن بشبكة أوسع، sidebar مخفي (زر قائمة)
840 إلى 1199	6 إلى 8 أعمدة	sidebar ظاهر في الداشبورد، `.split` يتحول لعمود واحد، لوحات col-6
1200 وأكتر	12 عمود `.dash-grid`	تقسيم list وdetail جنب بعض (`.split`)، KPI strip بأربع خانات

الحاويات

.container أقصى عرض 1200px (--container) للموقع، و .container--narrow 720px للنصوص والنماذج.
الداشبورد: سايدبار حبر غامق والصفحة ورق، و.page بأقصى عرض 1440px، لوحات على شبكة 12 عمود بفجوة 16px.
النص المقروء: max-width: 68ch (--measure).

شبكة الـ 12 عمود (غيّر عرض النافذة وشوف الانهيار)

col-4

col-8

col-4

الكثافة (density) وسطوح المنتج

أربع ملامح بتتحدد بـ attribute على جذر الشاشة. الكومبوننتس نفسها، بس الارتفاعات والأيقونات والـ padding بتتغير من خلال --control-h و --row-h و --icon-size.

الملف	Attribute	ارتفاع التحكم	الصف	الأيقونة	الاستخدام
مريح	(افتراضي)	40px	48px	20px	الويب والموقع
مضغوط	`data-density="compact"`	36px	40px	18px	لوحة المكتب والإدارة
تطبيق	`data-surface="app"`	48px	56px	22px	تطبيق الأسرة
عاملة	`data-surface="worker"`	56px	64px	26px	تطبيق العاملة (وخط أكبر)

نفس النموذج في الملامح الأربعة

مريح

الاسم

إقامة كاملة

مضغوط

الاسم

إقامة كاملة

تطبيق

الاسم

إقامة كاملة

عاملة

الاسم

إقامة كاملة

أهداف اللمس

الإصبع مش دقيق (حوالي 7mm). الحد الأدنى لأي حاجة بتتضغط: 44px (WCAG 2.2)، وعلى أندرويد 48dp. في تطبيق العاملة 56dp لأن الاستخدام بإيد واحدة وفي ضغط. العنصر ممكن يبان أصغر، بس منطقة اللمس (hit area) لازم تتمدد بالـ padding.

الحجم المرئي مقابل منطقة اللمس (الخط المتقطع)

44px: الحد الأدنى

48dp: تطبيق الأسرة

56dp: تطبيق العاملة

المسافة بين هدفين متجاورين لا تقل عن 8px.
الإجراءات الأساسية في الثلث السفلي من الشاشة (منطقة الإبهام). الإجراءات المدمّرة بعيدة عن الإبهام.
مفيش إجراء بإيماءة (swipe) بس: لازم زر بديل.

الحركة

المبدأ: الحركة بتوصّل حالة (تغيّر، استجابة، تحميل، ظهور) وبس. مفيش حركة للزينة. المدة 150 إلى 250ms لمعظم التحولات لأن المستخدم في مهمة. مفيش تتابع حركات عند فتح الصفحة (page-load choreography): المنتج بيفتح على شغل. الأنيميشن بخصائص transform و opacity قدر الإمكان، مش width أو top.

Token	القيمة	الاستخدام
`--dur-instant`	80ms	ضغط الزر (translateY 1px)
`--dur-fast`	140ms	hover، تغيير لون، tooltip، menu
`--dur-base`	200ms	Switch، Dialog، Toast، قوائم تنفتح
`--dur-slow`	320ms	Bottom sheet، Drawer، شريط تقدم
`--ease-out`	cubic-bezier(.25,1,.5,1)	الافتراضي: ease-out-quart
`--ease-out-expo`	cubic-bezier(.16,1,.3,1)	الأوراق والأدراج (دخول كبير)
`--ease-in-out`	cubic-bezier(.65,0,.35,1)	حركات دورية زي موجة الصوت

قارن الأزمنة والمنحنيات (اضغط تشغيل)

--dur-fast 140ms · ease-out

--dur-base 200ms · ease-out

--dur-slow 320ms · ease-out-expo

تحولات الحالة (state): كل واحدة بتوصّل تغيير حقيقي

زر: ضغط + تحميل + نجاح

Switch (200ms)

إشعارات واتساب

إظهار تفاصيل (max-height + opacity)

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

تقدم (320ms)

تقليل الحركة: أي أنيميشن بيتلغي أو بيتحول لتلاشي فوري لما المستخدم مفعّل prefers-reduced-motion. المدد في tokens بتبقى 1ms تلقائياً، فمفيش كومبوننت بيحتاج استثناء. جرّب تفعل الإعداد في نظامك وارجع للديمو فوق.

هيكل التطبيق (App shell)

الشاشة على الموبايل أربع طبقات: شريط الحالة، شريط التطبيق (appbar) فوق، المحتوى القابل للتمرير، والـ tab bar العايم أو زر الإجراء الأساسي. الإجراء الأساسي دايماً تحت في منطقة الإبهام.

9:41

اختيار مربية3 مرشحات

منى علي

مستوى 2

هدى سيد

مستوى 1

سارة محمود

مستوى 3

الطبقات الملوّنة فوق الإطار تمثّل مناطق الإبهام (يد واحدة): الأحمر صعب، الأصفر مقبول، الأخضر سهل.

1شريط الحالة 44px: ساعة وإشارة. نسيب ليه مساحة آمنة فوق (safe area).
2Appbar 56px: زر رجوع دايري بخط حبر على جهة البداية (يمين في RTL)، عنوان تقيل (Tajawal)، وإجراء ثانوي على النهاية. الإجراءات هنا نادرة لأنها في المنطقة الصعبة.
3المحتوى بتمرير رأسي. مفيش تمرير أفقي إلا في صف chips أو بطاقات (.hscroll) مع قطع بصري للكارت التالي.
4Bottom CTA: الإجراء الأساسي في الشاشة، بعرض كامل وبارتفاع 56px، ثابت تحت المحتوى. حد أقصى زرّين.
5Tab bar كبسولة بيضا بخط حبر وظل صلب، عايمة فوق المحتوى، بأربع أو خمس خانات: أيقونة 24px + كلمة 11px. التبويب الحالي ستيكر فيروزي بخط حبر + كلمة أعرض، مش لون وحده.
6مؤشر الصفحة الرئيسية (home indicator) 20px على iOS، وشريط التنقل بالإيماءات على أندرويد: نترك مساحة تحت الـ tab bar.

المساحات الآمنة (Safe areas)

على أندرويد وiOS الحديث فيه notch وشريط إيماءات. نستخدم env(safe-area-inset-top) للشريط العلوي و env(safe-area-inset-bottom) للـ tab bar والـ bottom CTA. في الـ wireframes بنرسمها كمساحة ثابتة (44px فوق، 20px تحت).

المساحات الآمنة في إطار الموبايل

44px: status bar + notch

المحتوى القابل للاستخدام

20px: home indicator

أندرويد أولاً: زر الرجوع في النظام يتبع تدفق الشاشات (مش بنعمل رجوع مخصص يخالفه).
iOS: إيماءة السحب من الحافة للرجوع تفضل شغالة، فمفيش عنصر تفاعلي ملاصق لحافة الشاشة (16px على الأقل).
لوحات الإدخال: لما الكيبورد يفتح، الزر الأساسي يطلع فوقه (visualViewport).