UI中的內容層次結構

1）為什麼需要層次結構

• 在3-5秒內回答三個問題：這是什麼？→什麼重要？→該怎麼辦？
• 使界面可預測且易於掃描；
• 減少錯誤並增加轉換。

原則：信號>噪聲,序列>多樣性,背景>絕對規則。

2）重要性水平和結構

1.導航背景（品牌，部分，面包屑/面包）。

2.H1是屏幕的目標（必要時盡可能短，動詞）。

3.領導/副標題（一行收益或狀態）。

4.主要行動（1-2關鍵CTA）。

5.主要數據（主要KPI，一線卡）。

6.二級數據（零件，過濾器，輔助表）。

7.Meta/Help（提示，註釋，法律文本）。

規則：在一個屏幕上-一個H1,不超過兩個primary CTA。

3）印刷和節奏

字體量表：H1 28-32，H2 22-24，H3 18-20，body 14-16，micro 12（px/pt等效於Web）。
字符串間距：1。3–1.5 for body, 1.2–1.3標題。
縮進節奏：基本單位的倍數（4/8 px）。Zagolovok↔blok：16-24；第8至12段。
對比：WCAG AA最低；標題總是比簽名/元對比。
顏色vs重量：顏色是口音，不是「拐杖」而不是大小/脂肪。

4）網格和布局

12列網格（桌面）/4-6（移動）,帶有固定關節。
Visually first=DOM中的第一個：幫助屏幕閱讀器和SEO。
讀取軸：從左到右（LTR）或從右到左（RTL）-鏡像信號的順序。
「註意區域」：左上角/中鋒-標題和標題；「行動地帶」-它旁邊/下面。

5）視覺優先線索

尺寸和重量（打字機）是主要信號。
位置（上圖/左圖=LTR更重要）。
顏色（CTA的重點，狀態-通過固定調色板）。
肖像畫（僅作為文本支持）。
撤退/框架（大型「空氣」卡被認為更重要）。
動態（動畫≤ 200毫秒吸引註意力而沒有煩惱）。

6）漸進式披露

• 在折疊中-僅上下文、目標和主要動作。
• 手風琴/禁忌部分是次要數據。
• 點擊細節（drill-down）：卡片→面板→調制解調器。
• 線索代替擁擠的「支架」。
• 骨架/播放器在加載期間保留結構。

7）類型屏幕中的層次結構

7.1 Dashbord

H1+時間過濾器在頂部。
KPI條帶（3-5張卡）是第一條線。
圖形/表-第二行,排序/篩選器旁邊。
異常/異常是單獨的揚聲器/磁帶，不與KPI混合。

7.2目錄/大廳

H1+快速過濾器/芯片。
排序更接近標題，CTA「播放/購買」在卡片上。
標簽（新/頂部/頭獎）-相對於標題在視覺上是次要的。

7.3實體卡（遊戲/商品）

英雄區：標題（H1），關鍵事實（RTP/波動/排名），初級CTA。
詳細信息：描述/特征/評論選項卡。
元數據：標簽和法律文本-底部。

7.4表格/向導

步驟標題+簡短領先（「2分鐘，地圖未註銷」）。
頻率/強制性字段順序。
右側/底部CTA，支持動作-底部/左側鏈接。
錯誤-在字段旁邊，簡短和實例。

8）狀態優先級

• 規範→下載→成功/空白→錯誤。
• 在下載中-保存框架（骨架）,CTA不跳。
• 在錯誤中-H1更改為「發生了什麼」，CTA更改為「重復/聯系」。

9）內容令牌和設計系統

• `font.heading.xl`, `font.body.md`, `space.200`, `radius.md`, `elevation.sm`.
• 文本角色：'文本。title`, `text.lead`, `text.secondary`, `text.meta`, `text.helper`.
• 顏色角色：'accent/neutral/success/warn/danger'+「levels」 （100-900）。
• 組件：'KPI。Card/Section.Title/Inline.Help/Meta.Line`.

10）測量和質量

• 掃描時間（第一個有意義的點擊/動作的中位數）。
• Focus Order Errors（用戶被外觀「錯過」的次數）。
• CTA Visibility％（有多少人看到CTA vs點擊了）。
• INP/CLS（加載時層次結構不應「跳躍」）。
• A/B：大於H1 vs的對比度更強；芯片過濾器在側邊欄的頂部vs。

• `first_focus_target`, `primary_cta_exposed/clicked`, `section_collapse_toggle`, `help_shown`.

11） iGaming的練習（示例）

賭場大廳：H1「大廳」，「新/現場/頭獎/最愛」芯片，然後是瓷磚。每張卡片都有名稱，提供商的圖標，CTA「播放」；「新/頭獎」標簽是次要標簽。
運算符Dashboard：第一行是NGR/GGR/DAU/CR，第二行是趨勢和異常，第三行是表格。
支付步驟：H1「充值」，領導「無傭金，瞬間」，轉換方法列表，頂部最小元文本。

12）反模式

屏幕上的十個重音強度相同（「視覺尖叫」）。
標題為沒有文本的圖片/圖標（打破可用性和搜索）。
「結果是小字體」，通知是巨大的橫幅。
初級CTA旁邊的輔助鏈接具有相同的視覺重量。
不一致的順序：今天「過濾器在上面」，明天「在左邊」。

13）實施支票

1.定義屏幕目標（H1+1-2主操作）。
2.標記級別：primary/secondary/meta；固定在DS令牌中。
3.收集印刷量表和基本縮進節奏。
4.調試狀態（加載/空白/錯誤）而不會出現STA/標頭跳躍。
5.與3-5人進行5分鐘「掃描測試」：他們註意到他們在哪裏被點擊。
6.連接遙測（exposure CTA, scan time, focus order）。
7.用「前/後」示例在網關中記錄模式。

14）結果

內容層次結構不是「主字體的主要字體」，而是解決方案系統：打字機，網格，顏色，縮進節奏，DOM中的順序以及不同狀態下的行為。當每個級別都有自己的角色和權重時-界面變得清晰，快速和可預測，用戶對自己的行動充滿信心。