微型輔助和支架

1）什麼是微互助

微幹擾是短周期的「信號↔響應」，確認系統聽到了用戶的聲音並朝著結果邁進。

1.觸發器（點擊、刷卡、焦點、系統事件）。

2.規則（更改的內容和方式）。

3.支架（視覺/聲音/觸覺/文本）。

4.循環/元規則（重復，到期，undo/redo）。

目的：減少不確定性和認知負荷，不分散任務註意力。

2）設計原則

含義>效果。效果解釋了「發生了什麼」和「接下來發生的事情」。
瞬間。第一個響應≤ 100毫秒（按鈕/開關）。
明確性。可辨別狀態：hover/focus/pressed/disabled/loading。
節省。屬性最小，持續時間短，沒有「致敬」。
一致性。相同的動作-相同的信號。
可用性。Fidbeck被Scrinrider看到，聽到和閱讀；還有運動/聲音的替代。

3）時間安排和曲線

Hover/Focus： 120-180 ms

Pressed/Toggle: 80–120 мс

Toast/Tooltip： 入口180-240毫秒,出口120-160毫秒

直線驗證： 失去現場焦點後≤ 100毫秒

默認曲線： 'cubic-bezier （0.2, 0, 0.2, 1)`;pressed-加速'cubic-bezier （0.4, 0, 1, 1)`.

4）微共軛目錄

4.1個按鈕和開關

即時響應：在網絡查詢中,視覺「點擊」/擠壓+狀態「忙碌」。
樂觀更新：我們立即更改UI，在錯誤時回滾（使用undo）。
Debouns double click：在回復/定時之前阻止重播。

4.2表單的入線驗證

在blur字段上驗證；消息簡短且具有建設性（「至少8個字符」）。
狀態圖標+顏色+文本（不是顏色之一）。
密碼是「強度」的即時指示符（不會幹擾輸入）。

4.3 敬酒/橫幅/snekbars

用於非鎖定確認。
持續時間為2-5秒,暫停時為hover/focus,適當時為Undo按鈕。
不要關閉重要內容和CTA。

4.4進步和骨架

如果已知過程長度，則為progresbar；如果沒有-skeleton而不是旋轉器。
無跳躍布局：假。塊的高度。

4.5貝吉/計數器

數字的對比度≥ 4。5:1;最大99/999，截斷「99+」。
鑲嵌動畫是40-60毫秒蝙蝠的簡短步驟，沒有布局的「顫抖」。

4.6 Tooltip/Help

通過hover/focus出現；可通過「aria-describedby」獲得。
僅在tooltip中禁止關鍵信息。

5）錯誤,空白狀態,undo

錯誤：誠實的文本，原因和行動的解釋（「重復」，「更改地圖」）。
空狀態：這是什麼以及如何開始；插圖是AA/AAA文本的靜音，對比。
Undo window：5-10 s用於可逆動作（刪除，取消下註至子彈）。

6）多式聯運支線

聲音：安靜，短，每個事件類型一個模式（成功/錯誤/註意）；在設置中關閉。
顫音/快感：對新聞/成功的輕松響應；我們尊重「prefers-reduced-motion」和系統限制。
視覺：只有「轉換/opacity」,陣列上沒有沈重的斑點/陰影。

7）可用性（A11y）

「：focus-visible」用於鍵盤；沒有斑點的焦環。
屏幕閱讀器：烤面包的'role=「status」/」alert」；生活區域'aria-live=「polite/assertive」。
聲音/動作的替代方案；「prefers-reduced-motion：reduce」。

文本和圖標的對比是WCAG（普通≥ 4。5:1).

8）表演

響應≤ 100毫秒：視覺響應到網絡。
動畫「轉換/操作性」；避免在多個元素上使用「height/left/box-shadow」。
網絡效果-具有前瞻性和樂觀性；retrai是同等的。

9）微型輔助令牌（設計系統）

json
{
"micro": {
"duration": { "hover": 160, "focus": 160, "press": 90, "toastIn": 220, "toastOut": 140 },
"easing":  { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"toast":  { "timeoutMs": 3500, "pauseOnHover": true },
"badge":  { "max": 99, "emphasisStepMs": 50 }
}
}

10）實現的嗅探

html
<div id="toast" role="status" aria-live="polite" hidden></div>
<script>
const toast = (msg, {undo, timeout=3500}={})=>{
const el = document. getElementById('toast');
el. innerHTML = undo? '$ {msg} <button> Undo </button>': msg;
el. hidden = false;
let t = setTimeout(close, timeout);
el. onmouseenter = () => clearTimeout(t);
el. onmouseleave = () => t = setTimeout(close, timeout);
if (undo) el. querySelector('button'). onclick = ()=>{ undo(); close(); };
function close(){ el. hidden = true; el. innerHTML=''; }
};
</script>

js const rules = { password: v => v.length>=8         "Minimum 8 characters"};
document. querySelectorAll('[data-validate]'). forEach(i=>{
i.addEventListener('blur', e=>{
const rule = rules[e. target. name]; if (!rule) return;
const ok = rule(e. target. value);
e. target. dataset. state = ok===true? 'ok': 'err';
e. target. nextElementSibling. textContent = ok===true? '': ok;
});
});

js export const haptic = type => {
if (!('vibrate' in navigator)) return;
if (type==='success') navigator. vibrate(10);
if (type==='error') navigator. vibrate([20,40,20]);
};

css
.button{ transition: transform. 09s cubic-bezier(.4,0,1,1), box-shadow. 16s cubic-bezier(.2,0,.2,1); }
.button:active{ transform: scale(.98); }
.input[data-state="err"]{ outline: 2px solid var(--role-danger); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ { animation:none! important; transition-duration:.01ms! important; } }

11）度量與質量控制

INP p 75<200 ms，Long Tasks的份額<5％。
First User Feedback（klik→vizualnyy響應）≤ 100毫秒。
回調的樂觀行動的比例低於3％（否則是不信任）。
UX調查：錯誤消息的可理解性，確認的可見性。

QA支票清單

• 每個互動都有「pressed/busy/disabled」。
• 錯誤附有文本和動作（Retry/Undo）。
• 烤面包可通過SR獲得，並且不會重疊關鍵內容。
• 入線驗證不會幹擾輸入；信息是具體的。
• 支持「prefers-reduced-motion」；聲音/振動關閉。
• 沒有布局和頻率；「轉換/操作」上的動畫。

12） iGaming的細節

投註/購買： 帶有Undo（如果法規允許）的即時「pressed→busy」，「接受」敬酒，idempotent鑰匙；延遲時>1 c-「等待確認……」

Spin/Reveal：短新聞提要，平穩開始/停止而沒有無限閃爍；獲勝-激增≤ 500毫秒+可讀文本（AAA）。
Live系數：蹦床更新，視覺diff（箭頭/厚度）沒有「跳躍」。
付款/結論：循序漸進（KUS→Proverka→Vyplata），拒絕理由的透明文本。
負責任的遊戲：沒有幹擾效果的通知；最高對比，明確的CTA「設置限制」。

13）反模式

等待網絡響應,然後顯示對點擊的響應。
「無形狀顏色」：狀態僅以色調不同。
無限脈動/閃爍，沒有開關的尖銳聲音。
具有鍵盤無法訪問的關鍵內容的工具包。
無進展/骨架的旋轉器>1-2。
數百個元素上的微妙陰影/陰影（弱設備上的光束）。

14）設計系統中的文檔

「Micro-tokens」：「duration/easing」，吐司/徽章/驗證器的預設。
「模式」：按鈕，形狀，敬酒，進度，inline錯誤，undo。
「A11y&Motion」：SR/HC/reduced-motion規則；ARIA示例。
「Do/Do n't」：帶有計時器，INP/First Feedback數字的短片。

簡短摘要

微共軛是一種自信的語言。讓我們對100毫秒的≤做出回應，捕捉清晰的狀態，使用安全回滾的樂觀態度，不要只依靠顏色，動畫輕松的屬性。尊重可用性和性能-然後產品感覺活潑、誠實和可靠,尤其是在實時場景中。