10分钟提升策划基本功——构图

发表于2017-09-15
评论40 9.2k浏览

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

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

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

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

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

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

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

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

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

对齐

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

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

再举个反例:

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

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

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

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

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

留白

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

一些游戏的登入页面:

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

界面原型是不是很好做呀(手动滑稽)?

 

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

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

突出重点

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

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

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

引导视觉线

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

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

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

改进方法:

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

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

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

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

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

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

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

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

→传送门← 

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引