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

一、訂單確認(rèn)

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

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

1.1 商品信息與金額信息

商品信息包含：圖片、標(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ì)齊。方便用戶能夠從視覺(jué)上直觀的對(duì)比金額鸥昏。

1.2 地址信息

用戶需要為訂單選擇收貨地址塞俱，為了減少用戶的操作，系統(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è)收貨地址，則無(wú)需用戶進(jìn)行選擇缔杉，系統(tǒng)直接讀取收貨地址锤躁。

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

對(duì)于B2B商城來(lái)說(shuō)梧乘，客戶常常會(huì)有訂單代發(fā)的需求澎迎，所以需要為客戶提供代發(fā)服務(wù)庐杨。客戶在下單頁(yè)面需要添加代發(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è)地址信息，則無(wú)需用戶選擇树绩，直接讀取地址信息萨脑。

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

1.3 發(fā)票

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

發(fā)票信息的管理通常在發(fā)票頁(yè)面進(jìn)行添加馍悟、編輯和刪除畔濒，如果用戶未添加發(fā)票信息，下單頁(yè)面需要支持用戶添加發(fā)票赋朦。若用戶已添加過(guò)發(fā)票信息篓冲，則下單頁(yè)面不支持對(duì)發(fā)票信息進(jìn)行編輯和刪除李破，只能選擇發(fā)票。

1.4 留言

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

1.5 優(yōu)惠信息

01 優(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)先推薦過(guò)期時(shí)間最早的優(yōu)惠券券。

3撩轰、若減免金額與過(guò)期時(shí)間都相同，則按照券類型的不同進(jìn)行分別推薦昧廷，推薦順序依次為：店鋪單品券>店鋪品類券>平臺(tái)品類券>店鋪通用券>平臺(tái)通用券堪嫂。

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

02 運(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)推薦過(guò)期時(shí)間最早的運(yùn)費(fèi)券培己。與商品優(yōu)惠券的使用相同，用戶也可以根據(jù)自己的需要手動(dòng)選擇不同的運(yùn)費(fèi)券或不使用運(yùn)費(fèi)券胚泌。

03 積分抵扣

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

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

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

二搪花、訂單支付

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

2.1 支付方式

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

2.2 支付頁(yè)設(shè)計(jì)

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

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

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

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