视觉层次结构和优先级

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测试确认假设。