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中的顺序以及不同状态下的行为。当每个级别都有自己的角色和权重时-界面变得清晰，快速和可预测，用户对自己的行动充满信心。