平面设计师要掌握的版式基础大全
(一)构成平面的三要素
(1)点的构成
点是组成平面构成的基础要素。点可以是不同大小的,也可以是不同疏密的。在一个画面上也可以有大小、疏密、虚实、整齐和随意对比的,对比就会产生韵律感。
(2)线的构成
垂直和水平的线都会有稳定的感觉,斜线会更加有冲击力,曲线会感受更加柔和。
(3)面的构成
面的种类有不规则形状和几何形状两种。
(二)排版中的元素
在平面设计的过程中,我们其实是在组织图片、文字、按钮、图标等比较小元素的信息架构。
这些排版中的元素需要我们放在画面中,不可以因为好不好看而删去必要的信息,然后根据它们的重要性进行排列组合。
(三)文字排版八条定律
字体是排版中重要的元素,也是直接的信息传达方式。下面有八条文字排版的定律,供参考。
第一,保证文字是可读的。
第二,不要在一个版面中使用三种以上的字体。
第三,如果英文标题或单独进行排版时,尽量全部使用大写而非首字母大写。中文标题或单独进行排版时结尾不需要句号。
第四,字间距和行距以及文字大小都要依据实际场景来决定。
第五,文字阅读需要清晰地背景区分,比如黑纸白字和白纸黑字原则。
第六,除非不得已,尽量避免在一个版式中使用中英文混排。
第七,文本左边对齐同时右边也需要对齐。
第八,中文前面需要空两个全角字符空格,英文前面无需空格,但需要大写。
(四)图片素材比例
在进行排版的时候,或多或少都会用到图片素材。无论图片的大小,首先要保证使用的图片与整体设计调相符。冷、暖、中性都要符合整体的调,一定是邻近或对比等彩关系,不要因为自己的主观放置没有彩关系的配图或者会抵消画面彩倾向的配图。同时,还要注意比例,才会让作品整体耐看。
(1)图文比例
在一个设计中,图片与文字的量应该有一定的对比。人天生喜欢看图片而不是阅读,实际上人类有阅读能力的历史只有几千年,而欣赏图片的能力是天然的。如果需求方的文字需求非常多,尝试与需求方商讨减少文字量。文字量越少,图形化设计越多,那么视觉上这个作品看起来就更轻松。
(2)图片比例
在平面设计中,因为目的是印刷,对我们的图片尺寸没有非常严格的要求。但是如果我们是为了互联网产品的设计的话,可能会涉及一些需要网站编辑直接上传的图片,如果设计的尺寸不是一个固定尺寸,那么可能原本网站编辑不需要裁剪图片而可以直接上传的工序,要因为我们的一个尺寸变得很复杂。所以请牢记以下三个尺寸:4:3、16:9、1:1。
4:3的原因是相机的画幅一般是4:3,所以我们看到的新闻客户端的图片大多是4:3。16:9的原因是视频宽荧幕画幅就是16:9,所以我们看到视频网站的截图一般都是直接由机器抓取的图片。1:1一般用于封面等图片素材的尺寸是正方形的。
(五)排版的CRAP原则
任何一个设计中都需要把各个元素分级分清主次,这样才能更好的抓住重点。那么,如何让这些信息按照它们的身份来排版呢?我们就要用到CRAP原则了,包括对比(Contrast)、重复(Repetition)、对齐(Alignment)、亲密(Proximity)四项。
(1)对比(CONTRAST)好看网页设计素材图片
在同一个视觉区域内的逻辑不同的元素应该有所区别,避免视觉上相似。这样就可以有效
地区分谁是主角谁是配角了。为了让主要元素更突出,让次要元素更后退,我们可以尽量使它们的颜、字体、大小、留白不同。如果两个元素不尽相同,请让它们截然不同。比如:如果你想使用12px的正文与14px的标题区分明显,不如用12px与40px进行区分反差更大,更容易区分哪个内容是需要优先浏览的、哪个内容是次要的。
(2)重复(REPETITION)
如果相同的内容(如标题等)属于同一个逻辑,可使它们的颜、字体、大小、留白保持相同。这样可以增加条理性和加强设计的统一性。一个级别的信息尽量使用一种设计来保持用户的认知,避免用户认为是另一种信息分类。这就是重复原则。
(3)对齐(ALIGNMENT)
任何内容在版面上都尽量应该上、下、左、右对齐。随意摆放绝对是错误的。这一点一定要和大家多次强调,比如一个元素上下左右的间距都要是一样的。大家看到网页和app设计之中经常会有间距和留白,留白和对齐都是我们在设计时需要考量的,留白不是随意的。
(4)亲密性(PROXIMITY)
在逻辑上有关系的两个元素应该尽量放在一起。两个视觉元素在一起就会变成一个视觉单元。比如:注册页面中的登录视觉单元是由输入表单和登录按钮组成的。相同的内容,如小标题等,属于同一个逻辑。可使它们的颜、字体、大小、留白保持相同,这样可以增加条理性和加强设计的统一性。
总结:平面与版式的设计知识涵盖了字体的选择、图片的选择、平面构成基础、排版的CRAP原则、栅格化设计、黄金比例等多个知识点。如果我们现在接到一个需求,可以首先将内容放进画面并排列好重要性、然后选择合适气质的字体和图片、使用CRAP的排版原则将信息排成合理的顺序、利用栅格化和黄金比例让画面更加科学、如果发现画面比较空可以加入几何形装饰。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论