视觉层级Visual Hierarchy
你可能会说
这个页面看起来特别乱，什么都一样大。帮我排个主次：主标题最突出，说明次要一点，按钮最显眼。
视觉层级是让访客按你想要的顺序看页面——先看主标题，再看说明，最后注意到按钮。打开一个页面，视线最先落在哪里、接着看什么，不是访客随机决定的，是字号、颜色、位置共同引导的。标题最大最粗所以先被看到，说明浅一档所以第二眼才读，按钮有底色所以最后跳出来。页面「看起来乱」多半不是内容问题，是所有东西一样大、一样重，眼睛不知道从哪开始。
也常被叫作信息层级视觉优先级
一样大 vs 分了层
把项目素材整理成作品页整理背景、过程和结果查看完整示例了解更多
四行一样重，眼睛不知道从哪开始诊断口诀：眯眼看页面，第一落点对不对。
分层的三种手段
大小：越重要的越大。主标题明显大于副标题，副标题明显大于正文——差距要拉开到一眼能分。
颜色深浅：重要内容用深色，次要内容浅一档；全页一个颜色深浅就等于没有主次。
位置和底色：页面越靠上越先被看到；按钮靠底色而不是靠字号跳出，图片本身就是视觉锚点。
你可以这样告诉 AI Agent
首页的层级重新排一下：主标题最大最粗，说明文字小一档、颜色浅一档，主要按钮保留底色，其他元素都别抢。改完我截图眯眼看一眼，第一眼落点应该是主标题。
接下来学什么
延伸阅读 · 权威出处
快速练习