日期：
来源：体验进阶收集编辑：设计师ZoeYZ
我2017年最早在知乎发布了一篇页面布局的文章，2年后才发到这个公众号《复杂界面的布局设计》。
文章反响不错，知乎点赞两百多，收藏七百多：
公众号的数据也是明显超过当时平均值的：
甚至我有次路过鹅厂某部门，还看到有设计师在电脑上仔细看我那篇文章。但还是免不了知乎上有个关注我的网友在评论区带节奏：看看他的个人简介，难怪那么会钻空子，难得关注我这么多年了：不管黑子们怎么讲，现在6年过去了，我依旧经常使用这个方法，而且还对细节的思考更加到位了。
所以我今天来更新优化一下这篇老文章，给有需要的人更多帮助。不管用美团点外卖、用淘宝买东西，还是用抖音刷短视频，我们都是抱着目的在界面上寻找信息，找到后就操作，然后继续找……如此往复。
所谓界面，其实就是用户和系统交换信息的媒介——想清楚这一点，后面的方法你就能理解了。
P.S. 这里所谓信息除了文字之外，也包含功能、图片等，界面上有意义的所有展示元素。
这就相当于，我们希望一打开美团外卖就能看到想点的外卖，一打开淘宝就能看到想买的商品，一打开抖音就能看到好看的视频……绝大多数产品，所展示的信息对用户来说，不外乎三种：主体信息、辅助信息和基本信息。
P.S. 之前那篇文章我写的是 4 种，现在简化了。对外卖 APP 首页来说，就是分类、页签、福利这些。对外卖 APP 首页来说，就是搜索、消息、购物车、底导航这些。
这里要注意一下，购物车之所以放到基本信息里，是因为大部分用户点外卖根本不需要用到购物车。如果大部分用户点外卖都会用到购物车，那么购物车就不能放到基本信息里了。直接叫你画布局，可能会很懵，那么你可以从以下几个用户行为习惯入手：2. 我们虽然是从左到右从上到下阅读，但通常会略过边缘，从中间开始看。布局规则：主体信息放在中间区域，基本信息放在边缘区域。3. 我们很容易被动效、人脸或鲜艳的色彩所吸引，但太多了反而干扰。布局规则：重要的信息除了通过布局强调之外，还可以通过独特的设计来吸引注意力。- 重要的信息除了通过布局强调之外，还可以通过独特的设计来吸引注意力。
手机界面主体信息的操作区最好在中下部。
根据以上的结论，我们可以把外卖 APP 的布局粗略设计成这样：建议三种类型的信息用不同的颜色，这样比较容易区分。
右下角的这个小浮窗虽然不是特别起眼，但是可以通过视觉设计来强化。跟美团外卖差异不大，主要区别是，右下角的小浮窗不是红包，而是购物车和资质规则，这两个都相当于基础信息。跟饿了么对比一下，主要的差异在于外卖页签页上多了一个红包区，也属于辅助信息，所以家在那里倒也合理。真实项目中，还需要考虑到各种运营信息，也就是用户并不一定想看，但产品经理或运营要硬塞上去的东西……而且还可能要考虑设计规范、开发成本等因素，需要微调。涉及到更详细的设计方法，一篇文章肯定是讲不清的。如果硬要讲，一旦有的地方没讲清楚，就容易被看不懂的网络喷子攻击。这就是为啥，你们在网上很难看到特别好的干货，真的是投入大、收益小、风险高。我算是有点儿理想主义，才能坚持这么多年的。想要系统性的学习，可以了解一下这个UX/交互系统课（我是课程主要策划和导师之一）：免费试听课就在这周三21点，有需要的可以扫码进个群吧：对了，本文的案例源文件我分享出来了，虽然这个不重要，但也还是送给需要的朋友：