无中生有”―手机端高效的文本输入框设计

 

“无中生有”—手机端高效的文本输入框设计 

 

 

手机端的文本输入受到使用环境、网络状况及设备本身条件的制约，使其用户体验的改良成为一个老生常谈的话题。如：一直在改进的输入法，新输入方式的探索（语音输入），甚至想尽种种办法去避免输入……

 

文本输入本身是一个从无到有的过程，是让用户将空白的输入框填满的过程，本文避谈一些尚未经过易用性测试验证的创新设计，从本人的日常积累和实际经验出发，以文本输入框作为设计对象，从帮助用户认知及简化用户操作这两个维度来探究这些看似简单空白的小条能否生长出大智慧。

无中生有之“引导词”——帮助用户认知

手机端的界面空间可谓寸土寸金，很少有空白的区域。而用户在面对界面中一片空白的区域时往往会产生紧迫感甚至有些不知所措。如果在这片空白里增加一些“引导词”（即引导描述型词条），用户就能迅速产生认知活动，对将要输入的内容进行快速反应和判断。

 

就登陆界面的设计来说，面对无引导词界面的用户也许会浪费时间在想他的用户名是什么来着？是他的邮箱还是随便起的昵称还是他的手机号？以及他的密码是几位的？甚至还会浪费时间在用户名的书写格式上。而使用第二个界面的用户会在第一时间获知闪烁的光标处要输入邮箱，密码框里的“小点点”也形象的告知了用户密码的显示形式和长度。可见输入框中增加必要的引导词能够提高用户的输入效率。

“引导词”依据使用功能及使用场景进行分类如下：

1．输入内容的模板

提供给用户即将输入内容的模板，用户无需花费更多时间思考如何输入。

 

[email protected]是约定俗成的邮箱地址的模板，能够与用户的心智模型相呼应，用户能够很快的做出反应。

2．需要输入的片段内容

输入内容中有部分内容是用户经常用到或重复用到的，或者是约定俗成的，那么把这部分内容直接作为引导词，显示在文本输入框中，一方面能够提示用户接下来将要输入什么内容，一方面能够省略这部分内容的输入操作，进而提高输入效率。

 

“www.”和“.com”等是用户所悉知的网址协议，在输入框中增加该引导词能够给用户直观的提醒这里是要输入网址的，并且省略了这些字符的输入。

3．输入内容的描述

用户输入的内容不准确会导致不准确的操作反馈时，需要增加对输入内容的简短描述，以降低这种误操作的风险。

 

如果不提示输入商家或地点名称，用户应该不会很快搞清楚这个框子里应该输入些什么，用户好不容易完成输入，却是输入了一个错误的关键词，得到的是查无结果，很难想象用户该有多么的沮丧。

4．输入诱导

在多行文字的输入框中，虽然有光标闪烁提示用户输入框已被激活，可以输入了，但是为了消除用户在面对大片空白区域而产生紧张感也会增加引导性的文字，引导用户输入而不是点返回按钮退出。

 

“说点儿什么吧……”“吼一句”这些引导词会让用户有亲切感，引起用户情感上的共鸣，激发用户的操作欲望。

无中生有之“附加控件”——简化用户操作

为了使文本的输入效率更高，文本输入框可以与一些控件进行关联,依靠这些控件来简化或方便用户对输入文本的编辑操作。归纳几种输入框常用的附加控件如下：

1．单位控件

某些特定条件的输入内容本身就是一个单位，如收件人的邮箱地址，收信人的电话，好友的名称等。将每个单位转化为控件按钮，可以方便用户对单位信息进行编辑操作。

 

添加收件人的输入操作中，输入的每个收件人名字自成一个单位，以分号隔开显示，当输入框再次获得焦点时每个单位文字变成控件按钮。编辑时可以就某个单位进行单独编辑，或删除，提高整体输入效率。

单位控件的样式需结合具体的输入内容进行设计，可以是按钮形态，也可以是其他形态。位置可以在输入框内部也可以在外部，依具体情况而定。

2．删除控件

在手机上输入文字困难，删除大段的不必要文字同样困难，在设计时需要根据用户的使用情景充分考虑这一需求，使输入框附加一键删除按钮。

 

浏览器地址栏中的“地址输入框”常常需要用户将其清空重新输入新的地址，因此当已有内容的地址栏获得焦点时，在输入框内增加一个清除按钮，方便用户快速的清空现有内容，开始新的内容输入。

 

在微博的编写过程中，用户常常输入了一段文字后感觉并不是合适的，需要重新输入，此时输入框中的清除按钮就可以让用户快速清除当前输入的所有文字。

删除控件多位于输入框末端。在单行文本输入框内为了节省空间删除控件可以是隐藏的，与文本选择进行关联。

3.提醒控件

手机中关于文字输入的字数有很多限制，比如每条手机短信限制160个字符，微博限制140个汉字等等，用户常常会因为不知道限制条件或者忘记了限制条件而进行了误操作，浪费了时间。那么在输入框中增加提醒控件，提醒用户目前还有多少个字符可以输入，避免用户输入超出字数限制。

 

该控件多内嵌于输入框中的右下脚，并与输入内容本身在颜色或字体大小上做区分设计，不能喧宾夺主，打扰用户的输入过程。

结论：

设计手机文本输入框时，以用户需求为出发点，结合使用场景，在空白的输入框样式中增加引导词、附加一些小控件的设计手段可以帮助用户对将要输入的内容有更好的理解和把握，减少用户在输入过程中产生的错误，方便用户对已输入的内容进行编辑和修改，达到提高用户输入效率的目的。

当然这些“无中生有”的设计策略，在实施时要注意样式的展示和交互上的细节，尽量做到简洁、低调，因为输入的文字才是用户在输入过程中需要重点关注的对象，不要让复杂的设计打扰用户。

 

【本文首发于： 百度用户体验部】 http://mux.baidu.com/?p=1407

【 关注百度技术沙龙】