设计@产品视觉设计

设计师必备四大基本原则你懂了多少丨1-亲密性原则

2019-02-16  本文已影响112人  视传四班陈同学

我们每天都会看到很多的广告、界面、照片、视频,当这些作品呈现在我们面前的时候,我们会很容易的分辨出哪些好看,哪些不好看,但是我们却常常说不出其好看的原因,或者我们自己平时做的作品的时候,总是觉得怪怪的不知道怎么修改,而当我们了解了设计中的四大基本原则后,你会发现这背后的一切都是有套路而言。

四大基本原则是由美国罗宾·威廉姆斯(RobinWilliams)在《写给大家看的设计书》中提出的,他认为设计有以下四个原则:

1、亲密性(Proximity)

彼此相关的项应当靠近,归组在一起。如果多个项相互之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有助 于组织信息,减少混乱,为读者提供清晰的结构

2、 对齐(Alignment)

任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。

3、 重复(Repetition)

让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片,等等。这样一来,既能增加条理性,还可以加强统一性

4、对比(Contrast)

对比的基本思想是,要避免页面上的元素太过相似。如果元素(字体、 颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。要让页面引人注目,对比通常是最重要的一个因素,正是它能使读者首先看这个页面。


亲密性(Proximity)

Robin 亲密性原则是指:将相关的项组织在一起,移动这些项,使它们的物理位置相 互靠近,这样一来,相关的项将被看作凝聚为一体的一个组,而不再是一堆彼此无关的片段。

这个简单的例子很好地阐释了这个概念。这正反映了亲密性的概念,在一个页面上,物理位置的接近就意味着存在关联(实际生活中也是如此,你和谁亲近就和谁走的近)。

看到追梦演艺圈的海报不经让我们感觉回到了十年前的设计水平,面对这些铺满整个页面的散乱文字与图片,使用户的视觉不知道该停留在什么地方,不是在从何开始,从何结束,阅读顺序又是什么。当我看到纯洁的心灵文字的时候,视线不自觉的给上方的人群图片吸引;当我看到Into Chinese Showbiz的红色字体的时候视线又会给毕志飞导演图片所吸引。这样一幅作品要阅读完所有内容对读者来说是一件很耗费精力的事情。

当我们看到这一组海报的时候,我们第一感觉会很整洁、清晰有层次,这组海报不论从理解上还是从视觉上看都很有条理,更加清楚的表达出信息。视觉顺序上我们会第一眼看到主体图片,其次是大标题、然后是副标题最后是一些说明性文字,整个阅读顺序很清晰,能够一眼看到重点。

而这一组作品和追梦演艺圈的海报之间的区别是什么呢?其中最重要的是亲密性原则,对画面中的元素进行归类整理,让有关联的元素归类在一起,变成一组画面的视觉单位。

如这张海报,把图片作为一组画面视觉单位,LOGO作为第二组视觉单位,主标题作为第三组视觉单位,标题英文翻译作为第四组视觉单位,最后详细说明性文字作为第五组视觉单位。


单个的元素进行完亲密性原则后,我们要对画面的视觉单位进行亲密性原则的设计了。

当看到这组画面的时候,这个项目符号显得非常不合群,不知道它是与左边的有关系还是与右边的有关系,这看起来他们就是四个项目符号单独成为一个视觉单位,这个是错误的做法。

经过亲密性原则的修改后它们间的关系就清晰了,我们可以立刻分辨出哪些项目符号属于哪些项目,也可以马上看出有两列项目清单,而不是一列项目符号,一些信息,一列项目符号。

我们再来看下优秀的海报作品

这里不难看出,视觉单位与视觉单位之间的区分很明显。

我们将他们之间的视觉单位进行划分出来,不难发现,他们视觉单位之间的距离没有出现同等距离的,2和3的距离比1和2的距离小,所以2和3之间的关系更亲近,同理可得1和4的关系更亲近(当然这里还运用了重复原则)


亲密性小结:

如果多个项相互之间存在很近的亲密性,它们将成为一个视觉单元,而不是多个孤立的元素。彼此相关的项应当归在一组要有意识地注意你是怎样阅读的,你的视 线怎样移动:从哪里开始;沿着怎样的路径;到哪里结束;读完之后,接下来看哪里?整个过程应当是一个合理的过程,有确定的开始,而且要有确定的结束。

根本目的

亲密性的根本目的是实现组织性。只需将相关的元素分在一组就能自动实现条理 性和组织性。如果信息很有条理,将更容易阅读,也更容易被记住。

判断小技巧

微微眯起眼睛,统计眼睛停顿的次数来数一数页面上有多少个元素。如果页面上的项超过 3 ~ 5 个(当然,这取决于具体情况),就要看看哪些孤立的元素可以归在一组建立更近的亲密性,使之成为一个视觉单元。

要避免的问题

避免一个页面上有太多孤立的元素不要在元素之间留出同样大小的空白,除非各组同属于一个子集。

上一篇 下一篇

猜你喜欢

热点阅读