• 比五彩斑斓黑更难的,是客户让你简约藏着细节 - 优设网 - UISDC

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

    2019/03/20 30484评论 17

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

    类似这种「矛盾」的设计原则还有好几对,接下来葱爷要把它们一一理清,让这些理论知识能真正指导设计?#23548;?/p>

    对齐与变化

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

    我们来举个实例,假设你现在要设计一则手机banner图,目的是宣传某款手机的拍照功能,文案如下:

    这种图不难做,你打算直接用一部手机?#22270;?#24352;摄影作品作为画面的主视觉,于是去?#35745;?#32593;站找了几张能体现该手机拍照功能好的?#35745;?/p>

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

    你盯着画面,正?#32842;?#30528;还要加点什么的时候,总监不知何?#32972;?#29616;在了你身后,他面无表情地盯着你的电脑,嘴里慢吞吞地吐出几个字:「太乱了,好LOW」,之后就消失了。你很聪明,立?#22530;?#30333;了总监是想要?#32422;?#25490;得更整洁、更有序一点。

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

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

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

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

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

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

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

    ?#30001;?#22270;中可以看出,?#35745;?#34429;然做了倾?#20445;?#21364;是在对齐的基础上做的变?#38395;?#26354;。版面中的元素虽然不是都对齐了?#31243;?#30452;线,但是没有哪一个元素是孤立的,每一个元素都与版面中的其他元素有对齐关系。更重要的是,左边文?#32844;?#22359;的视觉重心与右边?#35745;?#29256;块的视觉重心也是呈水平对齐的,所以整个画面才得以平衡。

    统一与对比

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

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

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

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

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

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

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

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

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

    对比,是把具有明显差异、矛盾和对立的双方?#25165;?#22312;一起,进行对照比较的表现?#22336;ǎ?#30446;的是为了使设计更有层次、增加视觉冲击力。设计中常见的对比有大小对比、字体对比、色彩对比、空间对比、方向对比、长短对比、粗细对比、曲直对比、轮廓对比、虚实对比等?#21462;?/p>

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

    • 各元素的调性要统一、元素的呈?#22336;?#24335;要有对比。
    • 要保证画面中的对比关系不会破坏整体的协调性。

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

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

    简单与丰富

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

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

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

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

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

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

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

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

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

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

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

    ?#35745;?#37096;分得到了改善,但现在画面中还缺少一点小的装饰元素,增加一点文案是个不错的思路,所以我把文案?#25512;放?#21517;的英文加了进?#30784;?/p>

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

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

    • 要保证主体单一且足够精致;
    • 要保证有简单的装饰元素与主体形成互补。

    规范与打破

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

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

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

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

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

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

    很明显该封面的视觉调性应该要有科技感,要能体现互联网、信息、大数据这些关键词,所以我找了一张看起来很有科技感的?#35745;?/p>

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

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

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

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

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

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

    结语

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

    欢迎关注作者的微信公众号:「葱爷」

    优设大课堂

    非特殊说明,本文版权归原作者所有,转载请注明出处
    本文地址:http://www.caxp.icu/contracted-hidden-details

    发表评论 加载中....

    评论加载中....

    uisdc

    评论区都快饿瘪了,看看我期盼的小眼神...

    版式设计 设计师 扁平化设计 交互设计师 界面设计 优设专访 排版布局 优设大课堂 职场 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 ?#27809;?#20307;验设计 设计趋势 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 ?#27809;?#20307;验 PS教程 网页设计 经验分享

    您还没有登录

    优设启用更安全省心的 微信扫码登录

    微信扫码

    300万设计师聚集地!优设网是极具人气的设计师平台
    2012年成立?#20004;瘢?#19968;直专注于设计师的学习成长交流

    把好文章收藏到微信

    打开微信,扫码分享
    学设计 优设网 在这里

    017期神七是特码