編輯導讀：電商后臺系統中，訂單中心是一個樞紐部分。它涵蓋了用戶信息以及訂單流程中的各項信息，所以訂單中心的設計格外重要。本文作者從訂單中心的用戶使用場景出發，對訂單中心的設計迭代進行了分析拆解，并對過程中遇到的問題進行了總結，供大家一同參考學習。

訂單中心是交易流程中用戶很常見的一個模塊，尤其是在電商這種完整交易周期較長的領域（從用戶瀏覽下單開始，包含支付結算、商品履約、售后復購等相關環節）。

對用戶來說，為什么需要訂單中心這樣一個產品模塊呢？

我們知道電商就是把線下交易挪到了線上：在線下用戶去超市購物時， 先進入門店，挑選商品放進購物車，然后去柜臺結賬，支付完成后獲得一張小票，上面包含了交易時間、支付金額、商品清單等信息，方便用戶進行開發票、售后退換等操作，最后拿東西走人，交易完成。

回到電商流程，訂單中心就是線下小票的延伸，那么模塊最初的定位就很明晰了：查看訂單信息，提供發票及售后退換的入口。

除此之外，線上訂單還有一個核心功能：查看物流信息。因為相比線下購物用戶自行去商店帶貨回家，網購的商品履約是第三方快遞公司完成的，用戶天然會關心自己下單的商品現在到哪了，預計什么時候能夠送達，如何聯系快遞員等。

所以小結一下，訂單中心的定位：必要的信息查詢（商品信息、訂單信息、物流信息）+必要的訂單操作（支付、取消、開票、售后）

我們去分析各個電商app的訂單中心時，你會發現訂單相關頁面的設計都是圍繞著兩大核心定位來拆解和迭代的。

一、訂單列表頁

滿足用戶訴求：快速定位到目標訂單，高頻信息和操作從詳情頁前置到列表頁。

整體訂單列表頁可以分為兩大區塊：頂部導航功能區、訂單卡片區。

一進入訂單列表頁，用戶的視覺焦點在訂單卡片的起點區域，產品設計上需要引導和劃分用戶訴求。

如果用戶是帶著目的來的，可能是想看看待收貨的訂單到哪了，或者想找到曾經買過的洗衣機想要申請售后；此時用戶的慣性操作是：先下滑幾頁，看看能不能快速翻到想要定位的訂單，如果找不到，就通過導航區域的分類和篩選功能來快速定位。

如果用戶只是漫無目的隨便逛逛，可能會下滑翻訂單卡片很多屏，隨意點擊進入訂單詳情頁，再返回。

我們在進行產品設計時，對訂單列表頁的迭代要求是優先滿足目的性用戶訴求，盡量提升效率，減少卡頓，符合用戶習慣，進而給用戶帶來流暢、高效的用戶體驗。

所以在對列表頁進行改版迭代時，主要針對兩個方向進行：

1. 導航功能區提升訂單的查找效率

包括對分類的改造，搜索和篩選的優化等。

舉幾個例子：

1. 不同的電商分類tab的內容不盡相同，但我相信差異的核心邏輯在于不同平臺的用戶對不同階段的訂單狀態有不同的關注程度；待付款和待收貨的訂單用戶會很關心，但拼多多會更關心“待分享”，而淘寶更關心“待收貨”。
2. 搜索入口的變化，一開始在電商平臺里搜索只是一個按鈕，并不顯眼；后來隨著用戶存量訂單越來越多，用戶查找歷史訂單的訴求越來越明顯，所以訂單搜索的入口也隨之強化。

2. 訂單卡片需要兼顧重點信息前置和瀏覽效率

之所以要把訂單信息分割成訂單列表和訂單詳情頁兩塊，是為了解決日益增加的訂單信息和訂單數量與高效訂單查詢相互沖突的矛盾。

什么意思呢？舉例來說，京東的訂單卡片是固定高度的，所以手機一屏幕能看到的訂單個數也是固定的，這樣能確保用戶往下翻找歷史訂單的效率；但淘寶的訂單卡片高度卻沒有限制，如果一個訂單sku數量較多，一條訂單可能會很長，對淘寶來講，它就更看重訂單商品信息在列表的前置。

具體去對比不同電商app在訂單列表呈現的信息元素，會發現不同的平臺又不同的價值趨向，也能反映出平臺用戶的偏好特點。

二、訂單詳情頁

由于訂單信息較為豐富，無法直接在訂單列表平鋪展示（訂單信息在列表直接平鋪會導致訂單查找效率大為下降），需要用獨立的頁面來承接訂單的詳細信息及相關操作和入口。

由于詳情頁是訂單信息最后的承載，需要包含訂單相關的一切信息，所以在設計上需要考慮兩點：

1. 用戶越關心的信息，越突出；
2. 信息覆蓋要全面、直觀，最好能一眼感知到。

基于這兩點設計原則，在對詳情頁進行改版迭代時需要著重考慮動線設計。

用戶的瀏覽習慣是從上往下的瀏覽動線+固定底部區域的操作按鈕。

操作按鈕因為路徑固定，用戶容易形成肌肉記憶，所以需要盡量長期固定不變，少做調整；同時考慮到新用戶，需要把用戶高頻使用的、對用戶更重要的（影響訂單的關鍵狀態流轉）、希望用戶點擊的（比如幫幫助復購或者建設內容等）放在一級入口，優先級沒有那么高的按鈕則可以折疊。

而動線設計則相對復雜一下，需要考慮的因素更多。

1. 基礎信息框架設計

首先是功能樓層的框架調整，對訂單詳情頁來說，需要承載：

1. 商品信息（包含商品圖片、標題、規則、金額、所屬店鋪等）
2. 訂單信息（包含訂單號、交易時間、支付及配送信息等）
3. 收件人信息（包含收件人的姓名、地址、聯系方式以及物流基本信息）

從結構上同一信息主體的元素相聚展示，會更符合的用戶潛意識邏輯。

比如你在訂單里看物流進度的時候，會很自然需要看收貨地址和收件人是否正確，如果把這些信息分散開來，用戶需要反復滑動才能看到關聯信息；這對用戶來說不方便，對分公司來講也會增加退換貨的成本（用戶缺少對收貨地址的確認導致退貨率上升）。

2. 功能樓層動線設計

其次是樓層的排列動線要符合用戶的瀏覽習慣

最完美的狀態是針對不同的人群在不同的訂單狀態下有不同的信息優先級展示，永遠能把用戶最關心的信息放在最前面，使得首屏的點擊效用最高。

現實距離理想還是有很大差距的，人群的劃分與識別，樓層的動態甚至是智能調序，對系統架構、數據和算法能力要求都很高。

所以從產品角度來說，可以在設計時盡量照顧大部分人群和新用戶，以保證整體的ROI最大化。

在設計時數據驅動是非常必要的，你可以拿到用戶訪問訂單中心時的狀態分布，不同功能樓層在不同狀態下的點擊情況；再結合典型用戶深度訪談和新用戶使用觀察，就能感知到不同的用戶在不同的訂單狀態下關心什么，如何調整順序和優先級，使得在符合用戶使用習慣的前提下，盡量提升屏幕的點擊效用，讓用戶操作感知更便捷和流暢。

3. 平衡用戶體驗和業務訴求

最后是用戶體驗和業務目標的平衡。

訂單詳情頁作為用戶下單之后的場景，此時已經鎖定了用戶的購買意向，用戶大多已付完款；此時對來訪的用戶進行合理的營銷刺激，既不會影響訂單轉化率，也能帶來更多的增量，提升復購和營收，

就像線下超市把剛需商品放在深處一樣，用戶為了買到剛需一路上就看到了各種高毛利低動效商品，增加了他們被購買的概率；訂單詳情頁也有類似的設計，用戶來訂單查看物流進度，此時設計時在沿途增加一些和訂單有關聯的廣告位、資源位，能給新業務或者高毛利業務帶來不錯的曝光。

但這里需要做好二者的平衡，如果資源位太多、太靠前、影響用戶操作，用戶能顯著感知體驗的下降，這不僅會導致用戶關鍵操作的打斷，也會影響產品在用戶心中的口碑，長期來看收益遠小于損失，得不償失。

因此，這部分的設計核心是「場景化」，好的場景化設計能在用戶完成核心動作后很好地引導和承載住用戶流量。

舉個例子，用戶購買了家電之后，一段時間出了故障，一般情況下用戶會先去查看下說明書看看常見故障，沒法解決就會聯系廠家客服，看看怎么處理。

而現實的情況是，用戶經常找不到說明書，如果包裝掉了又不是大品牌，也不知道怎么聯系客服；此時就會習慣去訂單，從訂單跳轉商詳頁看看有沒有相關信息。

如果此時產品設計在訂單詳情頁放置該商品的電子說明書和常見問題的解答，點進去有商家客服和相關配件銷售，是不是能很好地解決問題？ 即使這個入口里有很多相關商品的推薦，用戶也不會覺得是廣告，不會覺得煩，反而覺得很貼心，剛好是自己需要的商品；對平臺和商家來說，即提升了口碑，也新增了銷售。

三、物流信息頁等訂單二級頁面

以訂單包裹為柱體呈現相關信息，主要包括包裹的重要流轉節點，物流的軌跡，倉庫、配送站、快遞員等站點信息。

其實類似物流信息頁這樣與訂單強關聯的二級頁面還有很多，例如售后申請、取消和修改訂單、發票服務等，鑒于篇幅本次就不作展開了。

最后

小結一下，在做模塊產品設計的時候，可能一開始容易陷入細節，糾結于圖標、按鈕和樓層這種緯度；但細節是為框架服務的，框架是為定位和目標服務的，要試著從一個更高的視角去做產品迭代，慢慢的自己的產品能力也能隨之成長和沉淀。

歡迎一塊溝通交流呀～

作者：陳才源，京東產品管培生，公眾號：陳才源

本文由 @陳才源 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。