طراحی تطبیقی و نقاط شکستگی

1) اصول

1. محتوا اول: طرح بندی از وظایف و محتوا ساخته شده است، نه از عرض «محبوب».
2. Mobile-first: ما با یک گزینه ساده ساده شروع می کنیم و با افزایش قابلیت های عرض/ورودی پیچیده تر می شویم.
3. پیشرفت پیشرفته: UX اساسی بدون JS/انیمیشن کار می کند ؛ بهبود با توجه به شرایط مرتبط است.
4. سازگاری: الگوهای مشابه - رفتار مشابه در تمام نقاط شکست.
5. آگاهی از عملکرد: تصاویر، شبکه ها و اسکریپت ها در وزن و پیچیدگی سازگار هستند.

2) نقاط شکست (نقاط شکست)

ما با توجه به داده های دستگاه های واقعی و با تغییر الگوی (ستون/ناوبری/تایپوگرافی) انتخاب می کنیم.

مجموعه توصیه شده (نقطه مرجع)

• ما فقط هنگام تغییر ساختار وارد یک نقطه توقف می شویم (به عنوان مثال، 1 → 2 ستون کارت ها، ظاهر نوار کناری).
• شکستن محلی در یک جزء (درخواست ظرف) مجاز است.

3) درخواست کانتینر در مقابل درخواست های رسانه ای

هنگامی که پرس و جو رسانه 'media': طرح کل صفحه (ناوبری، قالب) را تغییر می دهد.
هنگامی که ظرف «container»: کارت/ویجت باید به عرض موجود خود تنظیم شود (جزء مستقل از صفحه است).

css
/ Включаем контейнерную оценку для блока /
.widget { container-type: inline-size; }

/ Внутри — адаптируем карточку по ширине контейнера /
@container (min-width: 520px) {
.card { grid-template-columns: 1fr 1fr; }
}

استفاده از رسانه ها برای قاب صفحه + ظروف برای اجزای.

4) تایپوگرافی: مایع + مراحل

«گیره ()» و مراحل را در نقاط شکست ترکیب کنید.

css
:root {
/ Базовая fluid-гарнитура /
--fs-body: clamp(15px, 1.2vw + 0.2rem, 18px);
--fs-h2:  clamp(20px, 1.6vw + 0.4rem, 24px);
}
body { font-size: var(--fs-body); line-height: 1.55; }
h2  { font-size: var(--fs-h2);  line-height: 1.3; }
@media (min-width: 1200px) {
h2 { letter-spacing:.005em; } / тонкая настройка на LG+ /
}

• طول خط 45-80 کاراکتر (ستون های فرعی 36-60).
• مراحل قدر مضربی از 4/8-pt هستند. ارتفاع خط در نقاط شکست پایدار است.

5) شبکه ها و ماژول ها

در سطح بخش - شبکه CSS (ستون ها، مناطق) ؛ در داخل - فلکس.

ارتفاع کامپوننت چند برابر پایه است (به عنوان مثال 40/48/56 PX)

ما 2 ایستگاه از پیش تنظیم تراکم داریم: Comfort (خواندن/داشبورد) و Compact (جداول/طرفدار).

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

6) تصاویر و رسانه ها

html
<img src="card-640.jpg"
srcset="card-640.jpg 640w, card-960.jpg 960w, card-1280.jpg 1280w"
sizes="(min-width:1200px) 33vw, (min-width:840px) 50vw, 100vw"
alt="Описание">

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

برای پس زمینه - «image-set ()» و بارگذاری تنبل.

متن در تصویر - فقط در صفحه/پوشش ؛ تفاوت ≥ AA

7) ناوبری و الگوهای پاسخگو

XS/SM: پایین نوک یا همبرگر، CTA قابل توجه ؛ جستجوی پنهان در بالا گسترش می یابد.
MD: نوار کناری مداوم/مگا منو ظاهر می شود.
LG/XL: دو سطح ناوبری، فیلترهای سریع، خرده نان.

رفتار: عناصر به طور تصادفی حرکت نمی کنند - همیشه یکی از طرح های قبلا شرح داده شده است.

8) ورودی: شناور/لمسی/صفحه کلید

css
@media (hover: hover) and (pointer: fine) { / hover-эффекты / }
@media (hover: none), (pointer: coarse)  { / touch-паттерны / }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

• بدون محتوای انتقادی «فقط در شناور».
• مناطق کلیک کنید: ≥ 44 × 44 (تلفن همراه)، ≥ 32 × 32 (دسکتاپ).
• صفحه کلید در تمام نقاط شکست پشتیبانی می شود.

9) مناطق امن و برش سیستم

css
.page {
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
padding-bottom:max(16px, env(safe-area-inset-bottom));
}

10) تم های تاریک/نور و کنتراست

موضوعات مستقل از نقاط توقف هستند: اهداف کنتراست در همه جا یکسان است.
در XS، اجتناب از لهجه «اسید» ؛ نور لینک ها را در یک پس زمینه تاریک افزایش دهید.
پشتیبانی از «prefers-color-scheme» و سوئیچ دستی.

11) عملکرد

بارگذاری تنبل از تصاویر/ویدجت ؛ اسکلت به جای اسپینر

CSS انتقادی - درون خطی یا از طریق 'رسانه =' چاپ '/استراتژی پیش بارگذاری ؛ JS بار تاخیر.
اجتناب از انیمیشن های طرح سنگین در لیست های طولانی ؛ «opacity/transform» را animate کنید.
سایه ها/فیلترهای «سنگین» را در ده ها کارت محدود کنید.

12) نشانه های سیستم طراحی (به عنوان مثال)

json
{
"breakpoints": { "xs": 360, "sm": 600, "md": 840, "lg": 1200, "xl": 1440 },
"container":  { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"columns":   { "xs": 4, "sm": 6, "md": 8, "lg": 12 },
"gutter":   { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"space":    { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 }
}

css
:root {
--bp-sm: 600px; --bp-md: 840px; --bp-lg: 1200px; --bp-xl: 1440px;
--container-lg: 1152px;
}
@media (min-width: var(--bp-lg)) {
.container { max-width: var(--container-lg); }
}

13) کارگاه قطعات (شکستن ظرف)

css
.card { display: grid; gap: 12px; container-type: inline-size; }
.card__media { aspect-ratio: 4/3; }
@container (min-width: 420px) {
.card { grid-template-columns: 1fr 1.2fr; align-items: center; }
.card__media { aspect-ratio: 16/9; }
}

• XS: نمایش انباشته (برچسب در سمت چپ، مقدار در سمت راست، در بلوک).
• SM +: پیمایش افقی تنها با بیش از ستون، رفع کلاه/ستون اول.
• اعداد - اعداد جدولی، تراز اعشاری.

14) محلی سازی و RTL

'dir = «rtl»' + ': dir (rtl)' به آیکونهای آینه/فلش/حاشیه.
ترجمه ها می توانند طول خطوط را 20-30٪ افزایش دهند - سهام را ذخیره کنید.
برای برخی از نوشته ها (به عنوان مثال، گرجی/تایلندی)، اندازه پایه را 1 پیکسل افزایش دهید.

15) ویژگی های iGaming

کارت های مسابقات/پاداش: شبکه 3 × N (LG)، 2 × N (MD)، 1 × N (SM/XS) ؛ CTA و شرایط - در یک منطقه دائمی.
رهبران/رتبه بندی: کلاه چسبنده/ستون اول ؛ در XS - حالت انباشته ؛ اعداد تک لایه هستند.
فرم های پرداخت: در XS - تک ستون ؛ در MD - 2 ستون (زمینه + توضیح).
اطلاعیه های مسئول (18 +، محدودیت ها، خطرات): همیشه در تمام نقاط توقف، کنتراست AAA، بدون «پنهان در شناور» قابل مشاهده است.

16) ضد الگوهای

عرض بلوک ثابت به جای شبکه/ستون.

«نقطه شکست در هر پیکسل»: درخواست های رسانه ای بیش از حد → هرج و مرج

ریتم شکسته: حفره های مختلف/زمین در بخش های مجاور بدون هیچ دلیلی.
متن انتقادی در یک تصویر بدون مرگ.
محتوا فقط با شناور (لمس غیر قابل دسترس) در دسترس است.
انیمیشن از خواص طرح در لیست های طولانی.

17) چک لیست QA

مش و ظروف

• ستون ها و ناودان مطابق با نقاط شکست ؛ کانتینرها در مرکز قرار دارند.
• قطعات به درستی «جریان» 1 → 2 → 3 ستون بدون شکستن.

تایپوگرافی

• طول خط 45-80 ؛ پین های مایع از طریق 'گیره ()'.
• کنتراست متن با WCAG در هر دو موضوع مطابقت دارد.

تصاویر و تصاویر

• Есть 'srcset/sizes'، 'aspect-ratio' и بارگذاری تنبل ؛ بدون CLS.

ورودی و A11y

• ناوبری صفحه کلید ؛ ': تمرکز قابل مشاهده' قابل مشاهده است.
• شناور جایگزین برای لمس ؛ مناطق کلیک کنید ≥ 44 × 44.
• 'prefers-reduced-motion' پشتیبانی می شود.

عملکرد

• فقط «تبدیل/کدورت» متحرک است ؛ اثرات شدید محدود است.
• بارهای CSS/JS بحرانی موثر است.

18) مستند سازی در سیستم طراحی

«پاسخگو و نقطه انفصال»: جدول نقطه انفصال، ظروف، ستون ها و ناودان.
Queries Container: نمونه هایی از اجزای سازگار.
«نوع مایع»: 'گیره ()' فرمول و ایستگاه از پیش تنظیم مقیاس.
«الگوهای ناوبری»: انواع XS/SM/MD/LG/XL.
«انجام/انجام» با کلیپ های کوتاه و ارزش CLS/LCP.

خلاصه ای کوتاه

سازگاری یک استراتژی است، نه مجموعه ای از پرس و جوهای رسانه ای پر هرج و مرج. با تکیه بر تجزیه و تحلیل محتوا و دستگاه، ترکیب پرس و جوهای رسانه ای با پرس و جوهای شبکه و کانتینر بالغ، استفاده از «clamp ()» برای تایپوگرافی، کنترل تصاویر و عملکرد، و پشتیبانی از تمام روش های ورودی و A11y. بنابراین رابط قابل پیش بینی، سریع و به همان اندازه در هر صفحه نمایش مناسب است.