聪明人有一个特点，就是善于把无价值的事做得有声有色，在玻璃鱼缸里游泳，也有乘风破浪的气魄。

什么是输入框？

关于输入框(Text fields)的定义：Text that the user can select or edit and that sends its action message to its target when the user presses the Return key.（从iOS设计规范中摘录）。可以理解为让用户录入信息，为达到下一步的操作目的提供前置条件。常见的使用场景包括但不限于注册登录、搜索、内容编辑以及信息表单等。

输入框从用户的输入方式可以分为文字输入框和选择输入框。

如何设计输入框？

从用户视角出发，输入框的使用在用户眼里可以分为三个阶段：输入前(default)、输入时(active)、输入后(inputted)。而贯穿这三个步骤的设计原则就是：易懂、易写、易过。

易懂：让用户知道要输入什么内容。

易写：降低用户输入时的操作成本。

易过：提高用户输入的内容正确率。

输入前

1. 确定输入框的类型。

首先，需要确定当前的使用场景应该选择哪一种类型的输入框，文字输入框 or 选择输入框。像是个人资料部分的性别、城市、生日等完全可以采用选择输入框的样式，没有必要让用户去手动打“男”/“女”，因为操作成本相比于选择实在太高了。

而文字输入框的UI样式又可以分为标准和间隔。

其中间隔可以让用户更明确自己的输入位数，方便进行快速的二次确认。常见于手机号码、日期、验证码等。

2. 提示用户应该输入哪些内容

提示的内容包含但不限于：

【1】必填 or 非必填；

【2】允许输入的字符数量；

【3】允许输入的字符类型；

提示包含两种UI样式，一种是比较常规的输入框外部Lable，另一种是内部Placeholder。两种样式在定义输入框的性质时没有太大的体验差异，但如果是规定输入框内允许输入哪些内容时建议放置在外部，比如“密码应该包含字母、数字或下划线。”由于文本内容较长，用户很容易在输入的过程中忘记具体的规则。

外部提示 内部Placeholder

尽量提前告知用户有哪些限制条件，不要到用户最后提交的那一刻才告诉用户你之前输错了。当然也可以在用户输入时提醒。

输入时

1. 是否自动弹出键盘

由于是移动客户端的输入框，所以首先要决定是否自动弹起键盘。一般直接点击输入框时是弹起键盘，但进入到编辑页时要不要弹起键盘需要根据使用场景来确定。

以微博为例，新建微博时包括<写微博>、<图片>、<视频>等方式，其中如果用户点击<写微博>后，进入到编辑页是自动为用户弹起键盘的。而用户选择<图片>或<视频>时，首先需要用户选择本地内的图片或视频，然后再进入到文本描述页，此时是不会为用户自动弹起键盘的。两者产生这种差异的原因大抵是<写微博>是以文本作为主要展现形式，重点就在于文本内容本身。而后两者的则主要是要展示照片或视频，文本作为辅助。用户在进行文本描述前，还需要花费不少精力对图片或视频进行二次增删改查，文本描述的步骤往往需要往后靠。另外，豆瓣也是后一种情况，因为豆瓣选择将文字内容和图片融合在一个界面中，两者处于同一个优先级别。

发视频微博的界面

同时需要注意键盘弹起时尽量不要挡住其他功能控件。比如部分功能控件会随着键盘的弹起而自动移位。

关于弹起的键盘，还要确定弹起什么样的键盘。系统键盘还是自定义键盘，拼音键盘还是数字键盘等。像是一些对安全性很高的App，比如银行App在用户输入账号密码时就是采用自家设计的键盘，来保障用户的数据安全。

2. 是否提供预设内容。

一些偏探索类的App就经常会采用预设内容的方式来为用户提供输入思路。比如高德、美团、网易新闻等就会自动为用户预设众多选项。

【1】推荐：热门、个性化、基于GPS定位；

【2】历史记录；

【3】相册（以微信为例，用户拍完一张照片后，返回聊天界面，点击“+”号就会弹出之前拍过的一张照片给用户）；

【4】粘贴剪贴板

3. 多行输入的自适应

用户输入时很容易出现字数超过输入框预设范围的情况，这个时候就需要输入框进行自适应。以微信输入框为例，初始状态下是只给用户一行的预设范围，当用户输入多行后，则自动增加输入框的宽度，直到5行的上限。上限范围可以从一句话所占的位数来考虑。

微信输入框

输入后

1. 内容校验

常规的校验范围包括：

【1】格式合法性

【2】位数

【3】重复性

校验的方式一般包含两种：即时校验和触发校验。

*即时校验是用户一进行输入就开始进行实时校验，比如常见的邮箱格式或密码校验，用户输入时，只要不符合格式要求，立刻就进行错误提示。

*触发校验则是用户进行内容提交时才会进行校验，常见于用户注册登录后发现已注册。

2. 二次确认

用户输入内容后，为了防止用户的某些误操作导致的内容丢失，在部分场景中就需要对用户的一些操作进行二次确认。

以微博为例，用户点击取消后，会弹出是否保存草稿的弹窗。<保存草稿>是保存后退出当前页面，<不保存>是不保存退出当前页面，<取消>是继续停留在当前页面。

以上就是关于App输入框内容的复盘总结。