突然发现，自己好像很久没在简书上写文章了！别以为我偷懒哦～我还是有好好写文字的，只是这一年来一直在摸索到底通过什么方式做输出，尝试了简书、UI中国等网站，最后还是回归了印象笔记，毕竟编辑起来最为便捷。
最近发现只是自己记录笔记，没有分享，不能激发更多的讨论和思考，所以先放一篇新公司第一个项目的总结笔记～希望分享出去后能有更多的收获。下面才是正文👇
进入新公司第一天，就接到了第一个任务——对已有的商家自助服务系统进行UI重构。作为新人，对公司业务了解程度非常低，询问了产品发现并没有以前做这个系统设计时的一些参考文档，于是我决定先自行梳理一遍这个系统的功能架构。
商家自助服务系统功能脑图
通过对原系统的梳理，可以发现这个系统主要为商家提供物流订单管理的服务，物流订单主要分为配装任务物流订单*和售后任务物流订单**，商家在订单管理模块分别对两类订单进行管理，包括查看订单物流节点信息，收发货人信息，商品信息，商品提货签收信息等，当订单出现异常时，商家可以在系统上反馈异常情况，由物流供应商客服跟踪处理。相关的异常订单在工单模块进行单独管理，可查看详细的异常处理结果信息。
*即买家下单后，商家提供的货物配送安装服务的订单
**即买家签收货品后，因货品破损、漏件等原因产生的上门维修、返货、补货等的订单
以上是这个系统的大致情况，详细的订单内容等不作深入的解释，先来讲讲下一步的重构设计工作。
第一版的重构局限于对业务理解有限和对该业务下的商家用户的痛点定位不准，我只进行了非常保守的界面布局的优化。原首页主要突出订单的全局搜索和异常订单的处理结果的反馈以下是原系统首页当前界面和RP原型设计图：
首页-原系统首页
首页-原型设计图
从原型和已实现的首页UI看来，产品设计前期规划的首页承载了任务订单的全局搜索和异常订单的快速索引的功能，因为没有做用户调研，对用户对需求把我不准确，我无法做太大的改动，只是在此基础上增加了一些自己的想法。保留banner作为宣传广告展示的位置，与任务搜索框结合，提升界面空间利用率，增加订单总数、异常订单数和异常比例、异常类型分布图等数据统计项，方便商家分析异常。同时增加未处理异常订单的索引列表，方便商家关注异常处理进度。
整体风格配色按照公司的设计规范做了调整，第一稿的效果图如下：
重构后的首页
订单列表页的做的改动就更少了，原页面如下：
原系统订单管理-配装任务页
该页面我在原来的基础上，在状态分类标签增加了每个标签下的数据量统计数值，让用户有更直观的认知，同时调整了筛选项的布局，减少筛选项占用的空间，重构后的UI如下：
重构后的任务列表页
页面的跳转关系还是采用原来的方式，在系统内使用子页面标签区分，所以选择一个订单查看详情即打开该订单的详情子页。详情页的改动主要是订单各类信息的布局上的调整。原详情页如下图：
原配装任务详情页
原详情页采用瀑布流的布局，每一类信息依次排序，导致页面过长，页面空间利用率较低，顶部的状态节点与节点信息存在对应关系，但是却分两部分展示，个人认为略显冗余。为了让商家在打开该页面的第一屏就能浏览到更多的信息，我将开单信息、商品信息、提货信息、签收信息四项分两列展示，状态节点与节点信息结合展示，同时在详情页增加订单操作按钮，于是就有了以下的重设计方案：
重构后的订单详情页
个人认为这个设计方案的优缺点分别如下：
优点：
1、深蓝和橙色的配色方案突出品牌形象；
2、界面整齐统一，遵循公司的设计规范，列表行距增加，呼吸感更强，更美观；
3、订单信息展示更直观；
缺点：
1、纯视觉角度的改版，没有对用户操作习惯、用户痛点需求等深入理解，无法做出交互、流程上的优化，局限性较大；
方案过审的时候，产品提了比较多的意见，罗列如下：
1、系统功能菜单项比较少，采用左侧导航菜单的形式比较浪费空间，可以考虑顶部导航菜单的形式；
2、任务列表表格内容较多，需要横向滚动，信息展示不够直观，可以考虑用卡片式列表的形式展示，重点突出商家关注的信息，同时可以考虑允许用户在列表和卡片来回切换；
3、商家很少横向比较订单信息，或者说页面切换的频率较低，可以考虑不需要子页面标签栏，直接进行页面的切换；
4、详情页分左右两列展示信息流显得混乱，可以采用分tab瀑布流式的展示方式；
5、思考交互方式上的优化；
通过这次比稿过会和后续的沟通，我自己也发现了几点存疑的地方：
1、列表的查询筛选条件是否能满足商家的需求，能否让商家快速查询到想要的信息；
2、列表数据列的顺序是否对商家识别判断订单项有影响，如何排列字段的顺序能让商家更快速地识别分辨不同的订单项；
3、商家查看订单详情，最关注哪部分的内容；
4、……
有了以上的讨论基础，我联想到平时我们常用的邮箱系统，邮箱的列表与侧滑展开详情页展示的交互方式，便于用户浏览邮件列表，同时在查看邮件详情的时候，交互操作不会有断层感。而我们现在需要重构的这个商家服务系统，从某种意义上来说，跟邮箱系统十分相似，商家需要查询的订单相当于一封封邮件，于是就有了重构设计方案的新构思。
因为系统功能模块分类不多，功能结构也比较简单，可以采用顶部导航的方式，为数据内容展示提供更多的空间。原来的数据展示列表则采用列表+卡片形式展示，按字段类别和重要程度进行了归纳分类和重新布局，列表不需要横向滚动，可以在每一项数据项中进行相关操作。
而批量操作采用底部弹窗的模式，不再占用页面中的一行高度。
最终的任务列表页设计方案
详情页采用侧滑展开的交互方式，选择一个订单即从页面右侧左滑展开对应的详情，原列表宽度压缩，提取几项重要数据进行展示，其余的隐藏。状态分类标签切换成下拉菜单，同时隐藏筛选项。对列表进行批量操作时切换回全屏列表页面。
详情信息采用分tab瀑布流式的展示方式，点击tab内容页滚动定位到对应的内容位置。按照产品对商家用户对了解所提供的意见，最终还是采用节点状态展示和详细节点信息分开展示的方式，顶部固定展示节点路径和状态，详细节点信息则放在节点信息的tab中展示。
采用这种交互方式，页面层级不深，查看订单时也可以直接切换不停的订单进行查看，原来系统内的子标签页的导航结构也就变得不必要而去掉了。
缩略的列表和详情信息展示页
首页则按待处理订单的状态展示数量并提供快速定位入口，同时把前3～5个最新更新状态的订单陈列出来，方便商家跟踪处理。统计图表目前没有收到来自商家的需求，故只是展示订单数量趋势，后期调研清楚需求后再继续增加符合商家实际工作需要的图文报表等。
最终的首页
重构方案大致就完成啦，后续就是补充相关控件样式，和跟开发做好对接。
新公司第一个项目，跟团队还有很多需要磨合的地方，也发现了自己在web端系统交互设计方面的很多不足之处～接下来还要努力提升自己的硬实力鸭💪
网友评论