某天中午去食堂吃饭时看着菜单陷入了沉思…
菜单基本信息如下:
很显然我不是来凡尔赛食堂伙食的,我只是突然觉得这个东西特别像之前收到的很多交互/用研铁汁的作品集,甚至述职报告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图:
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为简容易出效果。
那什么特殊情况下可以使用整图背景呢?
一般是针对视觉的同学有非常亮眼的纯视觉效果展示的时R 2 ! N P Y T ~ g候可以用全图背景,其他时候都不推荐。
2. 主图的破格与个数限制
很多铁汁喜欢把展示的图片规规矩矩的放满,但其实亮点要通过放大与破格突出。不要企图用很多图堆在一起来说明这个项目的亮点,比如这道菜是你重点推荐的,那么只需要一个放大% b V } ! / +的这道菜就会很有说服力。当然前提是这个亮点足够亮。
(*请不要问为什么酸菜鱼章鱼爪和青菜要配一* } i X K E H个饺子图,人艰不拆)
3. 多图排布技巧
我们经常要遇到必须要多图展示的情况,比如全页面、原型流程的展示、或者表格什么的。比起 duang 一下扔一组 mockup 上去,我们可以借用超实用的蒙层来实现图片与文案间的过渡,防H ] 6 G } P止生硬的尴尬过渡。
尤其黑色底板的蒙层应用效果更加的好。
关于 UI 排版思维里的对比主要是为了凸显内容的层次,引导用户更容易的获取主要信息。这里对比包t + W h !括字体、字重、大小、颜色等多维度的比对。我们通常通过以下几个方式来形成比对,提升信息的传达效率。
1. 不要企图用同字重字色完成不同层级的信息展示。
这k * $ J 8 ! ? S里推荐大家尽可能的多用黑白字体,彩色字体仅作为需要分割的辅助信息或者标签存在,l y 3 t $不然会影响整体阅读的重心,感觉画面很花。
2. 文字、图片与色彩的比对,才是一个合格的画面。
尽量不要留满满一页文字,或者满满4 j S m A $ @一页/ 6 f y !图片,合理搭配,按不同配比进行碰撞才能有良好的视觉体验及阅读愉悦感。
我们/ 9 Z w尽可能多的将纯文本信息转化为细节的视觉元素,不仅可以点缀画面,也可以让用[ ? + H 6 v V L @户降低理解成I 5 C i L %本,从而提升阅读的可读性。
这里我们可以通过标签、图标、分割线等多种方式来进行元素的视觉化传达。
1. 图标化
2. 标签$ e v化
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
阅读文章 >>
欢迎关注作者的微信公众号:「Nana的设计锦囊」