精华!页面排版学习笔记要点

1、精华！页面排版学习笔记要点本文转自UI中国，作者：奥革士排版是什么？排版是将文字、图片等元素在版面调整，使版面布局条理化 的过程。一般来说，透过来版，让人们更容易的去阅读、接 受这些提供给他们的资讯。为什么要提供良好的排版？一个良好的资讯传递需要几个要素来达成，分别是对的内容 与对的方式以及对的人，唯有这三个要素都成立的时候，资 讯就能够有效率的被使用者给接受。排版扮演着内容与使用 者之间沟通的桥梁，良好的版面设计让使用者不需要特别的 努力、训练就可以瞭解提供的内容；相反，糟糕的排版可能 会让使用者拒绝接受这些内容。排版最重要的四个要点 排版设计中有非常多需要注意的细节，各种细节也会因为不 同

2、的情境、需求而不同，底下列出了四项排版最重要的要点， 如下：对齐(Alignment)任何东西都不能随意摆放，每一个元素之间都有某种视觉关 系。利用对齐建立一个清楚整齐的外观。亲密(Proximity)彼此相关的内容应靠在一起，反之不相关的内容保持距离。 利用亲密性，强调画面的组织与架构。重复(Repetition)重复视觉要素的颜色、字体、大小、空间等，增强条理性， 也增强了整体一致性。对比(Contrast)避免页面上元素太过相似，如果它们不同，哪就让他们截然 不同。让重要的内容引人注目，让使用者间看到它们。参考资料：写给大家看的设计书、完形心理学文字排版要点 文字是内容的本质，人们透过文

3、字、句子来阐述知识，让我 们透过瞭解文字排版，让文字更容易被阅读、被接受：使用适合阅读的字体字体大小与使用者萤幕大小、使用距离有关，清楚瞭解使用 者使用的环境与习惯后，选择一个适当的大小。选用适当的字体有些中文字体的英文版本其实是不合适的，挑选与中文字体 相对应的英文字体作为搭配的字体。设定恰当的行高也就是“文字密度”，太挤的文字在换行时，眼睛不容易找 到下一行的起点，较不容易阅读。设定恰当的段距清楚的段落区分，让读者可以清楚地瞭解现在正在阅读的段 落。注意段落的宽度 注意文字最后显示的设备大小，太宽或太窄的段落宽度都会 造成阅读上的困难，一行文字以45字元75字元是比较恰当 的。清楚的区分标

4、题与内文使用对比的方式(例如颜色、大小、位置)将内文与标题清 楚的区分开来。从认知心理学看排版人们会将邻近的事物视 为一体红色跟蓝色放在一起容易疲劳大写文字难以阅读阅读与理解是截然不同的两件事如果人们感觉这个字体不易阅读，他们会把这种困难的感觉 转化至文意本身，并因此觉得文章所谈到的内容难以执行或 难以理解。较长的栏宽能提高阅读效率，但人们偏好较短的栏宽。适时的应用进阶展开，减少一次显示的资讯数量分类资讯提供明显的线索参考资料：瞭解人，你才知道怎么设计从设 计法则学习排版80/20法则不要对设计中所有的元素一视同仁。应该利用80/20法则来 评估各元素的价值、锁定重新设计与最佳化。希克定律(H

5、ick s law)当选项增加了，下决定的时间也增加。倒金字塔法则以重要性递减的顺序呈现资讯。先呈现最重要的资讯，之后 才是附加的详细资料。当呈现资料的效率很重要时，就使用 倒金字塔法则。提高信噪比同一显示中，相关资讯与不相关资讯的比例，在不影响功能 的原则下，必要元素应该尽量减到最少。使用基本元素，让 使用者安心人们在数为世界的心智模型，常常是建立在对这些基本元素 的瞭解，不管是网页或者是App，画面中的某些常见元素早 已变成基本构成要素，使用者渴望或者预期他们能够在网页 上看到些元素，已完成特定的任务，有安心的感受。易视性 只使用者于使用产品的过程中，能够顺利达成特定目标的容 易程度，让使

6、用者可以看清楚产品的状态，并且轻松推荐可 以采取的动作。易视性决定了 app该呈现的关键内容是什么。 进阶展开(Progressive Disclosure)进阶展开主要强调提供给使用者当下所需要的内容，其他没 有助益的内容、控制项暂时不提供，直到使用者在各类别做 选择后，才展开更多的相关细节。利用进阶展开的方式，可以减少使用者的认知负担。把资讯内容归纳于少数几个选项，在分阶段渐渐释出细节， 简要呈现当下所需的资讯，不只能降低使用者认知负担，更 可以避免丰富的选择堵塞使用者的思绪。分组(Grouping ) 完形心理学分组是一种组织资讯的技巧，将众多的资讯依照特定方式分 类为几组，在同一组的内

7、容相关性较高，不同组内容差异性 大，面对庞大资讯时，可以利用这个方式减少压迫感。参考 资料：设计法则从遥控器上学习排版DVD遥控器是一个极度复杂的工具，上头除了电源、播放、 暂停等基本功能外，还会参杂着其他各式各样的功能，零零 种种加起来大约有40多个按钮，每个按钮对应各种功能 我们可以从以下几种方式，来简化复杂的遥控器：-删除 -去掉不必要的按钮-组织-按照有意义的方式分组 -隐藏-隐藏不必要的按钮-转移-转移不必要的 功能到其他地方其他要点80/20法则不要对设计中所有的元素一视同仁。应该利用80/20法则来 评估各元素的价值、锁定重新设计与最佳化。希克定律(Hick s law)当选项增

8、加了，下决定的时间也增加。倒金字塔法则以重要性递减的顺序呈现资讯。先呈现最重要的资讯，之后 才是附加的详细资料。当呈现资料的效率很重要时，就使用倒金字塔法则。提高信噪比同一显示中，相关资讯与不相关资讯的比例，在不影响功能 的原则下，必要元素应该尽量减到最少。使用基本元素，让使用者安心人们在数为世界的心智模型，常常是建立在对这些基本元素 的瞭解，不管是网页或者是App，画面中的某些常见元素早 已变成基本构成要素，使用者渴望或者预期他们能够在网页 上看到些元素，已完成特定的任务，有安心的感受。易视性只使用者于使用产品的过程中，能够顺利达成特定目标的容 易程度，让使用者可以看清楚产品的状态，并且轻松推荐可 以采取的动作。易视性决定了 app该呈现的关键内容是什么。进阶展开(Progressive Disclosure)进阶展开主要强调提供给使用者当下所需要的内容，其他没 有助益的内容、控制项暂时不提供，直到使用者在各类别做 选择后，才展开更多的相关细节。利用进阶展开的方式，可以减少使用者的认知负担。把资讯内容归纳于少数几个选项，在分阶段渐渐释出细节， 简要呈现当下所需的资讯，不只能降低使用者认知负担，更 可以避免丰富的选择堵塞使用者的思绪。分组