你真的会排版吗?

很多初学设计,或者设计基础一般的朋友,面对诸多元素不知道该如何排版,并且有的朋友会任何一处空白都不忍放过。其实排版也是有门道的,大体来说有四大法则:亲密性原则、对比、重复、对齐,只要熟练掌握了这四大法则,排版基本是就不会出问题了。如果有条件的朋友(其实大家都有条件,这本书不贵,不行就找我要电子版)可以买《写给大家看的设计书》。本文章就是参考的该书。好了废话不多说了,直接来把!

亲密性

亲密性原则就是将相关的项目组织在一起,将不相关的项目分开。简单来说就是将同一类元素距离近一些,紧密亲切一些。不是同一类的离得远远的。

举一个简单的栗子🌰:

这个栗子好吃不?

仔细看,左图就是没有利用亲密性原则,而是尽可能的把他们都罗列在一起。这样的结果会让人很难高效的找到自己想吃的,用户体验不友好。而右图就只是把四个汤往下放了放,汤和饭就可以明显的区分出来了。当然这里还用了对齐的原则,下一篇文章在讲。

我们来看看下面的这张又问题的名片,这是一个很典型的布局,很多人一般都会这样的布局,把四个边都填满,放上自己喜欢的东西,可是这样你会读起来很费力,眼睛需要转动好几圈才能读完所有信息并处理。

这是一张帅气但是有问题的名片

那如果多个信息之间存在某种关联,那他们就可以被放在一起。当然如果两个元素距离很近,就很容易把他们当成一个视觉单元,就像实际生活中一样:两个人总是走在一起,这俩人绝对有猫腻。亲密性(即紧密性)意味着存在关联。
来让我们一起来看看名片中有哪些可以归纳在一起:其实这张名片共两大分类,一类是个人信息,也就是电话地址微信这三个都是指的十里先生的个人信息。另一类是十里先生的名称和称谓,这可以归为一类。好,根据这个我们来进行一下排版。

这张才是真正迷人的名片

是不是读起来很容易了,也很容易被理解。仅仅只是简单的利用了这样的概念,这个名片不论从理论上还是从视觉上都很有条理。它还能准确的传达信息。

亲密性的使用很微妙,不过相当重要。布局的时候一定明确元素和其他元素是否在一起,留意无关元素。但是亲密性原则并不是说所有的一切的都要更靠近,比如上面的名片,也是先理解他们的性质是什么样的,同一性质的联系在一起,不同的就要区分。也就是说如果两个元素,在理解上存在关联或者两者之间存在某种联系,那就应该在一起,反之滚远点。(这是第二次强调)

但我们来看看,在下面的这个栗子中,从左图里,你能准确的得知活动涉及的主要知识吗?

这个栗子很脆

我们在看看右图,我们一眼就能看到上面罗列了几个知识点,因为每一个知识点都拉开了一定的距离,虽然六个都是知识要点,但是每一个都个顶个的凑在一起也会影响阅读,所以靠的近并不是合体,就像是恋爱一样,两个人恋爱了当然是要靠近一些了,但是彼此也应该给对方留有一些空间,这样才是正确的相处关系,彼此才不会因为距离过近产生厌烦,也不会因为没有距离而感到压抑。(当然右图我还运用了对比原则,也是后面的文章会讲给大家的)

最后再举一个栗子本章就结束了,还是以菜单为栗,这次升级了

是不是读起来贼费劲

上述问题就不多阐述了,让我们利用亲密性原则给他升级一下:

这个栗子半熟

依旧是不同对类别进行了简单对区分,效果就立竿见影了。但是价格信息还是很乱,虽然价格理论上是对齐了,跟着菜名,但是视觉上,所有的价格完全没有亲密关系,这样我们在升级一下:

这个栗子可以吃了

我们把价格全部右对齐,同时在增加一些点,让价格和菜名连接起来方便阅读。这样看是不是就好多了,其实市面上大多数的菜单都已经做到这点了,我们只是以这个作为栗子来学习亲密性原则。凡是所有需要排版的设计,包括平面、app、web等等的一切都要熟练运用这四大原则,这样我们的设计才是一个合格没有阅读障碍甚至看上去颜值颇高的作品。

好了今天初十,小编也是一个人留守空房写文章,希望大家能多多支持(甚至我还拿谈对象为栗子,哎)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容