表单系列文章：以淘宝千牛发布商品页面(数码类)改版复习前文表单设计思路
形成系列文章：前面的文章已经分享了表单页面和控件的设计思路。这次我们就以淘宝千牛商品页面为修改对象，回顾一下之前讲解的内容。
以下修订步骤包括：
问题分析
字段排序
规范性表述
页面设计
提前免责声明：修订后的演示文稿将精简部分业务背景和要求，避免修订版过于冗长。修改的主要对象是数字产品的发布页面。如果与您创建的页面内容不一致，属于正常现象。只关注核心点。
当前页面预览：
问题按从上到下的顺序列出：
问题一：顶部导航使用不合理，左侧导航功能完全重复，没有存在价值。
问题二：模块设计不统一，圆角应用不一致。
问题三：存放模板的按钮位置不合理，影响了前后信息的预览和操作。
问题四：单个数据项的信息显示混乱，描述和提示位置不一致。
简单分析原来的逻辑，设计过程中希望表单控件能够与标题对齐，让描述内容看起来不影响输入。但有些表单项对描述要求较高，输入前必须有提示。同时，一些较长的模块提示被放置在底部，无法看到。最后，每个数据项都按其应有的位置放置。
问题五：三级标题和模块显示不合理
问题六：各种控件的样式不统一等。
基于以上缺陷分析，下一步的修改将遵循以下原则：
顺序：内容层次更加合理，上下级关系准确。
https://img2.baidu.com/it/u=613438475,2834282340&fm=253&fmt=auto&app=138&f=JPEG?w=656&h=387
统一：视觉和交互元素一致，综合体验统一
清晰：信息和字段显示清晰，说明内容清晰。
然后，整理信息字段，通过文档工具或思维导图列出相应的结构、字段和输入类型。由于篇幅所限，我只选择性地列出并省略其他细节，只是了解一下过程。
结构安排：
表单中的一些字段信息主要包括四个级别，并且在描述中描述了较低级别字段的内容。总结如下：
字段信息的组织是为了让我们充分理解内容的层次结构，方便进一步的设计。
如果你对信息设计没有了解，可以看一下之前的分享：
设计的第一步是完成页框的布局。这次我采用了常规的布局，左边是表单，旁边是目录，并对通知模块做了一定的优化。
然后将输入框的大小设置为锚点。根据目前的内容，只需要设置两个高度：常规高度和小高度，然后在常规高度下设置5个长度。同时展开两个相同高度的按钮。
然后规范单个数据项（三级字段）的信息布局，确定标题、控件、注释、提示、二级模块的布局，然后确认数据项的视图内间距。
包含文本框轮廓控件的布局：
包含评论和提示的布局。评论统一在顶部（处理次要内容过长的问题），提示在最右边：
多选和单选类型布局，单个选项的注释如下：
包含下属区域的布局方式。如果是正式项目，这个区域的布局会再次标准化。此处跳过以节省时间：
这一步的主要任务是标准化公共数据项的布局和细节。除了直接扩展之外，还可以让后续的扩展有据可依，保证整体设计观感的统一。
https://img2.baidu.com/it/u=3461259342,3952837471&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500
完成所有步骤后，就可以开始具体的设计了。为了节省时间和观看体验，我会减少一些重复的字段内容和视觉元素，以确保您能够理解设计思想。这里简单介绍一下其中两个模块。设计细节。
模块一：基础信息设计
在这个模块中，除了应用基本的表单规范外，重点是调整类别属性的布局。这些属性参数在前端页面的样式渲染效果如下：
需要填写的条目比较多，所以希望它的优化能够让填写的速度更快。原设计中应用的不同控件风格也可以使用输入框形式的控件进行转换。而且这些数据项不包含顺序逻辑，现有设计隐含的上下左右的设计与实际顺序严重冲突。
因此改为三栏设计，并采用上下布局，防止标题长度差距严重干扰判断，优化对齐线，从左到右直接采用Z型设计模式。
模块二：图形描述设计
在最初的设计中，对于上传的内容是什么的识别并不明确，而且由于需要上传的内容量很大，所以排列很混乱，导致观感很差。而且基础素材和导购素材的标题设计和颜色与输入框相同，非常分散视线。
重点优化图片和视频的布局。每张需要上传的图片和视频都必须有一个清晰的标题，以说明上传的内容是什么。
其他几个细节也得到了优化。您可以直接查看下面的最终版本（由于微信压缩图片导致模糊，您可以在超人电话亭公众号后台回复“千牛表单”获取原图）：
结束
作为表单设计的总结，主要说明了表单可以按照之前分享中提到的方法，有效的输出表单页面。大家可以通过对比设计前后的两个版本来思考这些知识点的作用。
当然由于时间限制，还有一些深入的可操作方案还没有完全论证。如果有什么疑问，可以留言讨论。
C端UI实战课一周左右就开始了。想要参加的同学赶紧报名吧，不然三个月后我们就再见啦~
B端产品设计课程目前处于早鸟价预订阶段。如果来上课的话，提前预约还有折扣哦~
期待在课堂上见到您！
页:
[1]