复盘｜表格表单的设计思考
— Paddlecloud深度学习平台v2.0迭代复盘1前言
1.1项目背景
公司内部需要建立一个以paddlepaddle为基础深度学习框架的深度学习训练平台，是一个能够囊括百度的核心AI技术方向，并能够以一套技术流程满足不同层次用户的资源调度、数据处理、模型训练、模型评估、模型预测、模型管理、模型分享等需求的全链式深度学习技术平台。希望PaddleCloud成为厂内统一的一站式AI平台，提供AI的全流程服务，统一厂内的AI平台的入口，将计算及计算调度以外的AI应用管理及服务功能都纳入统一。2 新版目标
目标是为公司内外各业务线使用Paddle提供一整套的服务，包括用户任务训练的使用流程全面优化，并提供多种技术方向的模型能力和相应的服务配套，帮助用户快速启动模型训练任务，高效完成用户任务并不断沉淀平台核心价值。2.1变化
- v1.0对内> v2.0对外准备
- 新增官方首页和介绍页
- 重构1.0控制台，新增概览页概念，提高用户体验
△旧版v1.0 Paddlecloud3 了解用户和需求
Paddlecloud主要用户为百度内部开发者，这些用户多为中高级用户，他们有固定的旧版使用习惯，较难推动适应过大的改动，但是该平台计划对外开放，所以二期作为对内>对外的纽带，需要传承同时去糟粕，既能够对外开放做铺垫，让小白用户也能快速上手，也能够承接这部分老用户和他们的操作习惯。因此二期在重构的同时，增加了首页和介绍页，介绍Paddlecloud的具体产品亮点和功能点，以及新增的技术优势。
3.1问题与优化
- 统一话术：比如作业>任务；资源组>组，逐步实现资源和组的拆分
- 优化导航：导航结构混乱，突出不明显的新建任务核心操作
3.2为响应式铺垫
虽然本期时间有限没有做自适应，但是我们按照响应式的标准，栅格模块化产出界面，可以为后续迭代响应式做铺垫。
4界面架构
4.1研究架构
△页面结构：主页 / 控制台
4.2before>after
重组导航栏结构，同时在首页提供快速新建的入口。之前版本的主导航栏，所有的重要操作是隐藏的，次级导航默认收起，因为平台业务的原因，后期导航栏也不会有过多业务入口，因此新版将新建至于控制台首页（总览页）界面首屏中上方，同时在左侧导航栏底部增加恒固定的新建btn。
△before(左 )/ after (右)
4.21导航栏的变化
强化新建任务
4.22左侧导航栏多样性研究和对比
Notion和teambition都分别对左侧贯穿型导航做了更新的诠释，都是在默认态不给出折叠btn，hover时才展现。
Notion在hover的时候，右上角出现折叠btn，点击后折叠，仅在左上方显示btn，再次hover btn显示浮层，节省左侧空间；
Teambition左侧导航栏同样也是hover显示折叠btn，点击后折叠，在左侧显示btn。相比来说Notion的做法能够最大化收起导航栏，同时提供浮层这种状态以供快速查看。
本次迭代PaddleCloud的导航栏处理方法预置相比，优点是用户可以在两种状态都快速新建任务，缺点是在收起状态下仅展示图标，表意性不够明显。
4.3总览页
在保持已有功能的同时，更加清晰模块化设计，增加以『用户-我』为维度的模块，能够让用户快速预览任务总数和任务状态。
5表格的自适应可能性
响应式可以让一个网站兼容多个终端，并不是每个页面都适合使用响应式，对于表格、表单类的页面很难实现完美的响应式设计。虽然不能够实现表格页面完美响应式，但是表格页面可以在适当情况下进行合理的自适应，可以从以下方面思考表格自适应的可能性。5.1基础表格的自适应浅析
表格的种类繁多，以最基础的文字表格做例子，可以将表格拆分为表头和表身，每一列填有图片或文字等内容（如图每列文字，一般选择文字左对齐），考虑每列内容极限情况所以每列可能预留空间（如图橙色），每一列之间预设间距（如图绿色），左右还有列和边的边距（如图紫色）。
实现表格的自适应，通常是通过缩短列边距来实现的，左右边距和每列预留空间是保持固定的。
*以下欢迎纠正讨论*
首先，Fe可以使用meta标签，同时配合段落/图片宽度可以通过百分比（比如width: 100%）来实现自适应，也就是我们通常看到的在拖拽浏览器的时候，列间距会自动缩短，表格会随之自适应。
通常这部分不需要ue来过多干涉，基本的表格都能够实现这样的自适应，这也是大部分时候我们能做到的表格自适应。
但是当列间距不断缩小到最小值的时候，也就是到达表格的临界点，就需要变换表格的形式来实现更好的适配。
（UE需要结合表格美观性，设定列间距的最小值，理论上这个值可以是任何数，比如上图最小值就是6px）我们可以将将表格横向纵向调换，以适应比如na端这样的极限情况，通常可以通过@media重写一套css规范来实现。
附上我自学写在codepen自适应表格代码参考：去codepen>
还有一种解决方法比较粗暴，直接出现表格横向滚动条，虽然在金融、会计等领域的表格经常会用到，但是万不得已不建议使用这种方法，会影响表格的阅读体验。
很多复杂的表格，在极限情况，会选择不出现横向滚动条（比如notion里的表格），潜台词是高速用户，我们不建议用户在如此狭窄的空间里操作复杂表格。
因此引发了另一个问题，在狭窄的空间（比如na端），我们是否真的需要表格的存在？如果存在，会以什么样的形式存在呢？这是个可以后续引申思考的话题。
除此之外，通常在遇到列过多的情况，还有一种比较常用的交互形式，就是自定义表格列。
所以一个合适的表格自适应，需要UE判断保留多少左右间距合适，不仅要考虑每列元素的空间和预留空间，折行等显示问题，还需要考虑极限情况的处理方式等。
5.2表格内容注意事项
虽然本次平台没有涉略，但是表格内容格式也大有考究。对于金融类/财会类B端报表，往往涉及到货币，和一般的数字展示方式不同，货币一般需要右对齐，一般设计上我们倾向数据左对齐有些差异，设计上需要考虑排版一致性问题。还要考虑使用小数点(保持小数点后位数一致)和千位符(100,000)来表达货币，这是会计等职业习惯的使用方式。如果表格缺少数据，不要空着，使用占位符比如“-”来表达“空”。
6新建任务
6.1复杂的流程和表单设计
在paddle平台，新建任务的时候需要填写很多表单，旧版只简单分了模块，表单信息堆叠在上面，因此这期需要重点优化新建任务的表单设计。在处理填写表单的时候，一种方式是增加步骤条，这种方式比较常见，但是容易造成信息的割裂，如果信息之间有着强联系，那么步骤条下一页这样的处理方式会使表单信息中断，容易让用户产生迷失，paddle在填写表单的时候需要用户能够上下关联对照表单信息，因此在本次迭代中，我使用了第二种方式，同一页面的表单信息分组和增加页面锚点。
通过分模块，让用户能通过分步骤模块和右侧对应目录描点，判断自己填写的信息属性，快速找到对应关系和信息位置，预判自己的操作，减少用户的挫败感。
△旧版v1.0新建(左) / 新版v2.0新建(右)
7梳理文案
由于paddle平台的遗留问题，导致有些文案的歧义和不一致的情况出现，比如将平台资源组的重新定义为组，帮助pm以新的组的维度优化平台文案遗留问题。8组件化梳理
为了响应快速开发迭代，交互设计使用了百度云-云设的组件，因为其平台组件的限制性，在产出paddle交互的同时，也对组件进行了梳理。比如连级按钮，在按钮有两个以上层级的时候可以使用连级按钮，这种按钮的好处是可以隐藏选项，减少平铺选项后的界面凌乱感，在选中后可以直观展示已选项。
这种组件常用于地域选择，在antdesign中有出现，将其定义为级联选择。
9总结
Paddlecloud是一个比较复杂的2b平台，对于设计师来说的难点是如何快速理解业务，将专业语言转化用户语言。pm将平台用户定义为中高级用户，但其实通过收集用户群的资料来看，即时用户是深度学习行业的中高级专家，但是他们可能不是这个这个深度学习的专家(其他代码方向)，他们对于平台的操作仍然有很多问题。所以对于2b项目，一个亘古不变的难题就是如何让2b平台易于上手，因为我们通常默认2b的用户是专家，他们不需要多么好的体验，2b平台能用就行。虽然2b平台通常比较复杂，业务专业度极高，但是将化繁为简是做2b平台的时候，交互设计师的重任。
本次项目有一些问题和待开展的，比如外因考虑平台的pm和开发人员较多，不同团队意见不统一等，内因是项目专业度过高，交互很难从业务合理性层面和pm讨论，只能浅尝辄止。
后续迭代，需要ue推动埋点和新版本用户定性研究，通过定量和定性的数据，能够推动设计师更加理性看待产出的设计，更加合理推动新版本迭代。
Fin
原创禁止转载