制导效果和交互性

1）指导在UX中的作用

• "这是互动吗？"（制导/光标/背光），
• "我在哪里？"（焦点风格），
• "点击会发生什么？"（状态和affordance），
• "行动成功了吗？"（active/pressed和随后的反馈）。

原理：效果增强意义而不是取代意义。关键信息和操作访问不应仅隐藏在制导后面。

2）状态模型和语义

基本集："default" → "hover" → "focus" → "active/pressed" → "disabled" → "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/}

• 在tach设备上,制导效果对于检测动作并不关键-使用显式事件：颜色/图标/框架/线索。
• 不要将导航/控制仅隐藏在"hover"下。

4）持续时间和曲线

• Hover： 120-180毫秒
• 焦点：120-180毫秒
• Active/Pressed: 80–120 мс
• Ripple/ink（如果使用）：≤ 240毫秒,1个周期

默认曲线： 'cubic-bezier （0.2, 0, 0.2, 1)`

Active-更快（'cubic-bezier （0.4,0,1,1）',输出更柔软（'cubic-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）按钮： 参考模式

Default：可读文本≥ 4。5：1到填充。
Hover： − Δ L背景0。02–0.04,光影,光标"pointer"。
活动：再− Δ L 0。02–0.04,缩短阴影/挤压（scale 0.98），持续时间。80-100毫秒。
焦点：无斑点的对比戒指2-3 px。
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）链接和文本操作

可辨别性不只是颜色：默认下划线,或在hover/focus上。
对于制导：下划线增强（厚度/偏移），音调容易变化。
"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）卡片、清单、表格

• Hover：柔和的阴影/背光边框,光标"pointer"仅在点击整个卡片时。
• Active：短推,标题突出显示。
• 焦点：卡片周围可见的戒指，而不仅仅是里面。

• Hover背景为Δ L 0。02–0.04;活动字符串是清晰的框架。
• 仅在显式事故中才允许按行点击（图标"→"，提示）。

• 勤奋地将"lesenka"限制为级联延迟-最多6-8个元素（stagger 20-30 ms）。

9）表单和输入字段

字段中的Hover：薄框突出显示（Δ L ~ 0。05），不更改块大小。
焦点：对比环+框架颜色变化；placeholder仍然可以区分（≥ 3：1）。
错误：颜色+图标/文本；短的"shake"允许≤ 6 px，≤ 140 ms，一次。

10）图标和小目标

将点击区域增加到32 × 32（桌面）/40 × 40（移动）,即使图标本身是20-24 px。
Hover：更改不透明/填充/厚度,最多1-2属性。

Active： scale 0上的简短"snap"。98.

焦点：环绕点击区域的容器。

11）可用性（A11y）和键盘

支持"：focus-visible"（对于鼠标,我们不显示焦点样式,对于键盘-我们显示）。
创建旋转提示的元素必须具有等效的焦点（相同的内容出现在Tab/Enter键上）。
Aria属性：交互式根据情况具有"role"，"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）生产力

仅动画"opacity"和"transform"；避免"width/height/left/top"，在许多元素上沉重的斑点/阴影。
适度使用"will-change"；过渡结束后清理。
在列表/表中-最小的效果，没有"全局"repaint。

13） Hover-intent和"粘性"

• 显示复杂工具/菜单之前的80-120毫秒延迟阈值。
• 光标的"粘性"：如果用户以一定角度从项目移动到菜单，则给出200-300毫秒的"走廊"（Fitts三角形）。
• 用tach-我们用press或显式按钮"其他"代替hover。

14） Tooltip/菜单/dropdowns

开口：hover-intent（desktop ）/press（tach），关闭-护理/blur/ESC。
位置-到源，箭头对齐；max-width和承载。
可用性：'role='tooltip'，将'aria-describedby'链接起来；菜单是'role='menu'+箭头控制。

15） iGaming的细节

系数/排列板：hover突出显示字符串/单元，但不更改定位度量（没有"跳跃"）。

比赛/奖金卡： hover可以"振兴"框架/图标，但文本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）反模式

仅将关键动作/菜单隐藏为挂起。
在悬停时更改尺寸/布局（布局跳跃）。
仅依靠颜色来区分状态。
闪烁，无休止的脉动，文本上的"酸性"光泽。
缺乏焦点样式或它们在黑暗主题上的隐形性。
将光标"pointer"指向非交互元素。

18） QA支票清单

可用性

• 所有交互都是可以通过键盘实现的；我们看到的焦点。
• Hover内容可通过"focus"/"aria"获得。
• 文本和图标的对比度对应于WCAG。

行为

• Hover/active/disabled/visited可以通过形状和音调来区分。
• 没有响应延迟>120毫秒。
• 在tach上还有其他选择。

表演

• 仅使用"变形"/"opacity"动画。
• 许多元素上没有沉重的斑点/阴影。
• 在长列表中，效果最小化。

19）设计系统中的文档

基本组件（按钮、链接、卡片、字段、表行）的状态表。
长度/曲线/阴影令牌和光/暗代码示例。
"Hover vs Touch"部分：替代规则和示例。
带有短片和对比度的"Do/Do n't"。

简短摘要

制导效果是接口语言的辅助但关键部分。使它们简洁且可预测，支持键盘和触摸板，提供对比度和可见焦点，仅动画廉价属性。然后，互动性增强了行动的清晰度和速度而不是干扰它们。