接口提示和幫助

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場景中。