一篇文章搞清电商订单结算页面设计?

标签: 文章 电商 单结 | 发表时间: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 - - 收货人姓名
email 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《电商设计手册》系列梳理的内容已经涵盖了如下几大块:. 今天我们准备开启一个新的篇章 订单中心. 订单中心系列主要内容如下:. 首先,我们来回顾下用户平常在电商平台上的购物的一个简单过程,如下图所示:. 所以,今天我们来聊聊什么呢. 答:今天的这篇文章我们主要就来聊聊上面流程中『订单结算页』的设计与实现.

一篇文章教你搞懂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代码为例:. 这段代码中,首先预置了一笔交易,而后执行交易,这两个操作更改了数据库中不同的表.