表单系列文章：
B端表单｜实战篇: 表单的具体设计方法解析
前面几篇分享了表单页面和控件的设计思路，这一次，就使用淘宝的千牛发布商品页面来做改版对象，把前面讲解过的内容再复习一遍。
提前声明：改版演示会精简一部分业务背景和需求，避免改版过于冗长。主要选择的改版对象是数码类产品的发布页面，如果和自己创建的页面内容不一致是正常的，关注核心要点即可。
![]()
![]()
问题1：顶部导航的使用不合理，和左侧的导航功能上完全重复，没有存在的价值。问题3：存储模版的按钮位置不合理，影响前后信息的预览和操作。问题4：单个数据项的信息展示混乱，说明和提示位置不统一简单分析原来的逻辑，设计过程希望表单控件能和标题对齐，这样描述内容多似乎不影响输入。但是有些表单项的说明要求又高，必须先进行提示再让你输入，同时部分长模块提示放底下又看不见，最后导致每个数据项觉得怎么放合理怎么放。基于以上的缺点分析，那么接下来的改动就遵循以下几个原则：![]()
然后，进行信息字段的整理，通过文档工具或者思维导图，罗列对应的结构和字段、输入类型。篇幅关系，我就只选择性罗列省略另一部分细节，理解过程即可。
表单部分字段信息主要包含四级，再下级的字段内容在说明中描述，下面是整理：字段信息的整理，是为了让我们充分理解内容的层级结构，方便我们做进一步的设计。![]()
设计的第一步是先完成页面框架的布局，这次我采用表单在左目录在由的常规布局形式，并对通知模块做一定的优化。
然后制定输入框的尺寸作为锚点，按目前的内容，只需要制定常规和小两个高度，然后常规高度下，设置5个长度。同时拓展两个同高度的按钮。然后对单个数据项（三级字段）的信息布局进行标准化，确定标题、控件、注释、提示、二级模块的布局，然后确认数据项的视图内间距。包含注释和提示的布局，注释统一在顶部（应对超长二级内容问题），提示在最右侧：多选和单选类布局，针对单一选项的注释跟进在注释后方：包含下级区域的布局模式，如果在正式项目，这个区域内的布局还会再做规范，这里节省时间略过：这个步骤的主要工作，就是标准化常见数据项的布局和细节，除了直接延用外，也让后续的拓展中可以有据可循，保证整体设计观感的统一。![]()
完成所有步骤以后，就可以展开具体的设计了，为了节省时间和观看体验，我会减少掉部分重复的字段内容和视觉要素，保证看懂设计的思路即可，下面简单介绍其中两个模块的设计细节。
在这个模块中，除了应用基础的表单规范外，重点调整了类目属性的布局形式。这些属性参数在前端页面的样式呈现效果如下：所需填写条目多，所以希望它的优化是能够更快速进行填写的，原有设计中应用的不同控件样式也都可以使用输入框形式的控件进行转换。并且这些数据项没有内含顺序逻辑，所以现有设计暗示的先上下再左右的设计和实际顺序严重冲突。所以替换成了三列的设计，并使用了上下的布局，防止标题长度落差严重干扰判断，优化对齐线，且直接采取从左到右的 Z 字型设计模式。原设计中对于上传内容是什么的标识并不清晰，而且因为所需上传内容数量较多，排列很混乱，导致观感极差。而且基础素材和导购素材标题的设计和输入框用色一样，非常干扰视线。重点优化了图片和视频的布局方式，每个需要上传的图片、视频需要有明确的标题来说明上传的内容是什么。其它还优化了若干的细节，可以直接观看下面最终的版本（由于微信压缩图片导致模糊，可以超人的电话亭公众号后台回复“千牛表单”获取原图）：![]()
![]()
结尾
作为表单设计的总结，主要是说明表单依据前面分享中提到的方法，有效的输出表单页面，你们可以通过对比设计前后的两个版本来思考这些知识点的作用。因为时间的关系，当然还有一些深层次的操作解决方案没有完全表现出来，有疑问可以留言进行讨论。
C端UI实战班还有一周左右就开课了，需要参加的同学抓紧时间报名，要不又要三个月后再见了~
B端产品设计课程目前是早鸟价预约阶段，来上课的话先预约会有优惠~
期待正课中与你们见面！