交互思考：如何输入，输入前需要注意什么，输入中如何校验，输入完如何反馈
类比用户使用产品功能前，如何清楚的知道这个功能的使用方式。使用中如何明确了解自己行为正确与否，使用完成后，如何快速得知结果。
input
1.输入框架构包含三大部分：文本（标题、占位符、帮助、反馈）、载体（文本框、分割线）、图标（展示型图标、操作型图标、反馈型图标）
image.png
组合1：文本框+标题（左侧输入&右侧输入）
常见的主题有时也用图标代替Label，表单中为了表明输入框是必填的，通常在label旁边添加一个星号。
文字Label、图标Label、带星号的Label
确保用户知道需要在文本框中输入什么信息。
（PC端）需要注意多列内容的正确展示，才能在界面中显得更和谐，涉及到用户的眼动行为。
a.标题左对齐：浏览label最快，但标题输入框间距较远，用户从左往右浏览的时间会变得更长，可将某些短label通过增加字符间距的方式使之更易读。当然时间长也不是坏事，对于有陌生数据和需要谨慎填写内容反倒能让用户减少出错的可能
image.png
b.标题右对齐：占用屏幕高度减少，节约垂直空间。但由于Label长短不一时显得层次不齐，标题与外框距离参差不齐，且用户看着吃力，浏览效率比垂直顶端对齐低。
image.png
c.标题文本框垂直左对齐排列：用户只需要依次向下浏览，占用屏幕横向空间少，即使label特别长也能很好的显示（多国语言有用），填写效率最好。但纵向占用过多垂直空间，要注意每组label和text field与其他组的间距，以免密密麻麻降低可读性。
image.png
组合2：标题内嵌入输入框，作为占位符使用，节省空间，为了让label和真正输入内容作区分通常会把Label颜色调淡并在最后加...，实际上是把Placeholder text当做label。在浏览效率上和顶端对齐不相上下，但一旦但用户点击在Text field输入内容后，标题就看不到了，想返回就需要删除输入内容，只适用于Label特别短或者搜索框、账号密码输入框等用户非常熟知的情况。
内嵌
组合3：Float Lable标题内嵌，点击缩放移动至上方（Matt D Smith），兼具内嵌label和顶端对齐的优点，缺点是点击后标题太小，对于小屏幕和视力不佳的用户来说不是个好方案，导致在展示类表单复查时难以阅读，占用了placeholder text空间，对于一些用户陌生的输入框来说需要额外的空间放提示和说明。目前已经成为MD里Text field默认风格。
微交互
组合4：标题+文本框+占位符。占位符是text field没有内容时出现的灰色文字，当用户输入内容后将会消失，因此只能展示一些比较简短的信息。通常即可替代标题，也可以作为输入指引（例如：“请点击输入评论”）、或者表明输入限制（示例-年/月/日，不适合在文字较多的情况使用，文字较多建议置于文本框下方），还可以显示默认值（游戏注册如姓名，淘宝输入框热门商品促销，用户可以搜索也可以替换。
image.png
placeholder
注意：
1.IOS有一个特性，在软键盘上方显示Placeholder text，这样即使在输入过程中也能提示用户正确的规则，且输入过程中用户视线停留在软键盘上不用转移。
image.png
2.辅助说明/额外说明/帮助文字
如果Text field的输入规则或者注意事项比较复杂，建议在Text field附近（一般在下面）添加HelpText进行额外说明。Helper text也可以用Tooltips或者Popover形式来呈现。
例如：MailChimp给密码输入框的Helper text加入了互动：输入框的复杂规则拆分成多几个简单的条件，每当用户输入的内容满足一个条件，会给予相应反馈，告知用户已满足这个条件，把复杂的任务拆分得简单，用户输入不易出错。
image.png
3.初始默认值（Defult value）
输入框内默认预留的字符，获取焦点后不消失，用户可以删除或者修改这些字符。好的初始默认值能减少用户的输入负担。例如地图app路线导航功能的起始点输入默认值是用户当前位置，用户只需要输入目的地即可开始导航，提升效率
image.png
2.字符限制，包括显性和隐性提示。显性提示指特殊场景下的字符限制的帮助文案（原微博140字限制）。隐性字符显示是无法输入（手机号超过11位数，夹杂字母不显示），不仅是技术逻辑的基础认知，也是一种以用户共识创建产品功能的例子。
注意考虑：
a.最短最长能输入多少个字符
b.是否能输入emoji表情符号等特殊字符
c.前后空格是否过滤
d.能否支持从剪贴板黏贴等
e.如果考虑用户的输入超出限制或出错，应当如何给予用户合适的反馈，帮助用户将内容修改正确。
目前有两种字数限制展示风格
a.当前已经输入的字数/字的最大长度。
b.一直显示“当前已经输入的字数”，达到最大字数限制后会提示超出长度。
image.png
3.图标类型，展示、操作、反馈三类。
a.展示类图标通常用来代替标题（有些多余），一般是较为容易表达的。弊端是用户个体认知差异。
展示
b.反馈型图标，用来在用户填写完成内容，脱离输入框后，系统开始校验，给出反馈的图标。
image.png
c.操作型图标，输入后文本框显示清除图标、语音输入、显/隐藏等。逻辑复杂要慎用
快速清除按钮（Clear button）
对于软键盘，连续多次点击delete键删除多个字符比物理键盘体验要差得多。
clear button出现的时机
a.获取焦点时出现
b.有内容时就出现，即使没有获取焦点。这种适合搜索框，点击clear button后清空内容再自动获取焦点，一气呵成，直接进行下次搜索。
c.一直出现
d.没有明显的clear button，但是按一次软键盘的delete直接清空所有内容。通常密码输入框出错后会用这种
问题：
1.部分产品在密码输入框中的键盘回删效果和点击清除按钮效果一样全部删掉。在校验前，键盘回删应该是删除上一个字母或数字；而在校验之后回删与清除都是全部删除。因为密码是星号隐藏，校验过后再单个回删的操作并不清楚第几个出错，一键删除方便。
2.密码输入框和可见性切换图标
星号「*」或「•」密文显示会给用户输入和检查带来很大麻烦。国外数据显示，采用密码默认明文显示，通过可见性图标（Invisibility Icon/Visibility Icon）切换明文/密文，能明显提高转化率，而且不会降低安全性。
infor
自动获取焦点（Autofocus）
当用户点击Text field，光标出现弹出软键盘，表示该Text field已获取焦点，此时用户就能输入或者修改内容。对于主要任务就是填写表单的页面，可以在用户进入该页面后，自动获取焦点。如果页面有多个Text field，当用户填写完一个后，自动获取下一个焦点，这样操作会更流畅。
输入方式
移动端主要输入方式是键盘，选择适当的软键盘布局有助于用户提高输入效率，降低出错的可能性。除键盘外，用其他输入方式提高输入效率。例如语音输入、GPS定位、拍照识别文字、文字自动联想、与其他输入类控件配合。
image.png
多行输入框的最大行高
Text field可分为单行文本框（Single-Line text field）和多行文本框（Multi-Line text field）,手机屏幕小，建议给多行文本框限制一个最大行高，如果达到最大行高，输入框内的文本可通过滚动条滑动。为了方便拇指滚动，建议最大行高大于5行。
image.png
总结：
标题（始终可见），载体（样式跟随场景变化），占位符（提示，占位，默认值），帮助提示（内容多可拆分，位置可以在占位，下方，融入操作图标中），反馈（正确和错误），图标（展示型，操作型，反馈型）
全家桶
4.输入反馈的规范逻辑-《微交互》。反馈不只是输入完成后的被动行为，还包括输入前与输入中的对用户行为提示与反馈的逻辑规则。
输入反馈有三个过程：输入前提示，输入中校验，输入后反馈。
a.输入前提示-针对部分验证项给予信息提示，产品主动发出的行为。比如验证码输入框的样式已经告知用户验证码是4位数，弹出的数字键盘已经剔除掉了部分比如格式、位数等可能出现的问题（app目前支持验证码自动填充）
输入前
b.输入中校验-对结果实时验证并给与反馈，产品主动发生的行为。比如验证码输入，验证是否正确，成功下一步，失败主动给予反馈提示。注意样式明确，文案让用户知道为什么会出现这样的问题，清晰易懂，可以加上图标增强可读性。
过程中
注意再次输入密码发生错误，要给两个输入框同时反馈错误显示，全部删除。
c.输入后反馈-有效信息可与看，失败给予错误提示，验证内容是否为空（占位符不提供默认值的情况下，提交反馈不可为空，输入框应该清除占位符，以便查看具体错误原因）、验证内容是否违规（是否含有不可使用的内容）、验证内容是否包含在一定范围内（特定范围，比如手机号，地区限制）、严重内容的二次确认（密码修改二次输入，判断一致）、验证内容的格式（邮箱@）、验证内容的长度（密码至少包含6个字符）、验证内容的唯一性（用户名是否重复）
注意理解反馈的逻辑规则，先知道组织架构，再理清输入前中后的信息。特殊问题，具体分析。
5.表现
反馈失败应包含：
a.发生错误 比如Noticebar，用红色表示错误。
b.发生错误的地方 突出错误信息的位置。
c.如何修改错误 给予用户如何将错误信息修正提示
注意视觉效果应与反馈结果相对应。提交成功，绿色或品牌色告知用户；出现问题，用红色。
移动端组件-input 交互描述
定义规则：通过鼠标或键盘、剪贴板输入文字、字母、数字、符号内容，通过光标可以在水平方向移动，对特定格式文本进行处理（隐藏密码）。
使用场景：填写表单/输入信息
相关组件：仅输入数字键盘时，使用InputNumber数字输入框；进行搜索时，使用Search搜索框；复杂输入时，使用RichText富文本编辑器
交互说明范例
case1：输入框高度说明
输入框根据行数分为：单行输入框、定高文本域、自适应高度文本域
类型：单行输入框 说明：输入少量内容时使用，固定为一行无换行 示例：N
网友评论