視覺層次結構和優先級

1）什麼是視覺層次結構

視覺層次結構是一種界面中的重音排列系統，可分散用戶的註意力，並使目標動作（信號，存款，遊戲搜索，過濾器，輸出）的路徑快速且無沖突。層次結構是通過對比，規模，位置，顏色，信息密度，運動和白色空間來構建的。

目的：降低「同源成本」並提高First Meaningful Click在所需元素上的份額。

2）業務效果和KPI

• 轉化目標CTA（註冊,存款,添加到收藏夾）
• 完成任務的速度（時間到價值）
• 降低混淆率（錯覺率）
• 減少故障（Bounce）,增加滾動深度和保持時間

• FMC （First Meaningful Click）：加載後CTA ≤ N秒的用戶百分比。
• TTV（時間到價值）：從登錄到實現關鍵價值的時間（例如,查找和運行插槽）。
• 屏幕上的關鍵CTA CTR：家庭、目錄、遊戲頁面、結帳。
• 主要/次要點擊率（註意力學科）。
• Scroll Depth到帶有離場/錦標賽的街區。

3）視覺層次結構原理（內核）

1.對比度和規模：更重要的是-更大，更對比。
2.閱讀位置和順序：頂部/左側和「第一屏幕」被優先考慮。
3.白色空間：空氣=重要性。太緊張-失去優先級。
4.顏色和飽和度：顏色強調是「註意力貨幣」；為她省錢。
5.形狀和肖像：按鈕的形狀，標記，狀態圖標增強了差異性。
6.運動和微動畫：稀有，簡短，整體的口音；避免「博覽會」。
7.分組（gestalt）：接近，相似，封閉，對齊，共享區域。
8.信息密度：在關鍵路徑上-只需要，其余為「弱」層。

4）優先級矩陣（P1-P4）

P1（臨界主要）：1-2 STA/每屏元素。大尺寸，明亮對比，固定位置。
P2（重要支持）：過濾器,快速標簽,次要CTA。P1旁邊的平均對比度。
P3（幫助/上下文）：線索、評級、迷你卡。冷靜的風格，緊湊。
P4（背景/參考）：參考，足跡，法律參考。小對比和大小。

規則：在一個屏幕上,不超過一個P1。如果P1競爭-它們不再是P1。

5）層次結構

全球：頂級導航，全局搜索，通知。
頁面：英雄塊，H1/H2，關鍵橫幅/offers。
組件：遊戲卡，結賬表，積分榜。
內部：字段順序，簽名，狀態，微線索。

6）典型腳本（iGaming示例）

• P1：「創建帳戶「/」登錄」（主要按鈕，固定位置）。
• P2： Sots登錄,「顯示密碼」,密碼策略。
• P3： Link"忘記密碼?"，安全提示。

• P1：「補充「/」輸出」+選定的方法。
• P2：總和,快速預設,傭金/限制附近。
• P3：隱藏的方法詳細說明，時間表。

• P1：搜索+關鍵過濾器（提供商、波動性、RTP、新/熱量）。
• P2：片段/標簽（Megaways, Jackpot, Buy Feature）。
• P3：二級排序，紙牌徽章（新穎性，命中，錦標賽）。

• P1：加入/獲獎詳情。
• P2：排行榜（前5名），倒計時計時器。
• P3：按點擊/掉頭完成規則。

7）印刷和網格

模塊化量表：12-14（文本）、16（基礎）、20-24（副標題）、28-40 （H1/Hero）。
基礎線：4/8px步驟；垂直節奏=可讀性。
字符串的長度：文本的45-75個字符；20-40用於卡片描述。
字符串間：文本為120-150％，標題為110-120％。

8）顏色與對比

文本對比度：不低於關鍵路徑上文本的AA級基準。
顏色角色：初級（CTA），Accent（註意），Info/Success/Warning/Danger（狀態）。
深色主題：增強邊界和文本的對比，減少廣泛彩色平面的飽和度；避免「霓虹燈疼痛」。
元素狀態：default/hover/focus/active/disabled-是可區分的。

9）口音和按鈕

初級CTA：每個屏幕一個顯著的顏色/比例，足夠的字段（min-tap 44 × 44px）。
中級/中級：光滑的音調，輪廓樣式。
微調器≠層次結構：進步提供反饋，但不應該打斷P1。

10）註意力力學與速度

F-/Z模式：將P1放置在預期的視線中。
希克定律：更少等於更快-減少第一步選項。
菲茨定律：更大，更接近-更容易點擊；增加熱門地區的重要性。
串行提示：通過步驟而不是「文本墻」進行培訓。

11）主屏幕/登陸

英雄塊：簡短的offer+單個P1。
視覺「rakes」：3-4部分最多到第一個滾動（類別，新產品，錦標賽）。
社會證明：提供者的徽章，「本周熱門歌曲」-P2，不會打斷P1。

12）Dashbords和桌子

第一個屏幕：1-2關鍵的KPI較大，火花線+趨勢徽章。
表格：按重要性對齊列、「凍結」關鍵列、使用density開關（CD/standard）。
空狀態：解釋下一步（P1按鈕+提示）。

13）移動vs桌面

Mobile：一個P1嚴格高於滾動線，tab bar ≤5點，CTA浮動允許結賬/遊戲。
臺式機：容器寬度1200-1440px；限制行長度；避免「拉伸」P1。

14）本地化,數字,RTL

考慮行長度（德語/土耳其語），不同的貨幣和等級。
RTL：鏡像網格和重音順序，但保持P1統治地位。

15） A/B和層次結構指標

• P1的尺寸/對比度增加12-16% → FMC和CTR的增長。
• 傳輸過濾器（P2）更接近搜索，→減少TTV對遊戲的搜索。
• 收銀機第一步中的選項減少→以上完成。

跟蹤：FMC（N秒），CTR P1，Scroll Depth到目標單元，TTV，Confusion Rate（錯誤/回報），Rage Clicks。

16）審核程序（支票單）

1.在每個關鍵屏幕上命名P1-它們恰好是一個?

2.P2元素支持P1,不用顏色/對比度爭論?

3.凝視之路：P1進入前3焦點？
4.文本/STA的對比在淺色/深色主題中是否足夠？
5.最低命中區是否得到滿足？

6.噪音： 可以刪除20%的元素而不丟失轉換?

7.空狀態會導致行動嗎？

8.狀態（hover/focus/active）是可區分且可用的?

9.在移動上，P1看起來沒有滾動嗎？

10.是否在漏鬥中連接和可讀度量?

17）反模式

在同一屏幕上兩個或多個小學。
「尖叫」橫幅覆蓋P1。
灰色到灰色（對比度不足）。
在關鍵路徑上沒有文本的圖標。
超載卡：6+徽章，4行描述。
無目標動畫（閃爍/無限）。

18）設計系統： 優先級規範

代幣： '顏色。primary`, `color.accent`, `elevation.p1`, `radius.lg`, `space.8/12/16`.

尺寸角色： 'btn。p1.lg`, `btn.p2.md`, `text.h1/h2/body`, `badge.status`.

圖層/Z-index： P1位於內容模塊之上,但低於系統調制解調器。
狀態：帶示例的狀態表（屏幕海德）。

19）優先級算法（偽）

1.定義屏幕目標（一個句子）。
2.分配P1（一個項目）,設計為最突出的項目。
3.在P1旁邊/之後形成P2 （2-5元素）。
4.將/折叠P3-P4。
5.通過可用性和移動性檢查表。
6.檢查查看和time-to-P1路徑（點擊≤3秒）。
7.啟動A/B,觀看FMC/TTV/CTR。

20）微鴉片和文字

H1標題是簡短的動詞/價值：「從10秒開始播放」。
CTA-動作和結果：「一分鐘內補充」，「立即玩」。
線索-在案件中，最多一行，沒有行話。

21）接受層次結構任務

屏幕上定義了唯一的P1；看到沒有滾動（移動/臺式機）。
P1的對比度對應於海德線；命中區域的尺寸≥44×44px。
P2在視覺上比P1弱（在1-2對比/尺度階段）。
元素的狀態是可區分的。有焦點鍵盤樣式。
FMC/TTV/CTR/Scroll Depth的分析事件已連接。

22）簡短摘要（TL；DR)

等級是註意力的學科。每個屏幕一個顯式P1，通過P2支持，噪音更少，對比度充足和可讀印刷機。用支票單檢查自己，測量FMC/TTV/CTR，並通過A/B測試確認假設。