隨著網(wǎng)購成為了人們購買東西的第一選擇，各大平臺的競爭也逐漸轉(zhuǎn)移到了提升用戶體驗感的身上。不管購買什么東西，最終都要經(jīng)歷下單這一流程。一個合理的下單流程，往往可以讓消費者體驗流暢，從而提升對平臺的好感度，進(jìn)而愿意長期的使用。

這是個非常值得研究的內(nèi)容，最近我在優(yōu)化商城下單流程的過程中，遇到了許多問題，通過不斷地探究，也對整個模塊有了更深刻的理解，希望通過總結(jié)能給大家?guī)硪恍﹩l(fā)。

下面將從目標(biāo)的提出，結(jié)合案例的解說，并最終推到出結(jié)論的方式講解。

作為漏斗模型的最終收口的購買步驟，是購買轉(zhuǎn)化的關(guān)鍵。

但往往有些產(chǎn)品由于對流程沒有系統(tǒng)深刻的理解，會有很多迷惑的操作，使得下單的流程相當(dāng)混亂。我也曾經(jīng)經(jīng)歷過類似的購物情景，經(jīng)過一輪謎之操作后，我終于下完單了，但過后會擔(dān)心剛才買的東西有沒出錯。

關(guān)于流程的優(yōu)化我們遵循的原則是：先讓流程合理了，再提高用戶每步操作的效率。

怎么理解合理，必須解決以下兩個問題，整個下單流程涉及到哪些步驟？步驟之間有什么邏輯關(guān)系？

我們需要洞悉到流程之間是如何串連，信息是如何層層遞進(jìn)并最終達(dá)成目的。因為只有每環(huán)節(jié)解決了對應(yīng)的問題，流轉(zhuǎn)到下一環(huán)節(jié)才能更省心。才能避免信息的反復(fù)確認(rèn)，影響操作的效率甚至引發(fā)出錯。

可以拆分成三個維度考量，第一是頁面布局的重點突出的提效，第二是信息展示直觀的提效；第三是交互操作簡化的提效。清晰的頁面信息傳達(dá)能讓用戶清楚并了解自己的操作結(jié)果，并快速做出決策。

一、下單流程的拆分和排序

下單流程按需要提交的信息進(jìn)行拆分，一般下單需要先確定商品（一切影響商品價格的因素的確定，如規(guī)格）；其次是訂單信息的確認(rèn)（不影響商品價格，是訂單層面信息的確認(rèn)，如收貨人，備注等），而后是訂單支付，支付方式的確認(rèn)。

最后是訂單進(jìn)度的跟蹤。這里列出的每一步前提都是上一步內(nèi)容的確定。只有這樣才能做到環(huán)環(huán)相扣，并且信息流轉(zhuǎn)。

二、第一步：確定商品信息

你是否遇到過在逛商城時看到某個服務(wù)，想購買時，進(jìn)入的詳情頁卻沒有價格，然后需要你點擊咨詢客服，打開了一個咨詢窗口

賣東西不標(biāo)價，你賣個寂寞嗎？

作為用戶的我難免會有浪費老子時間的負(fù)面情緒出來，撇開一些特殊情況說，一個詳情最重要的兩個要素是商品信息和商品價格。因為了解商品的目的是購買，購買的決策需要價格的支撐。

這是一對不可分離的組合，沒有價格的商品陳列和沒有目標(biāo)指向的價格都是沒有意義的。

那么總結(jié)一下：商品詳情必備的兩個信息：

1. 元素展示的順序

滿足了必備元素展示后，我們還要考慮元素的放置位置，首先是突出重要的元素，其次是瀏覽順序符合用戶場景。這樣才能真正做到提高下單效率，我們來看看下面這個例子:

京東的商品詳情作為購物電商商品詳情的代表來說一下，可以看到視覺瀏覽路徑是非常流暢的，明確的實覺引導(dǎo)和操作指引，先看價格，再選規(guī)格，而后點擊購買。

權(quán)大師的商品詳情雖然頁面中這重要元素都非常醒目，但它卻沒有讓用戶的決策提效，我猜測費用總計為什么放在這個位置，是希望用戶直觀看到選擇不同的服務(wù)項目對應(yīng)的收費的變化。

可是也忽略了金額作為重要的元素，當(dāng)用戶進(jìn)入詳情需要第一樣看到，導(dǎo)致瀏覽路徑有點繞圈圈。

攜程的詳情可以說是權(quán)大師的一個優(yōu)化，同樣的考慮，頭部不僅展示了重要的價格和商品信息，給到用戶購買的預(yù)期。在規(guī)格選擇后，預(yù)定按鈕旁邊還展示商品的總價。減少用戶來回查看金額的不便。

2. 規(guī)格的展示

在購物中，選擇商品或者服務(wù)的規(guī)格是一個常見的操作流程，選擇規(guī)格的目的有：

1. 確定商品的規(guī)格是否在你的要求范圍內(nèi)（比如你想買的是紅色的 iphone 12，要看一下有沒有紅色這個規(guī)格的選擇）；
2. 確定對應(yīng)規(guī)格是否有庫存；
3. 確定是否還有其他增值選項，比如購買保險，分期支付等；
4. 確認(rèn)購買數(shù)量等。

以上幾個選項，根據(jù)不同的業(yè)務(wù)會有不一樣的描述，不過可以概括兩個內(nèi)容，一是影響能不能買，二是能買的話不同規(guī)格的選擇怎么影響商品價格。

圖像化選項，比如顏色外形等規(guī)格有圖像的描述就更加直觀。如果換成文字的話，用戶的生活經(jīng)驗會影響對文字解讀的結(jié)果。

數(shù)值化選項，這樣不需要選中再查看總價來判斷金額的變動情況。很方便地不同選項的價格，方便對比然后選擇。

通常門票或者酒店的規(guī)格選擇會用上面這種方式展示，同樣的道理，把不同項目的價格列出來，讓項目之間的對比更直觀。

3. 變化可見

下圖的例子中參考身高這一項規(guī)格說一下，身高的規(guī)格本來就是有規(guī)律的，比如從矮到高，或者從高到矮。

如果我選擇紅色規(guī)格衣服，身高規(guī)格最后兩項灰掉了，這時就算我不看具體身高規(guī)格是多少，也大概知道紅色衣服身高最高的規(guī)格沒貨了。

這時，我想找一個有170cm身高的衣服，我就會不斷切換顏色規(guī)格，用視線的余光去看什么時候170cm的規(guī)格亮起來。規(guī)格的展示通過位置和內(nèi)容的支撐，能讓用戶更快速找到變化的差異。

三、第二步：確認(rèn)訂單信息

不影響商品價格，是訂單層面信息的確認(rèn)，如收貨人、備注等。

第一步說的是商品信息的確認(rèn)，這一步是訂單信息的確認(rèn)，這兩個維度怎么理解呢？

舉個例子：比如你到商場買東西，你首選是挑選好要買的商品放到購物籃里，再到結(jié)算臺支付。

這時候你是有個比較清晰購物列表在腦海中的，因為在挑選時候已經(jīng)經(jīng)過判斷，我拿了一個薄荷味的牙膏，還拿了一個潘婷的洗發(fā)水?，F(xiàn)在只需要把這些給到收銀員，她再確認(rèn)一次就可以了。

但試想如果在你的結(jié)算的時候，有個小孩把你購物籃的東西攪亂了，放了一些別的商品或者拿走了其中的一些商品，你在收銀臺這里就會變得十分混亂。我又得重新確認(rèn)一下自己要買的東西是什么。

訂單的確認(rèn)是建立在商品的確認(rèn)上的，而且步驟之間本來就存在了遞進(jìn)的關(guān)系。先確認(rèn)能不能買，再考慮能買的話收貨人等訂單的信息。在這一步，確認(rèn)的信息盡量不影響商品的單價。

淘寶這個例子的話，訂單確認(rèn)的頁面需要確認(rèn)收貨人信息、數(shù)量、配送方式、運費險等，這幾個元素都不影響商品單價的，都是訂單層面的信息確認(rèn)。這就符合前面所說的，頁面信息層層遞進(jìn)，減少相同信息反復(fù)確認(rèn)的原則。

飛豬買門票這個流程中，從詳情頁到規(guī)格選擇到訂單確認(rèn)，門票類型始終可以選擇，到最后填寫訂單了，還是可以選擇不同的票種。

這操作有點迷惑，前面都告訴我了當(dāng)前選擇了成人票，到最后還告訴我，你還可以選擇要一張學(xué)生票噢。最后確認(rèn)下單信息要把商品信息再確認(rèn)一次，這就是影響下單效率的表現(xiàn)。

四、第三步：確認(rèn)支付

支付的確認(rèn)也有兩個重要的元素，金額和支付方式的選擇。

但也有的商城也會做成下面右圖，在訂單確認(rèn)頁面把支付方式也一并選擇了。

表面上簡化了步驟，但由于不同步驟確認(rèn)的突出的信息是不一樣的，如果我選擇支付，那在支付前我必定會關(guān)注金額。所以右圖這樣就沒法讓突出重要信息，需要費勁地找一下金額是多少。

五、第四步：跟蹤訂單進(jìn)度

訂單的詳情頁里包含的信息有：商品的信息、訂單的信息、支付的信息、訂單進(jìn)度的信息。這個環(huán)節(jié)，訂單的進(jìn)度信息無疑是重點。

對信息展示優(yōu)先級排序為：訂單進(jìn)度信息 > 商品信息 > 支付信息 > 訂單信息，淘寶的訂單詳情按重要程度自上而下排列：

有的商城甚至?xí)岩恍?quán)重低的信息收起來，如訂單信息、支付信息。想查看時候可以點擊查看更多信息，這樣做的好處是能讓界面整體更清爽，降低頁面的復(fù)雜程度，那么對重點信息的抓取就更快速了。

對訂單辦理的進(jìn)度展示優(yōu)化，我認(rèn)為淘寶可以說是個經(jīng)典的案例：

• v1.0 物流只是通過文字去描述物流的信息，這時候我只知道包裹到了哪；
• v2.0 出現(xiàn)了地圖的展示方式，我能通過地圖上的貨車位置判斷包裹離我多近；
• v3.0 在地圖的基礎(chǔ)上加了預(yù)計到達(dá)日期的顯示，讓整個訂單的時間進(jìn)度更；
• v4.0 在我的頁面提供物流信息快速查看入口，方便用戶查看訂單進(jìn)度；
• v5.0 在外置的快速查看物流入口，提供了更豐富的查詢維度，比如“派送中”、“待取件”等用戶在物流派送結(jié)尾更加關(guān)心的節(jié)點篩選。

以上改動都是讓訂單進(jìn)度掌控的體感更加豐滿的過程：

以上進(jìn)度展示的關(guān)鍵點可以概括為：當(dāng)前進(jìn)度、整體流程、完成的預(yù)期。有了以上三點，用戶對于整個進(jìn)度的才能有一個清晰的把握。

六、總結(jié)

在訂單流程設(shè)計各環(huán)節(jié)中，如果我們明白每一步的操作的目的，提煉出關(guān)鍵點。那在優(yōu)化中就能更加得心應(yīng)手。如果發(fā)現(xiàn)本文有什么邏輯的錯誤，歡迎大家指正，一起進(jìn)步。

下面附上本文的知識目錄：

文章來源：人人都是產(chǎn)品經(jīng)理   作者：小圈學(xué)產(chǎn)品

藍(lán)藍(lán)設(shè)計( m.820esy.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)