對于移動端來說，最難的無非是在移動端很小的屏幕上要展示出那么多的業(yè)務信息，加上移動端的客戶碎片化閱讀的習慣和高流失率。那電商產(chǎn)品無非是移動端最難設(shè)計的一類app，有了屏幕的限制，既要保證用戶的購物體驗，又要保證業(yè)務呈現(xiàn)的完整性。那在每一個頁面設(shè)計的過程中，業(yè)務信息、視覺樣式、細節(jié)交互等等都需要講究一些技巧和思考。
移動端產(chǎn)品重在滿足碎片化用戶場景的同時還能通過更小的屏幕更快展示產(chǎn)品內(nèi)容，和用戶需求完成快速對接的過程。這是移動端產(chǎn)品設(shè)計最核心的用戶需求滿足。以天貓、京東為代表的B2C商城，以淘寶為代表的C2C平臺為例，我們從前端購物流程的觸點頁面出發(fā)，看看兩大電商如何在產(chǎn)品設(shè)計中體現(xiàn)重場景、重碎片化、重速度。
完整的產(chǎn)品涉及到的頁面數(shù)量極多，那我們今天就以選擇中意產(chǎn)品 →加入 購物車 → 去支付 → 訂單生成這個基礎(chǔ)的購物流程，看看用戶前臺購物流程具體涉及到哪些點呢？
1、注冊流程，主流注冊方式有兩種：其一、驗證手機號碼后輸入登錄密碼，其二、第三方授權(quán)后再綁定用戶手機號進行注冊，兩種注冊方式都可以采用分步式設(shè)計。
2、瀏覽商品，搜索、條件篩選、按分類篩選商品加入購物車，商品數(shù)量、商品價格、郵費、總價、商品規(guī)格。
3、下單流程，兩種情況：用戶瀏覽商品時直接下單或者購物車內(nèi)提交訂單，訂單編號、購買數(shù)量、商品郵費、訂單總價、使用優(yōu)惠券、配送方式、收貨地址選擇/填寫。
4、處理訂單狀態(tài)，未支付訂單付款、訂單收貨、評價訂單、退/換貨。
從以上的購物流程我們提煉出以下10個頁面：
1、注冊/登陸
2、首頁
3、搜索頁
4、商品分類
5、商品列表
6、商品詳情
7、購物車列表
8、填寫訂單
9、支付頁
10、訂單列表
11、訂單詳情
拋開啟動/引導頁設(shè)計風格的展示不同外，具體的內(nèi)容展示暫無太多的差異，這個我們先跳過不做詳細贅述。
一、注冊/登陸
那對于注冊登錄來說，對比兩大電商平臺京東和淘寶觸發(fā)用戶注冊登錄的條件，京東允許用戶在選購好商品加入購物車，在進入支付環(huán)節(jié)前才要求用戶登錄，同時這一操作頁有助于后臺計算用戶購物的徘徊期，可以提前調(diào)倉，保證配送速度。而淘寶則在商品加入購物車時就要求用進行登錄操作，這是為了淘寶用戶在下次登錄打開購物車時，商品會保留在購物車內(nèi)，會有一定幾率客戶繼續(xù)進行購買。
非注冊用戶也可以購買支付。對于較少網(wǎng)上購物的用戶或者一些購買頻次低的商業(yè)網(wǎng)站，很多人會因為需要注冊一個新的賬號而放棄支付。這時候如果考慮讓用戶在非注冊登錄的情況下進入支付流程，這樣的話可以有效地提高那些不想注冊的用戶的購買概率。
那對于注冊/登陸的交互方式。
二、首頁
京東和淘寶首頁展示內(nèi)容千人千面，即同一時間段，不同的人，根據(jù)以往瀏覽、搜索、購買歷史，展示或者推薦不同內(nèi)容，對于頁面版式上我們看看有哪些側(cè)重點：
三、搜索頁
兩者在搜索頁的功能點基本一致，區(qū)別在于淘寶新增“全網(wǎng)熱榜”，給商家提供熱銷運營入口，同時幫助用戶快速了解熱銷信息，提升熱銷商品的瀏覽量，促進用戶下單購買。
四、商品分類：
以B2C起家的京東就像線下的百貨商場，對于注重平臺自營和品牌的京東來說尤其注重商品分類，這和京東本身的產(chǎn)品定位是強關(guān)聯(lián)的。而淘寶更像一個大集市，一家一家攤位擺在你面前讓你隨意挑選比對，所以商品分類的入口對于淘寶來說就無需再三強調(diào)。
五、商品列表
淘寶和京東在這個頁面的處理上弱化容器，突出內(nèi)容，提高留白率，提升頁面整體的透氣性，為內(nèi)容留出更清爽、輕松的閱讀空間。區(qū)別在于京東強調(diào)價格標簽，而淘寶會注重在“天貓”和普通商家的區(qū)分。
六、商品詳情
在整個前端購物流程的頁面中，沒有任何一個頁面能夠像產(chǎn)品詳情頁一樣對提升購買率如此關(guān)鍵。從用戶的角度，希望在此頁面看到更多真實信息，做購買決策。而商戶希望能展示產(chǎn)品的優(yōu)點，促成交易，并在此基礎(chǔ)上為自己店鋪引流，帶來更多銷量。App（商城平臺）會從自身發(fā)展需要，調(diào)整產(chǎn)品形態(tài)，平衡C端（用戶）和B端（商戶）的需求。那基于以上觀點，讓我們看看兩者商品詳情頁有哪些不同？
七、購物車列表
購物車是用戶體驗與商業(yè)目標的平衡所在，一方面購物車要想用戶所想，為用戶提供便利，例如湊單免運費快速入口；另一方面購物車是用戶下單前，最后一次選擇產(chǎn)品。如此情況下，平臺需要更多地引導用戶購買產(chǎn)品，以提高銷量。
現(xiàn)在的電商對于免運費都有一定的限額要求。對比發(fā)現(xiàn)京東首先會判斷購物車中產(chǎn)品的金額是否達到了免運費的標準。如果沒有達到，就會提醒用戶去湊單。用戶點擊“湊單免運費”連接，跳轉(zhuǎn)到湊單頁面。在湊單頁面底部，京東會告訴用戶還差多少錢。為了方便用戶選擇，產(chǎn)品列表是按照價格區(qū)間來展示的。值得關(guān)注的是，這里的產(chǎn)品并不是隨便推薦的，而是根據(jù)用戶已選擇的產(chǎn)品來推薦的。（這塊的邏輯有點深奧，感興趣的朋友可以研究一下），對于淘寶來說，除平臺活動外，對于商品的免運費商家各有不同的安排。
為了在這一刻讓用戶盡快下單，京東和淘寶都再次強調(diào)領(lǐng)取優(yōu)惠券的設(shè)計，與產(chǎn)品介紹頁的領(lǐng)取不同，這里不僅列出了相關(guān)的優(yōu)惠券，還標識了所選產(chǎn)品是否匹配。如果用戶選擇的產(chǎn)品金額不夠，又會提醒用戶去湊單。
八、填寫訂單
填寫訂單：兩個平臺有不同的填寫訂單的流程，根據(jù)平臺的突出點（比如：京東根據(jù)地址判斷是否支持貨到付款，自營可以評估送達時間）、在這里結(jié)算價格時可以利用一些：優(yōu)惠券、京豆、禮品卡、津貼、店鋪優(yōu)惠等的營銷活動促進客戶下單。
九、支付頁
淘寶和支付寶綁定關(guān)聯(lián)為買家提供安全方便，簡單快捷的購買和支付體驗，實現(xiàn)了兩個平臺的客戶轉(zhuǎn)化，提高了成交支付轉(zhuǎn)化率。京東白條是京東金融非常重要的一個產(chǎn)品，因此京東會著力推薦用戶使用白條支付，所以不僅在明顯的位置提供入口，也標注了使用白條的相關(guān)優(yōu)惠。但是對于全民微信的快速溝通時代，微信支付還是選擇最多、最快捷的支付方式之一。
十、訂單列表
從交易開始到結(jié)束時一次完整交易的生命周期，簡單的一條數(shù)據(jù)更像是消費者與平臺之間的一個契約，而契約上的信息：發(fā)票（增票還是普票）、運費、時效、預約、優(yōu)惠等等都是為了給用戶提供售后服務的安全和保障。
十一、訂單詳情
訂單詳情頁是用戶完成購買動作之后顯示的信息頁面，用來審核訂單狀態(tài)，查看訂單信息，擔任著非常重要的信息展示和售后服務。起著展示產(chǎn)品信息，提升服務體驗度，提高產(chǎn)品轉(zhuǎn)化率等多方面多維度的作用。
縱觀京東、淘寶的購物流程，其背后的購物邏輯絕不僅僅適用于電商平臺，其實對于任何涉及在線購買與支付的平臺，都有很強的啟示作用。不同商業(yè)模式的購物平臺，為用戶創(chuàng)造的購物體驗也各有不同，以上是我們基于日常對B2C和C2C兩類電商產(chǎn)品的一些細節(jié)分析，如何通過購物流程，將產(chǎn)品、運營、社交等因素有效地融合在一起，同時將企業(yè)核心優(yōu)勢體現(xiàn)到極致，我想這是每一個產(chǎn)品設(shè)計人員需要思考的問題。希望借此機會與由此設(shè)計經(jīng)驗的同仁進行跟多的交流，以期完善此文，感謝！
Powered by Froala Editor
大牛，別默默的看了，快登錄幫我點評一下吧！:)
登錄 立即注冊