آثار التحليق والتفاعل

1) دور التوجيه في UX

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

المبدأ: الآثار تعزز المعنى لا تحل محله. لا ينبغي إخفاء المعلومات الرئيسية والوصول إلى الإجراء فقط وراء التحليق.

2) نموذج الدولة ودلالاتها

المجموعة الأساسية: 'افتراضي' → 'تحوم' → 'تركيز' → 'نشط/مضغوط' → 'معطل' → 'تحميل' (اختياري).
بالنسبة للروابط، نضيف «تمت زيارتها»، للمفاتيح - «تم التحقق».

• بين الحالات - اختلاف بصري في الشكل/السماكة/الأيقونة، وليس اللون فقط.
• النص/الرمز يتناقض مع الخلفية: ≥ 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 ms، دورة 1

المنحنى الافتراضي هو "bezier مكعب (0. 2, 0, 0. 2, 1)`

نشط - أسرع ('مكعب بيزير (0. 4، 0، 1، 1) ')، يكون الناتج أكثر ليونة (' مكعب بيزير (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 px بدون ضبابية.
معاق: курсор «غير مسموح به »/« افتراضي»، عتامة ≤ 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) الروابط والإجراءات النصية

التمييز ليس فقط حسب اللون: تمييز افتراضي أو على التحليق/التركيز.
للحصول على إرشادات: إبراز التعزيز (السماكة/التعويض)، والتغيير الطفيف في النغمة.
«الزائر» هو ظل مختلف من نفس اللوحة، والتباين محفوظ.

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 px، ≤ 140 ms، مرة واحدة.

10) الأيقونات والأهداف الصغيرة

قم بزيادة منطقة النقر إلى 32 × 32 (سطح المكتب )/40 × 40 (الهاتف المحمول)، حتى لو كانت الأيقونة نفسها 20-24 px.
تحوم: تغير العتامة/الملء/السماكة، 1-2 خصائص كحد أقصى.
نشط: «لقطة» قصيرة بمقياس 0. 98.
التركيز: حلقة بنقرة حاوية منطقة.

11) إمكانية الوصول (A11y) ولوحة المفاتيح

الدعم «: التركيز المرئي» (لا نظهر أنماط التركيز للفأر، بل نعرضها على لوحة المفاتيح).
يجب أن يكون للعناصر التي تنشئ تلميحات تحوم مكافئ تركيز (يظهر نفس المحتوى على مفتاح Tab/Enter).
سمات أريا: التفاعلات لها «دور»، «aria-pressed »/« aria-expended »/« aria-current» حسب الحالة.
يفضل الحركة المخفضة: استبدال المقياس/التحول بالحد الأدنى (العتامة/الملء)، إيقاف تشغيل التموجات.

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

12) الأداء

تحريك «التعتيم» و «التحويل» فقط ؛ تجنب «العرض/الارتفاع/اليسار/الأعلى»، الضبابية الثقيلة/الظلال على عناصر متعددة.
استخدام «إرادة التغيير» باعتدال ؛ بعد الانتهاء من المرحلة الانتقالية.
في القوائم/الجداول - آثار ضئيلة، دون إعادة طلاء «عالمية».

13) نية التحليق و «اللزوجة»

• عتبة التأخير هي 80-120 مللي ثانية قبل إظهار أداة/قائمة معقدة.
• «التصاق» المؤشر: إذا انتقل المستخدم من العنصر إلى القائمة بزاوية، فإننا نعطي 200-300 مللي ثانية من «الممر» (مثلث فيتس).
• بلمسة - استبدل التحليق بالضغط أو بزر «أكثر» صريحًا.

14) الأدوات/القوائم/المتسربة

الافتتاح: نية التحليق (سطح المكتب )/الضغط (اللمس)، الإغلاق - العناية/الضبابية/ESC.
الموضع - بالنسبة للمصدر، يتم محاذاة السهم ؛ يتم تمكين العرض الأقصى والوصلة.
'1' التوافر: 'الدور =' الأدوات '،' associate 'aria-descripdy' ؛ للقائمة - "الدور =" القائمة "+ التحكم في السهم.

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.

السلوك

• يمكن التمييز بين التحليق/النشاط/المعوقين/الزيارات من حيث الشكل والنغمة.
• لا يوجد تأخير في الرد> 120 مللي ثانية.
• هناك بديل للتحليق على اللمسة.

الأداء

• يتم تحريك «التحويل »/« التعتيم» فقط.
• لا ضبابية/ظلال ثقيلة على عناصر متعددة.
• في القوائم الطويلة، يتم تقليل التأثيرات.

19) التوثيق في نظام التصميم

جدول حالة المكونات الأساسية (الأزرار، الوصلات، البطاقات، الحقول، صفوف الطاولات).
رمز المدة/المنحنى/الظل ورمز العينة للضوء/الظلام.
قسم «التحليق مقابل اللمس»: قواعد البدائل والأمثلة.
«افعل/لا تفعل» مع مقاطع قصيرة ونتائج متباينة.

موجز موجز

تعتبر تأثيرات الاستهداف جزءًا مساعدًا ولكنه مهم من لغة الواجهة. اجعلها موجزة ويمكن التنبؤ بها، واحتفظ بلوحة المفاتيح واللمس، ووفر التباين والتركيز المرئي، وحرك الخصائص الرخيصة فقط. ثم يعزز التفاعل الوضوح وسرعة العمل، بدلاً من إعاقتهما.