一篇文章搞清电商订单结算页面设计?
标签:
文章
电商
单结
| 发表时间:2020-10-27 11:46 | 作者:TIGERB
出处:https://juejin.im/backend
前言
截止目前为止SkrShop《电商设计手册》系列梳理的内容已经涵盖了如下几大块:
- 用户
- 商品
- 购物车
- 营销
- 支付
- 基础服务
今天我们准备开启一个新的篇章 订单中心。
订单中心系列主要内容如下:
知识点 |
---|
订单结算页 |
创建订单 |
订单履约 |
订单状态 |
订单详情 |
订单逆向操作 |
... |
首先,我们来回顾下用户平常在电商平台上的购物的一个简单过程,如下图所示:
所以,今天我们来聊聊什么呢?
答:今天的这篇文章我们主要就来聊聊上面流程中『订单结算页』的设计与实现。
复制代码
订单结算页长啥样?
我们来看看某东的订单结算页面:
再来看看某宝的订单结算页面:
通过上面的截图,我们可以大致得出 订单结算页面的主要页面内容:
- 用户默认收货地址信息
- 支付方式选择
- 店铺&商品信息
- 商品可选择的配送方式
- 发票类型选择
- 优惠信息
- 订单相关金额
- 等等
订单结算页面的组成
我一直在思考前端可以模块化,后端接口数据不可以模块化吗?
我的答案:是可以的。
复制代码
我们依据上面整理的内容,再通过以往的经验把 订单结算页面进行模块化拆分和组合,得到如下订单结算页面的 模块化构成:
关于这块代码如何设计,可以参考我的文章 《代码组件 | 我的代码没有else》
订单结算页面各模块分析
模块编号 | 模块名称 | 子模块编号 | 子模块名称 | 模块描述 |
---|---|---|---|---|
1 | 地址模块 | - | - | 展示用户最优地址 |
2 | 支付方式模块 | - | - | 该订单支持的支付方式 |
3 | 店铺模块 | - | - | 包含店铺信息、商品信息、参与的优惠信息、可选的物流方式、商品售后信息等 |
3 | - | 3.1 | 商品模块 | 包含子模块:商品基础信息模块、商品优惠信息模块、售后模块 |
3 | - | 3.2.1 | 商品基础信息模块 | 商品的信息,名称、图片、价格、库存等 |
3 | - | 3.2.2 | 商品优惠信息模块 | 选择的销售活动优惠选项 |
3 | - | 3.2.3 | 售后模块 | 商品享有的售后权益信息 |
3 | - | 3.3 | 物流模块 | 可选择的配送方式 |
3 | - | 3.4 | 店铺商品金额信息模块 | - |
4 | 发票模块 | - | - | 选择开发票的类型、补充发票信息 |
5 | 优惠券模块 | - | - | 展示该订单可以使用的优惠券列表 |
6 | 礼品卡模块 | - | - | 展示可以选择使用礼品卡列表 |
7 | 平台积分模块 | - | - | 用户可以使用积分抵掉部分现金 |
8 | 订单金额信息模块 | - | - | 包含该订单的金额明细 |
地址模块
展示用户的最优地址
最优地址逻辑:
- 首先,用户设置的默认地址
- 如果没有默认地址,则返回最近下单的地址
字段名称 | 类型 | 下级字段名称 | 类型 | 字段含义 |
---|---|---|---|---|
consignee | string | - | - | 收货人姓名 |
string | - | - | 收货人邮箱(返回值用户名部分打码) | |
mobile | string | - | - | 收货人手机号(返回值中间四位打码) |
country | object | id | int64 | 国家ID |
country | object | name | string | 国家名称 |
province | object | id | int64 | 省ID |
province | object | name | string | 省名称 |
city | object | id | int64 | 市ID |
city | object | name | string | 市名称 |
county | object | id | int64 | 区县ID |
county | object | name | string | 区县名称 |
street | object | id | int64 | 街道乡镇ID |
street | object | name | string | 街道乡镇名称 |
detailed_address | string | - | - | 详细地址(用户手填) |
postal_code | string | - | - | 邮编 |
address_id | int64 | - | - | 地址ID |
is_default | bool | - | - | 是否是默认地址 |
label | string | - | - | 地址类型标签,家、公司等 |
longitude | string | - | - | 经度 |
latitude | string | - | - | 纬度 |
模块数据demo:
{
"address_module": {
"consignee": "收货人姓名",
"email": "收货人邮箱(返回值用户名部分打码)",
"mobile": "收货人手机号(返回值中间四位打码)",
"country": {
"id": 666,
"name": "国家名称"
},
"province": {
"id": 12123,
"name": "省名称"
},
"city": {
"id": 212333,
"name": "市名称"
},
"county": {
"id": 1233222,
"name": "区县名称"
},
"street": {
"id": 9989999,
"name": "街道乡镇名称"
},
"detailed_address": "详细地址(用户手填)",
"postal_code": "邮编",
"address_id": 212399999393,
"is_default": false,
"label": "地址类型标签,家、公司等",
"longitude": "经度",
"latitude": "纬度"
}
}
复制代码
支付方式模块
该订单支持的支付方式
支付方式选项:
- 在线支付
- 货到付款
字段名称 | 类型 | 下级字段名称 | 类型 | 字段含义 |
---|---|---|---|---|
pay_method_list | array | id | int | 支付方式ID |
pay_method_list | array | name | string | 支付方式名称 |
pay_method_list | array | desc | string | 支付方式描述 |
模块数据demo:
{
"pay_method_module": {
"pay_method_list": [
{
"id": 1,
"name": "在线支付",
"desc": "在线支付的描述"
},
{
"id": 2,
"name": "货到付款",
"desc": "货到付款的描述"
}
]
}
}
复制代码
店铺模块
包含店铺信息、商品信息、参与的优惠信息、可选的物流方式、商品售后信息等
店铺模块由如下子模块组成:
- 商品模块
- 商品基础信息模块
- 商品优惠信息模块
- 售后模块
- 商品物流模块
- 店铺商品总金额信息模块
由于此处内容比较多我们之后再来单独分析。
发票模块
用户选择开发票的类型以及补充发票信息
选择开发票的类型:
- 个人
- 单位
字段名称 | 类型 | 下级字段名称 | 类型 | 字段含义 |
---|---|---|---|---|
type_id | int | - | - | 发票类型:个人;单位 |
type_name | string | - | - | 发票类型名称 |
type_desc | string | - | - | 发票类型描述 |
模块数据demo:
{
"invoice_module": {
"type_list": [
{
"type_id": 1,
"type_name": "个人",
"type_desc": "描述"
},
{
"type_id": 2,
"type_name": "公司",
"type_desc": "描述"
}
]
}
}
复制代码
优惠券模块
返回该订单可以使用的优惠券列表,以及默认选择对于当前订单而言的最优优惠券
- 展示用户的优惠券列表:当前订单可用的排最前面其他放最后面
- 默认选中最优优惠券:对于当前订单优惠力度最大的一张优惠券
关于优惠券的其他内容可以阅读优惠券章节内容。
礼品卡模块
展示可以选择使用礼品卡列表
字段名称 | 类型 | 下级字段名称 | 类型 | 字段含义 |
---|---|---|---|---|
giftcard_list | array | id | int64 | 礼品卡id |
giftcard_list | array | name | string | 礼品卡名称 |
giftcard_list | array | desc | string | 礼品卡描述 |
giftcard_list | array | pic_url | string | 礼品卡图片 |
giftcard_list | array | total_amount | float64 | 礼品卡初始总金额 |
giftcard_list | array | total_amount_txt | string | 礼品卡初始总金额-格式化后 |
giftcard_list | array | remaining_amount | float64 | 礼品卡剩余金额 |
giftcard_list | array | remaining_amount_txt | string | 礼品卡剩余金额-格式化后 |
模块数据demo:
{
"giftcard_module": {
"giftcard_list": [
{
"id": 341313121,
"name": "礼品卡名称",
"desc": "礼品卡描述",
"pic_url": "礼品卡图片",
"total_amount": 100.00,
"total_amount_txt": "100.00",
"remaining_amount": 21.00,
"remaining_amount_txt": "21.00"
}
]
}
}
复制代码
平台积分模块
用户可以使用积分抵现
比如上线某东订单结算页面中的京豆。
字段名称 | 类型 | 下级字段名称 | 类型 | 字段含义 |
---|---|---|---|---|
order_amount_min | float64 | - | - | 可使用积分抵现功能的订单金额下限 |
total_points | int64 | - | - | 用户总积分 |
can_use_points | int64 | - | - | 可使用的积分(可能存在冻结的积分) |
points2money_rate | int | - | - | 积分转换为现金比率,比如每100积分抵1元,最低1积分抵0.01元 |
points2money_min | int | - | - | 用户最少满多少积分才可使用积分抵现 |
points2money_max | int | - | - | 单笔订单 最多可以使用积分的上限 |
points_amount | float64 | - | - | 该订单积分可抵扣金额 |
points_amount_txt | string | - | - | 该订单积分可抵扣金额-格式化后 |
模块数据demo:
{
"points_module": {
"order_amount_min": 100.00,
"total_points": 9999,
"can_use_points": 9999,
"points2money_rate": 100,
"points2money_min": 1000,
"points2money_max": 9999,
"points_amount": 99.99,
"points_amount_txt": "99.99"
}
}
复制代码
订单金额信息模块
包含该订单的金额明细
字段名称 | 类型 | 下级字段名称 | 类型 | 字段含义 |
---|---|---|---|---|
skus_amount | float64 | - | - | 商品的总金额 |
promotion_amount | float64 | - | - | 优惠的总金额 |
freight | float64 | - | - | 运费 |
final_amount | float64 | - | - | 支付金额 |
promotion_detail | object | coupon_amount | float64 | 优惠券优惠金额 |
promotion_detail | object | sales_activity_amount | float64 | 销售活动优惠金额 |
promotion_detail | object | giftcard_amount | float64 | 礼品卡使用金额 |
promotion_detail | object | points_amount | float64 | 该订单积分抵扣金额 |
_txt字段略
复制代码
模块数据demo:
{
"order_amount_module": {
"skus_amount": 99.99,
"skus_amount_txt": "99.99",
"promotion_amount_total": 10.00,
"promotion_amount_total_txt": "10.00",
"freight_total": 8.00,
"freight_total_txt": "8.00",
"final_amount": 97.99,
"final_amount_txt": "97.99",
"promotion_detail": {
"coupon_amount": 5.00,
"coupon_amount_txt": "5.00",
"sales_activity_amount": 5.00,
"sales_activity_amount_txt": "5.00",
"giftcard_amount": 0,
"giftcard_activity_amount_txt": "0",
"points_amount": 0,
"points_amount_txt": "0"
}
}
}
复制代码
结语
如上,订单结算页面的内容基本介绍完毕了,有任何问题随时到我们的github项目下留言 github.com/skr-shop/ma…。
[Skr Shop] 项目地址长按进入: github.com/skr-shop/ma…
SkrShop系列更多文章:
- SkrShop | 做电商还搞不清一元秒杀、常规秒杀、限时购?
- SkrShop | 你想知道的优惠券业务,SkrShop告诉你
- SkrShop | 什么,秒杀系统也有这么多种!
- SkrShop | 购物车设计之需求分析
- SkrShop | 购物车之架构设计
- SkrShop | 通用抽奖工具之系统设计
- SkrShop | 通用抽奖工具之需求分析
- SkrShop | coder,你会设计交易系统吗(实干篇)?
- SkrShop | coder,你会设计交易系统吗(概念篇)?
- SkrShop | 第三方支付的流程分析与总结
- SkrShop | 电商设计手册之基础商品信息
- SkrShop | 电商设计手册之用户体系
相关 [文章 电商 单结] 推荐:
截止目前为止SkrShop《电商设计手册》系列梳理的内容已经涵盖了如下几大块:. 今天我们准备开启一个新的篇章 订单中心. 订单中心系列主要内容如下:. 首先,我们来回顾下用户平常在电商平台上的购物的一个简单过程,如下图所示:. 所以,今天我们来聊聊什么呢. 答:今天的这篇文章我们主要就来聊聊上面流程中『订单结算页』的设计与实现.
一篇文章教你搞懂10种电商模式
- - 人人都是产品经理电商可不止C2C、B2C、B2B这几种,本文作者对常见的10种比较成熟的电商模式进行了梳理盘点,并介绍了相应的业务流程、盈利模式以及背后的商业逻辑. 谈及“电商”二字,想写的内容确实有太多太多,不知从何写起. 为了更好的照顾到读者需求,笔者特地花了2周时间为大家梳理了迄今为止10种相对成熟的电商模式,本文将为大家一一分享他们的业务流程、盈利模式以及背后的商业逻辑.
文章: HTML5之美
- - InfoQ cn如今大热的HTML5到底美在哪里. HTML5到底能为实际的移动开发带来哪些改变. 来自阿里云云手机服务运营部的前端开发工程师 正邪 (廖健)分享了他眼中的HTML5之美,主要讲诉HTML5的常见原理并从CSS、JavaScript和框架三个方面做了细致讲解:. 白伟民:酷狗音乐的HTML5实践(百度开发者大会广州站 5月31日 免费报名).
电商之城
- 可可 - 《商业价值》杂志原产地效应正在点亮越来越多的电商之城,这代表着电子商务正在逐步回归“商务”的本质. 从机场拿一份免费的手绘地图,和着有点潮湿的空气,足够开启对厦门这座海滨城市的造访. 从市中心到达位于厦门东北方向的软件园二期,只用了不到20分钟. 对于一个习惯了北京的拥堵和密集的人来说,一座被出租车师傅将半小时车程定义为“还挺远”的城市,从一开始就带给人惊喜.
技术文章的质量
- Kai Chen - 4G spaces推友 @StarrySource 就微薄和推特的好坏问题写了一篇文章,正好和霍炬的文章同时发出来,推特上对这两篇文章叫好的人不少,其中还有一些直接就说 StarrySource 这篇比 virushuo 写得好. 文章好坏诚然是个很主观的事情,不过就仅从文章内容来说,就算有一千个读者一千个主观标准,我也想不出什么理由来说明 StarrySource 的这篇比 virushuo 写得好,因为客观上这两篇文章的差距会抵充掉主观上的一些好恶.
英文文章編輯checklist
- friedvan - 研究生2.0相信我,如果你想要在學術圈混下去,想要將文章投稿到國際期刊,不管是什麼領域,英文寫作都是非常重要的. 有句話是這麼說的:好的writing讓你上天堂,不好的writing帶你住套房. 不喜歡這句的話,可以換成:好的writing給你publication,不好的writing給你rejection.
文章: Grails最佳实践
- - InfoQ cn我在IntelliGrape工作,这是一家专门使用Groovy & Grails进行开发的公司. 本文是我们Grails项目遵循的最佳实践的基本清单,收集自邮件列表、Stack Overflow、博文, 播客和 IntelliGrape的内部讨论. 它们分为控制器、服务、Domain、视图、TagLib、测试和其他.
文章: 集成Lucene和HBase
- - InfoQ cn在所有先进的应用程序中,不管是购物站点还是社交网络乃至风景名胜站点,搜索都扮演着关键的角色. Lucene搜索程序库事实上已经成为实现搜索引擎的标准. 苹果、IBM、Attlassian(Jira)、Wolfram以及很多大家喜欢的公司【1】都使用了这种技术. 因此,大家对任何能够提升Lucene的可伸缩性和性能的实现都很感兴趣.
文章: MVVM启示录
- - InfoQ cn熟悉WPF或Silverlight的同学应该不会对MVVM模式感到陌生了,它把应用程序划分成视图、视图模型和模型三层,如图1所示:. 百度技术沙龙第二十五期:海量数据处理技术解析(4月7日 周六). 表面上,这个层次结构还蛮清楚的,但如果你细究每层应该包含什么,事情就没那么简单了. 视图应该是最容易理解的一个部分了,它通常是指用户可以看到的界面,一般都是通过XAML代码来实现的.
文章: XA事务处理
- - InfoQ cn本文选自迷你书 《Java事务设计策略》的第五章,译者翟静. 百度技术沙龙第二十五期:海量数据处理技术解析(4月7日 周六). 为了说明X/Open XA接口在JTA事务管理中的重要性,以及它使用的时机,我们以前一章提到的一段固定收入交易的EJB代码为例:. 这段代码中,首先预置了一笔交易,而后执行交易,这两个操作更改了数据库中不同的表.