输入框是数据收集表单的基础元素，特别是对落地页来说，最有价值的用户信息要通过输入框来收集。这里以VR车展产品为案例，结合一些已经成熟的理论，对输入框组件进行重新探讨和发散，明确“输入框”在开发、设计、用户之间不同的认知。
基本构成
输入框最基本的构成我认为是这3大要素：文本容器、标签文本、输入内容（占位符文本）；文本容器决定了组件再页面中的布局，标签文本明确了输入框内所需的信息类型，占位符文本则可对输入内容的类型、字符数等数据要求起到提示作用。
除了这3个基本元素，还有一些可以帮助用户提升效率的其他组成。如下图比较常见的账号注册表单，在设置用户名时若对用户名的格式要求无法在占位符中简短的一句话表述，则可以用底部详细备注的方式给予帮助；如在设置密码时，除了对格式的帮助提示还有对密码强弱度的实时验证反馈；同样对于用户名是否可用，更好的方式也是在该输入框失焦时进行即时的验证，并告知用户更换。
类型
我们常用的输入框主要是文本输入框及数字输入框，这与在代码中对录入的内容做字符类型的限制有关。下图为小编最近在学习的交互设计师Taras Bakusevych 在对表单设计做总结时列出的几种比较常见的输入框类型。
最简单的是限制输入文本，比如手机号输入框内无法键入字母，一些用户名输入框内无法键入汉字等等。下图为支付宝app中添加银行卡的表单页面，除了用只能调出数字键盘的方式限制输入内容，还在字段的分割上做了处理，借用实体银行卡片的分割形式，使用户更熟悉，并且能更明晰的确认是否出错。
除了用“限制”的方法对输入框做处理，还可以利用信息的转换帮助用户填写，同时提升数据的准确率。比如下图中微信的注册流程，大多数用户对国家的区号是没有明确概念的，因为平时用不到。微信要求用户通过认证手机号的方式注册，作为国际化的产品，把“区号”转化为大家熟悉的“国家名称”，然后去自动匹配、填入区号，既降低了用户手动填错的几率，也帮助用户提升了录入的效率。
表单
输入框很少单独存在，通常是有多个，并与其他数据录入类组件一同组成一个完整的表单。因为表单是能够完整、高效，成系统的收集数据、处理数据的形式。那么在设计表单时，我们要站在用户的角度，帮助他们高准确率地在最少时间内完成表单的填写。
那么对于一个被赋予了“填写表单”这个任务的用户，要让TA在填写前明确自己为什么要填表单、该填写什么内容、如果确认自己填写的内容正确，然后再顺利的进入下一个任务。
布局（WHY）
Taras Bakusevych对于输入框组件在表单中的布局已经通过实验得出了结论，这里再与大家分享一下。主要是对带有标签的输入框，如何将标签和输入框做对齐的几种经典设计的利弊做了分析总结。
例如标签左对齐的布局形式，有利于用户在短时间内快速浏览在这份表单中都需要哪些信息，这有益于他们树立填写表单的目的，以快速做决策是否要完成这分表单。但同时，在填写表单中的每行信息时则会耗费较长的时间在标签和输入框之间移动；
而标签右对齐的表单，则有益用户专注于每行数据的填写，相对的就会影响浏览全部信息的效率，同时也因为表单整体轮廓的参差不齐降低一定的美观度。
还有一种标签与输入框上下排布的方式，可以同时兼顾以上两个优势，高效且美观。但对于竖向空间较小的页面就非常不适用。Google通过输入框的多状态和动效的辅助，解决了空间占用的问题，当然这样的好设计少不了开发小哥哥的倾力协助才得以实现（感恩）。
应用
这里针对刚刚填写过的绩效考评大表单做出一些小小的改善建议。
相信每位汽车人小伙伴对这份表单都不会陌生，通常我的填写顺序是先码足文字的部分，在整体评估每个业务占用自己工作量的百分比。经常会出现提交时提示失败，回去一看是绩效目标小计的数字不是100%，然后再看看哪个少点哪个多点，互相匀一匀调整一下数字，直到下面的数字变为100%为止。
首先对百分比总和的限制在功能上是有做实现的，100以内的加减法也不是难事。但实际上用户在使用过程中确实是需要花费一定的时间去计算、调整。对于一个B端产品来说，效率的提高以秒为单位计算都是有意义的。那么是否可以在表单上的验证部分做一个简单的及时反馈，让用户能够稍微少那么几秒的数学时间？
对于表单的优化和输入框的变形设计，在818车展中我的小伙伴们也做了一次有效的尝试，欢迎来线下与我们交流，我们乐于分享、思考，共同进步~
