多语言展示
当前在线:1637今日阅读:82今日分享:48

板式设计中群组与对比的运用法则

一个平淡无奇的板式设计,或者凌乱不堪的页面,通过运用群组和对比这两种手法就可以让画面迅速变得有条理、有层次,与众不同。具体如何做到呢?需要遵循一些原理和法则。
一、群组
1

群组: 组合即成组,也叫做亲密性,将相关联的信息,彼此靠近,归类到一组。不相关的信息互相隔离,加以区分。 缺乏群组的表现:1、不同的字体、形状、图片等元素没有距离空隙,造成紧张、压迫感。2、不相关的内容紧靠在一起,造成理解错误。3、内容之间的联系不清晰。4、视觉平淡无奇,内容无主次、先后关系,层次关系较为模糊。 一、成组的方式: 1、聚拢:是界面排版中最常用的原则之一,将内容分成几个区域,相关内容都聚在一个区域中。作用:减少理解错误,清晰表达内容之间的联系。使用原则:阅读理解上要正确,理解并消化文字内容是前提,然后把相关的内容成组排布。 2、留白: 留白也是常用的原则,不同组之间保持距离,以进行区分,留白是分组、区分的通用法则,其他的法则都是建立在留白的基础之上的。作用:减少紧张、压迫感,画面更透气。使用原则:不同组间距大于组内间距,比如分段,段间距应该大于段内的行距,这样的间距规律还会让我们清晰的区分开每一条信息,不会导致信息干扰。 3、对齐: 即,版面中的元素以左或右为基准对齐。对齐让所有元素都紧贴着一边,比如左对齐:紧靠左边,引导人眼从左向右看。作用:使内容之间的联系清晰,比如相关联的内容都使用左对齐。使用原则:组内元素尽量对齐,组与组之间可以不用对齐。一个版面中尽量不要使用3种以上的对齐方式,比如仅使用左对齐和居中。常用的分组方式就是聚拢、留白、对齐这三种,这就足以应对大多数情况。但有时上述分组方式不能很好的区分,那么就需要使用其他方式强化区别。  4、分栏: 通过分栏的方式区分不同的信息也是很好的选择,相关信息分成同一栏,不相关信息分成不同栏。  5、封闭: 分割是在对齐、留白等分组方式之后使用的办法,封闭的类型有很多种,可以是矩形线条封闭,也可以是形状色背景分割等,用色块将同一组内容包括起来。有时,虽然已经用留白分开两个部分的内容,但还是不够清晰,这时候就需要使用分割将二者区分开,比如将两个部分的内容用线框封闭起来后,就可以更容易的区分二者了。  6、颜色:通过颜色产生区分,尤其是颜色的色相、明度、纯度的差异。不同颜色的信息组会暗示观者这是不同的信息。   7、编排方式 :不同的编排方向也可很好的区分信息组,比如竖排和横排、斜排的区分。

2

二、使用分组需要遵循的原则:重复原则:组与组之间要有重复出现的特征,比如不同组的色彩方案、字体字号、文本行距、视觉符号等存在相似性。1、在特征上,相似特征反复出现,比如不同组的第一行文字的字号相同,都是较大字号、每个组的行间距相同、第3行的文字颜色相同,对齐方式都是左对齐、等等。 2、在内容上,重要信息也可以重复出现,同一图形也可以在多个组出现,比如每段左侧标注的符号相同,都有圆或菱形或三角型,这样代表这些组之间存在联系。  重复性特征保持了一致性,使组与组之间变得有联系,而不会让整个排版显得混乱,读者不知道该组和组是什么样的关系。

二、对比
1

虽然有时版面分组了,似乎看起来不那么凌乱了,但总感觉哪里不对。一个很重要的原因就是因为界面信息内容的对比不够强烈,人们不知道该看哪里。 如果将重要信息和次要信息的大小对比加强很多,使我们聚焦在主要信息(标题)上,这样看着就不会那么平淡,而且重点突出,人们知道该看向哪里。对比的作用: 加大组内不同元素的视觉差异。这样既增加了页面的活泼,又方便读者集中注意力阅读某一个区域。一、对比的方式:1、大小:通过设置不同大小加强对比,较大的对象比较小的对象拥有更高的视觉权重。2、粗细:通过设置不同大小加强对比,通常较粗的对象拥有更高权重。3、颜色:在一组相似颜色中,意外加入一个不同颜色能有效强化对比,这个不同的颜色就有更高权重。4、其他:除了大小、粗细、颜色等,还可以用对齐,形状,编排方式,字体等突出对比,方法与上述类似 :有特殊属性的对象,视觉权重就较高。

2

二、对比原则: 1、对比样式不可太多,一个版面中的字体样式、颜色种类、对齐方式种类都不可超过5种以上,否则种类太多了非但不能加强对比,反而让人无所适从,给人臃肿的感觉。2、组内通常是强化对比,通过制造大小差异,粗细差异,字体差异等,来突出重点,主要内容就用大、粗、不同字体来突出,区分上下级。 3、组间则要保留一定的相似性,用组间的间隔来区分组就可以了,同时让组与组之间的间距保持相似,比如都是20pt,保留一定相似性的前提下才能反过来强化对比。4、遵循平衡原则:要注意保持好整个页面重心的稳定,防止出现“一边倒”现象的出现。例如,体积大且颜色深的物体比体积小且颜色浅的物体具有更多的视觉重量,如果左边出现了一个这样的元素,那么在右上角或者右下角也要出现类似的元素,但视觉重量可以比左边略小一些,这样才能平衡画面。

注意事项
1

组内保持差异性,组间保持相似性。

2

运用对比样式不可过多,在保留很多多个对象重复性的基础上,将其中一个对象差异化,这样的对比效果好。

3

部分图片来源于网络,侵权请联系删除。

推荐信息