文字排版四大原则,让你的页面更有设计感

文字排版是一个设计师的基本功,它决定了整个页面的风格倾向,也是最能体现设计细节的地方。

今天我就带大家一起探讨文字排版的一些门道。看完你就会知道,如何排版能让自己的页面更合理,更清晰,更加有设计感。这里推荐一本书——《写给大家看的设计书》[美] 威廉姆斯(Robbin Williams)著,本文就里面提到的四项原则来给大家详细解读文字排版的奥秘。这四项设计原则不仅适用于工作中的设计,在生活中的很多场景,都可以用到这种设计思维。


原则一:亲密性

如果元素之间是有关系的,那么他们应该在视觉上也相关。

如果内容之间是相关的,或者理解的意思上是存在关联的,那么在排版的时候就应该让他们彼此靠近。就像我们参加聚会总会找自己比较熟悉的人一起一样,相关性强的要在视觉上距离较近。

▲你会很容易发现红框中的元素是彼此相关的,因为他们靠得很近。你不会认为红框中的内容是和左边的大图相关。


▲我们可以很容易分辨图片底下的文字和图片是相关的,只看图片就可以猜想到它们在表达相同的信息,而且很轻松能够知道,标题和它旁边的内容文字是对应的。


原则二:对齐

▲对齐分为:左对齐、居中对齐、右对齐。

a、对于大段的文字,一个页面不要出现多种对齐方式,那样会显得页面很乱,没有规律可循。最好只使用一种对齐方式(全部左对齐、全部右对齐、或全部居中对齐)。但通常情况下不会使用居中对齐,除非你对版式设计已经非常娴熟。而对于只有一行的文字信息,排版可以灵活一些,寻找一个参考进行对齐。

▲左对齐的排版,在页面中显得非常规整、简洁,视觉上也很舒服。而对于只有一行显示的大标题,可以根据版面进行灵活调整,但也不是没有章法,和页面中的元素依然保持了对齐的关系。


▲如果一定要用居中对齐,那么将整段的文字看作一个整体(如图中红框),整体再进行左对齐或者右对齐。这样依然可以保持画面的统一性和协调性。


b、项目中的每一个元素都要确保和其它元素具有某种对齐关系。就像人不能脱离社会而生活,页面中的元素也不能脱离页面而存在,每个元素和其它元素之间都要存在某种对齐关系。

▲看似随意摆放的文字,也与其他元素有一定的对齐关系。


需要注意的是:很多设计师刚开始设计的时候,为了突出主题,正文使用左对齐,而对应的标题往往使用居中对齐,这里是错误的,和内文直接相关的标题一定要避免与内文采用不同的对齐方式!

▲知道了规则之后,也可以学着打破规则(如红框),如果页面中的对齐显得太刻意,可以适当打破这种呆板的感觉。即使是打破常规,也应有理有据,灵活运用。之前文章中讲过的栅格系统,在这里仍然适用,在规则之中打破规则,既有规律可循,又不那么呆板。


原则三:重复

设计元素要学会复用,让设计更有统一性和一致性,强化用户的使用印象,同时也有利于设计师提高效率。

可以复用的元素有很多:字体、颜色、留白、符号、版式、线条...,复用的元素不一定完全一致,但一定存在某种联系,这里跟模块化设计思维有异曲同工之处。

(试着找一下右图中有哪些元素是复用的)

▲但要注意,一个元素不要太多地进行重复,比如你一个页面全部用一个颜色的文字或色块,会很难找到重点在哪里,如果只用一种主色,页面也未免显得太过单调无聊。要学会变换着使用这一原则。


原则四:对比

对比会让页面更具吸引力,避免元素太过相似,同时拉开视觉层级,制造焦点。常见对比:大小对比、颜色对比、疏密对比、文字和留白对比、虚实对比,粗细对比等。

a、对比的重点是一定要大胆强烈!千万不要畏畏缩缩!不要拿28px的文字和29px的文字进行对比,大小太过相似。文字要增加对比最好以4的倍数递增,一般增加4的2倍,也就是8px为佳。现在很多APP使用的是流行的大标题,可以适当大一些,增加视觉对比。

▲不完全相同的元素就要有对比效果,既然要对比就要让它们截然不同,做到一目了然降低用户筛选信息的成本。


b、不要害怕让一些项很小,这样不仅便于与其他项形成对比,也能有更大的留白空间突出重点内容。如果读者不感兴趣,你字放多大他都不会去看,如果他感兴趣,你字很小也会去阅读,设计中经常会遇到客户让我们把字体再大点,logo再大点,就怕别人看不到,搞得很多设计师苦恼又没办法,以后就直接拿这项原则砸过去,有理有据。(不过实在不行该怂还得怂,毕竟饭碗比较重要)


tips:

除非是标题或装饰性文字,否则不要使用特殊字体,要保证内容的清晰易读。特别是大段的文字要尽量使用基础的字体,比如黑体或者宋体,这样阅读起来才不会费劲。 


文字排版四项原则:

原则一:亲密性

原则二:对齐

原则三:重复

原则四:对比

希望这篇文章能对你有帮助,关注我后期会有更多实战干货奉送!如果有兴趣和我一起探讨设计,可以公众号后台加阿倩微信(注明来意)

注:本文图片均来自网络,侵删!如需注明请后台联系我~

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

推荐阅读更多精彩内容