交互设计中占位符文本的探究范文

摘要：从用户体验的角度分析了界面设计中占位符文本的作用与重要性，并提出占位符文本不仅仅是表单界面的构成元素，更强调其对于用户体验起到改善与引导作用的含义。占位符文本应该在用户的交互体验中引起设计者更高的重视，并起到对用户实现交互过程的引导功能。

关键词：交互设计；界面设计；用户体验设计；占位符

随着现代信息科技的发展与互联网络的普及，各类互联网产品已经被大众广泛接受。与传统产业不同的是，互联网产品对于普通用户的获得成本是极低的：传统产业的用户往往需要付出高昂的代价才能体验最好的商品与服务（如汽车、酒店），而互联网用户只需要以低廉的价格甚至免费就能体验到最好的产品与服务（如社交软件）。伴随着高质量产品与服务而来的，是不那么令人满意的使用体验。因此，用户体验（User-Experience）和交互设计（Interaction…Design）逐渐为人所关注。也正是这样，传统的设计体系中诸多被人忽视的要素也由于能够改善用户体验而逐渐被设计者重视起来。然而占位符文本（Placeholder…Text）仍是容易被设计者忽视的要素之一，占位符文本的错误或不规范的使用在目前极为常见。因此，对其正确使用方式的研究对于人机交互科学具有重要的意义。

1占位符文本在交互设计中的功能性

1.1占位符在界面设计中的意义

占位符（Placeholder）是在信息通讯产品的界面设计中常用到的一种元素，它是交互设计的功能基础，包含了具体的功能和信息的组织结构。［1］用户面对空白的电子表单等界面时，往往会产生不能理解交互方式的“认知摩擦”。［2］占位符的主要作用就是在这类界面布局中占据一定的空间面积，既能调节控制用户界面的视觉传达效果，又可以实现界面对用户的默认的提示、说明、引导等功能。在用户填写表单的界面中，占位符常常以文本的形式呈现，作为对表单填写栏或选项的补充说明，因此被也称为占位符文本。甚至在当下流行的“扁平化”设计语言中，为了使用户填写表单更加流畅，即改善用户对于表单填写界面的体验，简化表单的结构、层级（如删除表单的分项标签等），占位符文本的应用显得更加简洁、美观。但是在不同产品与不同情境下，占位符文本具体的职能作用不尽相同。

1.2占位符文本在界面设计中的功能

使用占位符文本常见的目的有两大类别：视觉优化、功能优化。视觉优化角度有三大具体功能：第一，统一视觉效果功能。基于占位符文本的表现形式为文本这一特性而实现，可以使界面上的图形元素减少，使文本元素与线框成为界面的主要形式。第二，缩短表单（或界面）长度功能。因为占位符文本可以内置于表单填写框区域内，无须额外添加“标签”（label）元素，可以减少表单填写框区域外的标签文档，从而达到缩短长度的效果。第三，精简表单（或界面）结构功能。与第二点类似。常见的表单组成元素除了标签外，还有示例文本（为用户填写的数据提供格式上的范例参考）、指令文本（提示用户执行相应操作）等页面元素，但它们往往会以不同层级展现，如“弹出窗口”“弹出气泡”等。使用占位符文本可以降低对这类不同层级、结构的元素的使用频率，界面层级浅的结构访问路径短，一定程度上可以帮助用户对完整路径进行观察。［3］综合上述三点，视觉优化的功能大致可以概括为对表单界面的视觉元素进行整合，使之视觉传达效果趋于整体化、简洁化。功能优化角度有四大具体功能：第一，充当标签（或辅助标签）文本。指在表单填写框区域内的占位符文本充当标签或辅助标签，以说明用户在此处填写的数据类型、名称。第二，充当指令文本。指应用占位符文本在表单填写框区域内对用户执行的操作给出指令或引导，同时让用户对数据填写的对应区域有较为快速明确的定位。第三，充当帮助文本。指应用占位符文本在表单填写框区域内就用户填写的数据内容、格式等问题提供帮助与参考，便于让相关表单填写经验不足的用户理解对于数据填写的具体要求。第四，充当示例文本。是第三点功能的具体化、特殊化案例。在用户无法掌握输入数据的格式时，一个实例文本可以直观地展现格式范例，并让用户在输入框区域内对照范例输入。综合上述四点，占位符文本的应用旨在给用户执行数据输入提供更加易用、顺畅的步骤流程，简化人机交互关系，改善用户体验。

2占位符文本对人机交互的干扰

2.1占位符文本对执行流程的影响

占位符文本应用的目的是改善用户体验，其功能直接作用于用户对于操作界面的使用流程。表单是互联网信息产品中常见的用于主动收集用户数据的形式，其目的在于将用户数据分类并收集。表单填写框区域内的占位符文本直接影响到用户填写表单所需数据的流程，这种影响主要体现在用户对于表单信息获取的效率、在页面停留时间（Time…on…Page）以及用户填写数据错误率的变化。用户对于表单信息获取的效率是不直观可视的数据，一般表现为用户开始执行填写表单的操作前的停止时间。通常意义上，操作前停止时间越长便意味着用户难以理解或执行当前的默认操作，即这个页面对使用者的影响会直接影响到人机交互的效率以及用户体验。同理，由于表单界面是工具性界面，而非内容传播性页面，所以用户的页面停留时间长短与用户体验呈负相关。缺失的或难以理解的功能性占位符文本会导致用户执行填写操作的效率低下，长时间停留于表单界面。在相应的计算机后台程序技术的支持下，很多网页与程序能够在用户填写信息的同时捕捉用户填写、擦除数据等动作。众多实例证明，占位符文本的错误或不规范的应用除了会造成用户理解困难之外，还会影响用户填写操作的流畅性，增加了用户的负担，甚至可能导致操作的失败，［4］造成诸如“反复修改已填数据”“填写过程多次中断”等结果。此类现象发生率较高，但容易被开发者、设计者忽视，从而破坏整个产品的交互体验。

2.2占位符文本对用户心理的影响

用户界面设计是直接接触并服务于人的设计，因此在人机交互的过程中，情感化的、难以用数据量化的用户体验极为重要。用户的体验通常取决于三点：需求是否被满足、满足需求的效率如何、需求之外的情感。表单填写是一个纯粹的功能性步骤，是服务于用户满足需求的前期准备工作。没有人（或极少数人）会以填写表单为乐趣，将此作为自己使用产品的需求与动力。因此，设计者要尽可能地简化这个步骤，用尽可能高效、简洁的方式引导用户去执行预设好的操作（填写表单）才是优化表单界面用户体验的方法。事实上，在对市面上现存的各类网页与程序进行一个简单的抽样调查之后，可以发现很多因为误用占位符文本而造成用户误解的案例。这种误解会致使用户的数据输入效率和准确度降低，进而对产品的易用性产生怀疑。并且在表单界面停留时间的延长，实质上是用户达成需求满足这一结果的推迟，会引起用户怀疑产品满足自身需求的可行性。一旦用户对产品的易用性、可行性产生了怀疑，就会破坏用户对于产品、服务的信任感；对于不了解后台技术的用户而言，甚至可能产生对于技术、品牌的不信任感。信任感是建立良好的用户情感体验的基石。因此，作为影响操作效率的重要因素的占位符文本的设计，对于建立良好的用户情感体验有着至关重要的意义。

2.3占位符文本对交互的双向反馈机制

用户与产品发生人机交互的过程，是一个信息的双向接收、发送的过程，与之相伴的还有双向的反馈机制。作为用户，产品输出、传递信息的效率低下会影响到自身的信息接收效率。同时用户低效率接收信息也会导致反馈行为迟缓、错误率提高，进而导致产品接收信息的效率降低。因此，研究占位符文本在人机交互流程中造成干扰的机制对于改善交互体验有着至关重要的作用。占位符文本的本质是占位符的一种。起到的根本作用是占据空间位置，直接作用是提供信息。这信息包含诸多种类，如位置信息（将不同功能区域进行定位）、数据类型信息（说明该区域内数据的类型）、指令信息（提示或命令用户执行相应操作）等。为了保证用户有效获取信息，占位符文本必须具有足够的视觉刺激，过于浅的占位符文本颜色会导致在屏幕上难以辨认。但是由于表单填写框区域内本应该为空白，因此占位符文本的存在本身就对用户具有一定的视觉刺激与导向，所以需要对其视觉上的强调程度做好控制。如果将占位符文本的颜色设定为黑色（或正文文本的相应颜色），则会与正文内容产生视觉冲突（见图3），导致用户将占位符文本错误理解为预设文本，进而影响其对于数据填写区域的理解，降低此阶段交互流程的效率。由于占位符文本具有多重功能，可以表达多种数据类型，因此表单填写框区域内的占位符文本应该保证功能类型的统一，否则会导致表单界面的信息传递逻辑混乱。例如，“登录邮箱地址”数据填写框区域内的占位符文本设定为“登录密码”数据填写框区域内的占位符文本设定为“请输入密码”（充当指令文本）。这个例子中，两处相关联的表单输入框内置两种不同类别的占位符文本，在面向用户的信息传递环节没有遵循统一的标准规范。这种情况下会导致用户对于表单指令的理解产生偏差，如难以理解“这项占位符文本对用户的指令与要求。一定程度上会导致用户对此产品甚至是产品的企业形象产生“严谨性、专业性有所欠缺”的印象。此外，占位符本身具有“可替代”这一特性，即用户在表单填写框区域内进行数据填写操作时，表单的交互系统默认会以用户当前填写的数据覆盖原本的占位符文本。这也造成了占位符文本给用户的指令、帮助具有时间局限性。指令信息一般较短且容易理解，所以受到“时间局限性”的影响较小，但帮助文本（包括示例文本）通常长度较长，内容类别较多，导致在用户填写表格时点击文本框后会使帮助文本消失，因此对于帮助文本的记忆难度较大（见图2）。对用户来说，浏览信息要比记忆更容易，理想的设计是用户不用查阅说明书就能清楚该产品的功能并进行正确操作。［5］基于前文所述的“占位符文本具有‘时间局限性’”的特点，在用户进行交互操作、输入一个较为陌生的数据或信息时，往往会输入一部分后因为对相关要求、规则的记忆模糊而导致输入操作中断甚至取消输入，重新回到占位符文本未被用户数据覆盖的情境，再次阅读帮助说明。综上所述，占位符文本具有“视觉强调性”“标准统一性”“时间局限性”三大特性的双向反馈机制，并且在交互设计中需要进行规范的应用以保障人机交互的效率与用户体验的质量。

3占位符文本的人性化交互设计原则

对于占位符文本的应用环境，可以确定在电子、信息领域的产品的数字交互界面，尤其是电子表单类界面。因此，要明确占位符文本应用的本质：服务于用户数据填写、传递，强调工具性、功能性。由此归纳出占位符文本的设计应遵循三项基本原则：易用性原则、统一性原则和阶段性原则。

3.1易用性原则

易用性原则即加强引导作用，降低使用难度。优秀的工具是用户察觉不到的工具，占位符文本的职能是降低用户使用界面的负担，而非增加用户额外的关注点。因此，要求设计师在占位符文本的设计过程中了解用户的语言、文化、思维模式，以提高占位符的可理解性。实现“置界面于用户的控制之下”“减少用户的记忆负担”“保持界面的一致性”。［6］

3.2统一性原则

统一性原则也可以理解为秩序性，秩序不仅是效率的保证，也是交互逻辑的表现方式。占位符文本的类别、定义、布局甚至是形式上的不统一，都是对界面设计背后的交互逻辑的破坏。既会混淆产品界面信息的传递，进而影响用户执行交互操作的流程，又会破坏用户使用产品时的主观体验。

3.3阶段性原则

占位符文本不是静止不变的界面设计元素，在用户进行阅读、输入等不同行为的同时，与产品的交互关系也会随之发生变化。因此，占位符文本在人机交互的过程中也是依各阶段发生变化的。对应用户的不同行为、操作，占位符文本应该表现以不同形式，执行不同功能，不因位置布局而定义功能，而是以交互的不同阶段来作出具体的定义。遵守这三项原则，才能保障占位符文本这一设计要素在人性化的交互过程中有效地起到相应的作用，提升交互体验的质量。

4结语

设计不仅是对样式、外形的塑造，更是对人的服务和对服务方式的优化与改良。在当前社会互联网产业发展的背景下，“人”这一因素在交互设计中得以不断放大。交互设计也不再仅仅是设计一个用户界面，而是更加着重于从作为人的用户的视角出发，考虑用户的本质需求，以满足用户需求为根本目的，一切设计行为、要素为此服务。占位符文本作为多种用户界面中不可缺失的关键元素，应该遵循上述基本原则，做到标准化、规范化，实现更加高效的人机交互流程，提供给用户更加优质的体验。

参考文献：

［1］…黄本亮.交互设计的语义层面［J］.包装工程，2013，34（2）：38.

［2］…Alan…Cooper（美）.交互设计之路——让高科技产品回归人性［M］.…Chris…Ding，译，北京：电子工业出版社，2006：…41.

［4］…李世国，费钎.和谐视野中的产品交互设计［J］.包装工程，2009，30（1）：137-140.

［5］…于东玖，吴晓莉.设计中易用性原则与情感的关系［J］.包装工程，2006，27（6）：308-309.

［6］…A.苏克利夫（英）.人-计算机界面设计［M］.陈家正，龚杰民，等，译.西安电子科技大学出版社，1991.

作者：王沐阳 单位：华东师范大学