用戶界面個性化

1）原則

1.首先是好處，然後是「魔術」。任何更改都應該縮短目標（投註/存款/遊戲/設置）的路徑，而不僅僅是「驚喜」。
2.透明度和控制。用戶可以看到什麼是個性化的，並且易於管理。有一個「聰明的個性化」撥號器。

3.柔和的適應。建議而不是強加： 不引人註目的建議,保持手動選擇.

4.安全和隱私。數據最少，只有一致的信號，可理解的存儲策略。
5.A/B代替猜測。每個假設都經過實驗和控制回歸。

2）個性化領域

導航：分區順序,快速快捷方式,最後訪問屏幕。
亮度和密度：卡的大小，列數，電源用戶的「密集」模式。
內容：推薦的遊戲/市場，興趣標簽，精選提供商。
促銷和橫幅：相關促銷，錦標賽，獎金（帶頻率控制）。

搜索和過濾器： 加載歷史記錄,保存預設.

通知：聰明的數字對抗「風暴」，夜間沈默，類型重要。
主題/對比/字體：記住視覺偏好。
域格式：系數（十進制/分數/美國），顯示貨幣，語言。

3）個性化模式

3.1手動設置（explicit）

首選項面板：用戶自己打開/關閉小部件,調整順序,設置系數/貨幣/主題格式。

3.2上下文適應（context-aware）

它依賴於設備，白天時間，網絡：晚上是一個黑暗的默認主題，在弱連接上-簡化媒體，在移動上-縮短旋轉木馬。

3.3行為部分（行為部分）

插槽球員，體育博彩，現場比賽，新手集群。影響分區的順序、建議和提示。始終將返回路徑留給「默認」。

4）體系結構： 信號→解決方案→ UI

信號：事件（觀看/點擊/投註），配置文件設置，上下文（時區，設備），限制（限制/管轄權）。
規則/模型層：ficheflagi，分段器，推薦服務。
UI渲染：組件采用語義令牌和configs（內部沒有ML邏輯）。
本地配置文件：部分首選項存儲在客戶端上（例如小部件順序）,並同步到帳戶。

5）用戶控制和透明度

個性化標記為「智能設置」徽章，並帶有tooltip「根據您的操作更改塊順序」。
設置：打開/關閉個性化、「重置建議」、「顯示標準主」。

更改歷史記錄： 「添加了收藏夾塊，因為您經常打開……」

6）互動和模式

拖動小部件（drag-n-drop）+「按原樣返回」按鈕。
從卡菜單中隱藏/顯示塊。
在搜索/目錄中保存的過濾器/設置。
巡回賽考慮到最近的搜索和固定的聯賽/比賽。
「從現場繼續」：最後一個優惠券/遊戲/錦標賽是第一個屏幕。
「對你來說」部分不是第一個或侵入性的；總有「顯示一切」和「不要顯示它」。

7） iGaming的細節

負責任的遊戲：個人限額提醒和超時-優先於促銷。對有積極限制的球員沒有壓力。
系數和市場：首先顯示最喜歡的聯賽和市場；誠實地表示「最近修改的系數」。

遊戲建議： 提供商/主題的多樣性，限制單個提供商的重播；「你打了3 ×-嘗試類似的。」

收銀員：記住精選的存款/輸出方法，顯示貨幣；ETA和傭金與國家相關。
一天的時間：晚上-安靜的通知和柔和的口音。

8）可用性和本地化

所有個性化單元均具有可聚焦的hendles，「aria-grabbed」用於drag-n-drop。
不要依賴顏色作為「適合您」的唯一指示器-添加文本標簽。
鑰匙/線索本地化；數字格式和貨幣-按地區。
RTL模式：順序鏡像，拖曳方向正確。

9）表演和可持續性

Configs和指南-使用TTL的客戶端上的緩存（例如15-30分鐘）和增量更新。
將「英雄」（第一個屏幕）水合而不會鎖定其他UI。
推薦服務的下降≠ UI的下降：我們顯示默認列表。
我們限制塊的「抖動」：重新排列不超過N小時/會話。

10）隱私和合規性

獲得營銷個性化的明確同意。
僅存儲必要的信號,並有自動刪除的時間表。
讓我們簡單地導出/重置首選項配置文件。
不要使用敏感類別進行定位；遵守當地要求。

11）度量標準

Task Success/Time-to-Action： 用戶實現目標的速度是否更快?

CTR個人區塊vs控制。
包含個性化功能的Retention/Session depth。
Dismiss/Hide rate小部件（「不感興趣」）。

支持率混淆（"為什麼要顯示它？”).

Regret rate（個人推薦後的回滾）。

12）反模式

為「個人展示」隱藏導航。
未經同意在用戶眼前對元素進行「傳送」。
以個性化為幌子，積極地展示促銷頻率。
在沒有透明度的關鍵流（收銀機、KYC）中個性化。
每次登錄時都會發生不可預測的變化。
為了算法，「鎖」用於手動設置。

13）令牌和共鳴設計系統（示例）

json
{
"personalization": {
"enabledDefault": true,
"showBadge": true,
"maxReorderPerWeek": 2,
"widgetVariants": ["default","compact","dense"],
"cooldownHours": 24
},
"recommendations": {
"fallback": "trending",
"diversity": { "provider": true, "category": true },
"ttlMinutes": 30
},
"notifications": {
"digestHour": 9,
"quietHours": [22, 8]
}
}

14）Snippets

Ficheflag+片段（React）

tsx type Segment = 'slots'    'sports'    'live'    'newbie';
type Flags = { personalizeHome:boolean };

function useSegments (): Segment [] {/return from profile/dimensions/return ['sports', 'live'];}
function useFlags(): Flags { return { personalizeHome: true }; }

function Home() {
const segs = useSegments();
const { personalizeHome } = useFlags();
const blocks = [
{id: 'continue', title: 'Continue', fixed: true},
{id: 'sportsTop', title: 'Top Events', seg: 'sports'},
{id: 'slotsRec', title: 'Recommended slots', seg: 'slots'},
{id: 'liveRooms', title: 'Live rooms', seg: 'live'}
];
const ordered = personalizeHome
? [...blocks. filter(b=>b. fixed),...blocks. filter(b=>!b.fixed). sort((a,b)=> Number((segs. includes(b. seg as Segment)))-(segs. includes(a. seg as Segment)))]
: blocks;
return <Main blocks={ordered}/>;
}

Drag-n-drop reorder（簡化）

js const list = document. querySelector('[data-widgets]');
let dragId = null;
list. addEventListener('dragstart', e => dragId = e. target. id);
list. addEventListener('drop', e => {
e. preventDefault();
const to = e. target. closest('[draggable]'). id;
if (dragId & & to & dragId! = = to) reorderWidgets (dragId, to) ;//save in profile
});
list. addEventListener('dragover', e => e. preventDefault());

個人化控制

html
<label>
<input type="checkbox" id="pToggle" checked>
Smart personalization
</label>
<button id = "reset "> Reset recommendations </button>
<script>
pToggle. onchange = () => setPersonalization(pToggle. checked);
reset. onclick = () => resetRecommendations () ;//clear profile/cache
</script>

15）空白/錯誤/狀態

沒有個性化數據： 顯示趨勢/新產品，解釋「我們仍在學習您的行動。」

推薦服務錯誤：倒退塊；敬酒「我們展示流行」。
過於狹窄的配置文件：增加多樣性（提供商/類別）。

16） QA支票清單

透明度

• Bage「智能設置」和易於理解的工具。
• Tumbler打開/關閉個性化；「重置建議」。

UX

• 可從鍵盤拖動/隱藏塊。
• 個人塊不會重叠關鍵內容。
• 促銷頻率有限；有「不感興趣」。

A11u/本地化

drag-n-drop的「aria」，正確的tab順序。

• 文本/格式/貨幣是本地化的；RTL是正確的。

表演/可靠性

• UI在建議下降時運行（倒退）。
• 在會話內沒有區塊順序的「抖動」。
• Configs緩存；TTL和reconnects的後綴得到滿足。

合規性

• 同意營銷個性化。
• 信號存儲時間表和刪除/導出機制。

17）設計系統中的文檔

Компоненты: `PersonalizedHome`, `ForYouRail`, `WidgetContainer`, `ReorderHandle`, `PrefsPanel`.

代幣/代幣：頻率限制，TTL，「固定」塊的特征，分散規則。
Gaids：「何時個性化」，「如何顯示控制」，「倒退行為」。
Do/Do n't：隱藏導航，激進的橫幅，會議期間頻繁的重新安排。

簡短摘要

個性化在透明、可逆和真正縮短目標路徑時起作用。讓用戶控制,依靠一致的信號,將ML/規則排除在組件之外,並始終保持安全的默認狀態。在iGaming中，它增加了信任和參與：更快地找到「自己的」市場和遊戲，看到相關的限制和線索-沒有侵入性和驚喜。