16. 🎯 信息层级 Hierarchy ★★★☆☆
🌏 Web 网页规范
- 排版层级: 使用 12 栏栅格系统的水平与垂直比重分布
- 视觉焦点: 采用字号粗细、字色饱和度进行长网页扫视引导
- 留白比重: 采用容器大留白划分板块，呼吸感排布
- 深度感知: CSS Box-shadow 塑造平缓的纸质感景深
📱 App 移动端规范
- 排版层级: 单列卡片结构，主要依靠卡片式区块分割
- 视觉焦点: 单屏信息密度高，采用主色动作按钮强力吸睛
- 留白比重: 采用紧凑的物理留白，注重单屏视线聚合点
- 深度感知: Material Elevation 原生高度轴阴影系统塑造景深
网页大屏依据 古腾堡扫描规律（从左上角视觉入口，到右下角终端行动点）规划多栏信息层级，主导大范围的视线流动。
移动端小屏采取高度集中的 单栏垂直滚动流，将最核心的交互点放在屏幕中下部的 “黄金拇指点击区”，排除边缘视觉干扰。
LIVE PLAYGROUND: 古腾堡视线热区扫描规律模拟
点击切换按钮，高亮查看古腾堡四个象限的视觉权重落点分布
https://web.meta-ui.edu/hierarchy
1️⃣ 进入点 (Primary Focus)
页面第一标题
用户视觉的第一入口
2️⃣ 强掠过点 (Strong Flee)
顶部辅助提示
3️⃣ 弱过渡区 (Weak Area)
次要正文说明栏
4️⃣ 核心落脚点 (Terminal Area)
视线扫描红色 Z 线演示 (Z-Pattern Scan Alignment)
左上：首个焦点 (1)
右上：扫视点 (2)
左下：过渡点 (3)
右下：转化点 (4)
📋 大模型统一 Prompt (LLM Prompt)