冷兴英，黄立中，宋 娟

当设计师从产品经理拿到原型图或者功能需求时，一定要先梳理产品的功能，产品实现了哪些实际的业务（若没有原型图时，设计师还需考虑如何用界面拆分），每个界面主要向用户表达什么。这个过程不仅是“看”的过程，更是一个“想”的过程，不断的完善产品细节，更在大局上把控产品。《手机App 界面设计》中提到过“App 的交互流程设计，简单说就像建造房子，有清楚的平面图纸才能着手建设。设计交互流程时应清晰地把握功能的应用需求”。所以，在这个过程中，设计师在已有的原型图上，建立交互流程模型，加深了对产品的理解，同时思考哪些信息用图片表达、哪些用图标、哪一些用文字等等。在明确了文字信息之后，设计师应当思考如何展示这些文字信息，以达到让用户可以有效接收信息，并帮助用户快速地找到自己想要的信息。接下来，将结合实例，讲述文字信息的展示。

1 界面文字信息分类

现在的文字信息大致分为两类：展示文字信息、功能文字信息。

展示文字信息有：标题、正文、提示文字、警示文字。

功能文字信息分为：按钮文字（即按钮上的文字，是用户要向我们的产品告知的一个动作）、链接性文字、功能性文字（只有文字，但却有按钮的功能）。

其中，设计师要注意一共有几类标题：大标题、小标题等；警示文字又分为有错误警示与危险操作警示。

2 如何定义文字信息的基础展示方式

在上一步，我们已经将整个产品的文字信息归类，在这一步我们就将定义每个分类信息的基础展示方式。这一步是很重要的一步，定义文字基础展示方式，直接将影响用户对信息的接收度，而根据上一步的信息归类，我们在这一步时，可统一文字信息的设计，在以后设计师输出设计规范时，会为前端提供一个良好的版本，让前端开发工程师能够预设文字、按钮等，不会出现反复的改动，大大减少产品的开发时间。同时让产品的文字信息维持一个高度的整合性，加强用户对信息的有效识别。

上面提到的警示类文字，这类文字一般采用橙色、黄色或红色。在这里要提醒，设计师在拿到产品原型、功能需求时，所看到的字段、输入框等示例都是成功示例，但在设计时，一定要考虑极端情况的出现。例如：用户在登录时，登录账号输入账户格式错误、或用户输账号错误等等。而我们的警示信息、何时出现、何处出现，设计时应结合功能需求、用户体验等与开发人员相互讨论，给出方案为给用户产生警示。若是用户输入账号格式错误，在用户输入时，即可出现错误警示（此信息错误由前端检测）。这也就意味着，在输入框周围的位置可出现错误提示。若是在输入格式正确的情况下，用户输入账号错误，就需要在用户点击“登录”按钮过后向用户显示错误警示（此信息错误由后台检测）。

提示信息，设计师需注意该提示信息的何处展示、何时出现、何时消失。例如，在需要用户输入时，通常会有一个标题，告知用户输入的内容是什么，例如：账户、地区、时间等。然后会出现一些输入信息的格式提醒，例如：请输入数字与字母组合等。

而按钮文字、链接性文字等功能文字一般为产品的主题色，区别其他的展示文字。其他的展示文字，我们一般会采取阶梯灰色、阶梯大小来表示文字的重要性、它们应当被阅读的先后顺序。文字的大小，在移动应用设计时，会采取偶数大小。因为在设计师设计时是以px 为单位设计，在开发程序当中，将会被除以2 来定义文字大小。且移动应用UI 设计时，最小字体以24px 为宜。阶梯灰色如图1：

图1 阶梯灰色

图2 字体运用实例

图3 实例字体颜色标记

图2、图3，也可以看出，对于产品的一些特殊文字，我们亦可采取加背景色、背景图片等方式向用户展出。这里，一般我们用的背景色、背景图片的主体色会与我们的文字颜色形成一个对比，以此突出文字的易读性，向用户加强信息接收。

3 文字信息的结构表达方式

基础的信息展示方式已经在前面两个步骤中完成，在这一步中，将结合产品的特性来选择文字信息的结构表达方式。每个产品的特性都不一样，接下来将以记账软件为例，来叙述在设计师选择文字信息的结构表达方式的时候如何选择。

记账软件，记收入与记支出是产品的基础功能，我们拿记支出为例。当用户发生了一笔支出，将会产生8 个信息：数额、类型（支出或收入）、账户、用途、支出人、支出发生时间、记账时间、备注。这8 个信息当中，唯有类型、账户可用图片或图标代替，其余皆是文字信息。当然在这里提到的产生8 个信息，并不是说用户需要直接录入这些信息。在选择该功能的时候，类型可以已经选定，而记账时间，当用户录入其他6 个信息，点击保存的时候，系统会自动记录一个时间，即为记账时间。而我们要提到，产生的信息、系统记录的信息和向用户显示的信息是不一定对等的。设计师，应与产品经理、开发程序师一起沟通，所产生的信息，与要向用户显示的信息。

上述的8 个信息中，一般用途、账户、支出人为文字信息选择，而账户、支出人的选择信息或许不多，用途一类信息却可能会很多，甚至产生大类中有小类，就有文字信息的结构表达方式的选择。什么是文字信息结构的表达方式？产品所产生的、包含的大量信息，都有关系。例如这里说的大类与小类，一个大类由许多个小类组成，许多个小类组成了某一个大类，这是包含与被包含，大类包含了小类，这就是关系。这种关系，亦是一种结构，上下结构，大类为上，小类为下。而设计师在这里，要考虑用何种方式去表现这种结构，并能够让用户可以通过大类找到小类，找到需要的文字信息。

用途的文字信息结构表达方式，以下，有两种：

图4 示例1

图5 示例2

两个示例的文字信息结构表达有什么区别呢？各自有什么优劣势？在设计过程当中，我们应当选哪一种呢？

图4 为把界面分为上下结构，将大类做成按钮至于顶部。图5 为把界面分为左右结构，将大类一排一排展示，大类放于左侧，小类放于右侧，再用背景色来区分两个区域。图4 与图5 都将小类一排排展示，这种小类的展示方式设计是考虑到了用途小类信息的“不确定性”。为什么说这类信息有“不确定”性呢？因为这一类表达了购买用途的具体信息，用户可以自定义添加删除，也就意味这这个字段的“不确定性”，不管是文字类型还是文字长度。所以在设计时，小类用这种方式。至于大类，因为只是一种分类、归纳，这一类的文字并不多，这样就有了两种设计方式。

由图分析出，图4 的大类展示方式不适合于大类个数太多，而明显图5 的大类个数要多于图4，图5 的大类也可以在设计时，交互可设计为用户左右皆可上下滑动，以展示更多的大类以及小类。图4 的大类因为文字长度的不一，整个文字信息的表达结构，使得界面更加灵活。图5 的文字信息的结构表达方式，就使得界面严谨。

那我们如何选择呢？这一点，设计师在设计时，需与产品经理多沟通，了解产品背景、产品功能需要、用户体验。

3.1 产品背景

这里是记账产品，但是这一类产品也有很多分类：公司记账、个人家庭生活记账。公司记账，有专人管理，需记录公司财务的每一笔支出与收入，为以公司报税，向公司负责人做财务报告，以查看公司收益、成本、利润等。个人家庭生活记账，个人记录生活开销，以记录个人资产开支，明白钱去哪儿，达到最大有效使用个人财产，以达到个人目的。

3.2 产品功能需要

这个功能为帮助用户记住这一笔支出的用途。若是公司记账，会计需要选择这笔支出的正确用途，以便报税，并生成公司的财务报表。这对于公司的算账、统计是一个很重要的条目，且不可轻易更改，每一个大类与小类之间的关系都很重要。若是个人家庭生活记账，用户选择用途，只需要记录该笔资金的大致去向，以便控制开销，合理使用资金。那大类与小类的关系就不显得那么重要，甚至由于个人生活、爱好的固定，小类亦是固定的。

3.3 用户体验

若是公司记账，使用者多为会计、管理财务者，这一类用户为专业用户，拥有专业技能，在记账时，会先选择大类，再选择小类，因为这样能保障记账的准确性，以方便公司财务计算、成本计算等。若为个人用户，用户从事的职业不限，且文凭、技能不限，则需要在操作上有明确提示，并能快速找到信息。在《“拯救月光族”App 用户界面设计策略》中提到“现代年轻人更愿意使用界面简洁，操作方便、流畅的软件”。所以界面要拥有“亲切感”，加强用户对产品的好感。

所以，在这里，文字信息的结构表达选择哪一种，若为公司专业记账，选择图5 的结构表达方式较为合适；若为个人家庭生活记账选择图4 的结构表达方式较为合适。

4 结束语

以上所述，移动应用的文字信息的展示方式既有一定的规律，又要根据不同产品的背景来决定文字信息的展示方式。UI 设计中，设计师需要不停地与产品经理沟通，与开发程序师交流，结合用户体验，给出最佳的文字信息展示方式。