内容在设计中起着至关重要的作用。不管你是从事网站设计、移动应用程序设计、还是可穿戴ui设计,你的设计必须能够清楚地传递出设计的意图和目的。由于文本是基于沟通的目的,所以需要对字体设计有着深刻的理解。当然,用户界面的设计是不同于电子书或博客的主题设计的。但以字体为中心的设计原则仍然适用。毕竟,屏幕上的信息是通过文字进行传递,而UI得语言就是字体。
用户界面中4个字体设计技巧
每一个界面基本都包括一系列的用户选项。字体应该能够支持决策流程，应以不增加用户的认知负担的方式传递内容。好的的字体能够吸引读者阅读内容,而不是关注字体本身。
1.选择一种不同大小均适用的字体
大多数用户界面需要不同尺寸的文本元素(按钮复制、字段标签、节标题等等)。选择一种能够以不同尺寸展示也能很好保持内容的可读性与可用性的字体。
比如：Avenir, Univers, Lato
2.选择容易区分字体格式的字体
很多字体太容易混淆相似的字形。比如大写和小写字母L很相似；小写字母R和N写在一起可以很容易地成为一个小写字母m 。所以需要通过字体的选择让用户不易混淆这些。
比如: Clear Sans vs. Lato (观察下面的大些I和小写的L)
3.将文本视为用户界面设计
卡梅伦.摩尔近十年一直传递这个观点,他认为好的设计师会把文本视为内容,而伟大的设计师会将其视为UI。
尽管人们对此观点不一,但在界面设计中这种看法是正确的。因为当文本元素代表一个功能,那么它就是UI。所有UI设计在实践中应与字体相匹配。如果你不相信,想想你在进入一个标有“推”的拉手的门时所遇到的困惑。
4.思考要做的工作
有人可能不熟悉JTBD，这是一个关注用户需求的设计框架。 询问下自己能够帮助用户解决什么问题。这个问题的答案应该决定UI的设计,包括字体。
在Instapaper的设计者们对于工作的内容与字体相匹配方面做的非常出色。Instapaper的web和移动应用程序具有两个功能:
1)让人们将web内容保存供以后使用
2)为用户提供一个阅读的地方
因为UI中大部分都是基于文本的,并且专注于阅读,所以Instapaper的设计者选择两种截然不同的方式: 文本内容采用serifed Lyon，并且在内容上有着一定的分量,而在UI中采用JAF Bernino Sans。 这将在阅读内容与已经完成的内容上创建一个明确区分。
这些字体选择在用户的期望中可以产品难以置信的效果。从成千上万的书籍、杂志和报纸,我们逐渐习惯和消费衬线字体形式的内容。随着网络的出现，最近的无衬线字体风格真正走进人们视线中,使其自然的成为UI元素。
值得庆幸的是,在设计一个优美及可用性强的UI时并不缺少类似的灵感与指导。
以下是我最喜欢的3种设计：
Medium
Medium出色地说明了“文本UI的概念。“作为阅读和写作的平台(文本的长度), Medium视字体为最高优先级。 其他写作平台和CMSes会效仿它。
网站发布的内容(设置为Freight Text Pro 与 JAF Bernino Sans字体)平华且容易阅读,让人充满了思考与联想。另外,写作过程应与最终出版的格式一致,所以没有必要去切换。
在功能的部分设置为Bernino字体,内容与标题一致,但在UI应用程序中尺寸的不同可以很容易区分。
Slack
在这个例子中,文本仍然是内容的主要形式。作为一个团队的沟通平台, Slack对于界面和内容在很大程度上依赖文本。就像缓冲区,较大部分内容保持一种字体(Lato)。
在Slack，通过考虑情景、不同份量、颜色及空白区域,设计师在Slack创造了一个易于浏览和充满阅读乐趣的平台。
Rdio
作为一个音乐应用,Rdio在文本上使用的很少。但即使在这里,我们仍可看到它将字体当作UI的一部分,并使用不同尺寸的字体(Whitney字体)。
附: Lato 与Whitney字体在大写小写字母“L”上有着类似的问题。一定要审查的这些字体的字符集并考虑和评估这将对于你的产品能够带来多少问题。
在你的UI设计中设置字体
无论设计出于什么目的，在你的UI设计中，字体将发挥至关重要的作用。字体设置好了,它会促进你的用户阅读，相反用户体验会差。所以通过学习掌握这些小技巧并做大量的练习,在字体设置中你会做出更好的选择。
作者简介：Chris Bowler ，作家/思想家/字体的狂热者，将他人放在第一位。
原文链接：http://blog.invisionapp.com/4-tips-on-typography-in-ui-design/
原创文章，作者：Tinadmin，如若转载，请注明出处：https://www.iamue.com/5584/
![[译]使用Sketch的10个小技巧](https://www.iamue.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
