美文网首页商学院
093丨布局原则:亲密性、对齐、对比、重复

093丨布局原则:亲密性、对齐、对比、重复

作者: 王彬成 | 来源:发表于2018-02-22 12:42 被阅读56次

每天5分钟,解决一个商业问题。欢迎收听,《刘润·5分钟商学院》,实战篇。

今天我们来学习产品设计中,几乎每个人都会用到的一个设计原则:布局原则。

今天会用到很多图片,为了能有更感官的认知,建议你边看文稿,边听音频。

概念:布局原则

什么叫布局原则?

James最近在找工作,把精心准备的简历,发给几家心仪的公司。公司的HR特别忙,于是用15秒扫了一眼简历,什么信息都没得到。

“好乱”,HR心想,于是把简历放入了“日后联系”的文件夹里。

093丨布局原则:亲密性、对齐、对比、重复

啊?这也叫“乱”啊?那什么样叫不“乱”呢?

别急,我们先通过四张图,看看到底什么叫“乱”。

093丨布局原则:亲密性、对齐、对比、重复

第一张图,显然非常乱。为什么?因为有太多孤立元素。

093丨布局原则:亲密性、对齐、对比、重复

第二张图,还是非常乱。为什么?因为有多种对齐方式。

093丨布局原则:亲密性、对齐、对比、重复

第三张图,依然非常乱。为什么?因为对比不明显。

093丨布局原则:亲密性、对齐、对比、重复

第四张图,绝对更加乱。为什么?因为信息没有分组。

那什么叫“不乱”呢?

罗宾·威廉在他的书《写给大家看的设计书》里说,人们对“秩序”有着发自内心的需求。有秩序的布局,就是让人身心愉悦。打破秩序,杂“乱”无章的布局,就会让人不安、焦虑、排斥。这个“秩序”,就是组织性、一致性、统一性和互补性。

他举了个例子。比如下面这张名片。

093丨布局原则:亲密性、对齐、对比、重复

第一,要素之间没分组,缺乏“组织性”;第二,要素之间没对齐,缺乏内在的“一致性”;第三,要素之间没呼应,缺乏“统一性”;第四,要素之间没对比,缺乏“互补性”。

所以,你看着就是不觉得美。

那符合“秩序”应该是什么样子呢?你再看看下面这张重新设计过的名片。

093丨布局原则:亲密性、对齐、对比、重复

是不是不觉得“乱”了?

为什么?因为上下的分组、靠右对齐的一致、粗体的统一、大小粗细的对比,暗合了深深埋藏在你心中的“秩序感”。

秩序感,就是一种美感。

我并不打算通过今天的课程,把你变成一名平面设计师,我希望把你变成一名有“美感”的CEO,在看到产品设计时,可以提出有美感的建议。

运用:

那我到底应该怎么做呢?你只需要记住这四个“布局原则”:亲密、对齐、重复,和对比。

第一, 亲密。

亲密,就是让逻辑上相关的信息,表现得更亲密一些,比如靠近一些、放在同一个框里面,等等。亲密的本质,是体现“组织性”。

比如下面这个封面设计。

093丨布局原则:亲密性、对齐、对比、重复

封面有6行文字,但显然有3个逻辑组。大标题一组,副标题一组,作者和时间一组。但是在这个设计中,6行的间距都是一样的,没有体现出信息的“组织性”。

那有秩序感的设计应该是怎样的呢?比如下面这张图。

093丨布局原则:亲密性、对齐、对比、重复

这样的布局,很有条理,更易阅读,也更容易被记住。

第二, 对齐。

任何元素,都不能随意安放,而应该与其他元素有某种视觉联系。这种视觉联系,就是“对齐”。

回到这个封面的布局设计。它不是已经“居中”对齐了吗?

居中对齐,当然比随意安放好。但居中对齐,是一种非常乏味的对齐,你应该慢慢尽量避免使用。试一试“左右对齐”吧,你会惊讶于布局的明显改善,比如下面的修改。

093丨布局原则:亲密性、对齐、对比、重复

对齐,也就是那根“看不见的线”,带来了一致性。

第三, 重复。

这款封面的布局设计,还能怎么改进呢?请看下图。

093丨布局原则:亲密性、对齐、对比、重复

这个版本修改了什么?1)用绿颜色的箭头,前后“重复”;2)用加粗的字体,前后“重复”。

为什么要重复?重复带来“统一性”,让你进一步看到所有元素间的关联。

但是要记住,一致,并不意味着一样。每个视觉元素,毕竟是有差别的。

第四, 对比。

强烈的对比,能在不同元素间建立一种有组织的层次结构,也就是互补性。罗宾说,“如果两个项不完全相同,就让它们不同,而且是截然不同。”

你体会一下,下面这个加上对比的封面布局设计。

093丨布局原则:亲密性、对齐、对比、重复

好了。学习完“亲密、对齐、重复、对比”这4个“布局原则”后,我们看看James重新设计的简历,是不是比原来的版本,有“秩序感”,不“乱”了呢?

093丨布局原则:亲密性、对齐、对比、重复

1. 什么叫做“布局原则”?我们每个人内心,都深深埋藏着秩序感。用具有“组织性、一致性、统一性、互补性”的布局,来建造视觉上的秩序感,能给用户带来巨大的美感。

2. 具体怎么做?记住4个原则:亲密、对齐、重复、对比。

3. 我们总觉得“美”是微妙的,不可琢磨的。说不清,道不明。但其实,再不可琢磨的东西,依然有底层规律。美有美的规律,爱有爱的规律。万物,皆有规律。

093丨布局原则:亲密性、对齐、对比、重复

你见过哪些充满“秩序感”的布局设计呢?

欢迎你在留言区分享,与大家一起,过过招。也别忘了把今天学到的内容,分享给你的朋友,也许能够帮到他。

每个人都是自己的CEO,这是你在商业道路上成长的第93天,期待你的进步!

相关文章

  • 093丨布局原则:亲密性、对齐、对比、重复

    每天5分钟,解决一个商业问题。欢迎收听,《刘润·5分钟商学院》,实战篇。 今天我们来学习产品设计中,几乎每个人都会...

  • 写给大家看的设计书

    本书介绍4大排版原则——亲密性、对齐、对比、重复。 亲密性、对齐、对比、重复。这4个原则是可以打破的,但绝对不可以...

  • 排版原则

    排版四原则 亲密性原则 对齐原则 重复原则 对比原则 一、亲密性原则 1. 什么是亲密性原则? 关联性越高的元素,...

  • 读书笔记:《写给大家看的设计书》

    第1章 4大基本原则(crap) 对比 重复 对齐 亲密性 第2章 亲密性 Robin 亲密性原则是指:将相关的项...

  • 《写给大家看的设计书》(第4版)

    一、4大基本原则 对比(Contrast) 重复(Repetiton) 对齐(Alignment) 亲密性(Pro...

  • 如何成为一个合格的设计师?

    做设计的的人需要明白设计的四大原则:亲密性、对齐、重复和对比。 一、 亲密性 1、亲密性原则:实现组织性,将相关的...

  • 工具类书籍

    1.《这给大家看的设计书》 四大原则 亲密性 对比 对齐 重复 移动游戏布局原则 竖排列表 横排方块 九宫格 ta...

  • 写给大家看的设计书(笔记1)

    坚持每天一记 4大基本原则 〈对比〉〈重复〉〈对齐〉〈亲密性〉 对比 让元素不同,可以引人注目。 重复 重复某些元...

  • 图灵社区

    复杂的设计原理在本书中凝炼为亲密性、对齐、重复和对比 4 个基 本原则。

  • 《写个大家看的设计书》读书笔记2018-003

    四个核心原则对齐,重复,对比,亲密性。书中的每个原则都会有相对应的设计案例,对比出有遵守原则的设计和没有遵守原则的...

网友评论

    本文标题:093丨布局原则:亲密性、对齐、对比、重复

    本文链接:https://www.haomeiwen.com/subject/bdaatftx.html