这个布局设计法曾前被知乎网友嘲讽，然而6年了我还在用

我2017年最早在知乎发布了一篇页面布局的文章，2年后才发到这个公众号《复杂界面的布局设计》。

文章反响不错，知乎点赞两百多，收藏七百多：

公众号的数据也是明显超过当时平均值的：

甚至我有次路过鹅厂某部门，还看到有设计师在电脑上仔细看我那篇文章。

但还是免不了知乎上有个关注我的网友在评论区带节奏：

看看他的个人简介，难怪那么会钻空子，难得关注我这么多年了：

不管黑子们怎么讲，现在6年过去了，我依旧经常使用这个方法，而且还对细节的思考更加到位了。

所以我今天来更新优化一下这篇老文章，给有需要的人更多帮助。

原理：

用户看界面主要是在寻找信息

不管用美团点外卖、用淘宝买东西，还是用抖音刷短视频，我们都是抱着目的在界面上寻找信息，找到后就操作，然后继续找……如此往复。

所谓界面，其实就是用户和系统交换信息的媒介——想清楚这一点，后面的方法你就能理解了。

大道至简，页面布局的核心目标就是一条：

让用户尽快获取

最想要的信息

P.S. 这里所谓信息除了文字之外，也包含功能、图片等，界面上有意义的所有展示元素。

这就相当于，我们希望一打开美团外卖就能看到想点的外卖，一打开淘宝就能看到想买的商品，一打开抖音就能看到好看的视频……

那么要如何做到这一点呢？

接下来我以外卖 APP 首页为例，进行讲解：

第一步：

把信息按照用户兴趣分类

绝大多数产品，所展示的信息对用户来说，不外乎三种：主体信息、辅助信息和基本信息。

P.S. 之前那篇文章我写的是 4 种，现在简化了。

主体信息

即用户来到这里的主要目的，通常只有一种。

对外卖 APP 首页来说，就是外卖卡片了。

辅助信息

用户为了完成那个主要需求，所需的辅助信息。

对外卖 APP 首页来说，就是分类、页签、福利这些。

基本信息

跟用户主要目的没有直接关系，但又必须展示的。

对外卖 APP 首页来说，就是搜索、消息、购物车、底导航这些。

这里要注意一下，购物车之所以放到基本信息里，是因为大部分用户点外卖根本不需要用到购物车。如果大部分用户点外卖都会用到购物车，那么购物车就不能放到基本信息里了。

完成分类

外卖 APP 首页最后可以整理成这样：

第二步：

根据用户习惯画出布局

直接叫你画布局，可能会很懵，那么你可以从以下几个用户行为习惯入手：

1. 我们通常认为相邻的东西是相关的。

布局规则：可以先大块大块地画布局，然后再细分。

布局规则：辅助信息要放在主体信息旁边。

2. 我们虽然是从左到右从上到下阅读，但通常会略过边缘，从中间开始看。

布局规则：主体信息放在中间区域，基本信息放在边缘区域。

3. 我们很容易被动效、人脸或鲜艳的色彩所吸引，但太多了反而干扰。

布局规则：重要的信息除了通过布局强调之外，还可以通过独特的设计来吸引注意力。

4. 手机的最佳操作区域在右下侧。

布局规则：手机界面主体信息的操作区最好在中下部。

最后整理一下上面得出的布局规则：

• 可以先大块大块地画布局，然后再细分。
• 辅助信息要放在主体信息旁边。
• 主体信息放在中间区域，基本信息放在边缘区域。
• 重要的信息除了通过布局强调之外，还可以通过独特的设计来吸引注意力。

• 手机界面主体信息的操作区最好在中下部。

粗略布局

根据以上的结论，我们可以把外卖 APP 的布局粗略设计成这样：

建议三种类型的信息用不同的颜色，这样比较容易区分。

细致布局

接下来，我们可以在粗略布局的基础上，进行细化：

右下角的这个小浮窗虽然不是特别起眼，但是可以通过视觉设计来强化。

这样就好了？

接下来，确实可以拿去细化出稿了。

我们来跟两大外卖 APP 首页对比一下看看：

跟美团外卖差异不大，主要区别是，右下角的小浮窗不是红包，而是购物车和资质规则，这两个都相当于基础信息。

跟饿了么对比一下，主要的差异在于外卖页签页上多了一个红包区，也属于辅助信息，所以家在那里倒也合理。

所以，这个布局方法就万无一失了吗？

当然不是。

真实项目中，还需要考虑到各种运营信息，也就是用户并不一定想看，但产品经理或运营要硬塞上去的东西……而且还可能要考虑设计规范、开发成本等因素，需要微调。

涉及到更详细的设计方法，一篇文章肯定是讲不清的。如果硬要讲，一旦有的地方没讲清楚，就容易被看不懂的网络喷子攻击。

这就是为啥，你们在网上很难看到特别好的干货，真的是投入大、收益小、风险高。我算是有点儿理想主义，才能坚持这么多年的。

想要系统性的学习，可以了解一下这个UX/交互系统课（我是课程主要策划和导师之一）：

免费试听课就在这周三21点，有需要的可以扫码进个群吧：

对了，本文的案例源文件我分享出来了，虽然这个不重要，但也还是送给需要的朋友：