排版4原则——亲密性、对齐、对比、重复

亲密性
1. 含义:亲密性简单的来讲就是要把画面中的元素分类,把每一个分类做成一个视觉单位,而不是众多的孤立的元素。实现页面的组织性和条理性,同时还要注意,不要在画面中留出太多等空间的空白…并且视觉单位之间也要建立某种联系才行。
45.jpg
2. 作用:分组;留白。

3. 方法:

1) 留白:通过留白建立距离关系进行区分,留白是设计中通用的万金油原则。其他的一些建立组合的方式也是建立在留白之上的。

64.jpg

2) 分割:分割形式建立组合关系,分割的类型有很多种,可以是线条分割,也可以是形状与色块分割等。

75.jpg

3) 色相:通过色相的对比。不同色相的信息组会暗示观者这是不同的信息。

84.jpg

4) 方向:不同的编排方向也可很好的区分信息组

95.jpg

5) 分栏:通过分栏的方式区分不同的信息也是很好的选择,相关信息分成同一栏,不相关信息分成不同栏。

104.jpg


对齐
1. 含义:在页面设计上每一元素都应该与页面上的另一个元素存在某种视觉联系,这样才能建立清晰的结构。在版面设计的时候一定要找某个联系,找对齐线才行。对齐的作用总结下来其实只有一点,就是能够使版面统一简洁更有条理,能够引导视觉流向。

2. 原则:对齐原则是让版面中的元素有一种视觉上的联系,使其整个版面规整又美观,以此来打造一种秩序感以便更利于阅读。

3. 方法:找准一条明确的对齐线,并用它来对齐。

4. 分类:
1)左对齐:版面中的元素以左为基准对齐。左对齐是最常见的对齐方式,简洁大方,利于阅读。
2)右对齐:版面中的元素以右为基准对齐。相对于左对齐来说不太常见,给人一种人为干预的感觉,阅读比率慢一些。

3)居中对齐:版面中的元素以中线为基准对齐。居中对齐给人一种严肃与正式感。

4)两端对齐:版面中的元素拉伸或缩放与同一元素两端对齐。两端对齐通常用于大段落文字编排中,利于阅读。

5)顶对齐:与左对齐相似,版面中的元素以顶部为基准对齐。

6)底对齐:版面中的元素以底部为基准对齐。

7)轴线对齐:轴线对齐是以版面中心线为对齐基准,而不是元素的中线。(轴线对齐能给人正式感,同时各个部分又富有变化,比较灵活。)


对比
1. 含义:对比能简化画面,使版面主题更明确,更直观。运用对比能使视觉冲击力更大,更抓人眼球。对比使版面层级清晰,能够突出重点,从而更有效的传达信息。

2. 方法:首先划分层次,多打几个回车将统一层次的要点分成多个并列的条目,然后使用不同的字号区分层次,最后使用点、线、面等修饰元素突出重点。

3. 分类:大小对比、形状对比、颜色对比、位置对比、方向对比、肌理对比,还有字体类型的对比、距离对比、虚实对比、远近对比等;


重复

202.jpg

让视觉要素在整个作品中重复,除了配色还有标题、符号那些,重复的元素能使版面更加统一。包括统一颜色方案、字体字号、文本行距、项目符号、图表风格、对齐方式、图片风格,或者一种特别的字体。

不要把重复用得太滥,而应当尽量“采用多样性实现统一”。也就是说,如果一个重复元素很明确(如一个圆),那么可以采用多种不同方式重复这个圆,而不是简单地重复同一个圆。

标签:UI 排版 设计

发表评论: