輕量級(jí)品牌電商的設(shè)計(jì)模式分析方法「c2m模式」

提及電商設(shè)計(jì)，我們首先想到的是淘寶、京東這類具有很大規(guī)模的知名電商。但實(shí)際工作中，許多設(shè)計(jì)師更容易接觸到的是輕量級(jí)的電商項(xiàng)目，尤其是startup階段的品牌電商。今天簡要談?wù)勥@類輕量級(jí)品牌電商的設(shè)計(jì)模式。

一、品牌電商的定義

電商平臺(tái)按照規(guī)模可以大致分為綜合電商、垂直電商與品牌電商。綜合電商是指淘寶、京東這類面向大眾、銷售各種商品的平臺(tái)。垂直電商則專注于一塊細(xì)分市場，如：唯品會(huì)專門向年輕女性用戶售賣服飾、美妝。品牌電商則是商家自主運(yùn)營的官網(wǎng)，只銷售這一個(gè)品牌的產(chǎn)品。

它們的劃分通常并不涇渭分明，例如：當(dāng)當(dāng)是以網(wǎng)絡(luò)書城（垂直電商）的身份發(fā)家，現(xiàn)在的規(guī)模卻已經(jīng)達(dá)到了綜合電商的標(biāo)準(zhǔn)了。而小米商城作為一個(gè)獨(dú)立的品牌電商，隨著商品品類的增加，在設(shè)計(jì)模式上也越來越接近垂直電商。

電商類型與案例

一個(gè)典型的品牌電商，通常會(huì)具有以下特點(diǎn)：

瞄準(zhǔn)細(xì)分市場。有非常精準(zhǔn)的目標(biāo)用戶群體，以及非常具體的用戶場景。商品數(shù)量少。因而每個(gè)商品的詳情頁都需要精心設(shè)計(jì)，而不像大型電商那樣套用模板。商品類目簡單。因此信息架構(gòu)可以更加扁平化。

可以說，品牌電商的結(jié)構(gòu)雖然不像綜合電商那樣復(fù)雜，但對(duì)于場景化的要求更高。在信息架構(gòu)與流程設(shè)計(jì)上，品牌電商的設(shè)計(jì)師不能盲目借鑒淘寶、京東等主流電商的方案。而要通過分析，探索適合品牌電商的設(shè)計(jì)模式。

二、品牌電商的用戶場景分析

下面以“小度商城”為例，看看品牌電商如何進(jìn)行用戶場景分析，并用分析結(jié)果指導(dǎo)流程設(shè)計(jì)。

小度商城于2018年6月上線，目前還處于起步階段，主要是售賣百度自主研發(fā)的智能音箱產(chǎn)品——小度音箱，以及其他智能硬件產(chǎn)品和配件。小度商城是一個(gè)非常典型的品牌電商——有清晰的產(chǎn)品定位（小型智能設(shè)備商城）、特定的目標(biāo)用戶（小度音箱的受眾）、輕量級(jí)的信息規(guī)模（少而精的商品）。

小度商城web版（截屏）

小度商城的目標(biāo)用戶基本上可以等同為其主打商品“小度音箱”的用戶。

用戶畫像：阿智，男，28歲，互聯(lián)網(wǎng)公司運(yùn)營職位。

對(duì)生活質(zhì)量有一定要求的年輕人，思想開放、新潮，相信“科技改變生活”。工作的年頭不長，經(jīng)濟(jì)上并不富裕，對(duì)產(chǎn)品價(jià)格敏感。網(wǎng)購經(jīng)驗(yàn)豐富，對(duì)常見的購物流程操作熟練。剛剛晉升為娃爸，希望小度音箱能陪孩子說話，讓帶娃更輕松。由于看過《最強(qiáng)大腦》綜藝節(jié)目，對(duì)“小度機(jī)器人”的形象有印象和好感。

用戶場景：

由于小度商城正處于起步階段，大部分流量來自于運(yùn)營活動(dòng)（如公眾號(hào)）或搜索引擎廣告（如在百度搜索“智能音箱”）的引流，用戶通常是直接進(jìn)入小度音箱的商品詳情頁（而非商城首頁）。

基于這種特殊情況，一套完整的用戶場景可以如下描述：

進(jìn)入：阿智最近聽到一些朋友討論智能音箱的話題，自己也想試一試，但不知道買一個(gè)音箱劃不劃算。他用手機(jī)百度了“智能音箱”，想了解一下，搜索的第一條結(jié)果就是“小度智能音箱”，阿智看到高亮的“89元嘗鮮價(jià)”，覺得這個(gè)價(jià)格非常有誘惑力，于是點(diǎn)擊查看。查看：阿智進(jìn)入了“小度智能音箱”詳情頁，作為理性的消費(fèi)者，他瀏覽了整個(gè)商品說明，但由于不想浪費(fèi)流量沒有看視頻。加入購物車：阿智點(diǎn)擊了頁面頂部的“立即購買”，看到了選擇顏色彈框，默認(rèn)的“白色”已經(jīng)被選中，阿智點(diǎn)擊了“加入購物車”按鈕，確認(rèn)購買商品。彈框中的文案提示添加成功，阿智點(diǎn)擊了“去購物車”按鈕，直接進(jìn)入購物車頁面。登錄：阿智點(diǎn)擊“去下單”，發(fā)現(xiàn)自己還沒有登錄，好在自己有百度賬號(hào)，阿智很快就登錄成功了。下單：阿智按照以往的網(wǎng)購經(jīng)驗(yàn)，填寫了收獲地址、確認(rèn)了訂單明細(xì)，并用百度錢包成功支付。二次訪問：過了幾天，阿智想查看一下訂單有沒有發(fā)貨。他來到小度商城想找到已下單的訂單信息，瀏覽頁面后，阿智發(fā)現(xiàn)只有頁面左上角的抽屜式導(dǎo)航圖標(biāo)還沒有點(diǎn)過，他點(diǎn)擊圖標(biāo)，如愿發(fā)現(xiàn)了“我的訂單”入口，并進(jìn)去查看了發(fā)貨情況。

在小度商城用戶場景中，有兩個(gè)特征明顯區(qū)別于更加主流的綜合電商：

用戶的購物流程是相對(duì)“單線程”的，從進(jìn)入商品詳情頁開始，用戶的行為就指向“獲取信息、完成購買”，而非“隨意閑逛”。且大概率的，一次僅購買一件商品。手機(jī)端的信息載體是M站而非原生的app，這導(dǎo)致頁面的穩(wěn)定性、可控性稍差，在交互設(shè)計(jì)中必須要考慮得更周全。

分析用戶場景以及用戶購物流程中的特點(diǎn)，對(duì)于品牌電商來說是非常必要的。例如：apple的官網(wǎng)，不少用戶在訪問網(wǎng)站前，就已經(jīng)決定了要買“銀色”、“64GB”的最新款iphone，那么確認(rèn)不干擾和打斷用戶的選購流程就是非常關(guān)鍵的。

反之，在時(shí)尚服裝品牌的商城中，用戶很可能需要在幾款相似的商品之間猶豫，那么，則需要針對(duì)這樣的情況進(jìn)行設(shè)計(jì)。

三、根據(jù)用戶場景進(jìn)行流程優(yōu)化

針對(duì)從用戶場景中提煉出的兩個(gè)特征，我對(duì)小度商城的下單流程進(jìn)行了走查，提煉出了兩個(gè)值得關(guān)注的問題：

1. 對(duì)配件產(chǎn)品的引流不足

小度商城當(dāng)前的“加入購物車流程”如圖，可以看出：這個(gè)流程整體而言是簡介、流暢的。不過，“單線程”的購買流程一方面能最大限制地防止跳出，另一方面也導(dǎo)致用戶不再留意商城中的其他產(chǎn)品。

小度商城-加入購物車流程

隨著業(yè)務(wù)發(fā)展，商城可能引入更多的智能配件（智能開關(guān)、智能插線板），它們能夠帶給用戶更完整的智能家居體驗(yàn)。在這種前提下，我認(rèn)為不妨在智能音箱的購買路徑中，適度地插入智能配件產(chǎn)品的引流廣告。

我認(rèn)為一個(gè)好的引流位置是“加入購物車的成功反饋”環(huán)節(jié)（上圖中的第三個(gè)界面）。此時(shí)，用戶已經(jīng)將音箱產(chǎn)品加入購物車了，對(duì)于主打的音箱產(chǎn)品已經(jīng)有了比較穩(wěn)定的購買意愿，此時(shí)插入“智能插座”等配件產(chǎn)品的引流廣告，不會(huì)生硬地打斷用戶的購買流程。同時(shí)能夠引起部分用戶的興趣，增加配件的曝光度和銷售額。

加入購物車反饋頁優(yōu)化方案

2. 對(duì)于M站可能發(fā)生的“異常流程”關(guān)注不足

小型品牌電商初創(chuàng)之時(shí)，通常不會(huì)開發(fā)原生app，而是用M站支持用戶在手機(jī)上的訪問。然而，在M站的情形下，一些意料之外的情況更容易發(fā)生。

M站的穩(wěn)定性與原生app相比稍差，更容易出現(xiàn)下單及支付流程中意外跳出的情況。

一個(gè)典型的案例是在支付環(huán)節(jié)后退時(shí)（用戶可能是想重復(fù)確認(rèn)信息、或誤操作右滑），用戶的期待是回到訂單確認(rèn)頁或待支付訂單頁，實(shí)際的結(jié)果卻是回到購物車頁面。此時(shí)用戶能看到購物車內(nèi)的商品數(shù)減少，卻不知道到哪里繼續(xù)支付。

異常流程：支付環(huán)節(jié)跳出

最佳的解決方案當(dāng)然是用戶從“支付”頁面“后退”時(shí)，能直接跳轉(zhuǎn)至“待支付訂單”。但在M站的情形下，前端對(duì)用戶“右滑后退”或“點(diǎn)擊瀏覽器后退鍵”的控制力不足。

作為一個(gè)替代的方案，我認(rèn)為可以在退回并刷新“購物車”時(shí)，判斷是否有未支付的訂單，如有，給出簡單的文案提示，并引導(dǎo)用戶跳轉(zhuǎn)至待支付訂單列表。

購物車添加引導(dǎo)文案

四、品牌電商的信息架構(gòu)

不同類型電商的信息架構(gòu)，也會(huì)有比較大的差異，這一點(diǎn)尤其體現(xiàn)在手機(jī)屏幕上（app或M站）。

手機(jī)端電商的導(dǎo)航方式主要有兩種：底部tab導(dǎo)航和頂部的抽屜式導(dǎo)航。

底部tab導(dǎo)航與抽屜式導(dǎo)航

一般來說，商品類目越復(fù)雜、用戶重復(fù)訪問的頻率越高，我們越可以考慮采用底部tab式導(dǎo)航。

而輕量級(jí)的品牌電商，通常將導(dǎo)航設(shè)置在頁面頂部，主流的設(shè)計(jì)模式為：

居中的品牌logo：返回首頁；左側(cè)抽屜式導(dǎo)航：商品類目導(dǎo)航；右側(cè)購物袋icon：購物車、訂單、個(gè)人中心等。

apple官網(wǎng)的導(dǎo)航模式

值得一提的是：apple將“我的訂單”與“個(gè)人中心”收在了購物袋圖標(biāo)之內(nèi)。這種方式其實(shí)很可能是違背用戶直覺與心理預(yù)期的，但在輕量級(jí)商城中，購物袋icon更容易被注意和點(diǎn)擊。

同時(shí)，在用戶進(jìn)行購買行為時(shí)，已經(jīng)探索過了購物袋區(qū)域，后續(xù)登錄平臺(tái)查看個(gè)人中心或訂單詳情時(shí)，也比較容易找到。

將“我的訂單”與“個(gè)人中心”收在抽屜式導(dǎo)航中也是一種可行的方案（這兩種模式各有利弊，總體而言都行得通）。但在視覺樣式上需要與其它信息作出區(qū)分。

下圖的左邊為小度商城的抽屜式導(dǎo)航，其中“我的訂單”與“個(gè)人中心”的信息層級(jí)應(yīng)當(dāng)高于其它內(nèi)容，但目前的視覺樣式卻十分平淡，我認(rèn)為這是不利于用戶體驗(yàn)的。在優(yōu)化方案上，我建議用實(shí)心icon進(jìn)行視覺上的強(qiáng)化（登陸后，個(gè)人中心的icon可以替換為用戶的百度賬戶頭像）。

小度商城抽屜式導(dǎo)航（修改前、修改后）

小結(jié)

以上，我們討論了輕量級(jí)品牌電商區(qū)別于大型商城的特征、它的用戶場景分析方法、購物流程設(shè)計(jì)以及信息架構(gòu)模式。可以說，“輕量級(jí)”不意味著“簡單”，設(shè)計(jì)好一個(gè)輕量級(jí)的商城依然需要大量的思考、規(guī)范的設(shè)計(jì)流程和不懈的努力。

本文由 @ leadwhite 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議