نظام الشبكة والنمطية

1) لماذا الشبكة

• يسرع التصميم والتطوير (اللغة المشتركة: «12 عمودًا، الحضيض 24»)،
• يقلل من الحمل المعرفي (حتى الإيقاع والخطوط المستقرة)،
• زيادة إمكانية نقل المكونات بين الصفحات
• يسمح لك ببناء مكتبة معيارية بدون «وضع مصغر».

2) العناصر الشبكية الأساسية

حاوية - الحد الأقصى لعرض المحتوى، مساحة مركزية.
الأعمدة - المناطق الرأسية لوضع الوحدات.
الحضيض - مساحة أفقية بين الأعمدة.
هامش - حقول خارجية إلى يسار/يمين الحاوية.
Row/Track - الدليل الأفقي (في شبكة CSS - خطوط/مسارات).
خط الأساس - شبكة الطباعة العمودية.

الإيقاع الرأسي الموصى به: 8-pt (أحيانًا 4-pt للفروق الدقيقة)، وحدات الأحجام والفواصل هي مضاعفات 4/8.

3) نقاط التوقف والحاويات

• حاوية راستر (إصلاح. الحد الأقصى للعرض) على الشاشات الكبيرة، السوائل - على الهاتف المحمول.
• يمكن أن يزيد الحضيض بسلاسة إلى نقاط توقف كبيرة.
• الأعمدة - 4/6/8/12 كـ «مجموعة أساسية».

4) النمطية والكثافة

الوحدة - كتلة من المحتوى تشغل أعمدة 1..N ومضاعفات الارتفاعات الأساسية.

• الراحة (لوحات القيادة، القراءة): خطوط أكبر، الفواصل 16-24.
• Compact (tables, pro-mode): fonts + 0/ − 1 px, phentical instruments − 4/ − 8, row heights are third (multiples of 8).

يجب أن يكون للمكونات حالتان مسبقتان من الكثافة الدنيا.

5) الطباعة وشبكة خط الأساس

حدد ارتفاع الخط الأساسي (على سبيل المثال، 24 px) ومزامنة ارتفاعات العناصر (الأزرار 40/48/56 px هي مضاعفات خط الأساس).
تثبت العناوين الإيقاعات الرأسية: أعلى/أسفل المسافات هي مضاعفات 8.
محاذاة الأيقونات إلى ارتفاع النص.

6) نماذج تخطيط

6. 1 بطاقات

الشبكة: فسيفساء (إصلاح. عرض البطاقة) أو العمود (البطاقة = الأعمدة N).
الحد الأدنى لارتفاعات المحتوى لتجنب «القفز» عند التحميل ؛ الهيكل العظمي داخل البطاقة.
الحشوة الداخلية: 16/20/24 حسب نقطة التوقف.

6. 2 جداول

حاوية العرض الكامل ؛ تجميد العمود/الغطاء الأول عند التمرير أفقيا.
الخلايا ذات طية أساسية ؛ يتم محاذاة الأعمدة الرقمية بالأرقام/الأرقام العشرية.
على XS - «تخطيط مكدس» بدلاً من التمرير الأفقي إذا كان هناك الكثير من الأعمدة.

6. 3 نماذج

عمود واحد في XS/SM، من عمودين أو ثلاثة أعمدة في MD + (مع مراعاة منطق علامات التبويب/الأقسام).
Field + label + help text available in a common module (الارتفاعات مضاعفات 8).

6. 4 لوحات معلومات

شبكة ذات مسارات ثابتة وسحب (مناطق) للاستقرار.
الأدوات لها الحد الأدنى والعرض الأقصى في الأعمدة ؛ المرتفعات هي مضاعفات خط الأساس.
عند إعادة التشغيل - يتغير عدد الأعمدة، لا تقسم الأدوات بشكل تعسفي.

7) القدرة على التكيف والتخطيط التلقائي والسلوك

المحتوى أمام الشبكة: تتكيف الشبكة مع المحتوى بدلاً من كسره.

• استخدم القيود (يسار/يمين/وسط) والتخطيط التلقائي للبطاقات/القوائم.
• خيارات مكونات الدعم لـ XS/SM/MD/LG (تغيير الحلقات، ترتيب الفتحات).

• على مستوى القسم - شبكة CSS (المناطق والأعمدة والصفوف).
• داخل المكونات - فليكس (محاور، توازن المساحات).

8) شبكة CSS/Flex - ورشة عمل

css
.container {
max-width: 1280px; margin: 0 auto; padding: 0 16px;
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-4 { grid-column: span 4; }
@media (max-width: 1199px) {
.container { grid-template-columns: repeat(8, 1fr); gap: 20px; }
.col-4 {grid-column: span 8; }/full-width card/
}
@media (max-width: 839px) {
.container { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}
@media (max-width: 599px) {
.container { grid-template-columns: repeat(4, 1fr); }
}

css
.dashboard {
display: grid; gap: 24px;
grid-template:
"kpi kpi chart chart" auto
"tbl tbl chart chart" 1fr / 1fr 1fr 1fr 1fr;
}
.kpi  { grid-area: kpi; }
.chart { grid-area: chart; }
.tbl  { grid-area: tbl; }
@media (max-width: 1199px) {
.dashboard { grid-template:
"kpi" auto "chart" auto "tbl" 1fr / 1fr; }
}

9) المسافات البادئة والرموز

التقاط المقاييس في نظام التصميم.

json
{
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32, "3xl": 48 },
"container": { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"gutter": { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"columns": { "xs": 4, "sm": 6, "md": 8, "lg": 12 }
}

• الفواصل الداخلية للمكونات من «الفضاء».
• الحقول الخارجية للحاويات من «مزراب »/« هامش».
• ارتفاعات العناصر هي مضاعفات 8 (40/48/56).

10) المكونات المعيارية

• معرفة عدد الأعمدة التي يأخذها في كل نقطة توقف ؛
• ولها أبعاد دنيا/قصوى ؛
• لا تعتمد على البكسلات «السحرية» - فقط الرموز ؛
• إبقاء الشبكة الداخلية (العنوان، المحتوى، القدم) على خط الأساس.

11) الصور وأجزاء الوسائط

تحديد نسبة العرض إلى العرض (على سبيل المثال 16/9، 4/3، 1/1) للمعاينات والبطاقات.

css
.media { aspect-ratio: 16 / 9; object-fit: cover; }

في XS، استخدم النزيف الكامل (الصورة حول الحواف) فقط للترويج، بقية المحتوى يتبع الحاوية.
نص الصورة - فقط على الزلات/التراكبات، على النقيض ≥ AA.

12) RTL والتوطين

يعكس اتجاه الشبكة: «dir =» rtl' و «dir (rtl)» -rules لـ indents/icons.
ترتيب العمود والأعمدة المجمدة في الجداول - ضع في اعتبارك الانعكاس.
يمكن أن يغير طول الخطوط وعمليات النقل ارتفاعات الوحدات - ضع المخزون.

13) تفاصيل iGaming

مناطق الترويج واللافتات: شبكة منفصلة ذات وحدات نموذجية كبيرة ؛ النص موجود دائمًا على اللوحة، ويتناقض AAA مع الإشعارات الحرجة (18 +، الحدود، المخاطر).
القادة/التصنيفات: الجداول ذات العمود الأول الثابت والرأس اللزج، والأرقام الجدولية (الجداول النوم)، وارتفاعات الصف مضاعفات 8.
لوحات معلومات اللاعبين/العمليات: تحتل الأدوات (الجلسات، الودائع، RTP، صافي الودائع) 3-6 أعمدة على شبكة 12 ؛ إعادة البناء التعاقبي على MD/SM.
بطاقات البطولة: شبكة البطاقات 3 × N (LG)، 2 × N (MD)، 1 × N (SM/XS) ؛ CTA في مكان دائم.

14) إمكانية الوصول والتركيز

لا ينبغي أن تكسر حلقات التركيز الإيقاع: إضافة الموجز أو عنصر زائف داخلي.
الحد الأدنى لحجم النقر: 44 × 44 (الهاتف المحمول )/32 × 32 (سطح المكتب).
لا ترمز المعنى بالوضع فقط ؛ احفظ ملصقات النص وسمات الأغنية.

15) الأداء

قلل من عمق شبكات التعشيش: 1 قسم الشبكة الرئيسي + ثناءات بالداخل.
تجنب الظلال/الأقنعة الثقيلة على مئات البطاقات ؛ استخدم أنماط مسطحة في القوائم.
التحميل الكسول لمحتوى الوسائط ؛ النسب الثابتة لمنع CLS.

16) أنتيباترن

اتساق «الشبكة حسب الرغبة» → ينهار في كل صفحة.
يختلف الحضيض بشكل تعسفي حسب القسم.
الكثافة غير المتسقة (سواء مضغوطة أو مريحة في شاشة واحدة).
المكونات المعتمدة على العرض السحري (بدون أعمدة/رموز).
جداول بتمرير أفقي على الهاتف المحمول بدون تخطيط بديل.
نص في الصورة دون موت والتحكم في التباين.

17) قائمة QA المرجعية

هيكل

• تتوافق الأعمدة/الحاويات/المارجين مع نقاط التوقف.
• الحضيض مستقر داخل الصفحة.
• المرتفعات والفواصل هي مضاعفات 8.

المكونات

• عرض العمود (XS. XL) و min/max تم تعريفهما.
• الشبكات الداخلية متماشية مع خط الأساس.

الجداول/الاستمارات

• الغطاء اللاصق/العمود الأول ؛ الوضع المكدس على XS.
• حقول النماذج هي مضاعفات خط الأساس ؛ نص التسمية/المساعدة لا «يقفز».

A11y

• أنماط التركيز لا تكسر الإيقاع ؛ مناطق الزمرة ≥ الحد الأدنى.

الأداء

• لا يوجد نظام مراقبة مستمر بسبب الكتل الإعلامية ؛ يتم تمكين التحميل الكسول.

18) الرموز والوثائق في نظام التصميم

• والقيم «حاوية»، و «أعمدة»، و «مزراب»، و «مساحة»، وخط الأساس ؛
• وأمثلة للتخطيطات (البطاقات/الجداول/النماذج/لوحات القيادة) ؛
• تحديد الكثافة المسبقة (الراحة/الاتفاق) وتأثيرها على المكونات ؛
• مقتطفات رمزية لأنماط/تخطيطات شبكة CSS/Flex و Figma.

موجز موجز

الشبكة هي عقد بين التصميم والتطوير. التقاط نقاط الاستراحة والحاويات ومكبرات الصوت وإيقاع 8 بيزو، وتصميم الرموز ونماذج التصميم، وتوفير خيارات الكثافة والقدرة على التكيف والتوافر. ثم مقياس الصفحات بشكل متوقع، وإعادة استخدام المكونات، والأمر أسرع وأكثر استقرارًا.