UI排版设计的4个技巧

信息在设计中起着至关重要的作用，不管你是从事网站设计、移动app设计、还是可穿戴ui设计，你的作品必须能够清楚地传达出设计的意图和目的。由于文字在沟通目标的过程中起着重大的提升作用，所以需要对字体排版设计有着深刻的理解。当然，UI设计不等同于设计一个电子书或博客主题。但以字体为中心的设计原则仍然适用，毕竟，屏幕上的信息是通过文字进行传达，而UI的语言就是字体。

Oliver Reichenstein在他的开创性的论文中指出：“网页设计95%都是排版”：

优化排版就是优化可读性，可访问性，可用性（！），以及整体图形平衡。

换句话说：优化排版也就是优化了你的用户界面。这里有4种技巧可以做到，加上3个视字体排版设计为最重要的产品案例分析。

ui排版设计的4个技巧

字体排版设计大师Robert Bringhurs打开他的巨著《The Elements of Typographic Style》（茂趣注：据说这是一本有关文字设计方面最好的书），里面有这么一句话：

字体排版在于优化内容（Typography exists to honor content）

每一个界面基本都包括一系列的用户选项，字体应该能够支持决策流程，应以不增加用户的认知负担的方式传递内容。好的字体应该是吸引读者阅读内容，而不是关注字体本身。

1、选择一种不同大小均适用的字体

大多数用户界面需要不同尺寸的文本元素(按钮复制、字段标签、节标题等等)，选择一种能够以不同尺寸展示也能很好保持内容的可读性与可用性的字体。

比如：Avenir, Univers, Lato

Avenir的应用

2、选择容易识别的字体字体

很多字体很容易混淆相似的字形，比如大写的“I”和小写字母L很相似；小写字母R和N写在一起可以很容易地成为一个小写字母m。。。所以需要通过选择容易区分的字体让用户不易混淆这些。

比如：Clear Sans vs. Lato (观察下面的大些I和小写的L)

3、将文本视为UI

Cameron Moll近十年一直传递这个观点，他认为好的设计师会把文本视为内容，而伟大的设计师会将其视为UI。

尽管人们对此观点不一，但在界面设计中这种看法是正确的。因为当文本元素代表一个功能，那么它就是UI，所有UI设计在实践中应与字体相匹配。如果你不相信，想象一下在你进入一个标有“推”的拉手的门时所遇到的困惑。

4、仔细考虑这项工作的完成

如果你不熟悉JTBD，这是一个侧重于用户体验设计的框架。 询问下自己能够帮助用户解决什么问题，这个问题的答案有可能决定你的UI设计决策，包括字体。

Instapaper的设计师们在字体与内容相匹配方面的工作做的非常出色，Instapaper的网页和app具有两个功能：

1)让人们将网页内容保存供以后使用

2)为用户提供一个阅读的地方

因为UI中大部分都是基于文本的，并且专注于阅读，所以Instapaper的设计师们选择两种截然不同的方式：文本内容采用serifed Lyon，并且在内容上有着一定的重点，而在UI中采用JAF Bernino Sans， 这将在阅读内容与已经完成的内容上创建一个明确区分。

这些字体选择在用户的期望中可以产生难以置信的效果，从成千上万的书籍、杂志和报纸中，我们逐渐习惯通过衬线字体阅读和消耗长文内容。随着网络的出现，最近的无衬线字体风格才真正走进人们视线中，使其自然的成为UI元素。

Learn from the pros

值得庆幸的是，在设计一个优美又可用性强的UI时并不缺少类似的灵感与指导。

以下是我最喜欢的3种设计：

Medium

Medium充分地体现了”文本就是UI的概念。“作为阅读和写作的平台(所有的长文本)，Medium视字体设计为最高优先级。 其他写作平台和CMSes（内容管理系统）也会也效仿它。

网站发布的内容(设置为Freight Text Pro 与 JAF Bernino Sans字体)平华且容易阅读，让人充满了思考与联想。另外，写作过程应与最终出版的格式一致，所以没有必要去切换。

在功能部分则设置为Bernino字体，内容与标题一致，但是在用户界面应用中很小尺寸也能很容易区分出应得到的东西。

Slack

在这个例子中，文本仍然是内容的主要形式。作为一个团队的沟通平台，Slack对于交互和内容要素在很大程度上依赖文本。就像缓冲区，它坚持用一种单一的字体(Lato)，却能让它充分利用。

在Slack，通过对框、重量、颜色以及留白空间的综合考量，设计师在Slack创造了一个易于浏览和充满阅读乐趣的平台。

Rdio

作为一个音乐应用，Rdio在文本上使用的很少。但即使在这里，我们仍可看到它将字体当作UI的一部分，并使用不同大小和粗细的字体(Whitney字体)。

附：Lato与Whitney字体的大写字母“I”和小写的“L”上有着相似的问题，一定要审查好这些字体的字符集，并审视和评估这将对你的产品会带来多少影响。

在你的UI设计中设定好字体

不管你项目的目的是什么，字体在你的UI设计中发挥至着关重要的作用。字体设定好了，它会增强用户的体验，否则，它会影响用户体验。但是有了这些指导方针并做大量的练习，你会为你的字体、你的用户做出更好的选择。

结语：每个字体都有各自的性格，代表着一种不同的意义，大家一定要区分好字体，了解好字体，并利用好字体大小、间距、行距等小细节，做出好的排版，才能产生好的阅读体验。

今天是西方的感恩节，茂趣创意祝贺大家感恩节快乐，感恩有你的关注与支持，希望这篇文章能够让你有所收货~

文丨Chris Bowler

译丨茂趣创意/茂哥

转载请注明来自茂趣创意，并在后台留言

丨欢迎分享、转发、点攒丨