大家在做策划工作的时候（特别是执行策划），很多时候需要“设计”图片。策划新手们可能会有疑问：“作图不是美术的事情吗，怎么还要策划来做呢？”

事实上，很多图片设计工作，是由策划来主导的，例如界面的设计、按钮的摆放，再比如老板让你做一个游戏介绍的PPT、部分产品介绍文案等等，还有更多的例如广告图片、宣传单、市场上架图片等，这些工作的前期设计，对游戏了解程度最高的策划，来进行此类设计是比较合适的。

这就涉及到一个概念，就是UE（用户体验设计），它和UI设计不一样。简单的来说，UE就是你用AXURE或者VISIO画的线框图，其实你每天都在做，不是吗？

UE设计最重要的就是“构图”，也就是你决定这个按钮摆哪里，这个文字多大，文字应该写什么……之类的事情，也是你让一个美术去“做”一张图，他必定会问你的问题。

我们发现，同样的几行文字、几张图片，不同的摆放位置，产生的效果是完全不一样。构图能力其实一门入门很简单，但可以挖掘很深的学问。实际上，很多设计者的构图能力，都还没入门呢，这包括不少刚毕业的美工。

那我们为什么要学习构图呢，因为现在做界面设计，很多人都只着眼于大红大紫的色彩、逼真精妙的效果、眼花缭乱的动效，但很少有人关注构图设计，也不是说都没有构图设计，经验丰富的UI设计师在创作时自然而然就内化考虑了进去。只是说，现在普遍的现象，包括很多刚从业的美术工作者。

美的东西，本来就能很自然吸引人驻足观看，你想要表达的内容也就传达了出去，也从另一个侧面表现作者很用心值得一看啊，此外，最重要的一点就是——“颜值即是正义”啊！

今天，就给大家介绍几个构图的入门原则，掌握这几个原则，就在构图上可以打败99%的人啦！当然，师父领进门修行在个人，知道这几个原则，到最后能够熟练应用，还是需要不断练习。

       首先，我们介绍两个入门原则——对齐、留白。

对齐

人的大脑喜欢整齐有序的东西，大家可以看下图，为什么界面上的内容都一样，但右边的让人看的就很“爽”呢？原因就是对齐。

对齐一般有三种方法：左对齐、右对齐、居中对齐。到底哪种方法最好呢，教你一个小技巧，看界面的“虚线”在哪里。

再举个反例：

看到上图这歪歪扭扭的虚线了吧，居中对齐的问题在于，如果每行的文字数不一样，那它的“虚线”也会变得歪歪扭扭，让人看得相当变扭。这种情况应该使用左对齐。

另外，大家还知道WORD有个“两端对齐”，相信很多人都犯过这样的错误吧：

如上图，看不清文字没关系，重点是：插入了一张图片，后面的文字为了两端对齐，强行拉开了字间距，非常难看，解决起来也很简单，图片后面加个回车就好了。

其实大家都懂的对齐的道理，只是差了一点“主观能动性”。让界面上的元素对齐，应该就如同“肌肉记忆”一样，想也不用想就做到的。

要想做好对齐也很简单，“对自己负责”，无论平时是写策划案，还是设计界面，“多想一步”，看看自己放的按钮对齐边框了吗、同级别的按钮上下对齐了吗。就像练习投篮，多练练，自然就会熟练。

留白

留白的意义何在呢——“对比”，对比可以产生强烈的视觉效果，正所谓——“空白也是内容的一部分”。

一些游戏的登入页面：

上图，大家可能会说，这个界面没有白啊。其实，留白不仅仅是留“白”，和主UI无关的背景、纯色，都是“空白”，如果这个界面让UE设计师来做的话应该会是这样：

界面原型是不是很好做呀（手动滑稽）？

另外留白也主要用在大家写策划案的时候，“行间距”也是一种留白：

要在设计的时候注意留白，其实就是对抗自己内心“拼命想往界面里塞东西”的冲动（或者是老板的内心，嗯，你懂的）。内容再多，别人不看也是白搭，美观先吸引住眼球，然后再用其他技巧表述出你的信息。

突出重点

       原因同上，一个设计师想表达的事情太多了，就会导致一张图内有多个重点。但实际上，重点太多就等于没有重点。要如何突出重点呢？利用对比。

       对比的方法有很多，使用字体、大小、颜色、样式，最重要的就是——“对比要明显”。大家最常用的就是颜色对比，比如红对绿，黄对紫……大家看色环吧，用PS吸一下色，色环对面的就是对比色，两个一搭配，对比绝对明显。

最后我也要叨叨一句，对比用得要大胆，不要畏畏缩缩，事实上，很多一副界面让人看着困惑，恰恰是对比不明显造成的。

引导视觉线

最后一点就显得有点“玄”了，就是我们在设计图的时候，需要“引”一条观看者的“视觉线”，也就是打开界面后，先看哪里，再看哪里。

看上面这个名片设计（很多游戏为了方便社交而特别定制的名片）的时候，观看者会觉得哪里都很重要，但不知道从哪里看起，经过一顿大脑的混乱激荡后，他们有可能选择放弃继续看，也有可能按照传统的阅读方法：从中间到两边，从左到右、从上到下去看。

但不管怎么样，上面这幅图片带来的体验都不是太好，最好的办法就是，我们自己来“设计”他们的眼睛去“看”哪里：

改进方法：

1、 把名字加大，放在左上角，单独置放在一个模块里（用横线分隔）。

2、 一般竞技类游戏，胜率是一个比较能体现玩家整体水平的一个指标。

所以，胜率的字体加大，放在右下角。由于一般人们从左到右的阅读习惯，他们首先会看到名字，然后看到胜率。

3、 将不是这么重要的等级、稍长英雄等内容，将其缩小（其实可以更小），放置在名字下方。

4、 将熊掌形的徽标，淡化后，置入背景。

5、 左下角和右上角加个小标记，让整个内容和边界有了一层空隙，使得整张名片更有立体感。

将原型进行这些改进后，再让美术大大在这个排版基础上做一下美化，相信你设计的界面一定会很出彩的。

本文成文时间较早，后面我又写了一份相关内容的教程，理论更为系统。可谓是本文的“威力加强版”，点击下方传送门进入：

→传送门←