اثرات شناور و تعامل

1) نقش راهنمایی در UX

• «آیا فعال است ؟» (شناور/مکان نما/برجسته)
• «من کجام ؟» (سبک تمرکز)،
• «با کلیک چه اتفاقی می افتد ؟» (وضعیت و استطاعت)
• «آیا عمل کار می کند ؟» (فعال/فشرده و بازخورد پس از آن).

اصل: تأثیرات، معنا را تقویت می کنند، نه جایگزین آن. اطلاعات کلیدی و دسترسی به عمل نباید فقط در پشت شناور پنهان شود.

2) مدل دولت و معناشناسی

مجموعه پایه: 'default' → 'hover' → 'focus' → 'active/pressed' → 'loading' (اختیاری).
برای لینک هایی که اضافه می کنیم 'visited'، برای سوئیچ ها - 'checked'.

• بین ایالت ها - تفاوت بصری در شکل/ضخامت/آیکون، نه فقط رنگ.
• تضاد متن/شمایل با پسزمینه: ≥ 4. 5:1 (متن ساده)، ≥ 3:1 (بزرگ/پررنگ).
• تمرکز بدون اشاره (صفحه کلید/صفحه نمایش خوان) قابل مشاهده است.

3) دستگاه ها و درخواست های رسانه ای

css
/ There is an exact pointer and hover (mouse/trackpad )/
@ media (hover: hover) and (pointer: fine) {/hover effects/}

/ No hover or rough pointer (touch/remote control )/
@ media (hover: none), (pointer: coarse) {/alternatives to hover/}

/ Any type of pointer (hybrid devices )/
@ media (any-hover: hover) {/minimal improvements/}

• در دستگاه های لمسی، اثرات اشاره برای تشخیص عمل حیاتی نیست - استفاده از قیمت های صریح: رنگ/آیکون/قاب/اشاره.
• ناوبری/کنترل را فقط «زیر شناور» پنهان نکنید.

4) مدت زمان و منحنی

• شناور: 120-180 میلی ثانیه
• تمرکز: 120-180 میلی ثانیه
• فعال/فشرده: 80-120 мс
• موج دار شدن/جوهر (در صورت استفاده): ≤ 240 میلی ثانیه، 1 چرخه

منحنی پیش فرض 'cubic-bezier (0 است. 2, 0, 0. 2, 1)`

فعال - سریعتر ('cubic-bezier (0. 4, 0, 1, 1) '), خروجی نرم تر است (' مکعب bezier (0, 0, 0. 2, 1)`).

5) نشانه های سیستم طراحی (مثال)

json
{
"interactive": {
"duration": { "hover": 160, "focus": 160, "active": 90 },
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"shadow": { "hover": "var(--elev-2)", "focus": "0 0 0 3px var(--focus-ring)" },
"opacity": { "disabled": 0. 38, "muted": 0. 64 }
}
}

6) دکمه ها: الگوی مرجع

پیش فرض: متن قابل خواندن ≥ 4. 5:1 برای پر کردن

شناور: − Δ L پس زمینه 0. 02–0. 04، سایه روشن، اشاره گر.

فعال: − بیشتر Δ L 0. 02–0. 04، کوتاه سایه/تورفتگی (مقیاس 0. 98)، طول می کشد. 80-100 میلی ثانیه

تمرکز: حلقه کنتراست 2-3 پیکسل بدون تاری.
Disabled: курсор «not-allowed »/« default», opacity ≤ 0. 38، هیچ اثر شناور.

css
.button {
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.button:hover  { background: var(--btn-bg-hover); box-shadow: var(--shadow-hover); }
}
.button:active  { transform: scale(.98); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.button[disabled] { opacity:.38; pointer-events: none; }

7) لینک ها و اقدامات متن

تشخیص نه تنها با رنگ: زیر خط به طور پیش فرض و یا در شناور/تمرکز.
برای راهنمایی: افزایش زیر خط (ضخامت/افست)، تغییر جزئی در تن.
'Visited' یک سایه متفاوت از همان پالت است، کنتراست حفظ شده است.

css a { text-decoration: underline; text-underline-offset:.12em; }
@media (hover:hover) and (pointer:fine) {
a:hover { text-underline-offset:.2em; }
}
a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

8) کارت ها، لیست ها، جداول

• شناور: سایه نرم/قاب برجسته، اشاره گر مکان نما 'تنها اگر کل کارت قابل کلیک است.
• فعال: تورفتگی کوتاه، برجسته عنوان.
• تمرکز: یک حلقه قابل مشاهده در اطراف کارت، نه فقط در داخل.

• پس زمینه شناور با Δ L 0. 02–0. 04; ردیف فعال یک مرز روشن است.
• کلیک بر روی یک خط تنها با قیمت صریح («→» آیکون، اشاره) مجاز است.

• دقت محدود کردن «نردبان» تاخیر آبشار - حداکثر 6-8 عناصر (تلو تلو خوردن 20-30 میلی ثانیه).

9) فرم ها و زمینه های ورودی

شناور برای زمینه ها: نور پس زمینه نازک از قاب (Δ L ~ 0. 05)، بدون تغییر اندازه بلوک.
تمرکز: حلقه کنتراست + تغییر رنگ قاب ؛ محل نگهدارنده باقی می ماند قابل تشخیص (≥ 3:1).
خطا: رنگ + شمایل/متن ؛ کوتاه «لرزش» معتبر است ≤ 6 پیکسل, ≤ 140 میلی ثانیه, یک بار.

10) آیکون ها و اهداف کوچک

منطقه کلیک را به 32 × 32 (دسکتاپ )/40 × 40 (تلفن همراه) افزایش دهید، حتی اگر آیکون خود 20-24 پیکسل باشد.
شناور: تغییر کدورت/پر/ضخامت، خواص 1-2 حداکثر.
فعال: کوتاه «ضربه محکم و ناگهانی» توسط مقیاس 0. 98.
تمرکز: حلقه با ظرف منطقه کلیک کنید.

11) دسترسی (A11y) و صفحه کلید

پشتیبانی «: تمرکز قابل مشاهده» (ما سبک های تمرکز را برای ماوس نشان نمی دهیم، ما آنها را برای صفحه کلید نشان می دهیم).
عناصری که نکات شناور ایجاد می کنند باید معادل تمرکز داشته باشند (همان محتوا در کلید Tab/Enter ظاهر می شود).
Aria-attributes: interactives دارای «نقش»، «aria-pressed »/« aria-expanded »/« aria-current» توسط وضعیت است.
Prefers-reduced-motion: مقیاس/تغییر را با حداقل (opacity/fill) جایگزین کنید، موج ها را خاموش کنید.

css
@media (prefers-reduced-motion: reduce) {
{ transition-duration:.01ms! important; animation: none! important; }
}

12) عملکرد

فقط «کدورت» و «تبدیل» را تحریک کنید ؛ اجتناب از «عرض/ارتفاع/چپ/بالا»، تاری سنگین/سایه بر روی عناصر متعدد.
از «will-change» به مقدار کم استفاده کنید. جمع پس از اتمام انتقال.
در لیست ها/جداول - حداقل اثرات، بدون رنگ آمیزی «جهانی».

13) شناور قصد و «چسبندگی»

• آستانه تاخیر 80-120 میلی ثانیه قبل از نشان دادن یک راهنمای ابزار پیچیده/منو است.
• «چسبندگی» مکان نما: اگر کاربر از یک آیتم به منو در یک زاویه حرکت کند، ما 200-300 میلی ثانیه از «راهرو» (مثلث Fitts) می دهیم.
• با لمس - جایگزین شناور با مطبوعات و یا صریح «بیشتر» را فشار دهید.

14) راهنمای ابزار/منوها/کشویی

باز کردن: شناور قصد (دسکتاپ )/مطبوعات (لمسی)، بسته شدن - مراقبت/تاری/ESC.
موقعیت - به منبع، فلش تراز وسط قرار دارد. حداکثر عرض و hyphenation فعال هستند.
دسترسی: 'role = «tooltip»', associate 'aria-descripedby'; for menu - 'نقش =' منو '+ کنترل فلش.

15) ویژگی های iGaming

ضرایب/تابلوهای راهنما: شناور ردیف/سلول را برجسته می کند، اما معیارهای موقعیت یابی را تغییر نمی دهد (بدون «پرش»).
کارت های مسابقات/پاداش: شناور می تواند قاب/آیکون را «زنده» کند، اما متن CTA و شرایط قابل خواندن است (≥ 4. 5:1).
اطلاعیه های مسئول (18 +، محدودیت): بدون اثرات حواس پرتی ؛ شناور تنها اجازه می دهد تا تاکید از لینک ها و تمرکز روشن است.
دکمه های شرط بندی/خرید: بازخورد فعال اجباری است (کلیک بصری/تورفتگی) و غیر فعال کردن بدون ابهام پس از ارسال.

16) نمونه هایی از دستور العمل های رابط

css
.cta {
background: var(--role-primary);
color: var(--on-primary);
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.cta:hover { background: var(--role-primary-hover); box-shadow: var(--elev-2); }
}
.cta:active { transform: scale(.98); }
.cta:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.card { transition: box-shadow. 16s var(--ease), border-color. 16s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.card:hover { box-shadow: var(--elev-2); border-color: var(--border-strong); }
}
.card:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.table tr { transition: background-color. 12s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.table tr:hover { background: var(--row-hover); }
}
.table tr:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

17) ضد الگوهای

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

18) چک لیست QA

در دسترس بودن

• همه تعاملات توسط صفحه کلید قابل دسترسی است ؛ تمرکز ما می بینیم.
• محتوای شناور توسط «تمرکز »/« آریا» در دسترس است.
• کنتراست متن و آیکون مربوط به WCAG است.

رفتار

• شناور/فعال/غیر فعال/بازدید شده توسط شکل و تن قابل تشخیص است.
• بدون تاخیر پاسخ> 120ms.
• یک جایگزین برای شناور در لمس وجود دارد.

عملکرد

• فقط «transform »/« opacity» متحرک هستند.
• بدون تاری سنگین/سایه بر روی عناصر متعدد.
• در لیست های طولانی، اثرات به حداقل می رسد.

19) مستندات در سیستم طراحی

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

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

اثرات هدفمند یک بخش کمکی اما مهم از زبان رابط است. آنها را کوتاه و قابل پیش بینی نگه دارید، صفحه کلید و لمس را نگه دارید، کنتراست و تمرکز قابل مشاهده را فراهم کنید، فقط خواص ارزان قیمت را تحریک کنید. سپس تعامل باعث افزایش وضوح و سرعت عمل می شود، نه مانع آنها.