比五彩斑斓黑更难的,是客户让你简约藏着细节

看过或听过一大堆理论知识的你,有没有被很多自相矛盾的设计原则搞混过?比如你把做好的设计发给总监看,然后他告诉你太乱了,要统一,于是你苦苦调整了一番。当再发给他看时,他却说太平淡了,要有对比。你心想,一会要统一,一会要对比,这不是自相矛盾吗?#24247;比?#19981;是,其?#30340;闋约?#24515;里明白,只是你不知道如何平衡这两者的关系。

类似这种「矛盾」的设计原则还有好几对,接下来葱爷要把它们一一理清,让这些理论知识能真正指导设计实践。

对齐与变化

对齐是版式设计最基础的原则之一,具体指版面中的字与字、字与图、图与图要对齐,常用的对齐方式有左对齐、右对齐、上对齐、下对齐、居中对齐、两端对齐等。对齐的目的是为了使版面更整洁,更便于阅读,比如下面这些作品都用到了大量的对齐关系。

我们来举个实例,假设你现在要设计一则?#21482;鷅anner图,目的是宣传某款?#21482;?#30340;拍照功能,文案如下:

这种图不难做,你打算直接用一部?#21482;?#21644;几张摄影作品作为画面的主视觉,于是去?#35745;?#32593;站找了几张能体?#25351;檬只?#25293;照功能好的?#35745;?/p>

?#35745;?#25214;好后,你把其中一张?#35745;?#22635;充到?#21482;?#37324;作为屏幕背景,其余?#35745;?#20998;散在?#21482;?#21608;围,然后你把整个视觉主体放在了版面中央,文字则按主次排在了两侧,大致效果如下:

你盯着画面,正琢磨着还要加点什么的时候,总监不知何时出现在了你身后,他面无表情地盯着你的电脑,嘴里慢吞吞地吐出几个?#37073;骸?#22826;乱了,好LOW」,之后就消失了。你很聪明,立刻明白了总监是想要?#32422;?#25490;得更整洁、更有序一点。

在目前的版面中虽然个别元素之间有对齐关系,但是缺乏整体的对齐,且?#35745;?#37319;用了自由式排版,所以会显?#27809;?#20081;。于是你尝试把?#35745;?#23545;齐排列,文字则以?#35745;?#20026;基准进行对齐。

△ 左边的文字部分与右边的?#35745;?#37096;?#30452;?#25345;上下对齐,标题与内文为左右两端对齐,icon 与文字则是左对齐。

上图很「完美」地?#33905;?#20102;对齐原则,整个版面干净、整洁了许多,视觉流程也更简单了。这下总可以了吧,然而事情并没你想的简单。因为总监不知何时又出现在了你的身后,他瘪着嘴一脸嫌弃地说道:「太呆板了,有点变化好不好?」

变化?难道又要调回改之前那种状态啊?#24247;比?#19981;是,你其实是要在现有的基础上做一些变化。排版的难点和精妙之处就在这里,既要对齐,又不能机械地对齐;既要整洁有序也要灵活有变化。如何做到这一点呢?我的理解是:要在对齐中制造一点变化,在变化中找到对齐关系。比如下面这些作品:

现在你知道了,上面的方案之所以死板主要是因为文字部分与?#35745;?#37096;分对得太整齐,所以需要改变其中一个版块。该版面的视觉主体是?#35745;?#25152;以调整?#35745;?#26356;合适。由于文字是呈水平排列的,那么?#35745;?#37096;分是不是可以倾斜摆放形成一定的反差呢?这样既可以制造变化还能加强版面的空间感。

△ 除了把?#35745;?#20542;斜之外,LOGO也与内文错开移到了左上角,最下边的直线?#37096;?#20197;?#30001;斓?#20102;版面之外。

我们现在再回过头来看看这件作品是否符合前面我说的,「要在对齐中制造一点变化,在变化中找到对齐关系」这一要素。

从上图中可以看出,?#35745;?#34429;然做了倾?#20445;?#21364;是在对齐的基础上做的变形扭曲。版面中的元素虽然不是都对齐了某条直线,但是没有哪一个元素是孤立的,每一个元素都与版面中的其他元素有对齐关系。更重要的是,左边文字版块的视觉重心与右边?#35745;?#29256;块的视觉重心?#24425;?#21576;水平对齐的,所以整个画面才得以平衡。

统一与对比

虽然设计的构成要素只有文字、?#35745;?#33394;彩,但是每一个要素都有无数种表?#20013;?#24335;,不同的字体、字号、色值、质感、风格、?#35745;?#26041;向等等。如果在一个版面内含有太多不同的东西,会显得很杂乱,从而让人心生厌?#24120;?#25152;以,需要通过某种方式把这些「不同」统一起来,以达到舒适、协调的效果。

以一则运动品牌的轮播图设计为例,文案如下:

这类设计以运动员作为主体最容易出效果,所以我们需要找一个正在奔跑的人物?#35745;?/p>

△ 这个人的姿势不错,就他了。

运动品牌最重要的是要设计出动感和时尚感,所以我把背景?#25351;?#25104;一红一蓝两个倾斜的色块,然后把人物放在画面中央,文字分布在左右两边,以制造出强烈的视觉冲击。

由于有一个动感十足的模特和背景,所以整体看来还是比较符?#26174;?#21160;海报的调性,但视觉上有点乱,因为有很多细节没有统一,比如人物倾斜的角度和背景色块、标题倾斜的角度不一样,主要文字的字体风格不一样(NIKE和JUST DO IT的字体比?#23244;?#26391;,而蓄势待发的字体相对较柔),元素的风格也不统一(圆角的了解更多按钮与整体风格不搭),还有各元素?#38590;?#33394;也缺少联系等等。

那该怎么办呢?这里就需要用到统一的原则了,我们可以试着把上面提到的不统一的地方都统一起来,如下图:

△ 调整后的方案二,字体都是简洁有力的黑体?#37073;?#32780;且把左右两边的字体进行了水平对齐、背景色改为单一的渐变色、人物和文字的倾斜角度也统一了,「了解更多」的按钮也?#26576;?#20102;平行四边形色块、颜色更是被缩减到了三种。

调整之后确实不乱了,但是也有了新的问题,因为各元素太过统一使得画面缺乏层次和对比,该突出的信息也没有得到突出。这时候就需要用?#25509;?#32479;一对立的另一个原则——对比。

对比,是把具有明显差异、矛盾和对立的双方安排在一起,进行对照比较的表现手法,目的是为了使设计更有层次、增加视觉冲击力。设计中常见的对比有大小对比、字体对比、色彩对比、空间对比、方向对比、长短对比、粗细对比、曲直对比、轮廓对比、虚实对比等等。

想要处理好统一与对比的关系,需要记住两个要领:

顺着这样的思路,我们来给上图增加一些对比关系,例如方案二的标题倾斜角度太大,不美观,所以我干脆把它的倾斜方向改为垂直倾?#20445;缺?#30041;了动感也增强了对比,更?#29992;?#35266;。在文字的字号上,我选择突出品牌名缩小广告语,加强了大小对比,并?#19968;够指?#20102;之前把背景一分为二的做法,只是增加了一点空间感,并把人物服装?#38590;?#33394;与背景色做了统一。调整后的效果如下:

我们可以观察一下,方案三确实比方案一更协调,比方案二更有层次和视觉冲击力,且整体调性依然年轻、时尚、有动感,这里就是运用了统一与对比的原则。

简单与丰富

简单应该是大家听得最多的设计原则,简约、极简风格的设计也非常受欢迎,但是我们也很困扰,因为?#32422;?#20570;的所谓极简设计经常会被人说太单调、不够丰富;而那些自我感觉很丰富的设计又会被说成是杂乱。为什么会这样呢?我们先来正确地认识一下简单与丰富。

简单并不是指做设计要用最少的元素、不做任何修饰,而是指设计主旨要简单,视觉流程要清晰,视觉要聚焦,主?#25105;?#20998;明。

△ 上图的设计虽然元素和色彩都很多,但整体给人的感觉?#19981;?#26159;简单的。

而丰富也不是指画面中一定要有很多元素或叠加一堆的效果,而是指有细节、有层次、有品质感。

△ 上图的设计虽然整体看来很简单,但是并不会显得单调。

为了方便理解,我们还是来举个例子:一款农产品册子的封面设计。该封面的必要元素很简单,只有一个 Logo 和一句文案,因此,我们很容易想到做个极简风格的设计。白色背景加一个 Logo 和一行文?#37073;?#20877;配一款特种纸,做点工艺,就可以显得很高大上,很多大品牌?#24425;?#36825;么做的。

这?#24425;?#19968;?#21482;?#36807;得去的解决方案,但表现手法确实太过简单,既体现不出设计师的设计功底,也没有体现出农业品牌的调性和特色,且缺乏吸引力,所以我们需要做加法,让其变得更加丰富。

怎么丰富呢?最直接的办法就是引入?#35745;?#21644;色块,由于品类为农产品,且文案重在强调健康和安全,所以我们可以找一张绿色、生态的?#35745;?/p>

为了与?#33080;?#30340;版面保持统一,我把?#35745;?#20063;裁剪成了竖版的矩形,并与一个同样大小的绿色色块结合在一起,组成版面的主视觉,logo放在?#35745;?#24038;侧,如下图:

这么做还是有些设计感的,也增加了品类属性,不过缺少细节、不耐看,所以还需要加点东西。?#27604;唬?#26032;增加的元素只能作为辅助,不能太过抢眼,?#35745;?#26041;面我很快想到了叶脉,叶脉与?#35745;?#20013;的叶子元素也能产生关联,且适合做底纹,于是我又找来了一张叶脉的?#35745;?/p>

把叶脉?#35745;?#25918;在图层最底部作为背景处理,这里会遇到三种情况,一是如果把叶脉纹完全平铺的话,整个版面就没有留白了,所以会显得压?#37073;?#20108;是把整片叶子都显示出来,但这么处理会显得很小气。所以我只用叶脉纹覆盖了一半左右的版面,与?#35745;?#37096;?#20013;?#25104;呼应,这样的效果看起来是比较舒服的。

?#35745;?#37096;分得到了改善,但现在画面中还缺少一点小的装饰元素,增加一点文案是个不错的思路,所以我把文案和品牌名的英文加了进来。

做完加法后整个画面变得丰富了不少,层?#25105;?#25289;开了,而且给人的感觉依然比较简单,既不杂乱也不压?#37073;?#22240;为各元素主次分明,既有联系又没形成干扰。不过做加法的时候也要把握度,例如下图就有点堆砌过度了,看起来很繁杂、不精致。

想要处理好简单与丰富的关系,需要注意两点:

规范与打破

规范与打破是存在于版式设计中的一对矛盾原则,规范是指把版面中的元素要按某种规律,或是在特定的范围内设计布?#37073;?#30446;的是为了让画面更有条理和秩序,也更像一个整体。

△ 上图的主要元素都规?#23545;?#19968;个矩形中,然后各个小矩形又组合成一个大矩形,看起来很整体,很有设计感。

与规范对立的是打破,指打破规范、打破束缚、打破平静,目的是为了使画面看起来更灵活、更有动感、更具视觉冲击。

△ 用色块或?#35745;?#26469;创造束缚感,然后把部分元素冲出色块,是规范与打破的一个经典组合形式。

可以说经过了?#32454;?#35268;范而变得很好看的优秀设计很多,而有些设计却选择了打破规范,也得到了很惊艳的效果。那什么时候该?#32454;?#36981;守规范?什么时候应该打破规范呢?其实在一件完整的设计中最好两者都要有,而平衡这两者的要领就是?#21512;?#35268;范后打破,即在规范好的基础上选择一些局部来打破。

葱爷还是以一个画册的封面设计来作为讲解案例。这是一本中国移动?#21697;?#21153;平台方案介绍的册子,文案如下:

很明显该封面的视觉调?#26434;?#35813;要有科?#20960;校?#35201;能体?#21482;?#32852;网、信息、大数据这些关键词,所以我找了一张看起来很有科?#20960;?#30340;?#35745;?/p>

这类画册的版式通常应该偏向简洁、规矩,所以我决定用网格系统来辅助排版。以?#35745;?#20316;为封面的主视觉,除了Logo,所有元素都排列在矩形?#35745;?#20869;,并且所有文字都按照网格的设定保持左对齐,所有元素的高度、宽度,?#32422;案?#20803;素之间的间距,都?#32454;?#25353;照网格来排版。

△ 经过规范的版面整体看起来十分严谨。

不过这么做也造成了版面缺少变化、太过规矩等问题,所以我们可以尝试在此基础上做一些「打破」。

比如原本的 LOGO 与?#35745;?#38752;得太近,显得很压?#37073;?#36825;里就不必完全按照网格来排版,我们可以根据?#32422;?#30340;感觉将 LOGO 与?#35745;?#20998;得更开一些;中文标题、短线、英文标题这三者也太?#23548;?#20102;,可以?#37096;?#19968;点;文字部分不一定全部都在?#35745;?#33539;围内,所以我给英文标题加了一个蓝色块,并把色块移出了?#35745;?#21306;域;?#32422;?#25226;最下面的公司名称排在了?#35745;?#19979;方等。调整后的效果如下:

△ 调整后的方案,构图也相应发生了变化,之前为上下构图,现在变成了对角构图。

在规范的基础上做了打破之后,我们可以看到,版面的整洁性依然在,整体的调性也依然简洁、严肃,但相比调整之前显得更灵活、更有设计感。

结语

设计不是简单的加减法,也不是只要做到对齐、统一这些很简单,方向很明确的原则就可以了,因为根本不存在什么原则可以让我们直接通向设计的终点,但是我们的目标是明确的,就是要做有效的设计,所有的设计原则、设计手段都要为这个目标服务。

0371-65861326
138 3818 8615
[email protected]
郑州市中州大道晨旭路
瑞银大厦23楼

Copyright ? 2004-2018
豫ICP备18007656号-1
十一选五开奖结果江苏
只会开车如何赚钱 捕鸟达人小游戏 亿客隆彩票首页 吉林快3 重制版剑网三赚钱 内蒙古11选5 老快3开奖结果走图 qq广东麻将外挂 官方幸运飞艇开奖视频 捕鱼王二代下载 双色球复式计算公式 吉林快3 经典老虎机手机游戏 天天捕鱼电玩城325 快乐10分微信群 体育比分网