小小的身躯，巨大的能量；文本输入框是最基本的界面控件之一，它需要显著、良好的可访问性，高效、舒适的互动性。凡需要用户输入信息的地方，都要用到输入框，输入账号密码、筛选条件、输对话等等；它看似简单，但使用场景多，交互频次之高，值得我们花些时间好好研究一下。
我们需要明白输入框是什么、有哪些、在什么场景中使用，这样可以更好的为我们设计服务。
一、拆分结构
输入框：又叫文本框，通常是一条长长的矩形，附带各种元素；文本框可以对输入信息进行验证、帮助修复错误的输入、自动完成输入，以及提供输入建议。
这些是文本输入框的关键元素：
- 文本容器（必选）——可交互的输入区域；
- 输入文本（必选）——所输入的文本内容；
- 标签文本——告诉用户这个表单字段中要输入的内容属性；
- 占位符文本——输入信息的范例，用户后续需要用自己的内容替代它；
- 帮助——提供输入框的信息；
- 格式化标记——文本带有的特定格式、特殊字符；
- 跟踪图标——在输入中、输入后出现的，基于用户输入内容的一种提示，比如显示、隐藏、成功、错误。
1. 文本容器
容器可分为：
- 输入线容器：一条长线，因为占空间小，常用于简洁风格的表单。
- 填充容器 ：一个带填充色、无描边的矩形。
- 线性容器：一个无填充色有描边的矩形。
1）明确输入框的类型
不同类型的文本差别很大，特定类型的文本输入框都应该进行合理的优化，比如银行卡号。
下面列举出了一些常用的输入框：
2）使用输入线容器注意间距
移动端中带下划线的文本容器容易误操作，因为缺少了点击目标的范围边缘。
在某些情况下，他们瞄准目标时可能会意外触发相邻的输入线容器；没有清晰的目标边界，手指很容易落在错误的区域。
圆角化矩形容器对于增强其可点击外观也很有用。
研究发现：人类天生就将圆形轮廓物体视为友善，而尖锐的倾斜物体则构成威胁；这一发现表明，用户对圆角有积极的偏见，这会吸引他们与那些对象进行交互。
2. 标签
输入框标签是显示输入内容的属性。
1）标签的分类
标签包括文字标签和引导图标，是否使用标签、使用哪一种（或者两种）标签都是自由可搭配的，只要保证用户能理解内容属性。
在输入框中基本上都能看到文字标签：
但如果是用户很熟悉的场景，也可以只使用引导图标、不要文字标签，这时候占位符文本就可以起到辅助的说明作用。
甚至某些操作仅引导图标就够好理解，没有占位符也可；如搜索框，用户面对放大镜即使没有占位符说明也知道是搜索框。
2）标签的位置
标签的位置很灵活，可以在容器上方、左边、内部，同时还会存在左对齐与右对齐。
但也不能随意放置标签的，总结发现，一共有4大类标签位置：
4种方式在设计中如何选择呢？最佳的样式通常取决于输入框的大小、位置和整个表单的样式，以及组件库和平台，每种设计都各有优劣。
顶部标签：在多数情况下，这是最佳的选择，在移动端设备上效果更好，因为不需要太多水平空间。
- 优点：用户上下扫读即可快速捕获信息，并填写表单，更快完成；
- 缺点：纵向上需要更多空间。
左对齐标签：当用户不太熟悉你所提供的输入框时，左对齐是一个不错的选择。
- 优点：易于扩展，可以充分利用垂直空间，能帮助读者理解；
- 缺点：标签和输入框之间的距离可能会过长，显得参差不齐，并且完成表单填写会耗费更多时间。
右对齐标签：和左对齐的标签相比，右对齐的标签在用户填写时速度更快。
- 优点：文本标签和输入框之间的距离固定，用户浏览扫视速度更快，完成时间更短；
- 缺点：因为左侧参差不齐，整体扫读表单的时候不容易了解全部信息。
请注意不管标签左对齐还是右对齐，矩形框都应该左对齐。
内部左对齐标签：将标签放在文本框中可以使表单填写起来更快。
- 优点：它减少了表单的长度和宽度。因为标签在文本框内，所以在文本框外有更多空间可以更紧凑地布局。
- 缺点：当用户开始填写文本框时，文本框中的标签将消失，用户在回头查看表单时难以识别他们输入的信息，表单上没有任何信息的迹象，它迫使用户重新调用输入信息的标签，从而增加了记忆的认知负荷。
3）小节标签
为了使用户可以轻松识别他们输入的信息类别，我们根据用户将填写信息类别对输入框标签分组，命名小节标签。
例如：用户的采购要求包含他们的日期、收货地、供应商要求、补充说明；咨询方式包含询价方式和联系信息，将采购要求信息分为一个小节标签，将询价方式及隐私设置分为另一小节标签，帮助用户在填写表格后将其采购信息与询价方式区分开。
4）浮动标签
用户在填写表单时可能会犹豫，浮动标签尽可能地简化了这个过程。
输入模式首次改为浮动标签模式是2013年8月。
这个想法很简单：动画占位文本在输入旁边显示的是图标，以至于用户不会在当前坏境中迷失。
这个想法随着时间一点点推移，图标并没有完全达到目的，令人非常沮丧的是因为没有标签不知道什么是正确的；这时图标想法被废弃，只有文本的设计诞生了。
现在，浮动标签用文字的轻微动画进入画面，当有人输入输入框时，浮动标签将向上动画，并将颜色更改为活动状态。
浮动标签作为一个解决方案，节省了界面空间，使之看起来清晰简洁，且没有放弃可用性。
顶部对齐标签与浮动标签：
在上面的顶部对齐形式中，只有4个字段，但是当你扫描表单时，会感觉有很多的需要填写的；这是因为用户必须扫描8个不同的元素。标签和字段被矩形分隔开了；额外的视觉效果可能会让用户觉得有很多要填写。
提交前最后检查输入：
内部标签模式输入字段后标签消失的模式也是有问题的，消失的标签迫使用户去回忆标签的内容。
使用浮动标签模式检查用户输入是快速容易的，标签不会消失，也没有视觉障碍，如顶部对齐的表格；相反，每个字段的视觉固定是比较标签和输入所需要的。
使用顶部对齐标签模式，由于不像浮动标签整齐的分为4个元素，最后不是能很快地交叉检查输入；空白行和字段边界阻碍了他们的视觉路径，并减缓了流向（其实影响也不大，可能就慢个0.03s）。
文本样式也可以帮助用户更快地检查其输入；通过输入文本粗细大小，标签文本较小，用户可以一目了然。
内部顶对齐标签与浮动标签：
内部顶对齐标签由于它比顶部对齐的标签和内部左对齐标签在个别场景中具有优势。
格式又和浮动标签很像，但没有动画，我觉得可以单独拿出来说一说。
使用内部顶部对齐的标签，不会出现使用户感到惊讶的不可预测的动画。
所见即所得，这种静态方法可能没那么花哨，但也不会突然出现使用户感到困惑的意外情况，当然在操作过程中也没有浮动标签看起来清晰简洁。
3. 占位符文本（提示文本）
占位符，是指在用户未输入时，预先占据文本框内位置、用来描述该文本框的输入规则、且颜色不太显著的文本符号。
当用户输入内容时/输入完成后，占位符不再存在，而是被输入文本代替。
占位符和标签的区别就在于：标签不会随着输入状态变化而消失。
有时，可以只使用占位符而不要任何标签，如下图登录注册页：
但当界面中文本框较多时（多于3个），纯占位符就不再适合。因为：
- 当占位符被输入文本代替，大量的文本框让用户容易忘记每一个对应的含义，不方便检查。
- 整屏的纯占位符容易看起来像是已经填好的输入文本。
占位符位置：
- 无标签时：占位符可以左对齐、居中对齐。居中对齐只在只有一个文本框时才用（搜索框）。
- 有标签时，占位符绝大多数是左对齐，只有一种情况下可以选择右对齐，即移动端的输入线文本框，如下图。
4. 帮助文本
帮助文本是靠近输入位置的一行小字，具体位置不限，帮助文本提供输入框的有关信息，例如：输入的文本会被用在哪里。
当标签+占位符都不足以介绍文本框，或当用户正在输入时因占位符消失而需要更多提示时，可以使用帮助文本，帮助文本可以一直存在，也可以只出现在“正在输入”或“完成输入”状态。
原则：
- 左对齐；
- 如果可能的话，尽量保持在单行；有多行文本时，也可以使用换行；
- 颜色不能抢了输入文本的风头（出错信息除外）。
5. 输入文本
向输入框中键入的文本称为输入文本，只有在“正在输入”和完成输入后才出现。
如果有占位符，则输入文本会在相同的位置替换掉它，唯一的变化是字体颜色，需要更显著。
位置的话和占位符一样。
6. 格式化标记
有时候输入文本带有特定格式、特殊字符。
它们有的作为分组字符位于输入文本中间，如电话号码的连字符、金额的分位符；有的作为后缀，如邮箱的“@域名”、中文货币单位；在设计和开发时我们应该预置好这些标记。
还有一种保密文本框，在输密码时将密码不可见，用黑点或*代替。
字符可以使用以下方式进行格式化。
1）分组字符
输入文本可以以不同的方式进行分组，并在适当的位置添加特殊字符，例如：添加到电话号码上的连字符。
一旦完成第一个特殊字符，光标会自动跳转到下一个分组。
2）前缀 & 后缀
前缀和后缀可用于明确单位、或添加预输入文本。
前缀在文本框中左对齐；后缀在文本框中右对齐；文本框可以同时拥有前缀和后缀。
3）密码修改
密码输入默认会隐藏密码，每个密码字符都用一个居中的椭圆表示（例如•••••••）。
当文本框中显示可见性图标时,它指示该字段输入的时候是否可见，可以通过该眼睛图标来显示调整。
请注意区分开标签、输入文本、占位符和前后缀的字体颜色。
7. 跟踪图标
这是在输入中、输入后出现的，基于用户输入内容的一种提示，常用到的有：有效性图标、密码安全性图标、出错图标、清除图标、语音输入图标、下拉图标等。
二、信息输入前
1. 舒适的大小
输入框大小是否合适，以便完整显示那些最有可能出现的输入内容；表单输入框的大小往往会影响用户输入的心情。
设计考虑到网页无障碍阅读，即输入框文字的前景色跟后景色要有足够的对比度，提高可识别性。
1）输入框长度应符合用户预期
搜索查询输入区域的宽度应足够宽，以包含典型的字符。
如果“输入”字段太窄，则会降低可用性，输入框中文本字段可能的输入长度应该小于输入框本身的长度，这样不仅在体验上一致，而且在视觉体验上更加愉悦。
2）填充外观
灰色的填充使容器看起来像处于禁用状态，它的使用会让用户怀疑能否与之进行交互，发送这些混合信号会使他们在开始输入文本之前就感到困惑。
理想的体验是当用户识别你的文本字段就立即开始填写，空白是空虚的明确提示，它提示用户使用其输入来填充空白。
要获得可填充的外观，要使容器内部保持空白，并留有封闭的边框，使边框变暗，使用户可以将轮廓比作一个空框；它们吸引了人们的注意力并且易于识别，这正是用户所需要的。
要增强文本字段的可填充性，可以将其放在米色背景上，使空间更突出，并提供了一个文本字段最清晰的环境。
通过这种方法，用户在检查表单时可以更快地注意到填充和未填充的字段。
空白区域的亮度使输入文本和占位符文本具有更高的对比度，提高了可读性。
灰白色背景上放置的任何文本均可保持可读性，并且不会在视觉上与输入或占位符文本发生冲突。
2. 告知用户输入内容
当用户选中准备输入的时候，应当提供清晰的视觉提示，这样让用户明确知道自己的位置，这个就可以靠标签和占位符来实现；而不是迷失在茫茫表格中，这种细微的反馈会让用户更有掌控力。
1）填写标签要简洁
文字标签宜简短，尤其在移动端，尽量不超过六个汉字；英文标签不要所有字母大写，首字母大写即可。
过长的标签有两个问题：使填写的内容压缩、影响整页对齐。
平行排布优点是：符合视线规律、阅读更快。如果要填写的标签实在过长，检查一下是否说不清楚的可以用占位符分担描述下，或者采取垂直排布的方式。
平行排布优点是：对标签字数限制不严格。
2）占位符文本提示
- 占位符要简短，不要换行，若超出框，超出部分截断；
- 千万不要把占位符设计得像已经输入的文本，所以颜色要浅；
- 框多的时候尽量不要占位符，因为很多用户只是大致浏览；
- 针对色弱人士不适合用占位符，因为颜色较浅（这一点基本可以忽悠）。
电商、社区等内容导向型平台的输入框会存在内容推荐：
标签提示+占位符提示内文字补充说明告知效果更为强烈。（推荐使用）
3. 必要的说明
1）必填内容
⻅到标签前后打了“ * ”号，⼤家便知道意思是必填；除了⽤星号，必填还可⽤汉字“（必填）”放在标签后。
我们在设计中，如果遇到⼀⻚表单的⼤多数字段是必填，那么需要标出的不是必填，⽽是选填内容；也就是说，标出少的那⼀个，如果两者各占⼀半，那就随便选择了。
注意：有的页面不像表单页那样复杂，不必标出必填或选填，但应在所有必填项填好后，再点亮按钮跳转到下一页，如登录注册页。
2）格式提示
- 输入框内文字占位符提示；
- 格式拆分编辑。
举个列子：要求填手机号码时很多人往往会忽略区号的输入，因此很多输入框在设计时，会将区号单独提出来，避免此类错误的发生。
3）字数限制提示
一般以文案形式提醒，比如：在输入框后显示不得超过X字。
4）规则补充说明
一般在输入框下方以文案形式提醒，重要的提示可以标亮提醒。
有两种输入项目常常要加入说明：
- 专业性强，大众可能不清楚；
- 安全隐私或者金钱相关，有心理顾虑。
针对第一种，说明能减少输入错误，例如：银行转账不是及时就到，而是需要两小时；金额不是任意的，每天有上限，并且和所剩的余额相关。如果这些是在用户输入完才告知，或者报错，那么这个锅用户当然不愿意背。
针对第二种，有心理顾虑的，可以承诺不会对用户造成损失，或者找背书；下图最后一个解决方案已经通过华为严选产品安全认证，消除顾虑之后才能顺利进行下一步。
三、信息输入时
总的来说，优化输入框设计主要有三个方向：
- 提高输入速度
- 为用户输入提供引导帮助
- 直接有效的指出用户输入过程中的问题
重视每一个细节点上的用户的感受，优先关注让那些最常被用到的或者是对完成任务最为关键的输入框，这样产品才会被打磨的越来越精致。
1. 当前位置的提示
用户在选择输入框并输入内容时应获得视觉反馈，当他们删除输入内容并取消选择输入框时，他们还应该获得视觉反馈；当输入框正确执行视觉反馈时，用户将可以毫无困难地输入内容。
1）选择输入框并输入
当用户第一次将注意力放在文本框标签上时，他的边框应该看起来是深灰色的，以便于输入时将显示的黑色不同。
用户开始输入时，标签应该消失，但是用户只用鼠标点击文本框时，标签不会消失；但文本框应突出显示且标签应模糊显示，以使用户知道输入时该标签即将消失。
在用户输入之前，标签不应完全消失，因为某些用户将选择一个输入框，而可能忘记了在该输入框中输入哪些信息。
2）删除信息并取消选择输入框
当用户删除输入框输入信息并取消选择它时，输入框应回到其原始状态，这意味着输入框标签应该再次显示。
当用户删除输入内容时，输入框内标签还不会完整显示。
当用户删除信息并取消选择文本框时，标签应重新出现，以便他们可以根据需要再次读取标签。
3）光标引导
选中输入框位置时出现光标引导输入，取消选择时输入框又可以收回光标；选中输入框时外框标亮提示，点击空白区域又变回原有颜色；这是用户的控制性和自由度的展现。
通过不同的外观样式来呈现当前所处的状态，是输入框在用户操作界面时必须做到的事情。
非激活状态、光标悬停状态、禁用状态、选定输入状态、验证识别状态、出错状态等等。
所有的输入框设计当中都应该保持一致，尽量不要进行反常规设计，避免和用户思维模型发生冲突。
2. 限制条件的提示
当你好不容易填写完长长的信息，点击提交，这时候界面提示：你有20项填错……这种处理方法显然不是最好的。
没有人会喜欢后知后觉的反馈，特别是错误；告知用户输入内容是否正确的最佳时机，是在用户填完当前输入框或当前字符内容时立刻告知用户；及时验证可以马上告知用户输入的正确性；及时验证，帮助用户及时改正，无需等到点击提交按钮。
1）字数
字数限制输入：当达到限制字数时，不允许再输入内容，这样可以提醒用户检查输入的内容是否不小心多输了文字。
这里只输入手机号时，手机号按照344的位数展示，根据米勒定律的分段记忆原则，便于记忆及且用户不容易输错。
手机号输入位数超过11位则限制输入，这里也是根据特定输入框来定义的，例如：手机号、身份证号等这些特定位数的字符来特殊定义。
字数实时提醒：实时提醒用户当前输入内容字数；气泡或弹窗提示“字数超过上限”。
以颜色区分：当没有达到限制字数之前，当前输入的字数颜色为灰色；当超过限制字数时，显示的是超过了多少字，颜色为橙色。
2）输入框文案填写类型提示
默认情况下输入框内会有文案告知用户填写的信息类型，输入框下方有温馨提醒关于填写内容更详细的一些要求或建议。
比如编辑状态下的密码输入框下方有文案提示：
- 不能包括空格；
- 长度为8-16个字符；
- 必须包含字母、数字、符号中至少2种。
3. 减少用户输入
说了那么多，最让用户舒心的莫过于帮助他们填写，因此，许多需要填写、选取的表单最好有预设的初始值或者内容填充在其中，这样可以让用户用起来更加方便，这就是智能预设。
常见的使用场景有搜索联想输入、地址定位等。
1）识别设备信息
针对有个人识别信息的设备，如手机号码登录、网页识别浏览器账号等。
使用预填充字段作为默认值，比如基于IP地址帮用户填写好国家和地区；这类解决方案很灵活多样，根据填写字段属性、功能，可以灵活处理。
比如某些手机登录，直接定位该设备手机号码，“本机号码一键登录”，并显示手机号，这少了输入手机号和验证码的过程，效率大幅提高。
如微信在新的小程序注册账号时，使用微信授权登录，小程序自动识别微信号、呢称、微信绑定的手机号。
2）复制粘贴
对于已经复制了文本内容的对象，输入文本检测复制内容，下方自动弹出小气泡显示复制的文本内容，只需轻轻一点，文本就复制到输入框中。
如果复制内容不对，点击小气泡以外区域则小气泡消失。
3）历史记录
借助自动填写功能，帮助用户填写输入框，用户在填写过程在自动查询匹配、提供建议，用户可以使用回车和方向键快速选择。
在浏览器使用场景中的记住密码，在下次登录中直接就已填写文本，如果存在该网址多个账号被记住的情况下，可以点击输入文本，弹出更多的记住的账号进行选择。
在搜索框记录用户所有的搜索行为数据，在搜索框下面提供搜索记录，用户点击一下即可输入，大大减少了用户的操作步骤。并提供清空历史记录功能。
提供上下文信息，比如用户在转账的时候，提供余额相关的信息。
4）搜索实时检索
搜索框会根据输入框内输入的字符实时进行检索，基于关键词查询相关短语或目标，将结果呈现在用户面前（通常在用于好友、工具、应用等准确定位的情况下比较常见），帮助用户在海量内容中快速定位到目标内容。
自动检索功能可以帮助用户减少打字量，避免拼写错误并降低获得结果所需的整体工作量，从而改善用户的体验。
通过提供有用的建议，自动完成功能可以帮助引导用户到达目的地，这也是帮助进一步优化搜索查询的有用方法。
5）使用合理的键盘类型
这个指针对手机端，输入内容会唤起键盘，而键盘分为很多种类型，比如中文键盘、数字键盘、英文键盘；如果在输出设计稿的时候对键盘类型没有标注，开发哥哥就会使用默认键盘，这样就有可能造成一些降低体验的问题；例如：手机号、银行卡号默认需要输入数字的输入框，弹出的键盘默认为数字键盘；若输入的内容包涵文字、字母等内容，默认弹出字母键盘。
iOS 和 Android 提供多种不同的键盘，这是为了应对不同的输入需求。
想要简化数据输入，当用户输入不同类型的字段的时候，调用对应类型的键盘，同时需要注意键盘出现的位置，不要遮挡住关键信息。
别忘了输入内容时会唤起键盘：起初一看没啥问题啊，可是当真正落地的时候，就会发现，问题大大的。
当你准备输入内容的时候，键盘会被调起，这时候就尴尬了——原来是被键盘挡住了，现在即使你想把提交按钮往上提，空间也不够，因为上面两个输入框已经把空间占满了。
这就是设计师经验不足，前期没有考虑充分导致的结果。
这样登录布局本身是没有问题的，但是你需要多考虑一种键盘调起的状态，因为键盘调起来的时候登录按钮会被挡住，这就是为什么大部分登录页会往上布局。
因为键盘有没有被唤起，页面的布局是不用变的。
当然这里也不是说哪种形式更好，而是提醒大家要考虑好细节。
6）特殊字符处理
在输入框中特殊字符一般包括“@ ”和“. ”等，一般用户输入@可能是要输入邮箱，输入“.”有可能是网站后缀，所以最好提供快速输入的方法，让用户减少输入的字符。
虽然现在一部分输入法中已经增加了这些常用的固定的一段字符的按键，但是还是建议在输入框中加入快速输入的方法——与其依靠这种具有不确定性的情况，还不如一开始就设计好。
而且由于现在的交互体验系统越发的完整，这些特定字符的输入框键盘会变为数字键盘，你把“*”和“#”号输入，也会在提交获取验证码的时候提示你的手机号不正确。
7）尽量减少填写字段数量
太多的填写内容会增加认知负荷，尽量让表单显得更加简单；不要将名字和日期分成多个字段；不要多次询问相同信息；重复输入的内容尽量减少。
8）隐藏不相关
不要一次性将所有的信息和步骤都呈现出来，而是要在用户需要的时候再呈现，合理控制复杂性。
基于用户的不同选择，将表单字段中不相关的部分隐藏掉，或者新增；这种方式可以帮用户规避掉很多不必要的填写内容，并且让填写过程更加个性化。
4. 文本字数的自适应
内容较少时，输入框能够透露出用户所填所有信息；内容长度超过输入框长度时，无法完整查看所有所填信息。
1）单行文本
当输入的文本长度超过文本框的长度时,当光标到达文本框右边缘时,它会自动向左滚动。
2）多行文本
多行文本框通过扩展文本框的底部，把文本换行到新的一行上，并把屏幕中位于文本框下方的元素向下移动，多行文本框允许用户一次性看到他们输入的所有内容。
3）文本区域
文本区域比文本框要高，并可将溢出的文本换行到新行上；当光标到达文本区域的底部时，它们会垂直滚动。
存在三种情况：
- 文字框大小不变，文字内容上移，光标自动定位到最新输入位置处。
- 文本框随着输入文字的增多变大，到达接近键盘位置时，文字内容上移，光标自动定位到最新输入位置处。
- 全屏输入。
QQ团队为了解决多文本下的输入痛点，设计了长按输入框就会出现全屏输入的提示。
点开后即会全屏显示已输入内容并可做简单的换行操作，收起全屏则回到聊天窗口。
5. 异常提示
对于一些内容，可以实时反馈状态。
输入的结果我们常常用颜色来反馈，比如蓝色代表链接、灰色代表失效、绿色代表正确、黄色代表提示、红色代表错误。
异常信息尽量不用弹框展示，那样有点小题大做，且弹框一关掉就无法看到，平添了操作步骤；异常信息尽量不换行，如果非要换行，注意和下一个文本框拉开距离。
错误消息会带给用户很多压力，让用户感觉他们搞砸了或者没有完成任务。
核心输入一般是必须要全部成功的，但是有些非核心输入，输入错误不要紧，或者成功一部分即可。
这个时候要把这些非核心输入和核心输入之间进行隔离，加强输入效率。
1）输入错误
不要等用户填完了页面所字段、点击提交时才出现，尽量在鼠标点击到文本框外，或按了回车键、空格键时就及时出现判断，支持用户实时修改。
如果发生错误，则标注错误原因；提示文本内容不符合规范时，最好提示原因，这样有利于用户快速修改。
大多数错误消息要么告诉用户他们将输入框留空，要么输入了无效信息，这些通用错误消息是不够的。
关于填写错误的描述应该非常清晰，比如注册时密码填写，不要说密码安全性过低，而要说，密码必须超过8位，或者密码必须包含大小写和数字。
总结为以下两点：
- 发生了什么错误，可能原因是什么。
- 用户应该做什么来改正错误。
密码默认显示：当点击登录按钮后，若密码不正确，密码可自动显示内容，可以让用户检查密码是否正确以及哪里出错；允许用户显示和隐藏所设置的密码，而不是让用户操作2次来进行验证，这对于生成有效的密码更重要。
始终显示对于密码的要求，并提供相应的指引，并显示强度指示。尝试简化对用户的要求。
2）不存在（无数据）/环境条件异常等
登录时账号不存在时，提示此账号未注册，其实还可以在提示文案中增加“注册账号”的链接，点击即可跳转到注册页面。
环境条件异常如断网链接不上服务器等，环境条件异常则用气泡提示。
当错误无法挽回，还可以通过视觉对错误的场景进行情感层的转移。
四、信息输入后
1. 敏感信息
如果是电话号码或银行等比较重要的敏感信息，就会使用“*”或圆点进行隐藏。
2. 格式拆分显示
如果是电话号码或银行的输入，这种相对长一些的数字输入，尽量按照用户习惯的规则划分，如果将所有数字连着一起就会比较容易输错。
- 电话号码的划分规则为344，所以用户在设计的时候可以在将电话号码间隔开，方便用户识别；
- 银行卡通常的的划分是4444X，X就是最后一位数为少于4的位数。
但是这里需要注意的一点是：在输入手机号码时，在第3和第7位数的时候是有一个空格的；所以在用户从后往前删除的时候，也需要在删除第4位和第8位数字时，多删除一个空格。
3. 一键删除功能
部分数据后，通常输入框右侧会出现一个快速删除全部的图标，方便用户快速删除所输入的数据，而不是仅能依靠键盘上的删除按键一个个数据删除。
有内容输入后，会出现×控件，可以让用户一键删除；内容清除为空时，icon隐藏。
这时候可能有人就会说，如果既要提供快速删除，也要提示可输入的字符数，怎么办？
据我观察，现有的应用中，这种两者共存的情况比较少见，但是也不是可不可以用，下方提供了两种方式供参考。
4. 文本展示
前面写到了文本字数的自适应，那么输入好的文本，如果单行展示不完，对溢出的部分可用三种方式处理：
- 截断：文本数量较大时，只截取头部的一部分；
- 换行：文本数量较小时可以换行展示；
- 省略：省略号可以放在文本前、中、后位置，这取决于文本哪个部位最不重要。
五、特殊的输入框形式
1. 单输入框连续操作
一个非常简单的输入框，但一次只能否显示一个输入文本，并以细微的动画过渡下一个输入。
我们可以在输入部分数据后进行补充，输入框右侧再会出现一个快速删除全部的图标，方便用户快速删除所输入的数据，而不是仅能依靠键盘上的删除按键一个个数据删除。
有内容输入后，会出现×控件，可以让用户一键删除。内容清除为空时，icon隐藏。
我认为这是输入框的一种比较好用且用户友好的形式，右下角的数字告诉用户总共有多少个问题，哪个是当前问题；当他们前进到下一个问题时，我们将显示一个进度条，指示表单的完成级别。
像这样的输入框对于问卷或简单的表单可能非常有用。
这样做的好处是：用户分心的程度较小，并且填写此表格的工作似乎要少得多。当然，这种方法也有其缺点，无法返回或概述之前的答案。
2. 自然语言形
一种使用自然语言而非常规形式，使用自定义输入元素进行输入。
自然语言确实是一种有趣的形式，将经典形式转换为使用自然语言从用户那里获取信息。
为此，将构建一个句子，其中一些单词和部分是选择元素和文本输入；然后，我们将转换选择元素，我们也可以自定义它们。
当然，自然语言形式非常适合某些情况，但并不适合所有情况。
但如果在正确的位置以正确的方式使用它们，也更具吸引力。
3. 全屏
全屏输入框，其思想是在输入框字段之间移动时允许使用一些精美的动画进行无干扰的文本输入。
这个想法是为了扩展输入框，并且一次只以全屏显示一个问题或输入框字段。
用户可以无干扰地输入数据，并且可以为字段添加一些精美的动画；一旦所有字段均已填写或移入，我们将在最后一步中显示摘要；在这里，输入数据仍然可以查看和更正，最后提交表格。
这种形式包含两个元素：输入框标签字段（每个都单独显示），右侧的点导航（这允许返回已经填写的问题）。
显示输入框当前位置的数字指示器，继续按钮，它将移至下一个字段，包括字段内的一些详细信息，例如：信息图标和几个自定义输入。
填写完所有信息后，进入最后的审核浏览器，可以更正信息并提交表单。
目前见得比较多的全屏输入框就是搜索框了。
六、结语
对于输入框，工作中并没有接触的这么全面。
最开始是想写B端输入框的，但写着写着发现使用场景多且通用，交互频次之高，尽量写全点吧。
希望自己能坚持，你的关注，就是对我的最大鼓励。
