天天看點

電商系統:下單功能如何設計?拆解出來講給你聽

本文主要和大家聊一聊有關前台商城下單的一些設計思路與方法,旨在對以往的經曆進行一些沉澱與總結,也希望能夠與大家共同探讨,一起成長進步。文章從訂單确認和訂單支付兩個方面說明商城下單的功能設計。
電商系統:下單功能如何設計?拆解出來講給你聽

本文目錄:

電商系統:下單功能如何設計?拆解出來講給你聽

一、訂單确認

使用者通過商品詳情頁或購物車頁面,進行商品下單。下單環節的第一個頁面為訂單确認頁,主要用于使用者确認訂單的商品資訊與金額資訊,并對訂單進行一些資訊補充或設定操作。

我們從資訊展示以及功能操作兩個方面聊一聊訂單确認頁面的設計。資訊展示包含商品資訊和金額資訊。功能操作包含添加位址(含收貨位址和代發位址)、添加發票、編輯留言、使用優惠資訊(含優惠券和積分抵扣)。

電商系統:下單功能如何設計?拆解出來講給你聽

電商Axure原型設計示範位址:https://pu6jwl.axshare.com

1.1 商品資訊與金額資訊

商品資訊包含:圖檔、标題、規格、價格、數量,如果是平台型商城,還會展示商家店鋪名稱。金額資訊一般包含商品金額、運費金額、優惠金額、積分抵扣金額、活動減免金額、應付金額。金額資訊的顯示應注意統一規範,如統一顯示小數點後兩位。

金額資訊的顯示,在垂直方向上應保持右對齊。友善使用者能夠從視覺上直覺的對比金額。

1.2 位址資訊

使用者需要為訂單選擇收貨位址,為了減少使用者的操作,系統按以下規則為使用者推薦位址。

  • 若使用者設定了預設收貨位址,則系統将自動選擇預設收貨位址。
  • 若使用者未設定預設收貨位址,則系統自動選擇上一單收貨位址。
  • 若使用者在系統内首次下單,且未設定預設位址,則系統不予選擇,需要使用者手動選擇。
  • 若使用者隻有一個收貨位址,則無需使用者進行選擇,系統直接讀取收貨位址。

下單頁面支援修改原位址、支援添加新位址。收貨位址顯示的資訊包含:收貨人姓名、聯系電話和位址資訊。出于隐私安全考慮,可以将電話号碼進行脫敏顯示,隐藏中間的四位數字。

對于B2B商城來說,客戶常常會有訂單代發的需求,是以需要為客戶提供代發服務。

客戶在下單頁面需要添加代發位址,代發位址的功能設計與收獲位址基本相同,規則如下:

  1. 若客戶設定了預設發貨位址,則系統将自動選擇預設發貨位址。
  2. 若客戶未設定預設發貨位址,則系統自動選擇上一單發貨位址。
  3. 若客戶首次下單,且未設定預設發貨位址,則系統不予選擇,需要使用者手動選擇。
  4. 若使用者隻有一個位址資訊,則無需使用者選擇,直接讀取位址資訊。

下單頁面同樣支援修改發貨位址、添加發貨位址。代發位址顯示的資訊包含:代發人姓名、電話和位址。處于隐私安全考慮,可以将電話号碼進行脫敏顯示,隐藏中間的四位數字。

電商系統:下單功能如何設計?拆解出來講給你聽

1.3 發票

自營商城或部分B2C類型的商城,通常還會給使用者提供發票服務,是以下單頁面允許添加開票資訊。出于成本考慮,系統預設不提供發票,使用者可以根據自己的實際需要選擇開具發票,發票通常會和訂單貨物一起快遞給使用者。發票的資訊通常包含發票擡頭名稱,如果是企業發票還應顯示稅号。

發票資訊的管理通常在發票頁面進行添加、編輯和删除,如果使用者未添加發票資訊,下單頁面需要支援使用者添加發票。若使用者已添加過發票資訊,則下單頁面不支援對發票資訊進行編輯和删除,隻能選擇發票。

1.4 留言

使用者下單時,通常會有一些關于包裝或發貨的事情需要提醒商家,是以在下單頁面為客戶提供了留言功能。留言的文字内容系統可以根據自己的需要,限制文字内容的長度,一般控制50字以内。

1.5 優惠資訊

01 優惠券

平台或商家通常為了刺激使用者下單,通常會提供各類優惠券。根據發放的主體不同,可分為平台券和店鋪券。根據适用範圍不同,可以分為平台通用券、店鋪通用券、平台品類券、店鋪品類券或指定單品券。根據優惠方式的不同,可以分為滿減券、折扣券和現金券。

當有多張優惠券時,系統會根據算法為使用者推薦減免金額最大的一張券,以達到充分讓利給使用者的目的。

各類情況的推薦政策如下:

  • 有多張不同額度的優惠券,推薦減免金額最大的優惠券。
  • 若減免金額相同,則優先推薦過期時間最早的優惠券券。
  • 若減免金額與過期時間都相同,則按照券類型的不同進行分别推薦,推薦順序依次為:店鋪單品券>店鋪品類券>平台品類券>店鋪通用券>平台通用券。

訂單隻能使用一張商品優惠券,如果使用者對系統推薦的優惠券不滿意,也可以自行選擇其它優惠券或不使用優惠券。在下單頁面供使用者選擇的優惠券,系統需要經過基礎的規則過濾,如根據商品(僅展示适用訂單商品的券)、訂單金額(展示符合消費門檻的券)以及優惠券的使用狀态(僅展示未使用的券)進行過濾。當使用現金券時,建議系統限制現金券的金額不能大于訂單金額,以防止免單的情況發生。

02 運費券

運費券是一種特殊類型的優惠券,隻能用于抵扣運費金額。當有多張額度不同的運費券時,系統優先推薦減免額度最大的運費券;當有多張額度相同的運費券,則系統推薦過期時間最早的運費券。與商品優惠券的使用相同,使用者也可以根據自己的需要手動選擇不同的運費券或不使用運費券。

03 積分抵扣

部分商城會有自己的積分體系,積分可用于在下單時抵扣訂單金額。通常每個商城都會有自己的一套抵扣規則,至少需要系統設定抵扣額度,一般按照訂單金額的百分比進行抵扣或固定抵扣金額。

對于何種類型的訂單能夠使用積分抵扣,也具有一定的規則。

抵扣的訂單限制要求與優惠券類似,商城可根據自己的需要針對某類商品的訂單或訂單金額滿足一定的門檻才可以使用。積分由商城統一發放與管控,積分的使用範圍一般與店鋪無關。

部分商城支援貨到付款,如京東商城以及一些2B類的垂直行業。系統預設為使用者推薦使用線上支付。

電商系統:下單功能如何設計?拆解出來講給你聽

上述資訊确認無誤後,送出訂單,系統生成訂單。

二、訂單支付

送出訂單後,進入支付環節。訂單按照支付類型不同可以分為全款支付、定金支付或預付款支付、尾款支付。定金與尾款适用于預售商品、衆籌類商品的訂單。

2.1 支付方式

目前國内的支付生态豐富,根據支付主體的不同可以歸結為銀行支付、網際網路第三方支付、終端廠商支付。銀行支付一般為銀聯,由銀聯對接各銀行。網際網路支付最常見的主要為微信支付、支付寶支付、翼支付等。終端廠商支付為各類移動裝置廠商在手機終端中預裝的支付錢包,如Apple Pay、華為支付、小米支付等。商城根據自己的實際需要與資源情況,尋找各支付廠商進行技術對接即可使用。各支付廠商,一般會根據每筆訂單收取一定的手續費。

2.2 支付頁設計

電商系統:下單功能如何設計?拆解出來講給你聽

在設計訂單支付頁面時,應注意将支付金額放置在最顯眼的位置,且支付金額的字型應放大,以便足夠引起使用者的注意。商城系統支援的支付方式應清晰的羅列展示。一般情況下,隻能選擇一種支付方式,且不能修改支付金額。

支付完成,應清晰的向使用者展示支付結果(成功或失敗)、訂單号、支付金額、收款人等資訊。另外在支付結果頁,通常還會增加訂單清單、首頁等跳轉按鈕,引導使用者留在商城。為了提升訂單的支付轉化率,還可以在支付結果頁增加刮刮卡、大轉盤等抽獎活動。

部分支付廠商會直接提供支付結果的H5頁面,提供的頁面支援商城進行定制化修改;也有部分廠商僅提供支付接口,需要商城開發支付結果頁。

結語:

從本篇文章開始,将開啟訂單系統的系列分享,陸續更新有關訂單系統前背景功能的設計思考與心得分享。由于本人才疏學淺,難免有不足之處,歡迎大家在評論區分享交流,願你我一起成長,共同進步!

本文由 @PM_墨兮 原創釋出于人人都是産品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協定

該文觀點僅代表作者本人,人人都是産品經理平台僅提供資訊存儲空間服務。

繼續閱讀