排版六原则

标签: 排版 六原 | 发表时间:2010-10-19 17:18 | 作者:阮一峰 沈裔
出处:http://ucdchina.com/rss/all

上个月,我贴了《图形化简历》

几天后,就收到了秋叶老师的来信,希望与我探讨一些设计问题。他写过一本畅销书《说服力-让你的PPT会说话》,眼下正在写续集。

我看了新书的样章,觉得很不错,有些内容很值得分享。

====================================

首先,我们先看一个例子。良好的设计如何使得一个平庸的文档脱胎换骨。下面是一张大学生的求职简历,再普通不过了,想要引起招聘经理的注意,恐怕很难。

秋叶老师对它进行了简单的排版,还是一张表格,还是黑白配色,没有使用任何图形元素,效果却完全不一样了。

真是令人眼前一亮,不由自主地想多看几眼。这就是优秀设计的作用:它让你脱颖而出。

====================================

秋叶老师把他的排版心得,总结为六个原则:对齐,聚拢,重复,对比,强调,留白。我是这样理解的:

一、对齐原则

相关内容必须对齐,次级标题必须缩进,方便读者视线快速移动,一眼看到最重要的信息。

二、聚拢原则

将内容分成几个区域,相关内容都聚在一个区域中。段间距应该大于段内的行距。

三、留白原则

千万不要把页面排得密密麻麻,要留出一定的空白,这本身就是对页面的分隔。这样既减少了页面的压迫感,又可以引导读者视线,突出重点内容。

四、降噪原则

颜色过多、字数过多、图形过繁,都是分散读者注意力的"噪音"。

五、重复原则

重要信息值得重复出现。

六、对比原则

加大不同元素的视觉差异。这样既增加了页面的活泼,又方便读者集中注意力阅读某一个子区域。

====================================

下面用一个PPT的例子,演示排版六原则。

上面这张ppt有两个毛病。一是字数太多,抓不住重点;二是右边没有对齐,使得读者的视线只能一行行地从行首到行尾移动,不能直上直下。

现在进行修改。

第一步,根据"聚拢原则",将六点分成六个区域。

第二步,根据"降噪原则",将每一点分成"小标题"和"说明文字"两部分。

第三步,根据"对齐原则",将每一个部分、每一种元素对齐。

第四步,根据"对比原则",加大"小标题"和"说明文字"在字体和颜色上的差异。

第五步,根据"留白原则",留出一定的空白。

页面的可读性大大增加。

(完)

源地址:http://www.ruanyifeng.com/blog/2010/10/six_principles_of_layout_design.html

相关 [排版 六原] 推荐:

排版六原则

- 沈裔 - 所有文章 - UCD大社区
几天后,就收到了秋叶老师的来信,希望与我探讨一些设计问题. 他写过一本畅销书《说服力-让你的PPT会说话》,眼下正在写续集. 我看了新书的样章,觉得很不错,有些内容很值得分享. 良好的设计如何使得一个平庸的文档脱胎换骨. 下面是一张大学生的求职简历,再普通不过了,想要引起招聘经理的注意,恐怕很难. 秋叶老师对它进行了简单的排版,还是一张表格,还是黑白配色,没有使用任何图形元素,效果却完全不一样了.

WEB设计中的排版

- - 互联网的那点事
首先谈一下“Metro”——由微软公司开发内部名称为“ typography-based design language”(基于排版的设计语言). Metro是基于瑞士平面设计的设计原则(清晰,真实,美观),来源于交通指示牌. 生活中人们行色匆匆,更需要提供快速,简洁,直接,明确的设计. 现在的互联网又何尝不是如此,快捷获取信息的同时,信息泛滥、庞杂无序,简洁之风深入人心——减少元素,以显现本质.

CSS排版:技术与最佳实践

- SmallColor - RockUX | WEB、前端、JavaScript、PHP
在这个系列的第一部分,我们讨论了一些与CSS排版的基础概念. 现在我们将讨论一些出色的技术,建议,技巧以及处理网站排版的最佳实践. 这是CSS排版参考三篇系列中的第二部分,这三篇将涵盖从基本语法到最佳实践,以及CSS排版相关工具的内容. 用@font-face改善网页排版. 对于普通文本块,使用巧妙的字体栈(如第一部分讨论的)是一个不错的主意,但是对于标题和短文本块,可以借助@font-face使用更多有趣的字体.

完美排版的10个基本功

- - 优设(UISDC)
挑选合适的字体需要花费大量时间. 但是不要一遍又一遍地让自己陷入对同一类型的字体挑选中. 因为人们往往习惯于从自己熟悉的字体或者偏爱的字体开始. 多花些时间去发现探索新的类型,这样你才能慢慢地发现自己对一种字体的细微差别的敏锐度,真正地让字体自己告诉你合适不合适. 如果你的一个页面里有十种不同的字体,那么你的排版一定会很难看.

排版助手Gidot Typesetter 3.1绿色中文版-强大的文章自动排版工具

- - 亿品元素设计资源
排版助手Gidot Typesetter (绿色中文版)是一款相当强大的 文章自动排版工具软件. 具有繁简字体相互转换、段落智能修正、去除文章干扰符、修正段落首尾空格、全角半角随意互换、修正标点符号、一键排版(拷贝即排版)等多种实用的 文字排版功能,是新闻采集员、编辑、文摘网及有 文章排版需求者的必备工具.

讨论:长文的数字排版与阅读

- box7 - Type is Beautiful
长文的排版与设计是我们一直以来的困惑. 我们在设计这个网站新版本的时候也遇到这样的问题. 我们把讨论时的问题提出来,论点由三位作者提出,也希望大家能够参考和讨论. 以下的讨论是我们最近一些想法的汇总,可能漏掉了一些重点或有失偏颇,还请大家指正. 具有相当篇幅、以纯文字为主的内容之宏观排版和交互设计是我们讨论的重心,短文和多媒体交互则不在讨论范围.

SpringPublisher 免費桌面排版軟體,可設計名片、傳單…

- 老老牛 - 免費資源網路社群
SpringPublisher 是一款專業易用的桌面應用程式,讓使用者可以快速設計及印製名片、傳單、明信片或是信箋,這套軟體分為免費和專業版,免費版雖擁有全部的功能,但只能夠使用最高 96/180 DPI 一般品質輸出圖檔,且沒有範本可以下載使用. 網站名稱:SpringPublisher. 網站鏈結:http://www.springpublisher.com/ (免費下載).

45个网页中充满创意的字体排版

- Choope - 帕兰映像
印刷排版的历史或许和人类的历史几乎一样长. 大字体能够很快捉住网页浏览者的注意力. 在网页设计时,选择一个正确的字体排版方案是首要考虑的工作. 事实上,文字拥有的力量能将原有的设计彻底颠覆. 由于大字体能将网页信息大声呼喊出来,用户体验因此得到激发,因此大字体深得设计师们的喜爱. 大字体可以运用在网页的任何地方,如果用在页头,它显得很酷;如果用在文字内容中,它显得很威风;如果用在标记行上则能更加醒目.

ChinaTeX数学排版常见问题集V1.1发布了

- 卡卡 - LaTeX-学习园地
选自:http://www.chinatex.org 首页新闻. 感谢 TeX 用户的热心反馈,这一次修改了上一版中的排版错误,去掉了些冗余的内容. 文档下载:http://ftp.chinatex.org/document/FAQ/ChinaTeXMathFAQ_V1.1.pdf. 讨论贴为:http://bbs.chinatex.org/forum.php?mod=viewthread&tid=7250&extra=page=1.