接口提示和帮助

1）为什么需要它们

• 当他们真正需要时，
• 简短而具体，没有市场营销，
• 不会阻止主脚本并尊重可用性。

2）工具图以及何时应用

规则：关键内容-在视野和界面文本中，不仅在提示中。

3）住宿模式和触发器

在操作之前：helper text/inline-hint（"Password ≥ 8个字符"）。
动作时：对焦时的tooltip/coachmark/hover/long-press。
动作后：敬酒/横幅，解释结果并参考"阅读更多"。
意图：通过"?"，"i"，"阅读更多"，"Ctrl+/"（指挥表）显示。

4）文桉写作

一个想法是一个句子。从动词开始（"Choice……"，"Complet……"）。

无过错： "过滤器排除了所有记录。重置过滤器?"

数字和事实代替估计数： "委员会1。5–2%».

重要的是：除非得到保证，否则不要承诺确切的时间。

5）可用性（A11y）

Tooltip：'role='tooltip'，通过'aria-describedby'与触发器进行通信；可通过键盘访问。
输入块：'role='status'（polite），错误-'role='alert'。
Coachmark/Tour：焦点按顺序排列,"Esc"关闭,焦点回到源头。
AA ≥文本的对比；线索不是唯一的意义载体。

html
<button id="kpi" aria-describedby="kpi-tip">RTP</button>
<div id = "kpi-tip" role = "tooltip" hidden> Return to Player - the share of bets returned to players in the long term. </div>
<script>
const b = document. getElementById('kpi'), t = document. getElementById('kpi-tip');
b. addEventListener('focus', ()=>t. hidden=false); b. addEventListener('blur', ()=>t. hidden=true);
b. addEventListener('mouseenter', ()=>t. hidden=false); b. addEventListener('mouseleave', ()=>t. hidden=true);
</script>

6）节目管理和"卫生"

重复数据消除：每会话一次不显示相同消息。
频率控制：coachmark/tour的cool-down 24小时；用户有"不要提醒"。
工具不竞争：不要在coachmark之上打开工具,反之亦然。
进度记忆：已完成的巡演步骤不再提供。

7）辅助文本到形式

写出"如何通过"规则，而不是"你做错了什么"。

旁边的格式示例： 'DD。MM.YYYY`, `user@domain.tld`.

对于复杂的字段,可使用"示例"按钮（打开一个小嗅觉/掩码）。
验证和辅助器不会发生冲突：如果出现错误，帮助器将变成简短的"如何修复"。

html
<label for="iban">IBAN</label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format: 22-34 characters, Latin letters and numbers only. </small>

8）团队调色板和动作搜索

触发器："Ctrl+/"、"Ctrl+K"或""按钮。

在调色板中： 使用图标和热键的动作（"投注……— ⏎»).

State Machine：选择动作时-即时导航/执行,"取消"-"Esc"。

9）AI辅助器/副驾驶员

表格/术语提示（"什么是vager？"），在应用之前使用更改列表来填充字段。
对于敏感场景（付款/费率）-仅解释和验证支票单,解决方桉由用户保留。
通过自己的文档/常见问题解答进行培训；构造问题以改善静态。

10） iGaming的细节

规则和限制："下注"，"现金"，"设置限制"按钮旁边的显着帮助。清晰的语言和示例。
KYC/AML：分阶段提示（文档、验证时间表,接下来会发生什么）。
比赛：在卡中-"如何获得积分"（tooltip/inline-hint），"规则"链接。
付款：有关佣金/时间表和"为什么需要验证"的帮助。
负责任的游戏：不引人注目但可见的"设置日限"线索（AAA对比，不闪烁）。

11）表演和定位

轻量级动画"opacity/transform" ≤ 180毫秒，外出速度更快。
定位到源头，移位4-8 px，在边缘自动翻转。
不要从数百个提示中创建DOM树-懒洋洋地按焦点/挂接。
考虑到"prefers-reduced-motion"：静态提示而不是shimmer。

12）度量与实验

CTR线索（在STA/"阅读更多"上显示→点击次数）。
使用辅助器vs控制来减少形状中的错误/故障。
在empty/tour之后取得首次成功的时间。
隐藏/拒绝提示（否定信号-重写文本/显示时间）。
命令调色板/AI辅助器中流行查询的逻辑。

13）设计系统令牌（示例）

json
{
"help": {
"maxWidth": 320,
"gap": 8,
"radius": 10,
"elev": 8,
"iconSize": 16,
"enterMs": 180,
"exitMs": 120,
"cooldownHours": 24
},
"tour": { "maxSteps": 5, "backdropOpacity": 0. 5, "escCloses": true },
"palette": { "hotkey": "Ctrl+K", "rowHeight": 40 },
"a11y": { "contrastAA": true, "useAriaLive": true }
}

css
.helper { display:flex; gap:8px; align-items:flex-start; max-width:320px; }
.helper__icon { width:16px; height:16px; opacity:.8; }
.tooltip { position:absolute; padding:8px 10px; border-radius:10px; box-shadow:var(--elev-2); }
.tooltip[data-show="true"] { animation: fadeIn. 18s cubic-bezier(.2,0,.2,1); }
@keyframes fadeIn { from { opacity:0; transform: translateY(4px) } to { opacity:1; transform:none } }

14）实现： coachmark和"不提醒"

html
<div id="cm1" class="coachmark" role="dialog" aria-labelledby="cm1-title" hidden>
<h3 id = "cm1-title "> New Fast Cashout </h3>
<p> Check out with one button directly from the coupon. </p>
<div class="row">
<button id = "cm1-ok "> Clear </button>
<button id = "cm1-skip"> Don't remind me </button>
</div>
</div>
<script>
const seen = localStorage. getItem('cm1-skip')==='1';
if(!seen) document. getElementById('cm1'). hidden=false;
document. getElementById('cm1-skip'). onclick=()=>{ localStorage. setItem('cm1-skip','1'); cm1. hidden=true; };
document. getElementById('cm1-ok'). onclick=()=> cm1. hidden=true;
</script>

15）反模式

关闭CTA或重叠焦点的提示。
仅在tooltip/hover中提供关键信息。
巡回演出10个以上的步骤，没有"稍后跳过"。
闪烁/跳跃的线索，尤其是在黑暗模式下。
错误和限制中的"笑话"和文化隐喻。
激进的色彩和声音来进行负责任的游戏。

16） QA支票清单

可用性

• Tooltip/coachmark可通过键盘访问,"Esc"关闭,焦点返回。
• ≥ AA的对比，文本并不仅仅取决于颜色。

行为

• 线索不会重叠重要元素，而是定位在源位置。
• 有重复显示消除和"不提醒"。
• 动画≤ 180毫秒,快出去。

含义

• 文本是具体而简短的，CTA是适当的。
• 公式/限制提供了示例。

度量

• 拍摄了CTR，成功的时间，隐藏的份额。

17）设计系统中的文档

Компоненты: `HelperText`, `InlineHint`, `Tooltip`, `Coachmark`, `ProductTour`, `DocsLink`, `CommandPalette`, `AiHelper`.

尺寸/时间/音调令牌，ARIA海德和文案写作示例。
常见场景的模板（KYC，限制，付款，锦标赛，投注）。
Do/Do n't画廊带有真实屏幕。

简短摘要

当准时，在上下文中，没有额外的戏剧性时，辅助人员会很好。让我们简短、易于访问和可验证的提示,尊重放映的焦点和频率,在设计系统中捕捉令牌和模式。因此，用户不太可能犯错误，并且更快地达到结果-尤其是在敏感的iGaming场景中。