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

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

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

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

概念:布局原则

什么叫布局原则?

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

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

图片发自简书App

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

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

图片发自简书App

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

图片发自简书App

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

图片发自简书App

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

图片发自简书App

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

那什么叫“不乱”呢?

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

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

图片发自简书App

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

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

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

图片发自简书App

是不是不觉得“乱”了?

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

秩序感,就是一种美感。

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

运用:

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

第一, 亲密。

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

比如下面这个封面设计。

图片发自简书App

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

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

图片发自简书App

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

第二, 对齐。

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

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

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

图片发自简书App

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

第三, 重复。

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

图片发自简书App

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

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

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

第四, 对比。

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

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

图片发自简书App

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

图片发自简书App

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


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


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

图片发自简书App

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


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

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 设计有一些原则是共通的,不管是产品设计、平面设计、还是服装设计,设计的形式美法则都是通用的。前面跟大家也分享了一些...
    郑乔尹在旅游阅读 4,576评论 0 6
  • 前几天花了两天看完了一本设计入门书籍《写给大家看的设计书》,有所收获,于是便想记录下来。这篇笔记先写设计的四大原则...
    PMhome123阅读 13,201评论 0 11
  • 本书讲了什么 复杂的设计原理在本书中凝炼为亲密性、对齐、重复和对比这4个基本原则。作者以简洁明快的风格,将设计所必...
    少穻阅读 6,521评论 0 14
  • 为什么这个广告牌不吸引人? 是字体选择的问题吗? 是整体布局太单调还是太花哨? 是因为所有元素被散布在作品上? 没...
    有才华的老太太阅读 7,586评论 6 6
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92

友情链接更多精彩内容