一、视觉层次

对比：主标题字号为正文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。