文字如何实现完美UI？文本排版设计告诉你

一部手机，电量充足，网络通畅，就足以让咱们打发一天的时光，尽情沉浸在手机时代的缤纷世界里。这个信息资源无穷尽的手机网络世界，是设计师和开发者们在不停的探索中一路一步精心打造。如何进一步美化这个世界，优化用户体验？如何在手机有限的屏幕上呈现清晰的UI和UX？这里太多因素须要考虑，文本排版设计就是其中不可或缺的一部分。今天，我将从文本排版设计角度出发，谈谈如何实现完美的手机UI界面。

首先，有必要了解一下基础知识。

国内一些设计师，或者开发人员，可能历来都没有接触过文本排版设计的培训或学习。

1，什么是文本排版？

“文本排版，“又称“文字设计”，是一种涉及对字体、字号、缩进、行间距、字符间距进行设计、安排等方法来进行排版的一种工艺。在数码技术普及以前，文本排版是一项专业的工做，数码时代的来临使字体排印不像从前仅由排字印刷方面的技术工人完成，而更被图形艺术家、艺术指导、文书人员甚至儿童普遍使用。”

---维基百科

2，为何文本版排版在手机端设计中很重要？

手机端设计比网页设计要求更精致细腻，这个方寸之间的屏幕上，每一个元素的选择都更加谨慎，不只美观，更要实用。用户对手机端文本排版设计的体验要求也更高，于设计师而言，让用户能知足于手机的文本排版设计是极具挑战性的。

想象一下，一个彻底没有任何文字的手机网页是怎样的呢？不现实吧。一样，在手机界面上随意的放置文本元素，会有意义吗？能实现有效的UI和UX吗？虽然图片和视频极具动态也丰富多彩，但用户仍然须要经过文本获取信息。这不只仅是一种习惯，文字自己也能传达其它元素没法传达的信息。优秀的手机排版设计，不会让用户产生视疲劳，而应该让用户能轻松获取信息，实现人机有效互动。

 

那么，文本排版设计的奥秘究竟有哪些呢？如何经过文本排版设计实现完美UI呢？

一般，文本排版设计包括但不限于如下元素。另外，需谨记：手机设计突飞猛进，手机文本排版设计固然也在与时俱进。咱们既要尊重现有规则，但也要保持创新和探索。

以iPhone的文本排版设计为例。在最新的iOS 11中，作出了如下更新：

1）增长文本大小和权重：提升可读性。

2）提供较大字号和标准动态尺寸字号，适用于具备辅助性功能需求的用户。

接下来，我逐一讲解如何设计优秀的手机端文本排版：

1. 字体

1)字体选择

字体选择经常被错误对待，要么直接忽视，要么简单地从字体库中任意挑选一款。实际上，不一样类型的文本内容须要使用不一样的字体，字体能够表达心里感受和心理需求。试想，使用浓密生硬的字体在女性色彩的读物内容里，是否是显得格格不入？相反，你应该选择比较细腻和柔和的字体。生硬浓重的字体每每更具刚硬气质。

另外一方面，过分花哨好看的字体在手机屏幕上可能很难辨认。手机端的UI要求简单而干净，使用同种风格的字体是保持界面清爽的关键。避免单调，您能够选择一种辅助字体与主要字体造成对比。这种状况下，界面的字体数量要控制在2到3种，多则混乱。

 

2)字体大小

手机屏幕有限，字体大小相当重要。若是你只是在手机屏幕上使用微小字体来解决，那就真是一个笑话了。虽然用户能够缩放文原本改变字体大小，从而提高可读性，但这毫不是设计师偷懒的借口。这多出的操做，本就违背用户体验。字体太小看不清，还会损伤用户的眼睛，花费更多的时间阅读；而较大的字体又会迅速吃掉屏幕，并破坏阅读连贯性。

那怎样是适当的字体尺寸？

对于iOS，使用至少11sp的字体大小，而对于Android，请选择14 sp为主文本。请注意，这是主文本一般使用的标准，不是强行的惟一标准。此外，在设计手机端字体大小时，须要留意设计字体大小要比常规、使用在桌面端的略大一些。

 

2. 间距

1) 行间距

行间距是一排文字和另外一排文字之间的空间。手机屏幕较小，因此行间距一般比桌面版本小。设置行间距时，须要在手机端设置比桌面端小的值。过宽或过窄的行间距都会破坏手机UI界面，下降可读性。许多人认为，1.4em是标准的行间距，但在手机屏幕上，仍然有显得几分紧密，用户可能会感到文字仿佛在收紧。在设计上，标准的行间距应该是字体大小的120％。另外， 若是文本的长度越短，那么它对行间距宽度的要求也会下降。

 

2) 字间距

字间距是两个文字之间的间距。这是手机排版中的一个很小的因素，但值得关注。你可能会认为，在一个段落里，字距调整可能不是一个必要问题。但若是您足够细心，您可能会注意到，这一般出如今英文文本中，大写字母与小写字母之间的空间和两个小写字母之间的空间不尽相同。这会形成必定的视觉失调，破坏美感。

 

3) 全文本字间距

上面不是刚提了字距吗？这里是否重复了呢？固然不是，字距在两个文字间和全文本的字间距并非彻底同样的概念。这二者每每可能会使设计师产生迷惑，但它们相似却不一样。这里的字间距是全部字符和文本的字间距。有效的字间距会使文本更易读。一般，字体使用时能够适当调整页面字距，所以你不须要过多的关注。但若是你注意这一点，也许会对设计大有裨益。一般，大文本须要更少的字距，而稀疏的文本要求更宽的字距。

 

3. 行长

行长也是手机排版中的一个重要尺度要求。文本行的长度可能会影响整个排版。桌面屏幕的行长势必会超出手机屏幕边框。在手机排版中，每行上的字符数量，字体大小和行长度都紧密相连，互相影响和牵制。合理的布局这些要素是可读性的关键。一般，一行保留30-40个字符数时比较合理的选择。

 

4. 留白

留白在设计中无处不在。留白能够带来自由和放松的感受。手机排版留白主要包含：行间距，边距，段落空间。手机排版中的适当空间能够帮助用户更好阅读文本，提高界面美感。设计师能够考虑从页面10％到20％的范围开始留白。但不要留白区域太大，手机屏幕有限。

 

5. 层次结构

层次结构是强调整个文本的关键元素，并能产生对比度。但手机排版中的层次结构比一般web界面层次简洁，一般Web界面拥有3个级别。而手机屏幕的空间有限，因此不少设计师只应用了2个层次：标题和文本主题。标题是抓住读者眼球，而文本传达可读性。保留标题和主题这两个结构层次，这也是手机设计的一个趋势。这可使手机UI简洁，并保持对比度和层次感。

 

6. 对比度

在手机屏幕上，文本数量远远小于Web界面，因而同等设置的对比值，在手机界面上会放大。手机文本排版设计的对比度问题，最大的原则就是削弱对比。若是你在小屏幕上使用环境光度和短字体，不但没有帮到用户，还会让他们产生头疼晕眩的感受。颜色选择对对比度影响很大，更糟的例子，红色文字与绿色背景。此外，字体大小也是对比度的一大考虑。当设置层次结构时，不要太过火，标题的字体大小不能太大于文本主体。最后，留白和文本部分也能够造成一种微弱的对比。

 

7. 功能性

保持平衡美观的UI是远远不够的，功能也是同等重要的。手机文本设计还要产生实际的做用，好比知足咱们的一些操做，像购买产品，下订单或预订机票。文本须要清晰指示用户能作什？接下来能够作什么？确保用户能够轻松地执行操做。功能性文本须要突出，可点击的元素应该足够大，以便用户能够点击它们。

 

8. 对齐

一般，文本对齐方式有4种：左，右，中或两端对齐。哪种在手机排版中更好？

关键是要保持温馨清晰的边距。左中右三种方式均可以保留边距，而两端对齐在左右两侧都没有边距。此外，两端对齐文本会致使不一致的字间距，最坏的状况还会致使一行中的几个单词牢牢凑在一块儿。对于文本主体而言，两端对齐是不明智的选择。

左侧对齐是其他3种对齐方式里的最佳选择。它可能产生右边缘边距，留下空间，左对齐可使用户的目光从一行文字连贯到下一行文字，提供一个整齐的初始点。

 

然而，有些设计师认为混合对齐方式能够更好的实现和谐的UI。看下面的界面：

 

文本主体内容多，使用左侧对齐；而标题或短行文本，居中对齐也是很好的选择。

9. 字型和品牌

同一款app或系统，建议使用单个字型并演变几种不一样字体变体和不一样尺寸。混合几个不一样的字型会使您的界面看起来分散和混乱。一般，品牌或应用程序拥有本身的预设字型。苹果使用San Francisco, 诺基亚使用Nokia Pure，Google Android使用Roboto。

苹果根据产品功能选择字体。例如， iOS 7使用了（Pro）Light，iOS 9使用SF-UI，而在iOS 10中，San Francisco的字体版本是SF UI Text 和 SF UI Display。

 

10. 文本样式

尽量使用内置文本样式。内置的文字样式可以让您以视觉上独特的方式表达内容，同时保持最佳的易读性。这些风格基于系统字体，而且你能够利用关键的排版功能，例如动态类型，可自动调整每种字体大小的字距和行距。

 

11. 响应式设计

手机设备有不一样的尺寸。响应式设计也已经应用于手机设计。响应式排版成必将为这一趋势的重要因素。上述全部元素，任何错误使用可能会破坏总体手机UI设计。设计师须要考虑手机排版在不一样设备上的外观。

 

12. 原型设计

文版排版设计在不少设计范围类都相当重要，原型设计中也是必不可少，优秀的文本排版，可以和其余元素组件共同服务于干净的UI界面。但在原型设计中，文本不须要具有真正的意义。在 XCode 中调整代码，在 Sketch 中修改设计都太慢太麻烦了，不妨试试国内最优秀的原型设计工具Mockplus，Mockplus 自带了大量标准组件，你能够直接经过 Drag & Drop 的方式来快速布局你的页面，文本组件有单行文本和多行文本的组件，并可对其进行例如颜色，尺寸，对其方式，字体选择等各类属性设置，而且能够添加交互。新版本加入了文本数据填充功能，可对文本内容进行单个和批量填充，十分便捷。此外，你能够直接手机上直接查看，是否具备较高的可读性。

 

以上就是涉及手机文本排版的主要内容。手机文本排版是保证手机页面可读性的关键，若是用户在你的手机界面由于差强人意的可读性而使所有的设计付之一炬，实在是很是惋惜的。要想设计出完美的手机端文本排版，利用现有规则是不错的选择，但不要忘记新的关注新趋势，文本排版设计在2018年确定会得到更多的关注。设计师斯蒂芬· 佩里曾经声称2017年文本排版设计将风格将会是bold typography，的确如此。在2018年，Minimalistic或许会席卷而来。咱们拭目以待。