视觉层次上，主标题字号为正文2-3倍，关键按钮采用高对比色，重要信息与次级信息使用不同灰度区分。空间布局遵循8倍数间距，模块间留白充足，并利用分隔线或阴影区分区域。
一、视觉层次
对比：主标题字号为正文2-3倍；关键按钮用高对比色；重要信息用#333，次级用#666。
空间：段落间距按8倍数（16/24/32px）；模块间留白≥60px；用1px浅分隔线或20px阴影区分区域。
二、内容结构
优先级矩阵：P0核心价值主张放首屏视觉焦点；P1主要功能入口在首屏次级；P2客户案例需滚动可见；P3详细参数放页脚或次级页面。
F型布局：左侧固定导航（宽240px）；主内容区6-8列网格；右侧辅助信息区（宽300px）。
三、交互增强
动态线索：悬停按钮放大5%；平滑滚动；手风琴菜单展开动画（300ms）。
视觉引导：脉冲动画吸引注意（如阴影扩散效果）。
四、技术要点
CSS层级规范：
modal=1000,overlay=900,dropdown=800,header=700,footer=600。
响应式：移动端堆叠；平板2列网格；桌面多列布局。
五、验证测试
5秒测试：用户浏览5秒后能回忆≥3个关键信息。
眼动指标：首屏热点覆盖核心CTA；关键信息获取＜1.5秒。
六、工具推荐
分析：WebAIM Contrast Checker、Chrome Lighthouse（＞90分）。
原型：Figma Auto Layout、Adobe XD Stack。
公网安备:陕公网安备 61080202000384号