制導效果和交互性

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」。

簡短摘要

制導效果是接口語言的輔助但關鍵部分。使它們簡潔且可預測，支持鍵盤和觸摸板，提供對比度和可見焦點，僅動畫廉價屬性。然後，互動性增強了行動的清晰度和速度而不是幹擾它們。