售后流程图

前一段时间接到任务，要做一个B2C的官方商城，自有品牌的，基于前面的电商经验，其他模块很快上手，唯独订单模块困扰了我好久，尤其是订单的退货退款和售后流程，与订单的正向流程密切相关，什么时候该展示什么数据，什么功能，退款单的状态对订单状态的影响等等，接下来我将用axure原型图一一讲解。

在做订单流程这一块，参考了很多大神的文章，还有各种开源的商城软件，都过于理论化，实操性不强，对于新手来说没有一个实操的axure原型讲解，都是在用流程图告诉大家退款售后有哪些步骤，但是没有一个具体的案例来分析。相信我，你是不可能一上来就做到像很多文章里写得很完美订单管理系统的，况且文章中连原型图都没有。其实，即使是天猫和京东，在售后方面也是有取舍的，设定好规则才能让系统跑通，而不是说能够应付所有的异常情况。在设计之前，要考虑很多看似基础，却需要重视的规格，比如：

1.是否支持部分退款，部分退货？

2.是否支持换货？

3.是否支持多次申请退款/退货？

4.如果在售中时申请退款被拒绝了，还可不可以申请售后？

5.部分退款时，自动收货时间到了怎么办？如果退款申请拒绝了，订单状态怎么继续走？

我这些只是举例了冰山一角，对于订单管理的确有很多异常分支情况和用户错误操作。那我在这里既然说要用案例具体去讲订单的逆向流程，我就先要规定好我们商城的订单规则：

1.待发货前可以申请一次退款，发货后可以申请一次售后（退货/退款）

2.一笔订单多种商品只能分开申请退款，不支持对订单申请退款，意思是有一种商品时就是全退，有多种商品时就是只能部分申请退款。

3.订单中暂不含优惠券，只包括运费，在待发货时部分退款，最后一笔申请会退运费；在已发货后申请售后就不再退运费，其他原因走人工客服

以上就是我对订单的设置的前提条件，有了前提条件，我再去跟技术评审，就让他们心里也感觉到靠谱一些，毕竟第一次的时候他们提出了很多漫无边际，非常离谱但是也会出现的异常情况，一开始得时候我真的很苦恼，后来才发现是我没有设定规则，没有规则，技术同学当然怕出现出现异常情况程序不知道怎么跑了。

用户端订单页面

关于订单的具体流程我就不多讲了，大家都知道的，待付款，待发货，待收货，交易成功，待评价，那我们先来看看我是如何对订单设置布局的

图片所展示的，一笔订单分为商品操作栏，交易状态栏和操作栏，对于商品操作栏我是分开的，所以一笔订单有多种商品时在申请退款的时候，一定是单个申请的；交易状态栏是合并在一起的，这是对订单整体进度的状态显示，在部分退款时显示的订单状态；最后操作栏在确认收货前都是合并在一起的，对整个订单的签收，当状态为交易成功时，则会显示商品的评价入口。

那么这里就涉及这三块的状态和操作功能的切换，我们先来看一下 退款单过程状态 对商品操作栏的显示影响

我前面有讲，当处于待发货状态时，商品操作入口为“申请退款”；当已发货后，商品操作就为“申请售后”，那退款单的状态先去影响了商品操作栏的显示。具体的细分状态我在图片中已经详细列出来了，包括异常情况该如何处理。

在看完退款单对商品操作的影响后，再来看看退款单对订单状态的影响，注意，退款单与订单是多对一的关系，退款单和商品也是多对一的关系，所以才会有申请一次退款被拒绝了，还可以申请一次售后（退款/退货）。下图是 退款单结果状态 对订单状态的影响

可以看出来每一种订单都有部分和全部两种影响，这里要注意，全部并不是一次对订单提交的退款申请，而是查看到订单中是不是所有商品都有退款单，并且都有结果。通过这样表格的分析整理，会很清晰理解订单状态随退款单的变化。

用户端退款单界面

前面讲了订单页面中订单状态的变化，具体的订单详情我就不做过多说明了，因为大家参考其他网站也可以很直观的看到，接下来看退款管理的界面

根据我之前的设置的退款规则，这里的退款单一定是一种商品一个退款单（可能包含多件，因为规定申请退款是不能选择退款数量，要么全退，要么客服联系，因为后台可以修改退款金额）。退款单分为两种，仅退款和退货退款，在待发货时只能申请仅退款，在发货后可以选择申请退款或者是申请退货，但是只有一次机会！

这里很多人就会说我不考虑用户体验问题，首先我想说京东一上来退款退货规则也不完善，当然发展到今天他仍然还有很多不好的地方，当用户的退货申请被拒绝了你作为用户怎么办？京东的客服什么时候上线过，那个时候你只能网上发发牢骚。商城是从0到1，订单模块第一版的计划就是用户能下单，能退款，能退货。至于为什么用户不能一次申请所有商品的退款，为什么不能设置一种商品的退货数量等，后期会加上批量选择退款商品，设置退货数量等，不断优化退款和退货的流程图。

这篇文章很适合产品新人来了解基础的退款退货的原型图设计，毕竟这里不包含优惠券，没有拆单，也没有调仓等等，所以大家看了文章觉得还可以的点个赞~不喜勿喷

这里就没有展示具体的详情页面，所以可以底下留言找我要原型图~

一个产品，从其诞生至成熟需要一个过程，这个过程大概就称之为流程。很多时候，我们要以图形的方式去体现这个过程，也就是我们常见的“流程图”。说白了就是表示先做什么后做什么，实际上就是“开始，结束，行动，状态与判断”的组合图。

XMind地址：网页链接

XMind中，用户可以自由、灵活的设计流程图。你可能会说，没有可直接使用的流程图结构呀。没错，确实没有，抽象的说要用思维导图模式画流程图。怎么画？下面我们会提到。或许你还会说我就是不回画怎么办？没关系，XMind 8中有多种流程图式的思维导图模板可供你直接使用。例如下图↓↓↓

流程图制作四部曲：

1）在XMind中，从主页选择新建一个空白图。然后修改中心主题内容；这里更建议大家将重心主题作为说明文本，例如上述的“制造流程”，而流程图的开端使用“自由主题”。

2）选中主题，使用快捷键 Ctrl+L（苹果电脑用Command+L）并点击空白处，得到与之相连的第二个自由主题，继续修改内容。

3）如果联系线条默认不是直线，甚至没有箭头。此时，请点击线条选中（可以一个或者多个），在右侧的“格式”视图中可调整线条的形状、同时也可以添加“联系”信息。

注释：选中不同的对象，“格式”视图会相应跟随。即选中主题时，可以在格式视图中修改其形状、颜色等属性。

4）重复上述操作。完成内容添加。最后调整主题之间的距离，排列自由主题。

注意：一定要按住Shift键，然后使用鼠标摆放自由主题的位置；将主题摆放整齐，选中目标主题，譬如主线上的几个自由主题，然后从菜单选择“修改 -- 排列自由主题 -- 水平居中”，竖列的自由主题就选择 “ 修改 -- 排列自由主题 -- 合适的排列方式 ”。

整个制作及设计过程在XMind中都非常简单快捷，你只需要自由发挥你的设计思维就好。当然，如果你想更快更高效的完成流程图的制作，你可以直接使用XMind中的流程图模板。只需更改内容，稍作调整即可。