页面的视觉层次怎么建立？

UI/UX设计第 12 / 12 题答题框架

参考思路：大小/对比/留白/亲密性原则→信息优先级决定视觉权重→F/Z 阅读模式→眯眼测试。用改版前后对比说明。

五个经典回答示范

回答一 · 校招应届版

建立层次四个手段：大小——重要元素更大；对比——颜色重量形状差异拉开层级；留白——分组与呼吸感，亲密性原则决定归属；对齐——视线动线有序。方法上先做信息优先级排序：这页用户第一眼看什么、第二看什么，视觉权重按序分配。眯眼测试——退后眯眼看页面，还能读出结构就合格。

回答二 · 1-3年经验版

我讲一次改版实践：数据看板页原来所有数字等大等重，用户反馈找不到重点。我按用户决策路径排优先级：核心指标放大三倍置顶，次级指标分组收纳，操作降为文字链。改版后用户找核心指标的时间从平均 8 秒到 2 秒（可用性测试数据）。层次不是美学是信息效率。

回答三 · 资深版

我上升到格式塔原理支撑：接近性与相似性决定分组感知，连续性引导动线，图底关系分离主次。工程化落地：层次系统 token 化——字阶三档、色彩权重三档、间距阶数，全站一致的层次语言；度量上用眼动或视线追踪类工具验证注意力分配是否符合设计意图。层次的反面是『都重要』——当所有东西都强调，等于没有重点。

回答四 · 追问应对

追问『老板要求全放首屏怎么办』：用数据谈判——埋点证明次要内容点击率极低，或做 A/B 验证层级简化的转化提升；『层次和品牌调性冲突吗』：不冲突——品牌通过色彩图形语言表达，层次是信息组织，二者正交；『移动端层次怎么做』：屏幕小更要狠——一屏一个主行动点。

回答五 · 反面示范

『把所有卖点都加粗标红放大，用户都能看到，看到的越多转化越高，层次就是东西显眼。』——点评：全部强调等于没有强调——视觉竞争让用户什么都不看；『看到越多转化越高』与注意力稀缺的规律相反。这是运营思维入侵设计最典型的灾难现场。

怎么练这道题

这类题在真实面试中常被追问细节，
建议进入限时模式练一遍。