8个电商制品「订单详情」的设计模板-外链论坛

6257rv7 发表于 2024-8-12 09:12:01

8个电商制品「订单详情」的设计模板

本文介绍了电商制品设计【订单详情】的原由、以及怎样设计【订单详情】功能的8个模板。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyrD0lmBaT0Ji4~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651498&x-signature=0CqUcxVWZE30f3L%2FUUT5W3V31%2FQ%3D" style="width: 50%; margin-bottom: 20px;">
【订单详情】是APP平常功能之一，包括但不限于购物、教育、旅游、交通、餐饮等APP；凡是触及到交易，都能到它的踪影。
在本篇文案中将参照唯品会APP，分析电商制品的【订单详情】功能应当怎样设计。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">1、为何电商制品会设计【订单详情】功能？</h1>
咱们先来回顾下平常去超市购物的场景。咱们在超市选购心仪商品，而后到收银台结账，收银员都会供给一张购物小票，如下图所示：<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyrD0mR950B2Fe~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651498&x-signature=os%2BfHlP9UrX%2BigCHTEDY%2B9bPY8c%3D" style="width: 50%; margin-bottom: 20px;">
小票自上而下分别印有超市名叫作、打单设备编号、收银员工号、打单时间、商品条码、商品名叫作、单价、数量、小计、合计、付款方式、找零、购物保证声明、超市tel、超市位置、小票号等。
购物小票是超市商家供给给顾客的一张消费凭证。当在消费过程中或是在消费过后一段时间内，顾客对服务或商品质量存在疑问、必须研发票、领取消费积分、消费维权等时候，顾客可向商家供给小票，商家按照小票翻查消费记录，核实消费信息确认无误后方能为顾客解疑答惑。
顾客需妥善保管好小票，否则小票丢失会影响服务。
而APP上的【订单详情】功能等同于购物小票，是商家供给的一种电子服务凭证。
相针对纸质票据而言，这种电子票据拥有永久保留、容易翻查等特性，不论顾客遇到什么问题，都可随时随地拿出手机、打开APP，找到对应的订单。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">2、怎样设计【订单详情】功能？</h1>
咱们以唯品会APP为例，分析它是怎样设计【订单详情】功能：<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyrD0nUHyIRNJg~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651498&x-signature=ReFhgvXl7Xzn1sb4btZrhDYRuyM%3D" style="width: 50%; margin-bottom: 20px;">
唯品会app-订单详情
由上图可见，【订单详情】页包括较多信息，这些信息可归类为八个模块：订单信息、配送信息、商品信息、保险信息、发票信息、客服、商品举荐、订单操作。
下面咱们对各个模块进行拆解分析。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1. 订单信息</h2>
「订单信息」模块包括最基本的订单资料，记录下全部交易过程的重要节点信息。包含顾客下单历史、付款记录、订单状态等；当交易过程出现纠纷时，顾客、商家双方均可重新核对订单信息。
（1）订单编号：相当于购物小票的“小票号”，是 APP 区分订单的独一标识；顾客下单时APP 自动生成独一的编号；通常由下单日期+随机数字构成，而位数通常掌控在10~15位之间；为方便复制出订单编号，通常在其之后还会添加【一键复制】功能。
唯品会app-订单详情-订单编号
（2）下单时间：顾客提交订单一刻的时间，通常记录年-月-日-时-分-秒，如：2020-05-11 09:36:05，对时间精确度需求不高的订单，可省略秒级时间。
唯品会app-订单详情-下单时间
（3）商品金额：相当于购物小票的“合计”，即商品总价；商品金额=∑（商品售价*购买数量）；通常保存两位小数，即到分位，如：￥100.00。
唯品会app-订单详情-商品总金额
（4）快递运费：网上购物通常经过快递配送到家，这就触及支付快递花费；倘若商家免费包邮，则无需支付快递花费；倘若不包邮，则按商家的标准收费，区别商家的收费规则可能区别；通常保存两位小数，即到分位。
唯品会app-订单详情-运费
（5）优惠金额：当遇上促销季，如：11·11、618等，商家组织优惠活动，优惠金额便记录了活动的优惠幅度；因为优惠是在原价基本上扣减金额，因此呢通常记录为负数，如：-￥10.00；通常保存两位小数，即到分位。
唯品会app-订单详情-活动优惠
（6）实付金额：相当于购物小票的“实付”，是顾客实质必须付款的金额；与超市购物不同样的是，网上购物不找零，亦即应付多少就实付多少；实付金额=商品金额+快递运费+优惠金额；通常保存两位小数，即到分位。
唯品会app-订单详情-实付金额
（7）支付方式：记录顾客付款方式；网上购物通常是采用线上支付方式，如：支付宝、微X支付等；有些商家还会提供礼品卡或储值钱包支付功能，如：唯品卡，京东钱包等；当采用多种方式组合支付时，需记录所有方式以及每种方式对应支付的金额。
唯品会app-订单详情-支付方式
（8）订单状态：记录顾客从下单后到确认收货这时期的重要动作节点，通常有如下几种：待付款：顾客下单后、付款前，通常保存订单30分钟或更长期，若顾客一直不付款，则会自动取消订单；待发货：顾客付款后、商家发货前，当商家迟迟未发货，顾客可催促商家发货；待收货：商家发货后、顾客收货前；交易完成：顾客确认收货后；··：顾客半途取消订单或不满意退货。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyrD1Qu2AEer1f~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651498&x-signature=6OF23KkOeYH79L0r%2FHIu878IWgM%3D" style="width: 50%; margin-bottom: 20px;">
唯品会app-订单详情-订单状态
（9）商品快照：为避免商家修改了商品信息后，原信息被覆盖，APP在顾客下单时刻自动拍摄商品快门照片，当出现交易纠纷时，顾客和客服都可重新回看商品快照核对商品原有信息；可添加温馨提示“出现交易争议时，可做为判断依据”。
唯品会app-订单详情-商品快照
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2. 配送信息</h2>
「配送信息」模块包括物流信息、收货信息等，是物流进度的查找入口。通常物流机构亦会在其官网颁布包裹的物流详情，但订单详情页中设计该模块可更方便顾客直接查找物流。
（1）收货信息：顾客下单时需填写收货信息，商家将按照收货信息寄送商品，快递员亦会按照收货信息派送包裹；包含收货人、收货位置、联系tel；收货位置通常记录省-市-区-街道-仔细位置（建筑名叫作、楼号、门牌号等），如：广东省广州市越秀区东兴街道东兴小区35号101房；联系tel通常为国内手机号码，即11位纯数字号码，且属于用户个人隐私信息，需脱敏展示，即仅表示前三位和后四位、中间四位隐匿，如：137****8179。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyrD1Sw8wyNnwh~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651498&x-signature=Jk9F1%2Fw4hn8yPkFgdcWcEuJ1IB8%3D" style="width: 50%; margin-bottom: 20px;">
唯品会app-订单详情-收货信息
（2）物流状态：物流机构会按照包裹实质到达站点或运转过程更新物流状态，通常包括操办人、到达站点、详细操作、出现时间等信息，需调用物流机构供给的api获取物流状态；因为订单详情页篇幅有限，通常仅展示最新一条物流状态，而全量的物流信息需再单独设计一个物流详情页面，当点击「配送信息」模块时转至该页面。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyrD1iVHuCmSrG~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651498&x-signature=c7mnCi7TNLF0jC%2F7UK2Z4%2ByRxQw%3D" style="width: 50%; margin-bottom: 20px;">
唯品会app-订单详情-物流状态
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3. 商品信息</h2>
「商品信息」模块记载了顾客购买商品的详细内容，等同于购物小票中间的商品信息部分，包含商品名叫作、购买数量、商品价格等。商家名叫作：通常展示在模块头部位置，如下图。商品名叫作：可分行展示，通常不超出两行，超出部分用“…”省略展示。商品照片：仅展示一张照片，通常展示顾客下单时选取的商品规格（即SKU）对应的照片，如：商家发布售卖Iphone 8黑、银、金三种颜色，顾客购买了银色款，则「商品信息」模块的商品照片展示银色款的照片。商品规格：记录顾客下单时所选取的商品规格属性，如：颜色、体积等，各个属性之间可用空格或分号隔开，如：粉色；60ml。服务特性：记录商家承诺供给给顾客的服务，如：7天退换等，通常以标签样式展示，如下图。商品原价：即商家发布商品的原始售价；通常保存两位小数，即到分位；当商家组织优惠活动时，因为原价并非顾客最后实质支付的价格，其重要程度相对实质售价而言要低有些，因此商品原价通常置灰缩小展示，如下图。实质售价：当遇上促销季，如：11·11、618等，商家组织优惠活动，实质售价便是优惠之后的价格金额；通常保存两位小数，即到分位。购买数量：展示格式通常为 x N，N即为数量，如：x 5表率购买5件。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyrD1j56Tf1Irb~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651498&x-signature=TUfTxG6rQqE%2Fqn%2BpwcRFkO7cOGY%3D" style="width: 50%; margin-bottom: 20px;">
唯品会app-商品信息
<h2 style="color: black; text-align: left; margin-bottom: 10px;">4. 保险信息</h2>
商家与保险机构合作推出顾客购物保险服务，「保险信息」模块记录保险服务内容，当商家未能履行服务承诺时，顾客可依据保险信息向保险机构发起投诉理赔，或经过法律途径起诉索赔。
（1）保险单号：顾客下单后，保险机构自动生成一张保险保单，每份保单都有独一的保险单号；因为订单详情页篇幅有限，通常仅展示保险单号，而详细的保单内容和理赔规则需再单独设计一个保险详情页面，当点击「保险信息」模块时转至该页面；保险单号以及其他详情信息需调用保险机构api获取。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyrD1jsDgymzfA~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651498&x-signature=gB7tjJl4Y0mVs%2F7cYfVgj53gW2c%3D" style="width: 50%; margin-bottom: 20px;">
唯品会app-保险信息
<h2 style="color: black; text-align: left; margin-bottom: 10px;">5. 发票信息</h2>
发票是商家供给顾客留存的营销凭据，申请开票是消费者的权利，而订单详情中的「发票信息」模块记录顾客的开票历史，同期亦是顾客向商家申请开票的入口。
（1）发票状态：顾客向商家申请研发票的状态，通常有两种：未开票：顾客未申请开票；此时点击「发票信息」模块转至补研发票页面；已开票：顾客申请开票后。唯品会app-发票信息-未开票
（2）开票信息：顾客开票时填写，仅在“已开票”状态才会展示开票信息，包含发票类型、发票抬头、发票内容、纳税人识别号、开户银行等。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyrD1lEHEX4kU~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651498&x-signature=kxtPAPdVCg1%2BR4K8KChh%2BQbv%2Frg%3D" style="width: 50%; margin-bottom: 20px;">
唯品会app-发票信息-已开票
<h2 style="color: black; text-align: left; margin-bottom: 10px;">6. 客服</h2>
「客户」模块是APP向顾客供给客服咨询的功能，顾客可经过该模块进入客服咨询页面、联系商家客服。
唯品会app-客服
<h2 style="color: black; text-align: left; margin-bottom: 10px;">7. 商品举荐</h2>
「商品举荐」模块相当于超市购物的导购推销服务，商家按照顾客过往的消费历史或兴趣兴趣等行径习惯挖掘并举荐有些TA可能还感兴趣的商品，但区别于现实导购的认为判断，线上会结合科学的举荐算法，如：余弦定理、协同过滤算法等，使得举荐结果更加精细、更加匹配顾客必须；每行可展示2-3个举荐商品。<img src="https://p3-sign.toutiaoimg.com/pgc-image/RyrD23nIgZ4DSs~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723651498&x-signature=eEJPN2Gv0TurBJW%2BV45fXxAo1eI%3D" style="width: 50%; margin-bottom: 20px;">
唯品会app-商品举荐
<h2 style="color: black; text-align: left; margin-bottom: 10px;">8. 订单操作</h2>
「订单操作」模块是顾客对其订单的操作区域，顾客可这里区域取消订单、删除订单等，而区别的订单状态有区别的操作，详细如下：待付款：继续付款、取消订单待发货：提醒发货、取消订单待收货：延长收货、查看物流、确认收货交易完成：物流详情、删除订单、填写口碑、再次购买交易关闭：删除订单、再次购买通常以按钮样式摆列各个操作，由于订单详情页面篇幅有限，通常展示三个操作按钮，更加多的操作则收进【更加多】下拉项，点击【更加多】展示剩余的操作按钮，如下图。
唯品会app-订单操作
<h1 style="color: black; text-align: left; margin-bottom: 10px;">3、总结</h1>
【订单详情】做为供应链营销环节其中的一个功能，一方面方便消费者实时关注订单动态，表现了商家对顾客供给的周全营销服务，是影响顾客对商家服务质量评估和感观的重要功能，另一方面亦是节约商家运营成本的重要方式。
设想一下倘若无【订单详情】功能，顾客只能拨打商家tel查找订单，商家运营团队将承担庞大的顾客咨询量任务。此时就不得不聘请更加多的运营人员、增设客服坐席，商家成本将大大增多。由此可见【订单详情】是电商制品不可或缺的功能。
而本文第二节亦仔细赘述了应当怎样设计【订单详情】功能，分别陈列了八个模块，并分析了各个模块内字段的设计格式、数据需求等，期盼经过本文可让您对电商制品的【订单详情】功能有更深入的认识。
本文由 @天际苦旅原创发布于人人都是制品经理，未经许可，禁止转载。
题图来自 Unsplash，基于CC0协议

zzz 发表于 2024-9-7 22:37:34

你的话语如春风拂面，温暖了我的心房，真的很感谢。

sinowatcher 发表于 2024-9-10 04:20:59

你的言辞如同繁星闪烁，点亮了我心中的夜空。

m5k1umn 发表于 2024-10-3 02:37:09

我深受你的启发，你的话语是我前进的动力。

1fy07h 发表于 2024-10-15 09:54:10

我赞同你的看法，你的智慧让人佩服，谢谢分享。

4lqedz 发表于 4 天前

我完全同意你的看法，期待我们能深入探讨这个问题。

页: [1]

外链论坛's Archiver

8个电商制品「订单详情」的设计模板