设计排版四大原则,我重复N次了!
2017-03-21 15:33
316 查看
好久之前做的一篇内容,今天终于要分享给简友了。这是一本书的内容,你看过这本书吗?(设计排版四大基本原则,可能看似简单,但是如果你不注意,就很难将它快速应用好,内容有点多耐心看完,你一定会有收获的。)
排版4大基本原则1.亲密
2.对齐
3.重复
4.对比
1.亲密性原则
解析:彼此相关的项应该靠近,归组在一起。如果多个项相互之间存在很近的亲密性,他们就会成为一个视觉单位,而不是多个孤立的元素。这样有助于组织信息,减少混乱,为读者提供清晰的结构。亲密性原则(例1)
上图:你可能看到中央的字后,不知道该看那个了。
下图:将相关的元素放在一起,可以看出,这样就给读者提供了眼睛浏览的思路。
![](http://upload-images.jianshu.io/upload_images/2812847-6ba43efeb9ffc57d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
亲密性原则(例2)
上图:每行之间间隔都相同,你很难辨别他们之间的关系。
下图:适当的调整行间距,就可以让相关的内容联系更佳紧密,即亲密的元素放一块儿。
![](http://upload-images.jianshu.io/upload_images/2812847-899a1d3a60bb2174.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
亲密性原则(例3)
上图:中间的项目符号离左右都差不多,你可能认为它相当于分割线,但它并不是。
下图:调整项目符号与文本之间的距离,就可以让文本表达更清楚。不仅限于项目符号,其他的小标志、数字、小图片也是这个道理,跟谁亲,就把他们凑一块儿。
▲实现亲密性原则要注意的问题
避免一个页面上有太多孤立元素
不要在元素之间留出相同的空白
2.对齐原则
解析:任何东西都不能在页面上随意安放。每个元素都应该与页面上的另一个元素有某种视觉联系。而这个视觉联系往往是看不到却可以感受到的对齐线。![](http://upload-images.jianshu.io/upload_images/2812847-60ba84b65b5483a5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
对齐性原则(1)
上图:你可能觉得这张经过调整挺好了,但是让文本对齐又会达到更加效果的。
下图:文本采用右对齐,是不是感觉页面更加有条理了。虽然左边有点空,不要怕,可以添加一个装饰物来填补。
对其性原则(2)
上图:你可能很守旧,一直采用标题居中,首行缩进两个格。but,你out了!
下图:稍加对齐调整,是不是感觉更加清楚。本来段落之间就有间距,所以没有必要再首行缩进来表明这是一个段落了。
![](http://upload-images.jianshu.io/upload_images/2812847-0b3eb6947561a61d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
对其性原则(3)
上图:这上面也有对齐线,也大体做到了亲密性,但是还不够。
下图:稍加对齐,是不是条理性大大增加,读者看起来也有思路,也不那么累了。
▲实现对齐原则要注意的问题
避免使用多种文本对齐方式
要着力避免居中对齐(并不是杜绝居中对齐,而是要有意使用居中对齐。不能把居中作为默认对齐方式)
3.重复原则
解析:让设计中的视觉要素在画面中重复出现。可以重复字体、颜色、形状、线条、大小和图片等等。这样可以增加条理性,还可以增加统一性。![](http://upload-images.jianshu.io/upload_images/2812847-8bdb2e7c89ece37e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
重复性原则(例1)
上图:右对齐还够,如果这个张名片,你想让他人记住你的联系方式呢?
下图:可以将联系方式加粗,重复上面加粗字体,这样就可以突出联系方式。
![](http://upload-images.jianshu.io/upload_images/2812847-1d57803f59fc6a4b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
重复性原则(例2)
上图:这张设计还好,亲密性、对齐都用得到了,还用了其他字体。但是条理性差,内容相对分散。
下图:这张使用了宽线条的重复。与上张相比,这张的统一性更强,思路更佳明确。底部增加一条细线,与标题框形成重复,使画面联系更佳紧密。有时候小小的重复就可以带来意想不到的效果。
▲实现重复原则要注意的问题
避免太多重复
注意重复的位置
4.对比原则
解析:对比的基本思路,要避免页面上的元素太过相似。如果(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让他们截然不同。要让页面引人注目,对比通常是最重要的因素,正是它能使读者先注意到这个页面。就举一个例子,其实上面例子中都有对比的体现。![](http://upload-images.jianshu.io/upload_images/2812847-fc2727437e2e54aa.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
对比性原则(1)
可以看出将线加粗,白字放在宽线上边,就可以大大使标题更醒目。运用对比,整个画面更鲜明,表达也更清晰。其他还有很多对比用法,大多采用改变字体,加粗字体等。
▲实现对比原则要注意的问题
想要突出重点,就要使用对比,并加大力度,让他们截然不同。
避免使用太多对比,一个画面中有1或2个对比就可以了。过多对比反而让读者看不出重点。
对于这四条原则,重要性及应用方面之广,就不再多说了。
对于这四条原则,重要性及应用方面之广,就不再多说了。
谨记原则
时刻应用
……
相关文章推荐
- Web设计师应遵循的高效设计原则之二:重复[转载]
- 设计的四大原则
- 文字排版中的设计四原则(二)
- 移动端UI界面设计:APP字体排版设计的七个原则
- 提升产品UX体验的一些排版设计原则
- 设计中的微创手术――使用重构原则消灭重复代码
- 文字排版中的设计四原则(一)
- 文字排版中的设计四原则(二)
- 微服务架构四大设计原则分析
- 设计原则:重复的方式以及如何消除重复
- 设计模式之四大原则
- 面向对象设计四大原则
- 文字排版中的设计四原则(一)
- 设计四大基本原则——对比、重复、对齐、亲密度
- Web设计师应遵循的高效设计原则之二:重复
- 掌握设计四大原则中的对比原则
- 设计原则之 重复
- 设计模式——四大原则
- 4大排版原则——亲密性、对齐、对比、重复
- 文字排版中的设计四原则(三)