编辑导语：在产品设计的排版当中，视觉舒服是很重要的，对于用户来说，看到的页面排版的第一印象比较重要，并且在乎是否能在页面上捕捉到重要信息；本文作者分享了关于把UI排版的思维应用于其他地方是如何的，我们一起来了解一下。

某天中午去食堂吃饭时看着菜单陷入了沉思…

菜单基本信息如下：

很显然我不是来凡尔赛食堂伙食的，我只是突然觉得这个东西特别像之前收到的很多交互/用研铁汁的作品集，甚至述职报告。

其实关于ui排版的文章挺多的，但是好像都把ui排版局限在了小小的格式塔原则里；其实ui排版是一个很强大的信息收集与处理分发的过程，它的核心价值并不在于变好看这件事儿。

至于它有多强大？核心精髓又如何get？我决定授之以鱼不如授之以渔，就用食堂的菜单来做一个例子，分享一个大家可以举一反三的ui排版方法。

我们假设，如果要把菜单信息变成一些铁汁（尤其是纯交互/用研）的作品集，可以如何优化排版呢？

一、动手之前，先拆解信息

第一步不要急着排版，我们需要思考的问题是我们的内容需要分拆成多少块进行一页页的输出，也就是量化每一页的文案内容。

过度拥挤的一页内容，读者不易发现内容的亮点与优先级，从而产生阅读抵触；而如果每一页的内容都过少又无法高效的体现思路与丰满度。那么我们该如何把握这里的节奏呢？

这里建议大家可以以这样的思路进行拆分，我们将上面的菜单作品集拆为了4页左右的ppt，如下图：

全局上考虑：

• 模块目录：午饭+午饭的相关说明——目的为让各位干饭人清楚干饭的整体时间、地点；
• 亮点：2号窗口当做了推荐窗口（也就是亮点）给读者进行了阅读推荐——目的是让各位干饭人知道我们有特别好次的菜，快来干饭；
• 集合分类：分类剩下的窗口为配餐与自选2种窗口进行集合展示——目的是告诉各位干饭人，我们的饭菜种类超多，想吃啥都有。

细节信息考虑：

• 合并同类项：把同类信息合并，避免重复展示，提炼最有价值的信息展示；
• 限制层级：尽量限制一页内容层级在2级以内，控制信息长度；

于是乎，内容的信息梳理便有节奏的完成了，注意是有节奏的完成了。

*这里可能有细心的铁汁发现我舍弃了菜单里的一些窗口，不是因为个人不爱吃，而是打个比方：并不是所有信息都是有价值展示出来的，我们不需要面面俱到，判断好信息的价值，做到断舍离。

二、文字与图片，讲究恰到好处

在组织完每页的内容后，作为设计师肯定少不了得配个图什么的（插画、界面、原型什么的），不然无图言屌。

这个时候文字与图片之间的关系就变得十分重要。

这里给大家介绍几个高级配图的方式以及技巧吧：