四大基本原则(上)

前一段时间,新东方因为年会上的一首歌上了热搜,歌词写的网友们感同身受。里面有一句歌词就是,干的累死累活,有成果那又如何,到头来干不过写ppt的。一个ppt写的好不好,内容还是其次,首先是写的能不能让用户有良好的阅读体验。其实不光是ppt,宣传册,论文,网页设计,广告设计等等都需要排版。那么怎么才能让你的设计看上去更专业,更有条理,更统一,也更有趣呢?今天我来给大家简单讲一下四大基本原则,相信大家看过之后,会对自己的作品有更深层次的理解。

亲密性(proximity)

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

看起来是不是很绕,其实用通俗的话讲,就是要把相关联的内容,放在一起,挨的近一些。就像很多人一起开一个party,你一眼看过去会发现有很多一坨一坨的人分散在各个角落,而那挨的近的一坨人肯定是比较亲近的关系了。排版也是一样,你要能先理解哪一部分是应该放在一起的,让它们之间的关系近一些,而一部分一部分的内容应该相对离的远一点,这样阅读的人就会知道,这是下一个部分了。


大家看看这张名片,是不是感觉看完这张名片的内容,需要很长时间。先看中间,然后再从左往右,从上往下的顺序观看,看完以后还会确认一遍自己是不是看完了全部的内容。名片上面的每一项看起来都像跟其他项没有关联,这样就不知道该从哪里开始哪里结束。如果我们把名片做一点调整,将相关的元素放在一起,使他们建立更近的亲密性,会怎么样。


从哪里开始阅读从哪里结束,是不是很轻松,阅读速度是不是也快了很多。仅仅利用这样简单一个概念,现在这张名片不论从理解上还是视觉上都更有条理,而且还能更清楚的表达信息。


亲密性原则不是说所有一切都要更靠近,大家看看这个页面,是不是有种不想看下去的感觉。虽然信息都是从上往下从左往右排列,符合人的阅读顺序,但是毫无阅读欲望。


现在关系是不是很清晰,我们可以一眼分辨出,哪些是属于哪个模块。阅读速度以及查找速度也变快了,更有条理更清晰。如果某些元素在理解上存在关联,或者相互之间存在某种关系,那么这些元素在视觉上也应当有关联。除此之外,其他孤立或元素组不应存在亲密关系。


小结

亲密性的根本目的是实现组织性。如果信息很有条理,将更容易阅读。也更容易被记住

微微眯起眼睛,统计眼睛停顿的次数来数一数页面上的元素,如果页面上超过3-5个元素,就要先将要表达的内容进行一个分组,然后再表现出来,同一组的内容要亲密一些,组跟组之间要留有余地。


避免一个页面上有太多孤立的元素。

不要在元素之间留出同样大小的空白,除非各组同属于一个子集。

在有很近亲密性元素之间建立关系,不属于同一组的元素之间不要建立关系。

不要仅仅因为有空白就把元素放在角落或中央。



对齐(alignment)

对齐原则是指:任何元素都不能在页面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系。

对齐是一个很好理解的概念,从小时候开始,就被要求整理房间,所有的东西都要整整齐齐的摆放;在教室里面,要求把所有的桌子都要跟前面对齐;在操场做操,要求跟前面的同学对齐。比起乱糟糟的队伍,排成一列的队伍是不是在视觉上更舒服,比起一团糟的房间,整理过的房间是不是更容易让你找到你要找的东西。对齐可以制造出一个安静的中心,它的表达更清晰


大家看这一张名片,在这个小小的空间里面,存在三种对齐方式,左对齐,右对齐和居中。上面两组没有沿基线对齐,下面两组也是。画基线是最好检验元素之间,是否缺少关联的方式。


现在我们将这张名片上面的元素按照亲密性原则进行区分以后,将所有的元素都移向左边,现在信息就看起来更有条理了。这些文本就有了一个共同的边界,这个边界把它们联系在了一起。


相信大家都记得在上一篇里面我们用了居中对齐,那么现在为什么又要左边对齐呢。居中对齐也是一种合法的对齐方式,但边界是的,看不出对齐线的强度。尽管这是一条看不见的线,但是在左对齐里面,它很明确,你看到这张名片就可以脑补出一条这样分明的线。正是这个边界的强度为布局提供了力度

居中对齐是初学者最常用的对齐方式,这种对齐看起来安全,更正式,更稳重,中规中矩,但通常会显得乏味。通过充分利用亲密性,并结合明确的右对齐或者左对齐,你会有不一样的感受。并不是一定不要居中,而是要留意这种对齐效果,是不是你想要表达的效果。


在进阶之前,最好坚持一个原则,只使用一种对齐方式,所有的文本都左对齐右对齐或者居中。如果你想要尝试在一个页面使用两种对齐方式,那么你就要让它们相互之间有某种联系


尽管这两个元素用了两种不同的对齐方式,左对齐和右对齐。但是下面右边界跟上文的右边界,被一条看不见的线连接了起来。在页面上放其他项的时候,一定要确保每一项都与页面上的其他项存在某种对齐。如果文本行水平摆放,则按其基线对齐。如果有多个单独的文本块,则对齐其左边界或者右边界。如果有图片元素,将其与页面的其他边界对齐绝对不要在页面上随意摆放元素。


小结

每个元素应当与页面上的另外一个元素存在某种视觉联系。对齐的根本目的就是使页面统一并且有条理。不论创建精美的、正式的、有趣的还是严肃的外观,通常都可以利用一种明确的对齐来达到目的。

要注意元素放在哪里,应当总能在页面上找出能跟它对齐的元素,尽管这两个元素的物理位置可能很远。


避免在页面上混合使用多种文本对齐方式。

尽力避免使用居中对齐,除非你有意识的想要创建一种比较正式、稳重的感觉。



参考书籍:写给大家看的设计书

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容