前言

项目前期，工作中常遇到整个功能进行迭代，工作量会较大。接下来以一个工作中一个模块整体为例，分享笔者的设计思路，如果有不同想法和意见的随时可以交流。

业务场景

再说测试中按照形式分为：手动和自动。自动需要机器测试用例之后将结果返回到之中进行。现在大部分业务之中，很少有自动统一全流程，一般是由自动测试完成之后测试工程师进行修正的过程。

业务难点

内容层级多且杂，查看成本高

优化前分层简单：表格展示与详情，但是在详情之中不仅仅是嵌套的测试逐步的诸多流程结果，还有里面的详情信息表格还要嵌套这子详情页。就像一个树选择一样，层级少但是内容深度过深。内容场景复杂，信息查看成本高。

操作选项多，用户操作成本高

优化前一键下发堆积操作达到24个，测试主管查看成本高。心理预期压力大，填入过长时间拉长。

详情信息拓展不足，无法继续承载业务需求

业务需求拓展，需要添加业务部门新增的测试步骤的步骤展示以及每个收集的测试情况的拓展，现有空间已经达到了内容查看的阈值，无法再承载新的业务部门需求。

详情信息不够直观，查看效率低

多个业务团队反馈现有信息过多，无法直观的查看单个流程测试结果以及多少轮次数。而现在的功能无法支撑查看场景。

用例布局不合理，内容信息首屏曝光率低

单次详情优化前自上而下的分布，上部详情部分过高以及设备列表横排展现导致用首屏曝光率过低，底部的操作区域即使是大屏也要滑动到第二屏，操作成本也高。

页面架构暧昧，区分度不高

优化前页面基础信息以及设备列表没有明显的分割，而设备列表与设备信息的分割由一个筛选进行分割，无法在信息上进行直观的对应，识别难度难度较大。

优化措施

拆解空间，明确用户所在

优化后将空间拆分成：“总（抽屉）-分（首饰盒）-详（首饰）”，内容拆分，测试工程师通过内容快速定位当前的位置，缓解导航迷茫。

信息层级归类，树形态清晰展示

业务部门添加团队架构显示需求，在设计采用树结构呈现，用户快速定位到自己所在的团队。

分步拆解操作，快速下发任务

一键下任务操作复杂，需要完成24项内容。优化后将所有的操作分为：测试准备和资源准备2步进行分发完成。并且细化操作将专项的的三级选择以级联选择呈现，用户减少操作流程，提高选择效率。

拆解信息，明确层级

将测试流程以及结果自上而下流程化展现，并且以手风琴的交互方式提高页面内容的承载力。

多样化展示，流程可视化展现阶段测试结果

相对于表格数据的复杂，规则树的可视化的呈现方式更直接的呈现每项测试在每个环节的结果。在交互上参考VSod开发软件的缩略图的交互方式，降低用户的操作成本，也更加符合程序开发人员的软件操作习惯。

明确分类，基础与详情区分

子详情优化后，打破内容之间的暧昧，将基础信息和设备详情解耦，设备列表与测试详情强化耦合性进行1V1的强绑定。

信息快速匹配，设备与详情左右映射

在设备详情部分，采用列表与详情左右分布，采用金店或者是首饰店中首饰与标签的方式实现设备与测试内容对的强信息绑定

一点点思考

线上反映线下的场景，很多场景或者是产品设计可以参考线下的场景或者是产品。或许也是一种新的解决方式，这种设计方式或者有一些奇怪，期待与读者的交流与沟通。

Powered by Froala Editor