发布时间：2023-1-11 分类： 行业资讯
具有足够功率和流畅网络的手机足以让我们花一天时间沉浸在移动时代的多彩世界中。这种无限的信息资源网络是一个由设计师和开发人员组成的世界，他们在不断的探索中不断创作。如何进一步美化世界，优化用户体验？如何在有限的手机屏幕上呈现清晰的用户界面和用户体验？这里要考虑的因素太多，文本布局设计是其中不可或缺的一部分。今天，我将从文本布局设计的角度讨论如何实现完美的移动UI界面。
首先，有必要了解基础知识。
一些国内设计师或开发人员可能从未接触过培训或学习文本布局设计。
1、什么是文本排版?
“文字排版，“也称为“文本设计”，是一个涉及字体，字体大小，缩进，行间距，字符间距等设计，排列等的过程。在数字技术普及之前，文本排版是一项专业工作。数字时代的到来使得排版不像过去仅仅在排版印刷中的技术工人，而且还被图形艺术家，艺术总监，文职人员甚至儿童使用。 。 ”的
---维基百科
2、为什么文本版排版在手机端设计中很重要?
手机的设计比网页的设计更精致细腻。在正方形的屏幕上，每个元素的选择更加谨慎，不仅美观，而且实用。用户对手机文本版面设计有更高的要求。对于设计人员来说，用户对手机的文本布局设计感到满意是非常具有挑战性的。
想象一下，根本没有任何文字的移动网页。这是不现实的。同样，在手机界面上放置文本元素是否有意义？你能实现有效的UI和UX吗？虽然图片和视频是动态和丰富多彩的，但用户仍需要通过文本获取信息。这不仅仅是一种习惯，文本本身可以传达其他元素无法传达的信息。优秀的手机排版设计不会使用户遭受视觉疲劳，但应该让用户轻松获取信息并实现有效的人机交互。
那么，文本布局设计的奥秘是什么？如何通过文本布局设计实现完美的UI？
通常，文本布局设计包括但不限于以下元件。此外，重要的是要记住手机设计日新月异，手机文字版面设计当然也在与时俱进。我们必须尊重现有规则，但我们也必须保持创新和探索。
以iPhone的文本布局设计为例。在最新的iOS 11中，进行了以下更新：
1)增加文本大小和权重：提高可读性。
2)提供较大字号和标准动态尺寸字号，适用于具有辅助性功能需求的用户。
接下来，我将解释如何设计出色的手机文字布局：
1. 字体
1）字体选择
字体选择通常被错误地处理，直接或忽略，只需从字体库中选择一个。实际上，不同类型的文本内容需要不同的字体，字体可以表达内心的感受和心理需求。想象一下，在女性色彩读数中使用厚而坚固的字体。是不是不一致？相反，你应该选择更精致和柔和的字体。硬字体和粗字体往往更加僵硬。
另一方面，在手机屏幕上可能难以阅读过于花哨和美观的字体。手机上的用户界面简洁干净，使用相同风格的字体是保持界面清新的关键。为避免单调，您可以选择辅助字体与主字体进行对比。在这种情况下，界面中的字体数量应控制在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界面有三个级别。手机屏幕上的空间有限，因此许多设计师只应用2个级别：标题和文本主题。标题是吸引读者的注意力，文本传达了可读性。保留两个结构级别的标题和主题也是手机设计的一个趋势。这使手机UI变得简单并保持对比度和分层。
6. 对比度
在移动电话的屏幕上，文本量远小于网络界面，因此在移动电话界面上放大了相同设置的对比度值。手机文本布局设计对比度问题的最大问题是削弱对比度。如果您在小屏幕上使用环境光度和短字体，它不仅会帮助用户，还会给他们带来头痛和头晕。颜色选择对比度有很大影响，更糟糕的例子是红色文字和绿色背景。此外，字体大小也是对比度的重要考虑因素。设置层次结构时，不要走得太远，标题的字体大小对于文本正文来说不应该太大。最后，白色空间和文本部分也可以形成弱对比。
7. 功能性
保持平衡和美观的UI是不够的，功能同样重要。移动文本设计还可以发挥实际作用，例如满足我们的一些操作，例如购买产品，下订单或预订机票。文本需要清楚地表明用户可以做什么？接下来可以做些什么？确保用户可以轻松执行操作。功能文本需要突出，可点击元素应足够大，以便用户可以单击它们。
8. 对齐
通常，有四种类型的文本对齐方式：左，右，中间或两端。手机排版哪个更好？
关键是保持舒适和清晰的余地。左，中，右模式可以保留边距，而末端对齐，左右两侧没有边距。另外，对齐的文本可能导致字间距不一致，并且在最坏的情况下，一行中的几个单词紧密地组合在一起。对于文本正文，理由是不明智的选择。
左对齐是剩余3个对齐中的最佳选择。它可以产生右边距，留空间，左对齐允许用户的注视从一行文本到下一行对齐，提供一个简洁的初始点。
但是，一些设计师认为混合对齐可以更好地实现和谐UI。请查看以下界面：
文本正文有更多内容，使用左侧对齐;而标题或短线文字，中心对齐也是一个不错的选择。
9. 字型和品牌
对于相同的应用程序或系统，建议使用单一字体并演变几种不同的字体变体和不同的大小。混合使用几种不同的字体会使您的界面看起来分散注意力并使其混乱。通常，品牌或应用程序具有其自己的预设字体。 Apple使用旧金山，诺基亚使用Nokia Pure，而Google Android使用Roboto。
Apple根据产品功能选择字体。例如，iOS 7使用（Pro）Light，iOS 9使用SF-UI，而在iOS 10中，旧金山的字体版本是SF UI Text和SF UI Display。
10. 文本样式
尽可能使用内置文本样式。内置文本样式允许您以视觉上独特的方式表达内容，同时保持最佳的易读性。这些样式基于系统字体，您可以利用关键的排版功能（如动态类型）自动调整每种字体大小的字距和行间距。
11. 响应式设计
移动设备有不同的尺寸。响应式设计也已应用于手机设计。响应式排版是这一趋势的重要因素。任何上述元素，任何滥用，都可能会破坏整个手机UI设计。设计人员需要考虑不同设备上手机排版的外观。
12. 原型设计
在许多设计范围内，布局布局非常重要。它在原型制作中也很重要。优秀的文本布局可以与其他元素组件一起提供干净的UI界面。但在原型设计中，文本不需要具有真正的意义。修改XCode中的代码太麻烦了。在Sketch中修改设计太麻烦了。试试Mockplus，这个国家最好的原型制作工具。 Mockplus附带了许多标准组件。您可以直接使用拖放功能。布局页面，文本组件具有单行文本和多行文本组件，并且可以设置为各种属性，如颜色，大小，方式，字体选择等，并可以添加交互。新版本采用了文本数据填充功能，可以轻松地单独和批量填充文本内容。此外，您可以直接在手机上直接查看，无论是否具有高可读性。
以上是与手机文字布局有关的主要内容。手机文字布局是确保手机页面可读性的关键。如果用户在您的手机界面中进行所有设计，由于可读性不令人满意，真的很可惜。为了设计出完美的手机文字布局，使用现有规则是一个不错的选择，但不要忘记新趋势的新关注，文字版面设计肯定会在2018年得到更多的关注。设计师Stephen·佩里曾经声称2017年的文字版面设计风格确实是大胆的排版。在2018年，Minimalistic可能会席卷而来。我们将拭目以待。
