某天中午去食堂吃饭时看着菜单陷入了沉思…
菜单基本信息如下：
用实战优化案例，教你举一反三的 UI 排版方法！
很显然我不是来凡尔赛食堂伙食的，我只是突然觉得这个东西特别像之前收到的很多交互/用研铁汁的作品集，甚至述职报告R t : o # + : r y。
其实关于UI 排版的文章挺多的，但是好像都把 UI 排版局限? X 3 + 7 r ;在了小小的格式塔原则里。其实 UI 排版是一个很强大的信息收集与处理分发的过程，它的核心价值并不在于变好看这件事儿。
至于它R E v v有多强大？核心精髓又如何 get？我决定授% } K之以鱼不如授之以渔，就用食堂的菜单来做一个例子，分享一个大家可以举一反三的q N A R r Z j UI 排版方法。
我们假设，如果要把菜单信息变成一些铁汁（尤其是纯交互/用研）的作品集，可以如何优化排版呢？
第一步不要急着排版，我们需要思考的问题; { F _是我们的内容需要分拆成多少块进行一页页的输出，也就是量化每一页的文案内容。过度拥挤的一页内容，读者不易发现内容的亮点与优先级，从而产生阅读抵触。而如果每一页的内容都过少又无法高效的体现思路与丰满度。那么我们该如何把握这里的节奏呢？
这里建议大家可以以这O z # l v样的思路进行拆分，我们将A * [ Y H F ,上面) y | 7 ? O X的菜单作品集拆为了 4 页左右的 ppt，如下M r 0 _ l图：
用实战优化案例，教你举一反三的 UI 排版方法！
用实战优化案例，教你举一反三的 UI 排版方法！
用实战优化案例，教你举一反三的 UI 排版方法！
用实战优化案例，教你举一反三的 UI 排版方法！
1. 全局上考虑
模块目录：午饭+午饭的相关说明——目的为让各位干饭人清楚干饭的整体时间、地点
亮点] m E g L M ^ F [：2 号窗口当做了推荐窗口（[ N & i $ M e ,也就是亮点）给读者进行了阅读推荐——目的是让各位干饭人知道我们有特别好次的菜，快来干饭
集合分类：分类剩下的窗口为配餐与自选 2 种窗口进行集合展示——目的是告诉各位干饭人，我们的饭菜种类超多，想吃啥都有。
2. 细节信息考虑
合并同类项：把同类信息合并，避免重复展示，提炼最有价值的信息展示
限制层级：尽量限制一页内容层级在 2 级以内，控制信息长度
于是乎，内容的信息梳理便有节奏的完成了，注意是有节奏的完成了。
*这里可能有细心的铁汁发现我舍, _ Y ^ k 6弃了菜单里的一些窗口y 7 :，不是因为个人不爱吃，而是打个比方：并不是所有信息都是有价值展4 1 * q r示出来的，我们不需要面面俱到，判断好信息的价G ] c值，做到断舍离。
在组织完每Q & G w页的内容后，作为设计师肯定少不了得配个图什么的（插画、界面、原型什么的）。
这个时候文字与图片之间的关系就变得十分重要。
这里给大家介绍几个高` J A h d O z级配图的方式以及技巧吧：
1. 关于全图背景
有的铁汁可能会觉得整张图放着挺好看的昂，也很简单，不用拼接什么的。但其实整张图在排版里的应用是很讲究条件的，贸然随便配个图当全图背景就会使的整体非常不高级且不专业。建议大家多使用纯色D Q I底的元素拼接点缀背景，这样化繁9 u & W : S为简容易出效果。
用实战优化案例，教你举一反三的 UI 排版方法！
那什么特殊情况下可以使用整图背景呢？
一般是针对视觉的同学有非常亮眼的纯视觉效果展示的时R 2 ! N P Y T ~ g候可以用全图背景，其他时候都不推荐。
2. 主图的破格与个数限制
很多铁汁喜欢把展示的图片规规矩矩的放满，但其实亮点要通过放大与破格突出。不要企图用很多图堆在一起来说明这个项目的亮点，比如这道菜是你重点推荐的，那么只需要一个放大% b V } ! / +的这道菜就会很有说服力。当然前提是这个亮点足够亮。
（*请不要问为什么酸菜鱼章鱼爪和青菜要配一* } i X K E H个饺子图，人艰不拆）
用实战优化案例，教你举一反三的 UI 排版方法！
3. 多图排布技巧
我们经常要遇到必须要多图展示的情况，比如全页面、原型流程的展示、或者表格什么的。比起 duang 一下扔一组 mockup 上去，我们可以借用超实用的蒙层来实现图片与文案间的过渡，防H ] 6 G } P止生硬的尴尬过渡。
用实战优化案例，教你举一反三的 UI 排版方法！
尤其黑色底板的蒙层应用效果更加的好。
关于 UI 排版思维里的对比主要是为了凸显内容的层次，引导用户更容易的获取主要信息。这里对比包t + W h !括字体、字重、大小、颜色等多维度的比对。我们通常通过以下几个方式来形成比对，提升信息的传达效率。
1. 不要企图用同字重字色完成不同层级的信息展示。
用实战优化案例，教你举一反三的 UI 排版方法！
这k * $ J 8 ! ? S里推荐大家尽可能的多用黑白字体，彩色字体仅作为需要分割的辅助信息或者标签存在，l y 3 t $不然会影响整体阅读的重心，感觉画面很花。
2. 文字、图片与色彩的比对，才是一个合格的画面。
尽量不要留满满一页文字，或者满满4 j S m A $ @一页/ 6 f y !图片，合理搭配，按不同配比进行碰撞才能有良好的视觉体验及阅读愉悦感。
用实战优化案例，教你举一反三的 UI 排版方法！
我们/ 9 Z w尽可能多的将纯文本信息转化为细节的视觉元素，不仅可以点缀画面，也可以让用[ ? + H 6 v V L @户降低理解成I 5 C i L %本，从而提升阅读的可读性。
这里我们可以通过标签、图标、分割线等多种方式来进行元素的视觉化传达。
1. 图标化
用实战优化案例，教你举一反三的 UI 排版方法！
2. 标签$ e v化
用实战优化案例，教你举一反三的 UI 排版方法！
Get 完以上的技巧，还有V p $ #最后一件事情：如果是述职 or 面试作品集，排7 K j T f版的意义更在于信息表达的~ Y A 6清晰度而非视觉上的美观，无^ C m ^ # 0 T论你是 UI 还是交互！切记切记！希望大家不要把作品集做成菜单～
基本当你将以上的 UI 排版思维/ e j W = $应用到日常时、尤其作品集时，很多人就会开始分不清你是 UI 还是交互了，L I ] . % ]这个时候你就可以说自己万能 UX。
最后，看完了这个“精彩”的故事，有人有兴趣拿“晚饭”k Y ( | ! B % B来做个练习吗？还是说有人默默打开了蓝色3 # T 4 X g | 6软件点了一份图上的拉面？
想做出高大上的海报/PPT？来看这份文案字体排版指南手册
文案字数太多无从下手？甲方执] { 5迷不悟塞一堆文字G B O F？
阅读文章 >>
让图片加字变得有格调？这三个方法可以轻松搞定！
想让你的图片一秒变得有逼] 0 7 c ` ] u格？试试在上面加点文字吧！b * x
阅读文章 >>
用实战优化案例，教你举一反三的 UI 排版方法！
欢迎关注作者的微信公众号：「Nana的设计锦囊」
用实战优化案例，教你举一反三的 UI 排版方法！
