作品不理想应该删掉还是私密(作品信息总是太混乱)
本文干货为主,阅读约8分钟[心]
前两期我们讲到了四大基本原则中的对比和对齐,想必大家还有丢丢印象,我们一起来回顾一下~
对比(Contrast)的基本思想到底是什么?
其实我们仅仅是要避免页面上的元素太过相似,如果元素(字体,颜色,大小,线宽,形状,空间等)不相同,那么我们干脆就让它截然不同,要让页面引人注目,对比通常是最重要的一个因素。正是它能使读者首先看到页面中更重要的元素。
对齐(ALignment)是什么意思?
任何元素都不能在页面上随意安放,每个元素都应该与页面上的另一个元素有某种视觉联系,这样能建立一种清晰,精巧且清爽的外观。
前期没学习的小伙伴也可以戳蓝色字体:板式-对比原则、板式-对齐原则。
好了,回顾完之后,进入今天的正题:板式设计中亲密性原则。
初级设计师的一些现象刚入行的新设计师是否遇到这样一些问题:文案,图片,符号四处分布,连角落都不放过,占据了每一处空间,基本上没有任何的留白。这种情况比比皆是,他们好像在设计过程中不敢留有空白。
有时候遇到学生的作业也是这样的状况,页面满满的毫无透气感。我会开玩笑问到学生,如果让你设计一款手机的包装盒,你敢像苹果手机的包装盒一样中间放一个logo就完事了吗?当然学生一定是摇头的。
如果页面设计中充斥着太多的内容,这个页面会显得杂乱无章,读者也无法从中很快看到所需的信息。当我们面对很多信息的时候要怎么做到版面的透气感,怎么样让读者很快能看到所需的信息呢?这时候就要靠亲密性原则来发挥它的作用了!
什么是亲密性原则?亲密性(Proximity)
彼此相关的项应当靠近,归组在一起。如果多个项相互之间存在很近的亲密性,它们就会形成一个视觉单元,而不是多个孤立的元素。这有助于组织信息,减少混乱,为读者提供清晰的结构 。
为了让大家更加深刻的理解,下面举一些简单的例子阐述下这个概念。
首先,一起来看看下面这两张图,哪张图会让你很快速的回答出这张图中有多少个数字,多少种颜色?
很明显图二能让快速给你答案,至少我们轻易的能知道一共有多少种颜色,一共有多少个数字。
我们再来看这样一段文字:
是不是感觉没有什么阅读欲望?这是因为文字紧密挨在一起,没有任何层级关系的时候,眼睛就会莫名产生疲倦感。
那我们来改变一下:找到其中3个概念折行并移动它们使得相同的元素凝聚成一个组,把间距拉开。再来看的时候,会发现信息的层级更清晰了。
我们再来将这段文字稍微改变下,把文本抱团把标题孤立,这样看上去是不是更加清晰明了。这其实就是运用了板式中的亲密性原则,把相关联的要素进行靠近处理。掌握好亲密性设计原则能使读者快速理解版面信息,减少读者的阅读时间,同时优化负空间使版面优化更完整。
最后,我们来看看下面企业名片的布局。
在这样小的空间里你看到了多少个单独的元素?眼睛要停留多少次才能看全这张名片上的所有信息?
你的眼睛是不是停过5次?名片上的每一项看上去似乎都和其他项没有关联,信息混乱。
那我们利用亲密关系将名片稍微修改下,得到下图。
从这张图上我们是不是就看到了名片的意义!“我是谁?我的电话是多少?哪些方式可以找到我?”等等这些信息,在图二明显比图一更能准确的传达。
这就是亲密的作用:让有关联的元素组合在一起成为一个视觉单元,而不是孤立的元素,页面也会变得更加有条理。
综上,我们可以发现亲密性的目的是实现组织性。尽管对齐对比原则也能达到这个目的,但是利用亲密性原则会更加简单!我们只需将简单的相关的元素放在一组建立更近的亲密性,就能自动实现条理性和组织性,信息也会更容易被记住,而且能更好的体现留白。
案例实操,加深理解为了让大家加深对亲密性原则的理解,我们来提取一段文字实操一下。
PS新建一个宽800,高1100,分辨率72的文件,就以上文字部分按照亲密关系我们先来打堆分组。使它们各自成为一个视觉单元,建立起条理性和组织性,方便阅读。
按照语义进行亲密性设置,把文字分为了三组。控住好组与组之间的比例,组内标题与内容的比例,让信息更有效的传达。在进行亲密性关系建立时一定要注意间距的关系。字间距<行间距<段间距<组间距。
按照建立起来的亲密关系我们设计下海报。尝试纯文字风格的海报设计,对文字进行提炼,当文字或者做修饰,让其形成强烈视觉冲击力。
设计之前,用栅格辅助页面(上一期有讲到栅格化的设置方法,这里我们不再多做讲解),按照我们提炼的文字关系进行版式再设计。
主色调我们用了蓝色,辅色用了蓝色的高强度对比色金色,色相环上相距120度到180度之间的两种颜色,称为对比色。例如:主色调用了蓝色,要搭配蓝色的对比色做辅助色,我们可以直接在色相(H)加上120度-180度间的所有数值。对于颜色不敏感的小伙伴可以试试。
字体选择上,为了增加字体对比,标题改为了“方正清刻宋体”,正文选择了“方正兰亭细黑”,这里要说明下这些字体都是有版权的,小伙伴如果要设计商用的作品,请一定要确认好版权的问题。
在确定了亲密关系,字体,优化好颜色的基础上,继续排版。那么问题来了,在不借用素材的前提下,仅仅用这么些文字我们可以怎么样排版让版面更具饱满感和设计感?
在这里我们选择运用文字填充版面,因为文字的意义除了传达内容让读者阅读之外还可以修饰版面填充版面。(前面也做过类似案例,不知道大家还记得吗?)
本次设计中我们提取了文字“亲密性原则”并填充设置为0,添加大小为2的金色描边,并通过层叠裁切的方式把文字符号化。
然后给文字建蒙版(如图示),简历选区在蒙版填充黑色遮挡。文字的一半就被裁切掉。这是文字符号化使用的一种常见方法-层叠裁切。讲到这儿跟大家稍微拓展一下,裁切可以是上,下,左,右等任意方向,裁切对象可以是文字/商品/人。
右侧小字部分按亲密关系分组运用好对比和对齐原则,很容易让版面有更多可变性。
比如把版面做下对称换位置,再增加一个点缀色,背景改一下色系,画面感是不是又发生了变化呢?
然而右下角该怎么处理?一样在不使用素材的条件下,那我们再来做文字图形化。为了更好的达到图形化效果,可以选择在AI软件里完成一款球状镂空立体字。图示如下:
此效果步骤详解:
1,绘制填充为0,描边为1的正圆。
2,使用刻刀工具随意分割三块,然后输入文案“版式设计基础”一共6个字,分别对应在分割好的3个版块中。注意3个块面要置于顶层(鼠标右键排列-置于顶层)。
3,分别对三个块面执行顶层封套扭曲。(选择块面和文字 对象-封套扭曲-用顶层对象建立)快捷键:Ctrl art c。
4,执行后全部选中并执行对象-扩展。并鼠标右键编组。
5,Ctrl C复制,Ctrl B原位粘贴在下方。颜色改为黑色按比例缩放在中心位置。
原图层更换颜色,全部选择,进行CTRL art b混合,这样球状镂空立体字就完成了,为了实现颜色的多样化和更突出文字,复制一个顶层字并更换颜色。球状镂空立体字效果就做出来了,记得保存好。
然后将做好的文件置入到PS里面,在PS里更换颜色进行编辑,放在右下角补给画面。颜色依然使用对比色的配色法则(再提醒下大家可以直接做加减运算配色)。
主体画面完成了,最后我们再丰富下背景,这里采用了现有图形的再利用,具体操作如下:复制球体镂空图形文字,放大,图层混合模式为叠加,适当改变透明度。置于蓝色背景层的上方,可以尝试多个位置的摆放。
做张样机看一下
以案例海报版式为基准,用同样的版式延展一张商业海报。
采用对角线构图的方式,主体置于右下角,把主题文案按照亲密关系分组成为6个独立的视觉单元。
配色上使用“采物法”吸取本身产品的颜色绿色作为主色,桌棍的木纹色作为辅色。提取文字放大符号化使用当背景,用几何形修饰下细节。这样一张海报就完成了。
来张样机试试~
知识点总结
今天的亲密关系到这里就讲完了,文末一起总结下本期知识点:
1,版式中亲密关系的建立,让它们就形成一个视觉单元,而不是多个孤立的元素。这有助于组织信息,减少混乱,为读者提供清晰的结构。
2,在文字排版过程中要遵循:字间距<行间距<段间距<组间距,这样会让你的排版更具层级感,画面也会更干净。
3,配色可采用对比色配色法(120度-180度)间的颜色都可以尝试,也可采用‘采物法’吸取产品本身的颜色。
4,文字符号化使用,可以通过不同大小/不同位置/不同透明度 进行差异化调整。
你学废了吗?
,
免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com