移动端表格控件_移动端控件（六）-输入框（Text fields）

输入框（Text fields）使用户可以输入和编辑文本。常见类型：有独立文本标签输入框、行内标签输入框（如搜索框）、对话输入框、段落文字输入框……笔者查阅了iOS和MD官方规范以及网络资源，总结整理了以下需要注意的关键点：

对齐方式

（表单）输入框的对齐方式主要有顶端对齐、水平左对齐、右对齐、居内对齐四种，各有优劣。一般情况下根据标签长度、操作空间大小、表单复杂度等方便综合考虑用哪种。

• 顶端对齐

用户眼球移动的效率最高，阅读效率高；占用垂直空间，节约水平空间（文字标签较长的情况下也能使用）；表单不多的情况下可以优先考虑使用这种形式。

• 水平右对齐

节约了垂直空间，但是左侧参差不齐，阅读效率相对较低；但是填写速度比左对齐快。

• 水平左对齐

标签到输入框的距离远，填写效率低，但是阅读标签栏速度快（不易被输入框干扰）。如果希望用户速度放慢，并仔细考虑表单中的每个输入框，比如复杂的表单时，往往选择左对齐。

• 居内对齐

居内对齐是指标签文字在输入框、输入线里面，这样一来更加节约空间，也提升了阅读效率；但是缺点是输入内容时就看不到标签了，所以一般用于用户对表单比较熟悉（比如登录注册），或者表单内容比较少的情况。

辅助提示信息

辅助提示信息一般展示在输入框周围或里面，帮助用户准确填写信息，或对用户当前填写内容进行校对反馈，有时候会用到图标，或文字图标结合的形式展现。

• 占位符

占位符是指在输入区域内的提示文本，一般以灰色展示防止干扰，预先提示用户填写内容。

• 辅助文本

当标签和占位符都不足以解释所填内容时，这时候就需要在输入区域周围给以一定文案提示说明，防止用户出错，一般较复杂的表单填写较为常见。

智能推荐（联想功能）

在很多输入的场景我们都遇到过联想功能，尤其是输入搜索场景，基于已经输入的文本内容或输入历史记录、用户喜好等，为用户推荐可能的选项，从而提高输入效率。

完成/取消/一键清除按钮

需要注意的是，由于安卓输入键盘较为多样化，有些键盘是没有完成/确定按钮的，因此一般需要在输入文本，尤其是较长文本时需要加“完成”/“确认”按钮以及一键清除按钮，以此来提高用户可控感；当输入容器为弹窗或浮层时，还需要加“取消”按钮。

多行处理机制

在默认的单行文本框中，随着输入内容超过容器，输入文本会向左移动；在多行文本框中，随着文本的输入换行，容器随文本垂直自适应增高；当超过N行时（可根据实际情况设置，一般4-5行），高度不再增加，可上下滑动查看顶上去的文本。

输入（结果）跟踪反馈

为了不打断用户的输入行为，当用户实时输入出现错误等需要对输入结果进行反馈时，往往就在输入区域附近或里面进行提示。以下是常见的几种跟踪图标：

除此之外，当用户完成输入点击提交或完成操作时，反馈的形式更加明显，也比较多样化，比如toast、noticebar、弹窗，常见场景如空态保存、字数超过限制、格式有误等等：

参考文献：

https://developer.apple.com/design/human-interface-guidelines/ios/controls/text-fields/

https://material.io/components/text-fields#input-types

这个控件叫：Text fields/输入框/文本框

大家都看得懂的设计规范——输入框篇

UI设计组件-文本框/输入框（上）