之前发表了一篇教策划学习构图的文章，其实讲的就是UE，本文就是那篇文章的“威力加强版”。关于UE，我脑子中只是一堆混乱的概念和经验，直到我拜读了一本书，对我帮助很大。将脑子中的知识慢慢梳理系统化了。这本书的名字我先卖个关子放在最后。

书中提炼了四个设计原则，我将其精华部分，结合自己的理解，配上实际的案例，提炼成很干很干的干货，分享给大家。

我们开始吧：

这四个原则分别是：亲密性（Proximity）、重复（Repetition）、对齐（Alignment）、对比（Contrast）。

1、 亲密性

相关的就接近，无关的就走远！

• 什么是亲密性

简单的说，亲密性原则，就是界面上存在的元素，如果是相互关联的，在物理位置上要尽量接近。反之，不存在关联或者弱关联的，物理位置上要尽量远离。利用这一正一反，可以形成强烈的对比（也是四原则之一）。

看个例子：

看上面这个人物属性界面，就利用了亲密性的原则：名字、称谓、帮派……归为一类，气血、法力、攻击……归为一类，根骨、灵性……是一家。我们很容易就能看出这一点，就是因为同类的属性框间距更小、更靠近，这很容易理解，但为什么我们会这么认为呢？

因为利用亲密性，我们把界面上的元素进行了组合，成为了一个个独立的“视觉单元”：

对于RPG游戏、策略游戏，最常见的就是密密麻麻的属性、列表，如果没有将其界面元素有效组织，让人看花眼只是小事，不具可读性的界面，玩家根本就没有耐心细致品味游戏优秀的数值设计，努力成了白用功。要实现良好的“可读性”，就需要利用亲密性原则，将界面分成一个个“视觉单元”。 

利用良好的排版和颜色标记，纵使如此密密麻麻的数据项，也具有极高的可读性：

魔兽玩家广为流传的盗贼DPS计算器

• 为什么要使用亲密性

相信大家都听过“7±2”原则：由于人的大脑处理信息的能力有限，很难一次性记住7个以上信息，所以需要将信息进行整理分组，比如11位手机号码138********，将其拆分成138-****-****就比较容易记忆。

例如记忆圆周率，就是使用拆分组合的方式，将无意义的数字组合、串联，变成有意义的信息，人类才可以突破极限，背诵出惊人长度的数字。

同理，如果界面元素过多，人的大脑就会产生不适感，“我不喜欢看这个”，实际上是大脑自己能力不足而引起的……

• 如何使用亲密性

利用亲密性，可以组合界面中的元素，形成一个个“视觉单元”，将信息的“数量”降下来，同时信息的丰富程度提高，减少混乱，让结构变得清晰。

所以，将相关联的界面元素靠得更近，组建一个个视觉单元，让界面变得整齐有条理。

将界面元素进行整合，即使元素很多也不会觉得凌乱

另外，不是说所有界面元素都要进行整合，比如上面例子中的头像，它们成为“孤立元素”，也可以作为一个独立的存在。但是要注意，一个界面上的“孤立元素”和“视觉单元”也不能太多，不然就又违反“7±2”原则，成了另外一种混乱的源头了。

除了物理位置的接近以外，也可以用一些辅助手段来凸显亲密性，例如边框、分隔线，使用的时候要注意，这类元素只是起到辅助显示作用，灰度要低，比如：

这样子设计，美术就很明显得知道哪些线条是按钮的边线，哪些线条只是起分隔作用，她们在制作UI时不一定也照着你的样子画一条线，但通过这条线知晓了该部分界面的层次感，她们可以使用内阴影、凹凸效果、投影或是其他方式来实现你的需求。

2、 对齐

“不要随意安放界面中的元素！”

所谓对齐原则，就是教你如何安排好界面上各个元素的放置，让元素之间有着清晰的视觉联系，让整个界面看起来精巧、清爽。

• 对齐的分类

一般来说，对齐有三种：左对齐、居中对齐、右对齐。

还有一种两端对齐（之前文章也介绍过），会让字间距大小不一，产生很难看的效果，所以我们暂且不用。

设计新手都喜欢使用居中对齐，但随着设计经验的丰富，可能居中对齐是你最不常用的一种对齐方式，因为居中对齐很难“驾驭”，容易产生相当不规整的视觉引导线：

居中对齐，一般显得比较庄重和正式，例如邀请函，或是游戏中独立存在且想“刻意”让其显得重要的部分，例如大家都喜欢的抽卡：

比如，这张邀请函，就是采用居中对齐的设计，居中对齐和竖版设计是一种常见的搭配方式。

• 如何使用对齐

正如上文所说的“不要随意安放界面中的元素”，简单的理解就是：让界面中的每一个元素都有“左对齐、居中对齐、右对齐”三种对齐方式中的任意一种，这不是必须遵守的教条，但对新手很有用。

书中也有提过“每次只是用一种对齐方式”，其原理在于，尽量减少“主要”的视觉引导线的数量，当存在多条视觉引导线时，玩家的眼光会变得无所适从，不知道从哪里开始看起、到哪里结束。

界面元素越多就越需要对齐

上面提到的这个例子：

上图，Monster Attack是左对齐，如果把下面的说明文字改成居中对齐，会感觉怎么样？如果说明文字过长变成两行，那就是个灾难了……

标题下方的文本采用居中对齐就显得特别难看

“只使用一种对齐”应该是有范围限制的，比如同类型的元素，或是同一个视觉单元内部，并不是说一个界面内所有元素都要使用一种对齐方式。

• 灵活使用

使用对齐还有一个小技巧，一般来说文本内容使用一种对齐方式，但容纳其文本的文本块可以采用另外一种对齐方式。因为文本被文本块包裹，文本块成为了一个新的元素单元，可以不拘泥于原有的对齐方式：

把排版和文案做好，让美术同事美化一下，可快速出图

另外，对齐还有一种高级玩法，那就是打破对齐，可以产生强烈的视觉冲击，当然了，这个得看UI设计师的了。这种“打破”的行为，必须是主观能动的有意为之，规则立之不易，破之更难。

对齐应该是任何界面的基本要求，如果某个界面连基本的对齐都做不到，那只能说是制作者的态度问题。它是一个“入门容易、精通困难”的技巧，只要稍微留心一点就能做好对齐，但要通过对齐（或是打破对齐）达到更好的界面效果，就需要深厚的经验积累和独到的设计水平了，大家一起努力吧。

3、 重复

重复就是模板，将你的设计模块化。

• 重复是什么

首先我们得知道一个界面元素，哪些特性可以制造重复，例如：颜色、形状、材质、线条、大小、字体、图形……

所谓重复，就是以上某个同种特性多次出现，造成一种“同类”的感觉，如同上文介绍到的“亲密性”一样，起到将界面元素分组的效果。

任务或成就面板，就使用了重复的技巧：相同大小的图标、同种对齐方式，相同的字体、标记、按钮形式……大家一眼就能看出——它们是同一类的。

上面这张网页，就是极佳地使用了重复技巧：绿色的标题、字体，正文颜色字体，统一的对齐方式……虽然网页上的元素和文本内容极其庞大，但整个页面看起来极有条理性和统一性。

• 重复让界面变得更好

重复和亲密性起到了同样的作用，就是整合同一个类型的视觉单元，将其“捆绑”在一起。区别只是，利用重复，即使两个元素相距十万八千里，你也能知道它们是“一家人”。

人们口中经常说着所谓的“风格统一”，就是重复。

星际的UI是“风格统一”的典范

和亲密性的道理类似，虽然可以利用的重复特性很多，但每个特性不要使用次数过多。例如某个绿色标题的条目，一排排下来要十几个之多，那么大脑又要开始抱怨了：“怎么东西这么多……”。

傲娇的大脑

合理的做法就是将这些条目再进行分组，就像我这个任务面板一样，将“已完成”和“未完成”的任务用分割线隔开，或者使用标签形式，将其分在两个页面内：

任务系统非常丰富的页游、端游，采用的是标签 隐藏式树形标签，来对庞大数量的任务进行分组：

总之，重复也是对界面的一种整理方式，让界面元素增加重复特性，可以使其从众多元素中抽出。而且，使用好重复，也可以起到引导用户阅读顺序的作用，比如我们看一篇文章，一开始都会浏览大标题，然后再深入看内容的吧，这种“分层”的方式也是一种引导用户阅读大篇幅文字的方法。

4、 对比

同类的界面元素需要采用重复，不同类的界面元素就要采用对比。所谓对比，就是利用界面单位里某个特性的两个极端，比如边框得粗和细、冷色和暖色、材质的平滑与粗糙、水平或垂直、宽松和紧凑……

要运用好对比，必须避免元素太过于相似，既然要对比，就要对比强烈、截然不同。

强烈的对比才能突出你需要的重点

对比不强烈，就会造成冲突，冲突恰恰是“太过相似”而造成的。很多设计者甚至是专职美术，都喜欢用一种“接近的颜色”，殊不知，正是这种接近造成了冲突，看的人不会觉得你在突出它，反而会有“他们本来就是一样的，你哪里搞错了”的感觉。

不够强烈的对比只能造成冲突

利用好对比，可以有效增强页面效果——“对比吸引人眼球”，使用对比尤其“不要畏首畏尾”。

• 不用颜色也可以“对比”

很多UE设计被要求“不需要”颜色，因为可能会干扰到UI的配色设计。即使如此，我们也可以不用颜色就可以表现“色彩”，那就是灰度的调整：

在上文“亲密性”中提到的那样，利用灰度，即使不用颜色，也可以营造出一种层次感。

相信大家都玩过或听过GB，为什么同样是黑白，GB的画面就比我们小时候玩的电子表或俄罗斯方块更有表现力呢，除了像素区别外，另一个原因就是GB的画面是有16阶灰度。

这个小玩意是很多人的回忆吧

手机游戏《像素鸽》：即使是黑白的也有很好的画面效果

另外介绍一个小技巧：在使用Axure制作原型时，如果你们团队中的美术对原型图中的颜色有着极端的“厌恶感”，建议打开灰度模式，可将本页面所有的彩色转化成灰度：

如同我在本章节开头提到的，要形成对比，也有很多其他的方式。而且既然要对比，就要对比得彻底，胆子要大（这也是书中多次强调的），建议大家也可以用这个标准去要求一下美术大大，只要言之有理，他们是会接受的。

最后

介绍完了四个原则，大家会发现，其实这四个原则并不是相互独立的：亲密性和重复，其实就是增加界面元素的相互的对比；对齐元素，为的是更好地执行亲密性；同样元素使用同种对齐方式，就是利用重复原则……

任何知识都是工具，不让它成为束缚你的镣铐。

所以这四个原则，不是像教科书里的公理一样需要去一条一条地去执行，反而需要融会贯通环环相扣。你的某个按钮设计、某个排版方式，可能满足多个设计原则，当你看到一个好的设计时，它可能不仅仅只是使用了一种设计原则，可以是使用了多个原则，或是某个原则被多次使用……

那么总结这个四原则的意义何在呢。当我们看到一个好的设计，只是觉得美，嘴里说好，但总结不出为什么好哪里好。这四个原则就可以像地图一样，指引我们往“好”的方向走。

纵使没有明确的路，那也要走正确的方向

这本书就是Robin Williams的《写给大家看的设计书》，强烈推荐大家去看。这边书介绍的案例极其丰富，我只是将其结合了自己策划工作中的一些问题。其他方面的设计，比如书籍、海报等，本书的知识都很有用。

UE设计也有很多其他的好书，比如《简约至上》、《用户体验要素》等等。书很多，大家的时间精力有限，有选择地阅读，“书是工具”，最重要的还是要应用到实践上来。

策划需不需要学习UE知识？

大家只要随便翻看一本《XX产品经理入门》、《XX交互设计入门》，你会发现，同一个团队的不同岗位，所被要求的岗位工作很多都是交叉的。比如，做UE，有的说是产品经理做的，有的说是交互设计师做的。这说明，同在一个团队，大家都倾向于“做多”，而不是“做少”，每个人的工作职责，除了核心工作，不是这么的泾渭分明，“哪里有空缺，哪里就需要人补上”。

原型设计

如果您从事的是应用开发而不是做游戏，UE就是一个比较重要的岗位。游戏策划需不需要做UE，这是由本团队成员实际能力情况决定的，至少目前绝大部分的游戏开发团队，是没有专门设UE岗的，就算有也不表示你一丁点UE知识都不需要懂。

游戏也是软件，也有界面交互，也强调“用户体验”，至少本人从新入职到现在，一直都没有停止过原型设计的工作。

而且，做UE真的很好玩。

我也承认自己不是这么一个纯粹的策划，平时不只是写文档、做图表、和各位程序美术大大撕逼。也偶尔沉迷于用Axure做各种效果、学习一下UI制作。和各位美术大大们的交流一直都很好，至少我知道描边、投影、渐变、内发光、色相、钢笔……而不是“给我一个五彩斑斓的黑色”的那种货。

总之，学多不如学少，如果您觉得学UE对自己策划职业生涯没有用，您可以出门左转去学学数值、学学系统，或者学学写剧情，总有你需要学习的。

“斜杠青年”

文章终于写完了，在写之前“雄心壮志”，想打造一篇条理清晰、论点突出的优质教程，结果写得仓促，写完一看好像还是有点乱……大家如果还有什么疑问，欢迎留言，或者有什么Axure的问题也可以问我。另外大家如果看得起我，有自己做的不是很满意的原型图，也可以发给我，我尽我一点微薄之力帮各位兄弟看看，有空帮忙修改不收钱哈哈哈……

额外彩蛋

设计符合现代人的阅读方式的页面

屏读是KK（凯文凯利）在《必然》中提到的一个词。如今我们面对的屏幕信息如此丰富，越来越多的内容需要我们去看，但是我们阅读屏幕的速度却越来越快，想象一下，大部分人都是点进入瞄一眼，眼球快速移动寻找他所感兴趣的东西，如果没有发现，他们就会关闭这个页面。

对于一块无任何排版的“豆腐干”一样的文字内容，很难想象真的有人会傻不拉几地逐字逐句地一行一行地去阅读。同样道理，没有经过设计的一个页面，按钮、文字、图片，所有元素挤在一起，没有多少人有耐心去“研究”其功能，要么就“啪啪”关闭页面，或者直接卸载应用了。

针对这种情况，我们就需要建立一个“视觉分级表”，也就是我在上文所说的“视觉引导线”。方法就是：把界面元素划分成定义明确的几个区域，把最重要的元素通过对比突出，将用户的视线留下来，然后通过对齐、分类等辅助用户继续查看详细内容。建立列表式清单，利用重复性，用户能合理规划其阅读时间，让其“心里有数”。

了解了现代人的阅读方式，我们才能有目的地操作，就能理解为什么我们需要使用“亲密性”、“对齐”、“重复”、“对比”来规划页面的设计了。