2.3 文本框与多行文本框

文本框，也被称为输入框，是一种最常用的表单元件，用来获取使用者输入的数据，如图2-54所示。

这些数据不仅仅局限于纯文本，在属性面板中，可以看到有如下11种文本框类型，如图2-55所示。

图2-54

图2-55

Text（文本）：最常见的文本类型，包括中文、英文、数字、特殊字符等，支持复制、粘贴操作。

密码：把明文显示改成了密文显示，不能直接输入中文，但可以把别处的中文复制进去。

邮箱：输入数据时和文本类型相同，但若输入非邮箱格式，鼠标悬浮时会提示“请在电子邮件地址中包括‘@’”。

Number（数字）：只能输入数字，支持单击鼠标增减数字。

Phone Number（电话号码）：在PC浏览器上输入数据时和文本类型相同，若在移动设备上预览原型，获取焦点时会自动调取移动设备的数字键盘。

Url：输入数据时和文本类型相同，若输入非网址格式（需要加入传输协议前缀，如http://），鼠标悬浮时会提示“请输入网址”。

查找：输入数据时和文本类型相同，但增加了一键清除功能。

文件：文件选择控件，在浏览器中才有效果。可以选择本地文件，不会真的和文件有数据交互，只是一个交互动作而已，如图2-56所示。

图2-56

日期：日期选择控件，在浏览器中才有效果，可以选年份、月份和日期，如图2-57所示。

图2-57

Month（月份）：日期选择控件，在浏览器中才有效果，只能选择年份和月份。

Time（时间）：时间选择控件，在浏览器中才有效果，可以选择时和分，支持手工录入（会自动判断合法性）、单击鼠标增减，也可以一键清除。

需要说明的是，不同的浏览器对以上11种类型的支持程度是不一样的，在浏览器中的效果也不同，推荐大家使用Chrome浏览器。

2.3.1 文本框的属性设置

文本框的属性如图2-58所示，在制作交互效果时，常常需要设置这些属性。

图2-58

提示文字：用于设置文本框内显示的提示文字，文字的样式可以修改。默认在文本框输入内容时隐藏提示文字，也可以设置成当文本框获取焦点时提示文字立刻隐藏。

最大长度：用于设置允许文本框输入的最大字符长度，当达到长度限制时无法继续输入。

隐藏边框：勾选后文本框将隐藏边框，经常在自定义文本框样式时使用。

只读：勾选后不能再编辑文本框，但可以复制文本框中的内容。

禁用：勾选后将无法与用户做任何交互，不可以编辑，也不可以复制文本框中的内容。

提交按钮：在焦点文本框上按回车键时，会调用所设置按钮的“鼠标单击时”事件，也就是说用回车键来替代单击提交按钮，常用于表单提交，后续的章节会讲解。

元件提示：用于设置鼠标悬浮时提示的文字。

2.3.2 文本框样式

在文本框的样式面板中，只有坐标、尺寸、填充颜色和文字样式的设置，诸如边框、圆角半径、阴影等均处于禁用状态，如图2-59所示。如果在制作高保真原型时需要自定义文本框样式，那么只能利用其隐藏边框的属性，配合其他元件来实现效果，在后续的案例章节会做具体介绍。

图2-59

以上介绍的都是文本框的内容，多行文本框的属性、样式设置和它基本相同，只是没有了那么多的类型，只能输入纯文本内容。

2.3.3 设计原则：表单设计那些事儿

Axure中文本框的使用方法很简单，在产品设计中，文本框通常会和表单填写相关联，这里边还有很多设计原则要遵守，否则可能会影响用户体验，严重的会影响产品的使用。本节就给大家介绍“表单设计那些事儿”，后续的章节中，笔者也会在讲完软件操作、案例分析之后，增加一些类似的内容。

1.选择合适的文本标签

文本框和后续要讲到的其他表单元件，一般都不会孤立使用，和其配合使用最多的就是文本标签。文本标签通常起引导和说明作用，为了让页面更加清爽，也为了让用户能够在第一时间确定文本框要填写的内容，文本标签要简短，尽量使用名词，如“邮箱”“手机号”，不要使用“请输入您的用户名”等加入了动词、修饰词的短语、句子，如图2-60所示。如果把文本标签放到文本框内部，并配合图标会更好，如图2-61所示，人对图形的敏感程度总是要高于文字，前提是图标制作得恰当（这是UI设计师的工作）。

图2-60

图2-61

2.获取焦点

当已经获取焦点的文本框要高亮显示时，可以改变边框颜色、增加阴影等，如图2-62所示，当然在低保真原型中可以不做高亮效果。在Web端的表单填写页面，如登录页、个人资料填写页，应该自动让第一个文本框获取焦点，这样用户在打开页面时直接就能输入；当单击提交按钮时，若用户输入的信息有误，则应该定位到第一个错误信息上。但是在移动端的表单页面，很少有自动获取焦点的设计，因为移动设备的屏幕比较小，一旦文本框获取焦点，就会弹出键盘，如果刚打开新页面屏幕上就有将近一半的内容是键盘，会影响用户获取整体的页面信息。

图2-62

3.合理的限制

一定要限制文本框的输入长度和允许输入的类型，一是减少用户输错的可能性，例如，输入身份证号就把长度限制到18位，超出的部分无法输入；二是增强安全性，让用户自己去输入一些数据，对于软件来说本身是比较“危险”的，因为你不知道用户都会输入什么东西，会不会输入一些攻击脚本等，所以对特殊字符的限制就尤为重要。另外，对于特殊字符，在开发时是需要进行“转义”的，如果实际业务不需要特殊字符，允许用户输入就会增加开发成本，所以对特殊字符一定要“格外关照”。

4.输入信息时的反馈

刚才讲到应该让输入有误的文本框自动定位、获取焦点，但这是在用户单击“提交”按钮时才能做到的，此时用户已经填写了很多信息，如果用户满心欢喜地提交时，发现自己刚刚填写的信息不符合要求，这是一件很让人烦心的事。其实可以在用户填写信息的过程中就给用户相应的反馈，不论是填写正确还是错误，在文本框失去焦点时，甚至在文本框内容发生变化时就做出判断，让用户时时刻刻心里都有底。对于错误反馈，应该详细说明错误的原因，例如，当用户设置的密码长度不合要求时，应该提示“密码长度必须大于6位”，如图2-63所示，而不是泛泛地提示“密码不符合要求”。对于填写错误的文本框，最好也高亮显示。

图2-63

5.关于说明信息

这里的说明信息可以理解为业务上的说明和交互逻辑的说明。对于to C产品，最好不要加入过多的交互逻辑说明，如果用户需要借助那么多的说明才能使用产品的话，说明你的设计是比较失败的。当然如果帮助和说明信息真的很有必要（一般都是业务说明），那么建议也不要超过3行。如果说明内容确实很多，可以在旁边加上一个小图标，鼠标悬浮时显示，这样可以让用户自己决定是否阅读。对于to B产品，笔者认为适当的帮助和说明信息是有必要的。因为很多to B产品对应的业务流程非常复杂，帮助和说明信息有利于用户在上面更好地工作。

6.自动建议

可以用下拉框的形式对输入的内容进行实时匹配或联想补充，例如，搜索联想、邮箱的后缀补齐，如图2-64所示。这种设计可以让用户准确高效地输入内容，尤其是用户输入外语或对目标信息不是很熟悉的情况，会显著提高信息输入的准确性。

图2-64

7.自动填充

可以在文本框中预设一些已经明确的字段。比如移动端都有定位功能，Web端也可以根据IP定位，可以利用这些技术提前填充区号、邮编，减少用户的操作。这些预设的内容应该是可修改的，因为定位也有不准确的时候。有些内容也可以根据已填写的文本框数据自动填充，例如，可以根据身份证号推断出用户的地区、出生日期和性别。

8.Tab键切换

使用Tab键可以切换焦点，需要注意的是应该按照页面上元件的顺序进行切换。

9.移动端键盘类型的限制

在移动设备上，有不同的键盘类型。例如，在输入电话号码时，可以直接调用数字键盘，不要让用户自己切换键盘，防止用户输入错误，也能提升产品体验。需要说明的是，Axure的文本框只有数字键盘（在移动设备上预览时才有效果），无法分别限制中文和英文，但如果产品需要默认显示某一种类型的键盘，如输入密码时默认显示英文键盘，用户可以手动切换数字键盘，应该在交互说明书中标明。关于如何撰写交互说明书，会在后续的章节中详细介绍。