360°全方位表单设计指南

1、3600全方位表单设计指南（一）表单是目前人机交互最重要的方式没有之一，优秀的表单设计对 产品的体验提升至关重要。表单该怎么布局？表单的组成元素有哪些? 表单有什么感知规范？超长表单该怎么设计？等等常见问题；本篇该 文文章分享了自己理解和经验，希望能帮到你们。最初接触表单的时候目光所及都是有没有对齐、下拉菜单的位置 是不是合理、该有的提示够不够友好，再后来研究的深一点会思考标 签的不同对齐途径有什么区别。着眼点但是关注点总归是离不开表单本身的几个组成元素，以至 于每次做表单优化效果总是差强人意却又不知道问题出在哪里。ps：水平有限，而且踩了很多前辈的肩膀，表单设计大神请绕道。好像一提到做表单就

2、是指的把一些不同类型的输入框排排版、标 清楚必填非必填、哪些表单比较复杂适当的加个说明就完了。其实表单设计远远不止这些，表单本身也是一个小产品，它也需 要有资金需求的支撑、也需要嵌套使用表达方式、也必须考虑用户的 心理模型；从表单的产生表格到表单在页面上如何呈现，再到使用表 单时与表单之间的交互，每一步都可能需要投入大量的思考来做好都 表单。其实做好表单并不难，但是如果方向思考问题的路径不对（产品思维不及格）加上相关的设计知识掌握的不够全面，就很容易在遇到 问题时不知这时从何下手。为了不让自己的惨淡过往在大家身上重演，也为了给自己的努力学习经验做一个总结，特意写了本文；因为想写的全面一点就构思

3、成了一个小系列，一共三篇文章，希望对大家有所能够帮助！本系列文章从表单的出生（选取表单）开始一直到表单的死亡（提交结束）分别从三个方面给大家全方位的讲解如何设计一个优秀 的表单。因为内容比较多，本系列文章分三篇文章分别介绍以下三个的内容：本文透露第一个方面：表单的选取与组织机构表单的选取与组织是表单产生的第一个过程，任何表单都的先选定展示的问题然后将选定需要问题合理的呈现在页面上；传授我们将 这个整个过程分成两个小节来讲解：表单的选取、表单的组织。表单的选取表单的选取是指一张表单中应该包含哪些问题，我们可能需要遵循的原则是：1）非必须收集的信息最好不怎么收集，即：用户可看到的问题越少越少越多好

4、。每个用户都必须填写表单但是每个用户都不想填写表单，因为填写文档表单不是应用程序的目的，用户之所以会填写表单唯一的原因 是不填写表单无法往下进行。试想一下你购物时则需要填写收货地址、你登录微信前需要先查阅注册账号、你报名雅思时需要先填写个人信息，但是这些是你的目 的吗？并不是，只是因为付款不填写收货地址你就收不到商品、不注册你就登录没法微信、不填写个人信息你就不会无法完成报考；所以从 需求的角度，填写表单并不是用户的需求，而是产品的需求；实际上 填写表单的过程特别是填写长的是阻碍了用户使用产品的流畅度，拉 低了用户体验。所以，表单的选取阶段最重要的就是尽量精简表单，能不提问的问题坚决不向用户提

5、问，比如：当你其要求用户填写一张雅思报名表 时，大可不必要求用户填写家庭住址，除非你需要向用户寄送纸质成 绩单。多余的问题不仅仅会增加用户的完成成本，经常还会激起用户的 惹起戒备心理。2）必须收集的信息，如果可以延迟推迟收集则延迟收集。必须有些信息是产品需要的但是并不是填写表单当时如果的可以考虑延后填写，即：调整一下采集信息的时机，将本来繁重的表单艰 巨填写任务拆成几个简单的、随时可进行的小任务；比如电商网站的 收货地址大都不会在用户注册账号时就要求填写，督促而是在用户购 买商品时要求补充，就是一个很好的例子。3）平衡好用户和产品的自身利益。最后，表单选取与组织阶段最难处理但是非常重要的一点就

6、是一 定要平衡好用户和产品的自身利益，填写表单时用户的需求与产品的 需求总是矛盾的。用户希望尽量少填写以尽快往下进行，产品迫于被迫采集（比如 想商品给用户就必须收集地址信息）或者更长远的战略综合考虑总是 希望多收集一些用户的信息，但是过多的采集信息就损坏了用户的。这里没有一成不变的规则可以参阅，只能做做根据不同的情况做 不同的处理过程，大家可以参考以下几个建议随机应变：表单的组织表单的组织是指将才刚选定的问题如何呈现在页面上，以什么样 的方式展示给用户。我们需要依从的原则是：1）表单命名符合场景。表单的名称是用来告诉用户本次填写的主题，可以让用户在填表 之初建立起对接下来要填写内容的心理预期也

7、有助于填写表单时理解 表单的内容。所以选取一个符合本次表单填写场景的表单名称至关重要，一个 “牛头不对马首“的标题很可能误导用户或者增加的疑惑。举个例子：一个货运司机要接单，在接单前需要先完善一张个人货运资质信 息的表单，试想一下点击“接单”后进入的页面顶部写着“个人信息 填写”跟写着“货运资质填写”哪个更容易让年轻人理解？前者很容易让人产生疑惑（特别是新人），私有我接单为什么要 填写我的私人信息？会不会导致信息窃取？相反，后者就很容易让人能理解：我接的是公路运输的买卖，自 然需要我的运输资质。2）长表单考虑分组或分页当表单过多时，简单的堆叠排列容易让用户产生疲劳感从而放弃填表；这个时候我们可

8、以适当的根据表单的类型将表单分组描绘出， 这样能很好的缓解用户的视觉压力，让用户填写表单时更加前会轻松 舒适。当所有表单涉及到的主题都是相同时使用分组的方式是一个比较差劲的选择，比如：姓名、身份证号、性别、民族、政治面貌、手机号、QQ码、邮箱、家庭地址、工作单位。这几个我们可以把“姓名、身份证号、性别、民族、政治面貌”分为一组命名为“身份信息”、“手机号、 QQ号码、邮箱、家庭地址、 工作单位”分为一组命名为“联系信息”；虽然分成了两个组单他们 都属于用户的个人基本信息，这种情况就适用于分组来处理。但是如果需要核对的表单涉及到可能需要了不同的主题，可以考虑采用分页的这种方式。比如姓名、身份证号

9、、性别、民族、政治面貌、手机号、QQ号码、邮箱、家庭地址、工作单位、驾驶证类型、货车型号、货运年龄、有 误事故记录。上述信息中“姓名、身份证号、性别、民族、政治面貌、手机号、Qg码、邮箱、家庭地址、工作单位”属于个人基本信息；“驾驶证 类型、货车型号、货运年龄、有误事故记录”属于资质信息；我们大 可以将两类分成两个页面展示，让用户采用分步的方式逐渐完成填表。3）排版布局不打断打印视线扫描视线是指由的用户浏览表单时的视线流，清晰、线性的视线流更有助于用户可以迅速对问题作出答复，用户的思维在不同的表单 之间转换时花费时间也最少。所以尽可能的模糊在排版布局时将表单布置在一条比较清晰的的视线流中，对比

10、下方左右两种布局方式，很明显左侧的布局更易于阅 读。4）减少干扰用户填写表单的过程演化过程是一个任务过程，越是简洁明了的 界面风格越有利于提高用户填写的效率。很多进一步提高时候处于提高界面的视觉效果，一些设计师喜欢 使用一些复杂的样式或图案或动画，这些在其他页面的设计上无疑是 有益的；但是这种思索并不适用于表单填写页面，多余的视觉干扰容 易打断填写表单的思路从而减缓填写效率，甚至当用户因为没有必要 的干扰阻断了填入思路时会产生反感并放弃填写。说并不是但是表单填写表单不能使用复杂样式或一些炫酷的颜色， 况且我们辨识需要靠这些来区分、组织表单的不同主旨第一组或者不 同主题；所以请在能如何有效的区分

11、、政府机构页面的前提下，尽可 能减少更多的复杂元素的出现。5）组织页面时考虑Tab键跳转PC端的网页，更多的是使用键盘与表单进行交互，这就涉及到了 鼠标光标在不同输入框之间进行切换时常用到的 Tab键，这是很多人 都有的操作习惯所以我们必须重视。Tab键的影响主要包括是视线的跳转，当有两栏内容时，当光标定 位到第一栏最后一个表单时，Tab键切换之后光标会继续往下走还是会 切换到第二栏的第一个表单呢？没有一个好的页面引导的话很容易让用户产生困惑（可能用户以 为切换到了同一列的下一个表单，结果输入时发现内容显露出来在了 第二栏栏外的第一个表单）。却稻：口靖另外还会再次出现表单过长时有可能 Tab键

12、之后光标已经切换到 了页面下方的表单，但是由于一屏展示不下，激活的表单是隐藏在页 面下方的，就会导致应用程序出现用户不知道光标跑到了哪里的尴尬。所以在设计时尽可能让表单能在主流分辨率显示器的同一屏出现， 在光标切换到屏幕之外的表单时可以使用锚点定位自动将视线切换到 相应的表单位置。6）运用情感化设计情感化设计是指的在表单中采用能引起人类感情共鸣的元素，以 此来增加填写表单时的趣味性或减少用户面对表单大量时的焦虑，情 感化设计可以遍布在表单设计的每一个阶段。比如在命名表单时可以适当的采用图片背景来营造与表单主题相 符的氛围；收集地理位置信息时，将“国家”更换为“您来自哪个国 家？”以这样的方式将生硬的表单填写构建成一次用户与计算机的对话; 分页设计时，不同页面切换时适当的采用动效来增加趣味性等等。标燧陨随与个人防泸测试1无症下中发现手套碓黎应.F无的岁行仔匐改也好雨控用 小?照毋牯好支艮匚冕展再力鼻手，至U此，360全方位表单设计指南的第一篇文章就产品设计结束了, 感谢大家抽出时间来抽掉写作这篇文章，也希望对同学们能有所帮助。下篇文章我将会为大家讲解表单设计的大伙儿第二个方面：表单 的元素设计一一之时表单的特质设计时表单设计的核心部分，也是