想起之前有段时间天天和澳洲同事“battle” homepage，她和我科普了 hierarchy（页面层级）。最近在 UX 的课程又有学到，就和大家分享一下，如果重点不止一个，怎么通过一点“设计”把想要的内容都展示在界面上。可以给各位产品经理在画原型的时候，有一些参考。

最核心的原则——还是你自己能明确各个功能和元素之间的优先级，你最想让用户看到，操作的。如果发现重点就是不止一个，我们再来看，我们可以怎么从设计上用不同的方式去展现或者平衡页面层级。

1. 位置（Position）

人的视觉天然会“自上而下”、“自左往右”地扫视。所以：

• 页面顶部、首屏中央的内容权重大。
• 左边比右边优先级高。

2. 模块尺寸（Size）

尺寸也是表达优先级的语言：

• 重要内容放大，更有存在感。
• 次要信息缩小。

举个例子，【左图】 1 的层级明显大于 2，因为在两个方面上 1 都更占优势。

但是【右图】 1 的位置更好，平衡了 2 的尺寸， 1 和 2 看起来就都比较重点。

3. 颜色（Color）& CTA 按钮（Call to Action）

如果你还有想强调的东西，但是位置和尺寸被更重要的东西占了，你就可以考虑颜色和按钮。这两个我放在一起，是觉得有一定的相似度。

• 色彩的饱和度和对比度会更加抓人眼球。例如这个提示。
• 而 CTA 是用户长期形成的认知习惯。看到按钮，你会更有点击的欲望。而且往往按钮，也会应用不同的颜色。

4. 体积 & 量感（Volume & Depth）

通过投影、立体感，给某些模块制造“重量感”。不同的量感也会增加你对这块的探索。

举个例子，这里正方形的占比很大，但是视线还是会优先被提示（颜色），和按钮（CTA），阴影按钮（体积感）吸引

5. 风格差异（Visual Style）

丰富插图、动效也会帮助你吸引视线。

6. 空间留白（White space）

重要内容周围的留白越多，它就越突出。

这点在网页设计中好像比较多，app内空间有限，我个人往往会把文字当做是铺垫的留白（仅个人用法提供参考，理论上不一定对）。

7. 布局（Layout）

分栏 vs 单列

网格 vs 卡片

折叠 vs 展开

8. 曝光频率（Exposure）

这是不太容易记起的一点，但是在你 app 有 Banner 的情况下会非常好用。

可以在不同的时间段设置不同模块的出现时长。通过时间段和时长来展示优先级。

总之，如果有多个重点的地方，又不想原型太单调，你就可以选择在不同的方面强调，而依旧保持美观。但是，还是请你提前排好优先级，一个页面的“重点”不要超过 2～3 个哦～