2B产品设计套路一：表单设计

本系列文章主要是想跟大家讲讲关于2B设计的一些套路，本文主要说的是表单设计。

原型设计应该是入门产品的基本功了，通过原型设计把无形的各种idea变为有形的产品页面是我觉得非常有成就感的一件事。但是相比于2C，2B页面级的设计给pm发挥的余地真的不多，但换言之就是有很多套路可循。

根据我对2B产品（主要是办公、后台系统）的片面理解，2B产品的核心就是对各种各样数据“管理”。啥是“管理”呢，用人话说就是数据的“增删改查”。

从数据流的角度看，“增删改”都是对系统的输入，在“查”的基础上“显”，可以看作系统向用户的输出。对应到页面上，很多时候我们会通过表单实现增、改的操作，另外可以通过数据统计、表格、详情页配合筛选、搜索来实现从不同维度来向用户输出，实现“查和显”的操作。

这个系列的总结就想说说表单、表格、详情页这三个设计套路。

1. 为什么需要表单

软件/系统/平台本身是没有信息的，像是一个空的架子，表单是用户向系统输入信息的一种非常重要的手段，只有用户向系统添加了丰富的信息，系统才能实现其价值。

比如说下图中的禅道软件本身是没有数据的，要实现其需求管理的价值，就需要用户通过“提需求”的表单向系统输入“需求”。只有有了需求的数据，后续的需求管理才能进行。所以说表单是2B产品“管理”的第一步。

当然还有更常见的用户注册，也是表单的一种。

更极端的一种表单是问卷调查，这种情况下表单有可能会非常非常非常长。

总的来说，表单对应的是“增删改查”中的“增”（有的时候也可能是“改”），是对系统的输入，是用户向数据库写入所需的数据，有了这些数据才能迈出整个产品实现管理价值的第一步。

2. 输入什么

既然表单的主要用途是信息输入，那么输入什么内容就值得仔细思考了。内容的过多很容易引起用户的焦虑和厌烦（想想那种特别长的问卷调查），内容过少又不足以支撑后续操作。（比如资产管理系统中，后续的筛选功能需要“资产分类”，但是新增资产的表单中没有这个字段就会引起错误）

为了平衡用户体验和支持后续操作，我自己总结表单的设计应该遵循“不影响后续操作的最小化”原则。

设计表单内容时，首先我会根据信息架构框定一个范围，一般表单的内容应该是信息架构中相应对象元数据的子集。然后我们可以对元数据进行分类，分为必填项（不填写后续操作无法进行），选填项（不填写不会影响后续操作，或者填写比较繁琐可以放在编辑中补充的信息），不填项（由系统生成的数据）。

为了保证“不影响后续操作的最小化”原则，表单填写的内容必须包括必填项，尽量包括少的选填项，不需要包括不填项。

还是举一个“新增资产”的栗子：下图右边是资产对象的元数据，对每个元数据进行分类。

• 比如【资产编码】应该由系统生成，所以在表单中不应该填写；
• 比如【资产名称】是后续查询、筛选、资产调拨等各种操作都需要用到的元素，所以必须在新增资产时就填写；
• 比如【简称】是【资产名称】的别名，可有可无，不会影响后续的操作，所以是选填项；
• 再比如【原价】、【使用年限】、【折旧方式】、【购买日期】字段是计算资产折旧所需要的，但是要填写的内容比较多，且折旧的计算相对独立不影响主流程的操作，所以我把它们归到了选填项，可以在必要的时候在“编辑”功能中再完善。

把所有元数据分类完后，可以得到下图右边的结果，我们的表单具体需要填什么，不需要填什么就比较清晰了。

3. 怎么输入

在上一part中已经确定了表单需要填写哪些内容，那么这一part就需要确定怎么填写这些内容。

表单输入的形态大概有下边这些（来自elementUI）,至于选择哪种方式填写，有一个原则就是“能选择的不要输入”，更优秀一点的，必须输入时也尽量通过联想给用户一点提示，这个放在下一part“友好的表单”里讲。

上图中必填项的【资产名称】、【SN码】、【型号】是需要输入框填写的，而【资产分类】由于业务需要采用国标分类，所以可以做到通过选择来填写。

4. 友好的表单

作为用户，很多人对填写密密麻麻的表单感到头大，虽然我们已经在内容上尽量精简了，但还可以在表现形式上更加友好，让我们的用户不至于在填写表单时候摔键盘。

（1）对齐

对齐主要是指表单标签的对齐，包括左对齐，右对齐和顶对齐三种：

antDesgin：“冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率”。

顶对齐比较节约横向空间，但纵向会比较长，所以移动端用的多于web端。综合来看，一般我会选择右对齐。

（2）分块分步

（编辑：应用网_丽江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!