編輯導(dǎo)語：本文主要和大家聊一聊有關(guān)前臺(tái)商城下單的一些設(shè)計(jì)思路與方法，旨在對(duì)以往的經(jīng)歷進(jìn)行一些沉淀與總結(jié)，也希望能夠與大家共同探討，一起成長進(jìn)步。文章從訂單確認(rèn)和訂單支付兩個(gè)方面說明商城下單的功能設(shè)計(jì)。

一、訂單確認(rèn)

用戶通過商品詳情頁或購物車頁面，進(jìn)行商品下單。下單環(huán)節(jié)的第一個(gè)頁面為訂單確認(rèn)頁，主要用于用戶確認(rèn)訂單的商品信息與金額信息，并對(duì)訂單進(jìn)行一些信息補(bǔ)充或設(shè)置操作。

我們從信息展示以及功能操作兩個(gè)方面聊一聊訂單確認(rèn)頁面的設(shè)計(jì)。信息展示包含商品信息和金額信息。功能操作包含添加地址（含收貨地址和代發(fā)地址）、添加發(fā)票、編輯留言、使用優(yōu)惠信息（含優(yōu)惠券和積分抵扣）。

01 商品信息與金額信息

商品信息包含：圖片、標(biāo)題、規(guī)格、價(jià)格、數(shù)量，如果是平臺(tái)型商城，還會(huì)展示商家店鋪名稱。金額信息一般包含商品金額、運(yùn)費(fèi)金額、優(yōu)惠金額、積分抵扣金額、活動(dòng)減免金額、應(yīng)付金額。金額信息的顯示應(yīng)注意統(tǒng)一規(guī)范，如統(tǒng)一顯示小數(shù)點(diǎn)后兩位。金額信息的顯示，在垂直方向上應(yīng)保持右對(duì)齊。方便用戶能夠從視覺上直觀的對(duì)比金額。

02 地址信息

用戶需要為訂單選擇收貨地址，為了減少用戶的操作，系統(tǒng)按以下規(guī)則為用戶推薦地址。

1. 若用戶設(shè)置了默認(rèn)收貨地址，則系統(tǒng)將自動(dòng)選擇默認(rèn)收貨地址。
2. 若用戶未設(shè)置默認(rèn)收貨地址，則系統(tǒng)自動(dòng)選擇上一單收貨地址。
3. 若用戶在系統(tǒng)內(nèi)首次下單，且未設(shè)置默認(rèn)地址，則系統(tǒng)不予選擇，需要用戶手動(dòng)選擇。
4. 若用戶只有一個(gè)收貨地址，則無需用戶進(jìn)行選擇，系統(tǒng)直接讀取收貨地址。

下單頁面支持修改原地址、支持添加新地址。收貨地址顯示的信息包含：收貨人姓名、聯(lián)系電話和地址信息。出于隱私安全考慮，可以將電話號(hào)碼進(jìn)行脫敏顯示，隱藏中間的四位數(shù)字。

對(duì)于B2B商城來說，客戶常常會(huì)有訂單代發(fā)的需求，所以需要為客戶提供代發(fā)服務(wù)?？蛻粼谙聠雾撁嫘枰砑哟l(fā)地址，代發(fā)地址的功能設(shè)計(jì)與收獲地址基本相同，規(guī)則如下：

1. 若客戶設(shè)置了默認(rèn)發(fā)貨地址，則系統(tǒng)將自動(dòng)選擇默認(rèn)發(fā)貨地址。
2. 若客戶未設(shè)置默認(rèn)發(fā)貨地址，則系統(tǒng)自動(dòng)選擇上一單發(fā)貨地址。
3. 若客戶首次下單，且未設(shè)置默認(rèn)發(fā)貨地址，則系統(tǒng)不予選擇，需要用戶手動(dòng)選擇。
4. 若用戶只有一個(gè)地址信息，則無需用戶選擇，直接讀取地址信息。

下單頁面同樣支持修改發(fā)貨地址、添加發(fā)貨地址。代發(fā)地址顯示的信息包含：代發(fā)人姓名、電話和地址。處于隱私安全考慮，可以將電話號(hào)碼進(jìn)行脫敏顯示，隱藏中間的四位數(shù)字。

03 發(fā)票

自營商城或部分B2C類型的商城，通常還會(huì)給用戶提供發(fā)票服務(wù)，因此下單頁面允許添加開票信息。出于成本考慮，系統(tǒng)默認(rèn)不提供發(fā)票，用戶可以根據(jù)自己的實(shí)際需要選擇開具發(fā)票，發(fā)票通常會(huì)和訂單貨物一起快遞給用戶。發(fā)票的信息通常包含發(fā)票抬頭名稱，如果是企業(yè)發(fā)票還應(yīng)顯示稅號(hào)。

發(fā)票信息的管理通常在發(fā)票頁面進(jìn)行添加、編輯和刪除，如果用戶未添加發(fā)票信息，下單頁面需要支持用戶添加發(fā)票。若用戶已添加過發(fā)票信息，則下單頁面不支持對(duì)發(fā)票信息進(jìn)行編輯和刪除，只能選擇發(fā)票。

04 留言

用戶下單時(shí)，通常會(huì)有一些關(guān)于包裝或發(fā)貨的事情需要提醒商家，因此在下單頁面為客戶提供了留言功能。留言的文字內(nèi)容系統(tǒng)可以根據(jù)自己的需要，限制文字內(nèi)容的長度，一般控制50字以內(nèi)。

05 優(yōu)惠信息

優(yōu)惠券

平臺(tái)或商家通常為了刺激用戶下單，通常會(huì)提供各類優(yōu)惠券。根據(jù)發(fā)放的主體不同，可分為平臺(tái)券和店鋪券。根據(jù)適用范圍不同，可以分為平臺(tái)通用券、店鋪通用券、平臺(tái)品類券、店鋪品類券或指定單品券。根據(jù)優(yōu)惠方式的不同，可以分為滿減券、折扣券和現(xiàn)金券。

當(dāng)有多張優(yōu)惠券時(shí)，系統(tǒng)會(huì)根據(jù)算法為用戶推薦減免金額最大的一張券，以達(dá)到充分讓利給用戶的目的。各類情況的推薦策略如下：

1. 有多張不同額度的優(yōu)惠券，推薦減免金額最大的優(yōu)惠券。
2. 若減免金額相同，則優(yōu)先推薦過期時(shí)間最早的優(yōu)惠券券。
3. 若減免金額與過期時(shí)間都相同，則按照券類型的不同進(jìn)行分別推薦，推薦順序依次為：店鋪單品券>店鋪品類券>平臺(tái)品類券>店鋪通用券>平臺(tái)通用券。

訂單只能使用一張商品優(yōu)惠券，如果用戶對(duì)系統(tǒng)推薦的優(yōu)惠券不滿意，也可以自行選擇其它優(yōu)惠券或不使用優(yōu)惠券。在下單頁面供用戶選擇的優(yōu)惠券，系統(tǒng)需要經(jīng)過基礎(chǔ)的規(guī)則過濾，如根據(jù)商品（僅展示適用訂單商品的券）、訂單金額（展示符合消費(fèi)門檻的券）以及優(yōu)惠券的使用狀態(tài)（僅展示未使用的券）進(jìn)行過濾。當(dāng)使用現(xiàn)金券時(shí)，建議系統(tǒng)限制現(xiàn)金券的金額不能大于訂單金額，以防止免單的情況發(fā)生。

運(yùn)費(fèi)券

運(yùn)費(fèi)券是一種特殊類型的優(yōu)惠券，只能用于抵扣運(yùn)費(fèi)金額。當(dāng)有多張額度不同的運(yùn)費(fèi)券時(shí)，系統(tǒng)優(yōu)先推薦減免額度最大的運(yùn)費(fèi)券；當(dāng)有多張額度相同的運(yùn)費(fèi)券，則系統(tǒng)推薦過期時(shí)間最早的運(yùn)費(fèi)券。與商品優(yōu)惠券的使用相同，用戶也可以根據(jù)自己的需要手動(dòng)選擇不同的運(yùn)費(fèi)券或不使用運(yùn)費(fèi)券。

積分抵扣

部分商城會(huì)有自己的積分體系，積分可用于在下單時(shí)抵扣訂單金額。通常每個(gè)商城都會(huì)有自己的一套抵扣規(guī)則，至少需要系統(tǒng)設(shè)置抵扣額度，一般按照訂單金額的百分比進(jìn)行抵扣或固定抵扣金額。對(duì)于何種類型的訂單能夠使用積分抵扣，也具有一定的規(guī)則。抵扣的訂單限制要求與優(yōu)惠券類似，商城可根據(jù)自己的需要針對(duì)某類商品的訂單或訂單金額滿足一定的門檻才可以使用。積分由商城統(tǒng)一發(fā)放與管控，積分的使用范圍一般與店鋪無關(guān)。

部分商城支持貨到付款，如京東商城以及一些2B類的垂直行業(yè)。系統(tǒng)默認(rèn)為用戶推薦使用在線支付。

上述信息確認(rèn)無誤后，提交訂單，系統(tǒng)生成訂單。

二、訂單支付

提交訂單后，進(jìn)入支付環(huán)節(jié)。訂單按照支付類型不同可以分為全款支付、定金支付或預(yù)付款支付、尾款支付。定金與尾款適用于預(yù)售商品、眾籌類商品的訂單。

01 支付方式

目前國內(nèi)的支付生態(tài)豐富豐富，根據(jù)支付主主體的不同可以歸結(jié)為銀行支付、互聯(lián)網(wǎng)第三方支付、終端廠商支付。銀行支付一般為銀聯(lián)，由銀聯(lián)對(duì)接各銀行。互聯(lián)網(wǎng)支付最常見的主要為微信支付、支付寶支付、翼支付等。終端廠商支付為各類移動(dòng)設(shè)備廠商在手機(jī)終端中預(yù)裝的支付錢包，如Apple Pay、華為支付、小米支付等。商城根據(jù)自己的實(shí)際需要與資源情況，尋找各支付廠商進(jìn)行技術(shù)對(duì)接即可使用。各支付廠商，一般會(huì)根據(jù)每筆訂單收取一定的手續(xù)費(fèi)。

02 支付頁設(shè)計(jì)

在設(shè)計(jì)訂單支付頁面時(shí)，應(yīng)注意將支付金額放置在最顯眼的位置，且支付金額的字體應(yīng)放大，以便足夠引起用戶的注意。商城系統(tǒng)支持的支付方式應(yīng)清晰的羅列展示。一般情況下，只能選擇一種支付方式，且不能修改支付金額。

支付完成，應(yīng)清晰的向用戶展示支付結(jié)果（成功或失?。?、訂單號(hào)、支付金額、收款人等信息。另外在支付結(jié)果頁，通常還會(huì)增加訂單列表、首頁等跳轉(zhuǎn)按鈕，引導(dǎo)用戶留在商城。為了提升訂單的支付轉(zhuǎn)化率，還可以在支付結(jié)果頁增加刮刮卡、大轉(zhuǎn)盤等抽獎(jiǎng)活動(dòng)。

部分支付廠商會(huì)直接提供支付結(jié)果的H5頁面，提供的頁面支持商城進(jìn)行定制化修改；也有部分廠商僅提供支付接口，需要商城開發(fā)支付結(jié)果頁。

結(jié)語：從本篇文章開始，將開啟訂單系統(tǒng)的系列分享，陸續(xù)更新有關(guān)訂單系統(tǒng)前后臺(tái)功能的設(shè)計(jì)思考與心得分享。由于本人才疏學(xué)淺，難免有不足之處，歡迎大家在評(píng)論區(qū)分享交流，愿你我一起成長，共同進(jìn)步！