10分钟提升策划基本功——构图
大家在做策划工作的时候(特别是执行策划),很多时候需要“设计”图片。策划新手们可能会有疑问:“作图不是美术的事情吗,怎么还要策划来做呢?”
事实上,很多图片设计工作,是由策划来主导的,例如界面的设计、按钮的摆放,再比如老板让你做一个游戏介绍的PPT、部分产品介绍文案等等,还有更多的例如广告图片、宣传单、市场上架图片等,这些工作的前期设计,对游戏了解程度最高的策划,来进行此类设计是比较合适的。
这就涉及到一个概念,就是UE(用户体验设计),它和UI设计不一样。简单的来说,UE就是你用AXURE或者VISIO画的线框图,其实你每天都在做,不是吗?
UE设计最重要的就是“构图”,也就是你决定这个按钮摆哪里,这个文字多大,文字应该写什么……之类的事情,也是你让一个美术去“做”一张图,他必定会问你的问题。
我们发现,同样的几行文字、几张图片,不同的摆放位置,产生的效果是完全不一样。构图能力其实一门入门很简单,但可以挖掘很深的学问。实际上,很多设计者的构图能力,都还没入门呢,这包括不少刚毕业的美工。
那我们为什么要学习构图呢,因为现在做界面设计,很多人都只着眼于大红大紫的色彩、逼真精妙的效果、眼花缭乱的动效,但很少有人关注构图设计,也不是说都没有构图设计,经验丰富的UI设计师在创作时自然而然就内化考虑了进去。只是说,现在普遍的现象,包括很多刚从业的美术工作者。
美的东西,本来就能很自然吸引人驻足观看,你想要表达的内容也就传达了出去,也从另一个侧面表现作者很用心值得一看啊,此外,最重要的一点就是——“颜值即是正义”啊!
今天,就给大家介绍几个构图的入门原则,掌握这几个原则,就在构图上可以打败99%的人啦!当然,师父领进门修行在个人,知道这几个原则,到最后能够熟练应用,还是需要不断练习。
首先,我们介绍两个入门原则——对齐、留白。
对齐
人的大脑喜欢整齐有序的东西,大家可以看下图,为什么界面上的内容都一样,但右边的让人看的就很“爽”呢?原因就是对齐。
对齐一般有三种方法:左对齐、右对齐、居中对齐。到底哪种方法最好呢,教你一个小技巧,看界面的“虚线”在哪里。
再举个反例:
看到上图这歪歪扭扭的虚线了吧,居中对齐的问题在于,如果每行的文字数不一样,那它的“虚线”也会变得歪歪扭扭,让人看得相当变扭。这种情况应该使用左对齐。
另外,大家还知道WORD有个“两端对齐”,相信很多人都犯过这样的错误吧:
如上图,看不清文字没关系,重点是:插入了一张图片,后面的文字为了两端对齐,强行拉开了字间距,非常难看,解决起来也很简单,图片后面加个回车就好了。
其实大家都懂的对齐的道理,只是差了一点“主观能动性”。让界面上的元素对齐,应该就如同“肌肉记忆”一样,想也不用想就做到的。
要想做好对齐也很简单,“对自己负责”,无论平时是写策划案,还是设计界面,“多想一步”,看看自己放的按钮对齐边框了吗、同级别的按钮上下对齐了吗。就像练习投篮,多练练,自然就会熟练。
留白
留白的意义何在呢——“对比”,对比可以产生强烈的视觉效果,正所谓——“空白也是内容的一部分”。
一些游戏的登入页面:
上图,大家可能会说,这个界面没有白啊。其实,留白不仅仅是留“白”,和主UI无关的背景、纯色,都是“空白”,如果这个界面让UE设计师来做的话应该会是这样:
界面原型是不是很好做呀(手动滑稽)?
另外留白也主要用在大家写策划案的时候,“行间距”也是一种留白:
要在设计的时候注意留白,其实就是对抗自己内心“拼命想往界面里塞东西”的冲动(或者是老板的内心,嗯,你懂的)。内容再多,别人不看也是白搭,美观先吸引住眼球,然后再用其他技巧表述出你的信息。
突出重点
原因同上,一个设计师想表达的事情太多了,就会导致一张图内有多个重点。但实际上,重点太多就等于没有重点。要如何突出重点呢?利用对比。
对比的方法有很多,使用字体、大小、颜色、样式,最重要的就是——“对比要明显”。大家最常用的就是颜色对比,比如红对绿,黄对紫……大家看色环吧,用PS吸一下色,色环对面的就是对比色,两个一搭配,对比绝对明显。
最后我也要叨叨一句,对比用得要大胆,不要畏畏缩缩,事实上,很多一副界面让人看着困惑,恰恰是对比不明显造成的。
引导视觉线
最后一点就显得有点“玄”了,就是我们在设计图的时候,需要“引”一条观看者的“视觉线”,也就是打开界面后,先看哪里,再看哪里。
看上面这个名片设计(很多游戏为了方便社交而特别定制的名片)的时候,观看者会觉得哪里都很重要,但不知道从哪里看起,经过一顿大脑的混乱激荡后,他们有可能选择放弃继续看,也有可能按照传统的阅读方法:从中间到两边,从左到右、从上到下去看。
但不管怎么样,上面这幅图片带来的体验都不是太好,最好的办法就是,我们自己来“设计”他们的眼睛去“看”哪里:
改进方法:
1、 把名字加大,放在左上角,单独置放在一个模块里(用横线分隔)。
2、 一般竞技类游戏,胜率是一个比较能体现玩家整体水平的一个指标。
所以,胜率的字体加大,放在右下角。由于一般人们从左到右的阅读习惯,他们首先会看到名字,然后看到胜率。
3、 将不是这么重要的等级、稍长英雄等内容,将其缩小(其实可以更小),放置在名字下方。
4、 将熊掌形的徽标,淡化后,置入背景。
5、 左下角和右上角加个小标记,让整个内容和边界有了一层空隙,使得整张名片更有立体感。
将原型进行这些改进后,再让美术大大在这个排版基础上做一下美化,相信你设计的界面一定会很出彩的。
本文成文时间较早,后面我又写了一份相关内容的教程,理论更为系统。可谓是本文的“威力加强版”,点击下方传送门进入: