会设计的光头强

排版是什么？

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

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

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

排版最重要的四个要点

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

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放在固定的位置上，并确保点击它能够返回到最初的页面