页面排版学习笔记

 　　排版是什么？

　　排版是将文字、图片等元素在版面调整，使版面布局条理化的过程。一般来说，透过来版，让人们更容易的去阅读、接受这些提供给他们的资讯。

　　为什么要提供良好的排版？

　　一个良好的资讯传递需要几个要素来达成，分别是对的内容与对的方式以及对的人，唯有这三个要素都成立的时候，资讯就能够有效率的被使用者给接受。排版扮演着内容与使用者之间沟通的桥梁，良好的版面设计让使用者不需要特别的努力、训练就可以瞭解提供的内容;相反，糟糕的排版可能会让使用者拒绝接受这些内容。

　　排版最重要的四个要点

　　排版设计中有非常多需要注意的细节，各种细节也会因为不同的情境、需求而不同，底下列出了四项排版最重要的要点，如下：

　　1. 对齐（Alignment）

　　任何东西都不能随意摆放，每一个元素之间都有某种视觉关系。利用对齐建立一个清楚整齐的外观。

　　2. 亲密（Proximity）

　　彼此相关的内容应靠在一起，反之不相关的内容保持距离。利用亲密性，强调画面的组织与架构 。

　　3. 重复（Repetition）

　　重复视觉要素的颜色、字体、大小、空间等，增强条理性，也增强了整体一致性。

　　4. 对比（Contrast）

　　避免页面上元素太过相似，如果它们不同，哪就让他们截然不同。让重要的内容引人注目 ，让使用者间看到它们。

　　参考资料：写给大家看的设计书、完形心理学

　　文字排版要点

　　文字是内容的本质，人们透过文字、句子来阐述知识，让我们透过瞭解文字排版，让文字更容易被阅读、被接受：

　　1. 使用适合阅读的字体

　　字体大小与使用者萤幕大小、使用距离有关，清楚瞭解使用者使用的环境与习惯后，选择一个适当的大小。

　　2. 选用适当的字体

　　有些中文字体的英文版本其实是不合适的，挑选与中文字体相对应的英文字体作为搭配的字体。

　　3. 设定恰当的行高

　　也就是“文字密度”，太挤的文字在换行时，眼睛不容易找到下一行的起点，较不容易阅读。

　　4. 设定恰当的段距

　　清楚的段落区分，让读者可以清楚地瞭解现在正在阅读的段落。

　　5. 注意段落的宽度

　　注意文字最后显示的设备大小，太宽或太窄的段落宽度都会造成阅读上的困难，一行文字以45字元~75字元是比较恰当的。

　　6. 清楚的区分标题与内文

　　使用对比的方式(例如颜色、大小、位置)将内文与标题清楚的区分开来。

　　从认知心理学看排版

　　人们会将邻近的事物视为一体

　　红色跟蓝色放在一起容易疲劳

　　大写文字难以阅读

　　阅读与理解是截然不同的两件事

　　如果人们感觉这个字体不易阅读，他们会把这种困难的感觉转化至文意本身，并因此觉得文章所谈到的内容难以执行或难以理解。

　　较长的栏宽能提高阅读效率，但人们偏好较短的栏宽。

　　适时的应用进阶展开，减少一次显示的资讯数量

　　分类资讯

　　提供明显的线索

　　参考资料：瞭解人，你才知道怎么设计

　　从设计法则学习排版

　　80/20法则

　　不要对设计中所有的元素一视同仁。应该利用80/20法则来评估各元素的价值、锁定重新设计与最佳化。

　　希克定律(Hick’s law)

　　当选项增加了，下决定的时间也增加。

　　倒金字塔法则

　　以重要性递减的顺序呈现资讯。先呈现最重要的资讯，之后才是附加的详细资料。当呈现资料的效率很重要时，就使用倒金字塔法则。

　　提高信噪比

　　同一显示中，相关资讯与不相关资讯的比例，在不影响功能的原则下，必要元素应该尽量减到最少。

　　使用基本元素，让使用者安心

　　人们在数为世界的心智模型，常常是建立在对这些基本元素的瞭解，不管是网页或者是App，画面中的某些常见元素早已变成基本构成要素，使用者渴望或者预期他们能够在网页上看到些元素，已完成特定的任务，有安心的感受。

　　易视性

　　只使用者于使用产品的过程中，能够顺利达成特定目标的容易程度，让使用者可以看清楚产品的状态，并且轻松推荐可以采取的动作。易视性决定了app该呈现的关键内容是什么。

　　进阶展开(Progressive Disclosure)

　　进阶展开主要强调提供给使用者当下所需要的内容，其他没有助益的内容、控制项暂时不提供，直到使用者在各类别做选择后，才展开更多的相关细节。

　　利用进阶展开的方式，可以减少使用者的认知负担。

　　把资讯内容归纳于少数几个选项，在分阶段渐渐释出细节，简要呈现当下所需的资讯，不只能降低使用者认知负担，更可以避免丰富的选择堵塞使用者的思绪。

　　分组(Grouping)

　　完形心理学

　　分组是一种组织资讯的技巧，将众多的资讯依照特定方式分类为几组，在同一组的内容相关性较高，不同组内容差异性大，面对庞大资讯时，可以利用这个方式减少压迫感。

　　参考资料：设计法则

　　从遥控器上学习排版

　　DVD 遥控器是一个极度复杂的工具，上头除了电源、播放、暂停等基本功能外，还会参杂着其他各式各样的功能，零零种种加起来大约有40多个按钮，每个按钮对应各种功能…

　　我们可以从以下几种方式，来简化复杂的遥控器：

　　- 删除 – 去掉不必要的按钮

　　- 组织 – 按照有意义的方式分组

　　- 隐藏 – 隐藏不必要的按钮

　　- 转移 – 转移不必要的功能到其他地方

　　其他要点

　　尽量使用单列版型而不是多列版型

　　使用良好的预设值而不是给使用者选择

　　使用良好的预设值减少使用者的操作

　　界面要有鲜明的对比让使用者容易区分

　　精简表单的内容

　　不要在页面上放太多的连结，这样会分散使用者的注意力

　　提供直觉的操作

　　不要过度使用边框，这样会让界面四分五裂

　　使用基本元件而不是重新设计

　　将有关联的事物进行分组

　　让点击区域大一点

　　如果提供太多的选择，使用者反而一个都不会选

　　使用社群验证的方式，让

　　易读的标题

　　易于阅览的文本

　　善用留白，营造清爽干净的感觉

　　界面风格一致性很重要

　　注意文字的密度

　　突出画面上重要元素

　　一图胜千言

　　把文字看作是使用者界面(UI)的一部份

　　尽量不需要scroll就能看到主要的内容

　　蓝色往往是最适合连结的颜色

　　搜寻框尽可能为27个字元的宽度

　　留白让内容更容易被理解

　　大多数的人视广告为无物

　　少即是多

　　限制页面内容的长度.

　　参考设计规范

　　观察界面的视觉动线

　　导航列要放在清楚的位置，如果导航列的项目是网站的核心，请勿必让导航列出现在每一个画面上

　　使用响应式设计

　　把重要的资讯放在列表的最上方

　　在输入栏位旁提供提示、范例

　　在送出表单前进行栏位错误的检查

　　让使用者清楚知道点击哪里进行下一步

　　在所有的页面上显示你的服务名称、Logo

　　避免使用全大写的英文，除非是特别用来强调的标题内容

　　为各种设备调整适当的字体大小

　　你要考虑不同设备的阅读距离的不同

　　把你的Logo放在固定的位置上，并确保点击它能够返回到最初的页面

　　关于Label的位置

　　在表单排版设计中，标签的位置如何摆放是一个很常见的问题，SitePoint上有一篇文章，完整地分析各种摆放的好处与坏处，非常值得阅读。