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

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

6. 对比度

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

7. 功能性

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

8. 对齐

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

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

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

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

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

9. 字型和品牌

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

苹果根据产品功能选择字体。例如， iOS7 使用了(Pro)Light，iOS9 使用SF-UI，而在iOS10 中，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或许会席卷而来。我们拭目以待。

（编辑：济源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!