选取与组织表单的元素设计如何与表单交互介绍

　　

选取与组织表单的元素设计如何与表单交互介绍

　　

　　当我第一次接触表单的时候，所有的目光都是在标签是否对齐，输入框的位置是否合理，提示是否足够友好。后面会更深入的研究，思考label的不同对齐方式的区别。 .

　　但是重点总是离不开表单本身的几个组件，以至于每次表单优化效果总是不尽人意，不知道问题出在哪里。

　　PS：水平有限，踩过很多前辈的肩膀。请绕道。

　　似乎说到制作表单，就是要安排一些不同类型的输入框，明确标明必填和非必填字段，并添加解释，说明哪些表单更复杂、更合适。

　　其实表单设计远不止这些。表格本身也是一个小产品。也需要有需求支撑，也需要嵌套，也需要考虑用户的心智模型；从表单的生成到页面上的表单如何呈现，再到使用表单时与表单的交互，每一步都需要大量的思考来制作表单。

　　其实做好表格并不难，但是如果把问题往错误的方向思考（产品思维失败），相关的设计知识不够全面，很容易不知道出处遇到问题时开始。

　　为了不让我凄凉的过去在大家身上重演，也为了总结我的学习心得，特地写了这篇文章；因为想写的比较全面一点，所以构思成一个小系列，一共三篇文章，希望对大家有所帮助！

　　这个系列文章，从表单的诞生（选择表单）到表单的死亡（提交结束），我将从三个方面给大家全面讲解如何设计出优秀的表单方面。

　　由于内容较多，本系列文章分为三篇文章来介绍以下三个方面：

　　如何与组织表单的表单选择和元素设计进行交互

　　本文介绍第一个方面：表格的选择和组织

　　一、表单选择与组织

　　表格的选择和组织是表格生成的第一个过程。任何表单都需要先选择显示的问题，然后将选择的问题合理呈现在页面上；我们将把这个过程分成两个小节来解释：表格的选择，表格的组织。

　　1.表单选择

　　表格的选择是指表格中应收录哪些问题。我们需要遵循的原则是：

　　最好不要采集非必要信息，即用户看到的问题越少越好。必须采集的信息，如果可以延迟，则延迟采集。平衡用户和产品的利益。

　　1）非必要信息最好不要采集，即用户看到的问题越少越好。

　　每个用户都必须填写表单，但每个用户都不想填写表单，因为填写表单不是用户的目的。用户填写表单的唯一原因是不填写表单就无法继续。

　　想象一下，你购物时需要填写收货地址，登录微信前需要注册一个账号，雅思报名时需要填写个人信息，但这些是你的吗？目标？

　　不，只是因为不填写收货地址没收到货，不注册就不能登录微信，也不能如果您不填写个人信息，则无法完成考试；因此，从需求的角度来看，填表不是用户的需求，而是产品的需求；事实上，填写表单的过程，尤其是长表单，阻碍了用户使用产品的流畅性，降低了用户体验。

　　所以，在表单的选择阶段，最重要的就是尽可能的简化表单，不问问题就不要问用户。例如：当你要求用户填写雅思报名表时，不需要要求用户填写家庭住址，除非你需要向用户发送纸质成绩单。

　　多余的问题不仅会增加用户的完成成本，而且往往会引起用户的警觉。

　　2）必须采集的信息，如果可以延迟采集就会延迟。

　　如果有些信息是产品需要的，但填表时不是必须的，可以考虑推迟，即：调整采集信息的时间，把原来繁重的填表任务拆分成几个简单的，随时可以执行的小任务；比如电商网站的收货地址在用户注册时不需要填写，但在用户购买商品时需要补充，就是一个很好的例子。

　　3） 平衡用户和产品的利益。

　　最后，在形式选择和组织阶段最难处理，但很重要的一点是必须平衡用户和产品的利益。填写表单时，用户需求和产品需求总是矛盾的。

　　用户希望尽可能少地填写表单，以便尽快进行。产品要采集（比如要把产品寄给用户，必须采集地址信息）或者更长远的战略考虑总是希望采集更多的用户信息，但是采集信息太多损害用户的利益。

　　没有硬性规定可以参考。只能根据不同的情况做不同的处理。您可以参考以下建议进行相应调整：

　　试图要求用户承担底线，两个更好的方法是选择真实用户进行可用性测试和数据嵌入。使用其他方法解决产品对用户信息采集的需求，比如大数据分析。采取适当的激励措施，鼓励用户提供更多的信息，如改进信息获取金币、参与抽奖等。好好学习这个由三部分组成的系列文章，用设计来降低用户填写表格的成本。 2.表单组织

　　表单的组织是指所选问题在页面上的呈现方式以及向用户呈现的方式。

　　我们需要遵循的原则是：

　　表单的命名与场景相匹配。考虑对长表格进行分组或分页。排版布局不会中断扫描视线。减少干扰。组织页面时考虑使用 Tab 键跳转。使用情感设计。

　　1）表单的命名与场景匹配。

　　表单名称用于告诉用户此次填写的主题。它可以让用户在表单开始时就对要填写的内容建立心理预期，也有助于在填写表单时理解表单的内容。

　　所以选择一个适合这个表单填写场景的表单名称是非常重要的。 “空头不对马头”的标题容易误导用户或增加用户的疑虑。

　　例如：

　　货运司机如果要接单，需要在接单前填写一份个人货运资质信息表。试想一下，点击“接受订单”后进入的页面最上方写着“填写个人信息”后面是“运费哪个更容易理解？

　　前者容易造成混乱（尤其是对新人而言）。为什么我收到订单时需要填写我的私人信息？会不会导致信息泄露？

　　相反，后者容易理解：我是做运输交易的，所以自然需要我的运输资质。

　　2）Long form 考虑分组或分页

　　当表格过多时，简单的堆叠排列方式让用户感到疲倦而放弃填写表格；这时候我们可以根据表单的类型对表单进行适当的分组，这样可以缓解用户的视觉压力。用户填写表格更容易、更舒适。

　　当所有表单都与同一主题相关时，使用分组是更好的选择，例如：姓名、*敏*感*词*号码、性别、种族、政治地位、手机号码、QQ号码、电子邮件地址、家庭住址、雇主。

　　我们可以将“姓名、*敏*感*词*号码、性别、种族、政治面貌”分成一组，分别命名为“身份信息”、“手机号码、QQ号码、邮箱地址、家庭住址、工作单位”。将组命名为“*敏*感*词*”；虽然分为两组，但都属于用户的基本个人信息，这种情况适合分组。

　　但如果需要填写的表格涉及不同的主题，可以考虑分页。

　　如姓名、*敏*感*词*号码、性别、民族、政治地位、手机号码、QQ号码、邮箱地址、家庭住址、工作单位、驾照类型、货车型号、货龄、事故记录不正确等。

　　上述信息中，“姓名、*敏*感*词*号码、性别、民族、政治面貌、手机号码、QQ号码、邮箱、家庭住址、工作单位”为个人基本信息； “驾照类型、货车型号、船龄”、“事故记录不正确”属于资质信息；我们可以将这两类信息拆分成两页展示，让用户逐步完成表格.

　　

　　3）布局不中断扫描视线

　　扫描视线是指用户浏览表单时视线的流动。清晰、线性的视线流动有助于用户快速响应问题，用户的思维在不同形式之间切换所需的时间最少。

　　因此，在布局时，表单应尽可能安排在视线更清晰的流程中。对比下面两种布局方式，很明显右边的布局更容易阅读。

　　

　　4）减少干扰

　　用户填写表单的过程是一个任务过程，界面风格越简洁明了，越能提高用户填写的效率。

　　很多时候为了提升界面的视觉效果，一些设计师喜欢使用一些复杂的样式或者图案或者*敏*感*词*，这对于其他页面的设计来说无疑是有利的；但这种想法不适用于填表页面。过多的视觉干扰很容易打断填表的想法，降低填表的效率。 甚至当用户因为不必要的干扰挡住了填表的想法时，用户也会产生反感而放弃填写表格。

　　但并不是不能在表单填写页面上使用复杂的样式或一些冷色调。毕竟，我们需要依靠这些来区分和组织形式的不同群体或主题；所以请确保您可以有效区分和组织页面。接下来，尽可能减少更复杂元素的出现。

　　5）组织页面时考虑Tab键跳转

　　在PC网页上，用户大多使用键盘与表单进行交互，这涉及到鼠标光标在不同输入框之间切换时常用的Tab键。这是很多人的操作习惯。我们必须注意。

　　Tab键的影响主要是视线的跳跃。当有两列内容时，当光标定位在第一列的最后一个表格时，切换Tab键后，光标会继续下移或切换到第二列，第一个表格呢？

　　如果没有好的页面引导，很容易混淆用户（可能用户以为自己切换到了同一列的下一个表单，而在输入时发现内容出现在第二列的第一个表单中）。

　　

　　另外，当表单过长时，有可能是切换Tab键后，光标已经切换到页面底部的表单了。但是因为一屏不能显示，激活的表单隐藏在页面底部，会导致用户不知道光标去哪里的尴尬。

　　所以在设计的时候尽量让表格出现在主流分辨率显示器的同屏上。当光标切换到屏幕外的表单时，可以使用锚定位，自动将视线切换到对应的表单位置。

　　6）使用情感设计

　　情感化设计是指在页面中使用能够与人类情感产生共鸣的元素，从而增加填写表单的乐趣或减少用户面对大量表单时的焦虑。情感设计可以贯穿整个表单设计。每个阶段。

　　比如在给表格命名时，可以适当使用图片背景，营造出与表格主题相匹配的氛围；采集地理位置信息时，将“国家”替换为“您来自哪个国家？”

　　通过这种方式，生硬的表单填写被构建为用户和计算机之间的对话；在分页设计中，适当使用动态效果，增加页面切换时的趣味性等。

　　

　　二、结语

　　至此，360°全方位表单设计指南的第一篇文章就结束了。感谢大家花时间阅读这篇文章，希望对大家有所帮助。

　　下一部分文章我会讲解表单设计的第二个方面：表单的元素设计——表单元素设计中表单设计的核心部分，也是大家付出的部分最关注的，也是学习效果。有兴趣的同学可以立即关注最容易看到的部分！

　　进阶提问：在情感化设计中，表单的标签名称用疑问句代替。不是增加了标签的复杂度，增加了读取成本吗？

　　作为一个自认为填了很多表格的“伪老司机”，我将自己的一些理解和体会分享给大家。希望我们作为产品人一起进步，一起成长！