当你把UI排版的头脑应用于万物时，交互可以一秒变UX

开心每二天

原标题：当你把UI排版的头脑应用于万物时，交互可以一秒变UX

编辑导语：在产物计划的排版当中，视觉惬意是很紧张的，对于用户来说，看到的页面排版的第一印象比力紧张，而且在乎是否能在页面上捕获到紧张信息；本文作者分享了关于把UI排版的头脑应用于其他地方是怎样的，我们一起来相识一下。

编辑导语：在产物计划的排版当中，视觉惬意是很紧张的，对于用户来说，看到的页面排版的第一印象比力紧张，而且在乎是否能在页面上捕获到紧张信息；本文作者分享了关于把UI排版的头脑应用于其他地方是怎样的，我们一起来相识一下。

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

菜单根本信息如下：

很显然我不是来凡尔赛食堂炊事的，我只是忽然以为这个东西特殊像之前收到的许多交互/用研铁汁的作品集，乃至述职陈诉。

实在关于ui排版的文章挺多的，但是似乎都把ui排版范围在了小小的格式塔原则里；实在ui排版是一个很强盛的信息网络与处置惩罚分发的过程，它的焦点代价并不在于变悦目这件事儿。

睁开全文

至于它有多强盛？焦点精华又怎样get？我决定授之以鱼不如授之以渔，就用食堂的菜单来做一个例子，分享一个各人可以闻一知十的ui排版方法。

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

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

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

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

这里发起各人可以以如许的思绪举行拆分，我们将上面的菜单作品集拆为了4页左右的ppt，如下图：

全局上思量：

• 模块目次：午饭+午饭的相干阐明——目标为让各位干饭人清晰干饭的团体时间、所在；
• 亮点：2号窗口当做了保举窗口（也就是亮点）给读者举行了阅读保举——目标是让各位干饭人知道我们有特殊好次的菜，快来干饭；
• 聚集分类：分类剩下的窗口为配餐与自选2种窗口举行聚集展示——目标是告诉各位干饭人，我们的饭菜种类超多，想吃啥都有。

细节信息思量：

• 归并同类项：把同类信息归并，制止重复展示，提炼最有代价的信息展示；
• 限定层级：只管限定一页内容层级在2级以内，控制信息长度；

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

*这里大概有仔细的铁汁发现我舍弃了菜单里的一些窗口，不是由于个人不爱吃，而是打个比方：并不是全部信息都是有代价展示出来的，我们不必要八面见光，判定好信息的代价，做到断舍离。

二、笔墨与图片，讲求恰到利益

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

这个时间笔墨与图片之间的关系就变得非常紧张。

这里给各人先容几个高级配图的方式以及本领吧：

1. 关于全图配景

有的铁汁大概会以为整张图放着挺悦目的昂，也很简朴，不消拼接什么的。

但实在整张图在排版里的应用是很讲求条件的，贸然任意配个图当全图配景就会使的团体非常不高级且不专业；发起各人多利用纯色底的元素拼接粉饰配景，如许化繁为简轻易出结果。

那什么特别环境下可以利用整图配景呢？

一样平常是针对视觉的同砚有非常亮眼的纯视觉结果展示的时间可以用全图配景，其他时间都不保举。

2. 主图的破格与个数限定

许多铁汁喜好把展示的图片规规矩矩的放满，但实在亮点要通过放大与破格突出。

不要计划用许多图堆在一起来阐明这个项目标亮点，好比这道菜是你重点保举的，那么只必要一个放大的这道菜就会很有说服力，固然条件是这个亮点充足亮。

（*请不要问为什么酸菜鱼章鱼爪和青菜要配一个饺子图，人艰不拆）

3. 多图排布本领

我们常常要碰到必须要多图展示的环境，好比全页面、原型流程的展示、大概表格什么的；比起duang一下扔一组mockup上去，我们可以借用超实用的蒙层来实现图片与文案间的过渡，防止生硬的尴尬过渡。

尤其玄色底板的蒙层应用结果更加的好。

三、没有对比，就没有条理变革

关于ui排版头脑里的对比重要是为了凸显内容的条理，引导用户更轻易的获取重要信息。这里对比包罗字体、字重、巨细、颜色等多维度的比对。

我们通常通过以下几个方式来形成比对，提拔信息的转达服从。

1. 不要计划用同字重字色完成差别层级的信息展示

这里保举各人尽大概的多用好坏字体，彩色字体仅作为必要分割的辅助信息大概标签存在，否则会影响团体阅读的重心，感觉画面很花。

2. 笔墨、图片与色彩的比对，才是一个及格的画面

只管不要留满满一页笔墨，大概满满一页图片，公道搭配，按差别配比举行碰撞才气有精良的视觉体验及阅读愉悦感。

四、细节元素的视觉化

我们尽大概多的将纯文本信息转化为细节的视觉元素，不但可以粉饰画面，也可以让用户低落明白本钱，从而提拔阅读的可读性。

这里我们可以通过标签、图标、分割线等多种方式来举行元素的视觉化转达。

1. 图标化

2. 标签化

Get完以上的本领，另有末了一件事变：假如是述职or口试作品集，排版的意义更在于信息表达的清楚度而非视觉上的雅观，无论你是UI照旧交互！牢记牢记！盼望各人不要把作品集做成菜单～

根本当你将以上以上的UI排版头脑应用到一样平常时、尤其作品集时，许多人就会开始分不清你是UI照旧交互了，这个时间你就可以说本身全能UX。

末了，看完了这个“出色”的故事，有人有爱好拿“晚饭”来做个训练吗？照旧说有人冷静打开了蓝色软件点了一份图上的拉面？

作者：柒爷，云音乐资深计划师；微信公众号： Nana的计划锦囊

本文由 @柒爷 原创发布于大家都是产物司理。未经允许，克制转载

题图来自Unsplash，基于CC0协议返回搜狐，检察更多

责任编辑：