微型辅助和支架

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毫秒的≤做出回应，捕捉清晰的状态，使用安全回滚的乐观态度，不要只依靠颜色，动画轻松的属性。尊重可用性和性能-然后产品感觉活泼、诚实和可靠,尤其是在实时场景中。