OM19's Time

欢迎转载，转载请注明出处
因鄙人学识薄浅，难免有些纰漏，还望大家给我指出。非常感谢！

我们每天设计都在与字体打交道。但是我们一直没有认真在意他们的存在。我们没有很好地使用过他们，甚至滥用他们。这一切是因为我们不了解他们。Information Architects 上大声喊道：95%的网页设计是排版设计(Web Design is 95% Typography) 。是的，字体是排版的重要元素之一；字体设计也是设计里最深奥的一门学问之一。那么，我们开始吧：

字体的类型

英文字体(Typeface)，分为几种大类，这是在使用英文字体的时候必须知道的基本知识：

一、衬线体(Serif)

这里，我们首先要解释什么是衬线。

衬线(serif)就是笔画边缘的装饰部分。

下图中红色标注的地方就是衬线啦。

衬线设计的初衷是为了更清楚地标明笔触的末端，提高辨识率，提高阅读速度。另外，使用衬线字体会让人感觉更加的正统。所以我们常见的英文书籍，特别是论文、小说，很多都是使用衬线体来完成正文的。

网页设计中常用的衬线体有Times New Roman和Georgia。下图左边是12px的Times New Roman字体，右边是12px的Georgia。

在中文里，我们使用的宋体就是对应的衬线字体。

二、非衬线体/无衬线体(Sans-serif)

字体如果不带衬线的话，那么就称为非衬线体或者无衬线体。下图就是非衬线体啦。

网页设计中常用的非衬线体相对就比较多了。有Arial、Verdana、Tahoma、Helivetica、Calibri等。下图从左到右依次是Arial、Verdana、Tahoma:

在中文里，我们使用的黑体就是对应的衬线字体。

值得注意的是，虽然在书籍中，衬线字体被广泛地应用，但是在互联网上，衬线字体很少被使用。由于电脑屏幕分辨率与书籍不具可比性，所以正文10～12px的 衬线字体在电脑屏幕上是很难辨认的。下图是没有Cleartype时，10px的Verdana和10px的Times New Roman的对比。大家可以发现，左侧的Verdana可以被很好的辨识。右侧的Times New Roman辨认相当困难。

三、等宽字体(Monospace)

等宽字体事实上只针对西文字体。因为英文字母的宽度各不相同。例如i就要比m窄很多。编程时显示代码，如果字母不等宽那么排版将很难看。我们在DOS命令行中，可以看到使用的是等宽字体。

编程要求的等宽字体有如下要求：

1. 所有字符等宽；
2. 简洁、清晰、规范的字符形体；
3. 支持ASCII码为128以上的扩展字符集；
4. 空白字符(ASCII: 0x20)与其他字符等宽；
5. “1”、“l”和“i”等三个字符易于区分；
6. “0”、“o”和“O”等三个字符易于区分；
7. 双引号、单引号的前后部分易于区分，最好是镜像对称的；
8. 清晰的标点符号外形，尤其是大括符、圆括符和方括符。

常见的等宽字体有Courier，Courier New

四、手写体(Calligraphy)

顾名思义，手写体就是手写风格的字体。有时我们也叫它书法字体。中文的书法字体大多都比较生硬。个人更推荐使用日文的书法字体。日文书法字体跟加柔美，更人性。但时使用日文书法字体缺点就是大都都是繁体，另外很多汉字会缺少。

五、符号体(Symbol)

Windows里最著名的符号体就是Webdings(记得以前还在Windows 95的时候蛮爱用的……)。下面是Webdings字体的几个：

字体的样式

常见的字体的样式分为：正常Normal、粗体Bold、斜体Italic。

简单来说，粗体就是字体会更加黑，更加“粗”。斜体就是将字轴微微倾斜。他们都是用于在篇幅内强调某段文字上。

在说到粗体的时候，我们很容易联想到CSS里的font-weight(字重)属性。我们知道font-weight(字重)属性值除了我们平常使用的 normal，bold外，还有bolder,lighter,100~900等属性。那么这个100～900的值是什么呢？事实上，100～900并没 有单位。优秀的字体会对不同的字重提供不同的设计。如果字体事先内置了不同等级的粗细程度的设计，那么这几个数值将分别对应每个等级。例如Zurich字 体，就包含了Zurich Light、Zurich Regular、Zurich Medium、Zurich Bold、Zurich Black、Zurich UltraBlack六个字体。这样一来，Zurich Light对应的就是100、200、300三个数值，Zurich Reg
ular对应的就是400也就是“正常 normal”，Zurich Medium对应的是500，Zurich Bold也就是“粗体 bold”对应的是600、700，Zurich Black对应800，最后，Zurich UltraBlack对应的是900。

对于中文斜体，一般在网络上是不使用的。因为中文笔画繁多，使用了斜体将难以辨认。

单位

我们的Web设计中会用到一些单位，我在此也列出一部分：

点(pt、point)

72 points = 1 inch，1英寸是72点。就这么简单:)

另外，1皮卡(pica)=12 points

像素(pixel、px)

像素就是电脑屏幕上的一个最小的图像单元，通俗地说就是屏幕上最小的一个点。

DPI、PPI

DPI 全称是Dots Per Inch，点每英寸，PPI全称是Pixel Per Inch。他们是解析度(Resolution)的单位。也就是说，1inch的长度上能安排多少个点(像素)。举个例子，一般的，我们的显示器大概是 72ppi，也就是1英寸的长度上，有72个点(像素)。dpi/ppi越高，解析度就越高，也就是说，颗粒越小，图像越细腻。一般来说，照片的解析度在 240dpi～300dpi之间，所以为什么照片看起来，要比屏幕上看起来要细致得多。杂志印刷用133或150dpi，高品质书籍采用350－400dpi，因为大多数印刷精美的书籍印刷时用175到200dpi。所以为什么同样物理大小的文字，在书上看，要比在屏幕上看要清晰得多。也就是我们前面提到的，英文书籍印刷，为什么可以大胆得使用Sans-serif字体。

dpi和ppi之间实质上没有差别。实在要找出差别，那么唯一的差别也许在于dpi常常用于描述扫描仪和打印机，而ppi常常描述屏幕的分辨率。

ex、x-height

常在CSS中使用。1ex = 小写字母x的高度。

em

常在CSS中使用。当然，em可不是表示小写字母m的高度(事实上，小写字母m一般和小写字母x的高度是一样的)。1em = 字体的大小的100%。是一个倍数单位。

间距

行距(Line-height、Leading)

说到行距(行间距、Line-height、Leading)，我们必须先要学习一个术语叫做基线(baseline)。还记得我们刚学英语的时候写字母用 的那个线格簿子吗？那根最粗的横线就是我们说的基线。基线就是大部分字母所“坐”在的，字体的下降部之上的直线。大部分字体，大写字母总是紧贴基线，并在 基线之上。中文的字体和英文的大写字母情况一样。下图红色的线就是基线。

那么，行距就是指两个相邻的行之间，基线的距离。行间距的单位常常使用em，也就是根据字体大小来定义行距。在浏览器中，默认的行距并没有一个准则。更具 W3C提供的建议，它认为默认的行距应该在1.0em到1.2em之间。事实上，在设定行距的时候，排版上有个原则，就是行与行之间的空隙一定要大于单词与单词之间的空隙， 否则的话，阅读者在阅读的时候容易“串行”，造成阅读困难。充足的行距可以隔开每行文字，使得眼睛容易区分上一行或下一行。近几年Web上对于正文的排 版，大多喜欢1.5em的行距，尤其是中文网站。也就是如果使用了12px的字体大小，那么设计师常常喜欢18px的行距。1.5em确实是一个很好的经 验值。事实上，中文的论文的规范也是使用1.5em的行距。

字间距(Letter-spacing、Tracking)

字间距是指一组字母之间相互间隔的距离。字间距影响了一行或者一个段落的文字的密度。

字距调整(Kerning)

字距调整是一种因视觉需要而做的技术处理。简单说，在两个特定的字符连排的时候，你可以为它们单独指定与众不同的字间距。比如当一个大写A后面跟随一个小写 v的时候，两个字符间就会出现视觉上的更大的间距(实际上字间距是一样的)，这是普通的字符间距所无法解决的。如果减少它们的间距，那么其他的字母就会连 成一团。这时候就需要字距调整来处理了。下图就是一个应用了字距调整的例子：

段落

行长(Measure)

行长是指一段文字的宽度。如下图：

有两个易读性问题与行长有关：

1. 行长越长，需要的越大的行距。行距太小，读者阅读换行时容易串行。行距太大，读者阅读行时会感觉到文字不连续。
2. 正文中，每行40~70个字母为宜。

对齐(Alignment)

段落的对齐基本有四种：左对齐(flush left)、右对齐(flush right)、居中对齐(centered)和两端对齐(justified)。

左对齐是指

设置文本内容，调整文字的水平间距，使段落或者文章中的文字沿水平方向向左对齐的一种对齐方式。左对齐使文章左侧文字具有整齐的边缘。

同时文字的右边就会不整齐。所以英文对左对齐也叫做ragged right，意指外形参差不齐的右边。右对齐也类同。
居中对齐是指

设置文本内容，调整文字的水平间距，使段落或者文章中的文字沿水平方向向中间集中对齐的一种对齐方式。居中对齐使文章两侧文字整齐地向中间集中，使整个段落或整篇文章都整齐的

两端对齐是指

设置文本内容两端，调整文字/单词的水平间距，使其均匀分布在左右页边距之间。两端对齐使两侧文字具有整齐的边缘。

使用两端对齐之后，两侧的对齐线会很明晰，文本块的“快”的感觉也会很明显。但是，在英文排版中，当行长很短的时候，使用两端对齐可能会照成某些行词间距过长，某些行词间距过短，这样参差不齐的词间距会感觉十分凌乱，就像一件到处都是补丁的衣服。

易读性

易读性描述的是排印文本阅读时的轻松和舒适程度。实际上，平常的设计的最根本的目的也在于此。除上文中叙述的一些原则外，我另外收罗了一些小小的易读性原则，与大家分享

：

• 一份设计上至多使用三种字体的大小。
• 一份设计上至多使用三种字体。
• 要保证一定的对比度，但又不可有过度的对比。阳文（白底黑字）比阴文（黑底白字）要更容易阅读。在#fff的背景上，使用#333的文字要比#000的文字看起来舒服。
• 要注意文字所在的背景。背景要单一。避免背景噪声。
• “少即是多” 用最少的元素去传达最多的信息。
• 让你的链接看起来像是一个链接。
• 利用好你的空间。推荐Alistapart上的文章 Whitespace

映射就是控制装置与其对应的动作和效果之间的关系。控制装置与效果之间关系良好的映射会更方便使用。
如果你看过《设计心理学》、《About Face》等等，你会发现，几乎所有的交互书籍都会提到映射。最常见的例子莫过于燃气灶。例子还有如：开车方向盘向左，车就向左。
我们来看看其他的例子。
这是杭州的机场大巴上顶部控制器。它控制了四项功能：顶灯、空调方向、请求服务、请求停车。

好，现在问题来了：
问：左上角的红色顶灯按钮是控制那盏灯的？
答：我不试，我绝对不知道。
对比飞机上的顶部控制器。可以发现，使用者很容易将某个顶灯控制按钮与相对应的顶灯联系在一起。

飞机上的顶灯控制钮就是利用了邻近原则实现了映射——通常认为紧挨一起的元素比远隔的元素关系更紧密。
对于机场大巴上的顶灯控制器，我建议可以这么改进，将两个顶灯的按钮分别安排在左下和右上。这样就完成了良好的映射。

启示是认知心理学家James J. Gibson提出的理论。它指 the actionable properties between the world and an actor (a person or animal)。在设计中，Cooper说“启示”专指“我们认为对象能够做什么，而不是它实际能做什么”。一个按钮就要像一个按钮，用户知道可以点击，点击表示行为；一个链接要像一个链接，用户知道可点击，点击后页面跳转；一个输入框就要像一个输入框，用户知道这里能输入……
好，回到机场大巴上顶部控制器。
问：圆心的那个“按钮”是干什么的？
答：圆心的那个压根不是按钮！
但是确实中间那“按钮”的样子和其他的按钮高度类似。猜想设计师一定是觉得中间好像空了点什么，于是画蛇添足加上了它。

同样，经过认真设计的飞机顶控还有很多可圈可点的运用启示的地方，例如它能够将灯和空调口在外观上明显区分开来，而大巴上，设计师看似巴不得他俩长得一样。

相关阅读：用户在做些什么？（上）What Users Do (Part A)

6. incremental construction 逐步创建

"Let me change this. That doesn’t look right; let me change it again. That’s better."

“我来把这改了。看起来不太对；我再改改。这样好些了。”

When people create things, they don’t usually do it all at once. Even an expert doesn’t start at the beginning, work through the creation process methodically, and come out with something perfect and finished at the end.

当用户创建东西的时候，他们呢常常不会一次性做完。

7. habituation 习惯

"That gesture works everywhere else; why doesn’t it work here, too?"

“这玩意儿别的地方都是那样的；为什么这里不是？”

When one uses an interface repeatedly, some frequently used physical actions become reflexive: typing Control-S to save a document, clicking the Back button to leave a web page, pressing Return to close a modal dialog box, using gestures to show and hide windows, or even pressing a car’s brake pedal. The user no longer needs to think consciously about these actions. They’ve become habitual.

当用户重复地使用某个界面是，一些经常发生的物理操作就变成了反射：ctrl+s保存，退后，模态对话框中按回车关闭对话框。用户对这些操作不假思索。这些成为了习惯。

8. spatial memory 空间性的记忆

"I swear that button was here a minute ago. Where did it go?"

“刚才这按钮确实在这儿啊。跑哪儿去了？”

When people manipulate objects and documents, they often find them again later by remembering where they are, not what they’re named.

当人们使用对象或者文档的时候，他们是通过位置再次找到他们，而不是通过他们的名字。

Along with habituation, which is closely related, spatial memory is another reason why consistency across and within applications is good. People may expect to find similar functionality in similar places.

和与空间性记忆联系紧密的习惯一样，它俩都能解释为什么贯穿整个程序的一致性是好的。人们可能希望在同一个地方发现相似的功能。

Also, this is why changing menus dynamically sometimes backfires. People get used to seeing certain items on the tops and bottoms of menus. Rearranging or compacting menu items "helpfully" can work against habituation and lead to user errors.

这就是为什么动态地改变菜单有时候事与愿违。人们习惯了某个选项在菜单的顶部或底部。为了“帮助”用户而重新安置或者压缩菜单项会对用户的习惯背道而驰，并让用户出错。

一下内容节选自《Designing Interfaces》

1. safe exploration 安全地浏览

"Let me explore without getting lost or getting into trouble."

“别让我在浏览的时候迷路也别让我有困难。”

2. instant gratification 即时满足

"I want to accomplish something now, not later."

“我想现在就完成些事情，而不是以后。”

People like to see immediate results from the actions they take. it’s human nature. If someone starts using an application and gets a "success experience" within the first few seconds, that’s gratifying! He’ll be more likely to keep using it, even if it gets harder later. He will feel more confident in the application, and more confident in himself, than if it had taken a while to figure things out.

人们喜欢在操作之后立马看到结果。这是人性。如果某人开始使用一个程序并且在头几秒内体验到了一个“成功”，那真是可喜的！ 即使使用这个程序会越来越难，但是他也很可能会继续。比起如果这程序需要一定时间才能理出头绪来，他会对程序对自己都更有信心。

3. satisficing 满意原则/够用就好（最佳设计100细则貌似提到过）

"This is good enough. I don’t want to spend more time learning to do it better."

“这样就足够好了。我不想花再多的时间去学习它以便更好得使用它。”

This means several things for designers:

• Make labels short, plainly worded, and quick to read. (This includes menu items, buttons, links, and anything else identified by text.) They’ll be scanned and guessed about; write them so that a user’s first guess about meaning is correct. If he guesses wrong several times, he’ll be frustrated and you’re both off to a bad start.
  为扫描而不是阅读。精简文字。

• Use the layout of the interface to communicate meaning.
  用布局排版来传递信息。

• Make it easy to move around the interface, especially for going back to where a wrong choice might have been made hastily.
  提供良好的导航系统。

• Keep in mind that a complicated interface imposes a large cognitive cost on new users. Visual complexity will often tempt nonexperts to satisfice: they look for the first thing that may work.
  一定要记住复杂的界面强迫新用户花费大量学习成本。

4. changes in midstream 中途改变

"I changed my mind about what I was doing."

“我曾经对我现在所做的事情改变想法。”

Occasionally, people change what they’re doing in the middle of doing it. Someone may walk into a room with the intent of finding a key she had left there, but while she’s there, she finds a newspaper and starts reading it. Or she may visit Amazon to read product reviews, but ends up buying a book instead. Maybe she’s just sidetracked; maybe the change is deliberate. Either way, the user’s goal changes while she’s using the interface you designed.

用户偶尔改变一件正在做的事。

5. deferred choices 以后再说

"I don’t want to answer that now; just let me finish!"

“我现在不想回答那些；以后再说！”

This follows from people’s desire for instant gratification. If you ask a user several seemingly unnecessary questions while he’s trying to get something done, he’d often rather skip the questions and come back to them later.

这是第二点即时满足的衍生。

For example, some web-based bulletin boards have long and complicated procedures for registering users. Screen names, email addresses, privacy preferences, avatars, self-descriptions…the list goes on and on. "But I just wanted to post one little thing," says the user plaintively. Why not skip most of the questions, answer the bare minimum, and come back later (if ever) to fill in the rest? Otherwise he might be there for half an hour answering essay questions and finding the perfect avatar image.

• Don’t accost the user with too many upfront choices in the first place.
  首先不要在一开始就引诱用户做过多的选项。

• On the forms that he does have to use, clearly mark the required fields, and don’t make too many of them required. Let him move on without answering the optional ones.
  表单里必填项要标出。(这里可以参考LukeW的ppt 《Best Practices for Form Design》)

• Sometimes you can separate the few important questions or options from others that are less important. Present the short list; hide the long list.
  有时应该将少数的重点问题和次要的区分开来。显示短列表，隐藏长列表。

• Use Good Defaults wherever possible, to give users some reasonable default answers to start with. But keep in mind that prefilled answers still require the user to look at them, just in case they need to be changed. They have a small cost, too.
  选择合适的默认值（在《Designing the Obvious: A Common Sense Approach to Web Application Design )》同时提到。Nielsen博士也提到该点。）

• Make it possible for users to return to the deferred fields later, and make them accessible in obvious places. Some dialog boxes show the user a short statement such as "You can always change this later by clicking the Edit Project button." Some web sites store a user’s half-finished form entries or other persistent data, like shopping carts with unpurchased items.
  为用户返回他上次未完成内容的地方提供可能。并且把它摆放在明显的位置。

• If registration is required at a web site that provides useful services, users may be far more likely to register if they’re first allowed to experience the web site drawn in and engaged and then asked later about who they are. In fact, TurboTax 2005 allows a user to work through an entire tax form before creating a username.
  如果一个提供有用服务的网站需要注册，用户也许会很喜欢先体验一把再注册的方案。