編輯導(dǎo)讀：相比于淘寶京東這樣的“百貨大廈”，電商賽道還存在著一種小而美的電商形態(tài)，叫做B2C垂直電商。只專注售賣一個或者多個相關(guān)品類的電商，關(guān)注一個共同屬性的用戶群體。本文作者對垂直電商的首頁設(shè)計進(jìn)行了分析，希望對你有幫助。

一、B2C垂直電商細(xì)分

淘寶的商品品類（SKU）是以數(shù)十億計的，天貓和京東也應(yīng)該在數(shù)千萬的級別。海量的商品品類、魚目混雜的商家以及參差不齊的商品為消費者的購物帶來了極大的選購時間成本。消費者在這樣的購物環(huán)境中找到適合自己的商品有時并不比大海撈針容易多少，而其中假冒偽劣商品的大量存在更是增加了購物的難度。

相對于B2C綜合商城的廣而博，還有一種小而美電商形態(tài)叫做B2C垂直電商，就是只專注售賣一個或者多個相關(guān)品類的電商。鑒定一個電商是否垂直，就是能否找到一個共同屬性的用戶群體。比如女性，文藝青年等。

垂直電商的價值就在于其站在獨立第三方的角度，從海量的商品中為消費者做了一次精選，平臺需要為這些商品做信用背書，所以這些商品基產(chǎn)品質(zhì)量也相對有保證，能通過口碑逐漸地在消費者中間建立信任感。

1）垂直類電商優(yōu)點

面對的客戶群體有一致的屬性。有了這個大的前提，那么很容易知道客戶在哪里，他們喜歡和關(guān)注什么，可以有針對性的精準(zhǔn)營銷。而且客戶群體的集中和專一，會讓其更有歸屬感。

2）垂直類電商缺點

商品品類單一，用戶重復(fù)購買率低。就是用戶想買其他商品你這里沒有的賣，那么用戶可能選擇綜合類B2C電商平臺。所以垂直類電商在發(fā)展到一定程度后，業(yè)績增長會遇到天花板，于是就開始擴充品類，走大而全的道路。又會遭到大的B2C商城的競爭。

不管是從商品還是價格的角度上來說，淘寶、天貓以及京東這些綜合類的B2C電商，都存在大量的商品可以替代垂直類電商。

二、常見的垂直電商App

B2C垂直里面，一些應(yīng)用的商品品類比較多。比如母嬰電商這個大的垂直分類，里面有服飾、鞋子、奶粉等多個小的品類。這些應(yīng)用相當(dāng)于垂直電商里的綜合類。

因為品類比較多，所以頁面承載的信息密度比較高。所以頁面設(shè)計采用類似綜合B2C商城的設(shè)計。

△? 聚美優(yōu)品首頁

垂直電商里還有一些垂直細(xì)分類。例如各種鞋子和襪子、奢侈品類、食品類、箱包、水果類、鉆戒和珠寶類、酒、養(yǎng)生保健品類、禮品玩具類、鮮花商城、居家類、汽車用品、藥店等。

這些細(xì)分類隨著時間有的逐漸消逝，如賣鞋子的樂淘。而留下來各種時尚潮品的綜合推薦類、家居類居多。這些垂直細(xì)分的商品品類不是很多，所以頁面設(shè)計大多采用大的留白簡約型設(shè)計。本節(jié)文章重點去分析推薦一些垂直細(xì)分類的電商。

三、垂直電商App的首頁結(jié)構(gòu)

垂直電商的用戶，可能購物的目的性不是很明確，一般都會以逛為主，通過逛發(fā)現(xiàn)自己喜歡的一些商品完成購買行為。所以首頁會放置各種形式的商品推薦，推薦形式一般有：

• 品類或者品牌中熱門單品的推薦
• 以專題形式的某一類商品的集中推薦，以商品推薦為主
• 如果有達(dá)人推薦的子頻道，會在首頁有露出，通過一些意見領(lǐng)袖的推薦
• 知識庫，我的理解還是一種專題的合集，比如什么場合適合穿什么衣服，什么季節(jié)適合吃什么，如何選擇合適的鍋。當(dāng)然這些知識里面少不了各種商品的推薦
• 其他一些各種小頻道欄目的露出

因為綜合類電商平臺模塊多，每個模塊都可能從屬某個部門，需要平衡各種部門事業(yè)部的利益。設(shè)計師設(shè)計的頁面體現(xiàn)的是各種協(xié)調(diào)的意志。而垂直類電商的模塊相比就少的多，設(shè)計師有更多自由去考慮各種模塊的設(shè)計問題。知道了垂直類電商的首頁的內(nèi)容組成，我們開始看垂直類電商的具體模塊組成。

模塊1：標(biāo)題欄

每個應(yīng)用都有一個標(biāo)題欄，這成了App的標(biāo)準(zhǔn)設(shè)計了。標(biāo)題欄上一般會有三個重要的元素組成：logo圖形或者文字、搜索頁的入口、購物車的圖標(biāo)。

1）品牌logo

標(biāo)題欄放置的Logo文字會進(jìn)行字體設(shè)計，垂直類電商一般會非常重視品牌的露出，所以這里不會使用系統(tǒng)默認(rèn)的字體，而是貼圖使用設(shè)計好的Logo文字或者Logo圖形。

△ ?造作標(biāo)題欄使用了logo圖形，其他使用了字體設(shè)計的logo

2）搜索入口

大多數(shù)垂直類電商，更希望于用戶瀏覽推薦內(nèi)容，購買推薦活動商品。而不是直接通過搜索去找到相應(yīng)商品，去完成購買行為。所以垂直類電商App會有意識的弱化商品搜索。不同于B2C綜合類電商導(dǎo)航欄上醒目的搜索欄，美食電商Enjoy和興趣導(dǎo)購life首頁，直接在導(dǎo)航欄右側(cè)放置了一個搜索圖標(biāo)。

△ ?美食電商Enjoy和興趣導(dǎo)購life首頁

如果你的商品品類并不是很多，那么用戶通過關(guān)鍵詞搜索很難搜到東西。所以一些應(yīng)用干脆把搜索和商品分類頁進(jìn)行結(jié)合設(shè)計。例如造作點擊搜索，進(jìn)入的搜索頁就是商品的分類頁。

△ ?造作的首頁和分類頁

有的垂直類電商品類并不多，所以干脆直接去掉了搜索入口。在2016年的唯品會的App甚至極端的去掉了搜索功能，希望用戶在頁面可以停留更長的時間。這種想法顯然有點一廂情愿，因為唯品會的品類可不少，這樣的設(shè)計遭到了很多用戶的反對。在最新版本的唯品會又悄悄的把搜索功能加了回來。所以留不留搜索入口還是要看你的品類是否足夠豐富。

模塊2：分類模塊

由于垂直電商的品類不是那么多。子頻道也有限，所以不需要和綜合類電商一樣，用圖標(biāo)的形式作為模塊快速入口，而是直接設(shè)計為Tab標(biāo)簽欄的設(shè)計形式，放置在標(biāo)題欄下面，方便用戶快速瀏覽切換。

1）底部標(biāo)簽欄

Tab標(biāo)簽欄如果類別比較多的時候采用橫滑的設(shè)計形式。如果應(yīng)用的頻道比較少，例如造作應(yīng)用，甚至可以直接把標(biāo)簽欄設(shè)計在底部，相當(dāng)于整個底部標(biāo)簽欄的作用，當(dāng)然底部標(biāo)簽欄重要的“我的”模塊，入口放置在頂部標(biāo)題欄上。

△ ?造作首頁底部標(biāo)簽欄

2）滑動隱藏標(biāo)簽欄

一些垂直類電商的首頁設(shè)計形式單一，完全由banner圖構(gòu)成。用戶向上滑動頁面，標(biāo)題欄會自動隱藏，讓用戶有更大的頁面顯示面積。例如Life應(yīng)用，至于向上滑動多少像素開始隱藏標(biāo)題欄，你需要給程序員定義出高度。

△ ?Life 滑動隱藏標(biāo)簽欄

良倉的首頁并沒有采用這種滑動隱藏標(biāo)題欄的設(shè)計，我猜測因為良倉的底部欄目太多，沒有給購物車留下一個單獨的位置。所以可能為了強調(diào)購物車的全局顯示，所以固定欄頂部標(biāo)簽欄。

當(dāng)然我認(rèn)為這種想法可能也說不通，因為首頁是不太可能促成交易行為，更多是引流的作用。我認(rèn)為良倉底部的分享是一個很雞肋的功能，本質(zhì)就是一些美圖商品推薦而已，如果把這個頻道降級放進(jìn)其他位置，把這個位置留給購物車。我估計設(shè)計師就可以舒心的使用隱藏標(biāo)題欄設(shè)計。

△ ?良倉固定的標(biāo)簽欄

模塊3：橫幅廣告

由于垂直類電商的信息密度低，所以有足夠大的空間去放置Banner。Banner的常見比例有16:9和1:1兩種。也就是750*422和750*750。一般Banner圖片設(shè)計還是以750寬度的iphone6/7為基準(zhǔn)。至于更大尺寸的iphone6/7plus還是使用這個圖片，因為從節(jié)省帶寬的角度完全沒必要那么大的尺寸。2X的Banner圖給3X用也是足夠的。

那么圖片的比例什么時候使用16:9，什么時候使用1:1了？還是從內(nèi)容的角度進(jìn)行分析。

1）16:9的Banner圖

如果你的應(yīng)用展示的Banner圖是類似專題性質(zhì)的。圖片只是一個參考作用，用戶是不能從大圖看到更多商品信息，需要更多文字說明來輔助閱讀，圖片比例選擇使用16:9。

例如旅游的產(chǎn)品圖片就適合選用16:9。比如首頁你要做一個歐洲的路線，你只放巴黎的埃菲爾鐵塔的圖片，那么提供信息量是遠(yuǎn)遠(yuǎn)不夠的，必須加上德法意深度10日游的文字說明。例如造作展示的都是家居套裝專題，而不是具體某個家居的單品。所以使用16:9 Banner圖片比例。

△ ?造作首頁的16:9 Banner圖

2）1:1的Banner圖

如果你的應(yīng)用展示的Banner圖是類似商品性質(zhì)的。圖片具有重要的參考作用，用戶通過觀看精美的圖片，不用太注重文字內(nèi)容的，就可以吸引點擊。圖片比例選擇使用4:3。例如最美有物的Banner圖是以說明單個商品為主，不需要太多文字，用戶也能看的明白，簡單的說有圖片就夠了，所以圖片比例選擇4:3。

△ ? 最美有物的1:1 Banner圖

模塊4：卡片化內(nèi)容推薦

垂直類電商，首頁需要放置各種專題推薦，來導(dǎo)購各種商品。各種編輯精選，達(dá)人推薦，熱賣商品。對于用戶來說本質(zhì)就是推薦商品。所以用戶并不在乎你的內(nèi)部各種叫法分類。那么一些電商直接打破了那種綜合B2C電商的豆腐塊做法。而是用了卡片化設(shè)計。各種推薦內(nèi)容就是一個個卡片設(shè)計，這種設(shè)計的優(yōu)點就是足夠精簡，看起來有格調(diào)感。缺點就是信息密度很低，容納不了足夠多的信息。

1）橫向卡片

想去應(yīng)用采用了橫向大卡片的設(shè)計。啟動畫面推薦的商品，通過一個動畫切換直接顯示在了首頁的默認(rèn)第一個卡片。通過這種強調(diào)的手法，讓用戶足夠聚焦。

這個橫向卡片有一個缺點就是可容納信息量不能太大，所以只適合做單一類型的內(nèi)容卡片。如果試圖在卡片上加上各種復(fù)雜的模塊內(nèi)容。一旦卡片過多，用戶在橫向滑動卡片的時候，容易失去位置感。我在哪個模塊，我剛才看的模塊在哪里，用戶容易產(chǎn)生困惑，這是一個魚與熊掌不可兼得的問題。

△ ?想去的啟動頁和首頁卡片化設(shè)計

2）縱向卡片

另外一種大卡片設(shè)計就是縱向卡片，最美有物的首頁卡片是縱向滑動的。同橫向滑動相比，滑動的易用性略好于橫向滑動，因為用戶也更習(xí)慣于上下滑動?？v向滑動的信息承載度更低于橫向滑動，因為需要頁面需要留出足夠的區(qū)域，去放置更多前后卡片，去營造卡片的上下立體感。這樣的立體設(shè)計可以給予用戶更好的位置感。因為設(shè)計可用區(qū)域小，所以更多通過精心標(biāo)題設(shè)計去吸引用戶點擊。

△ ?最美有物的首頁卡片化設(shè)計

模塊5：樓層Banner

之前我們說過垂直細(xì)分類的頻道分類可能沒有那么多，所以不需要像B2C綜合類電商那么復(fù)雜的設(shè)計形式?？赡苤苯右詥我坏膶ｎ}Banner形式展現(xiàn)，從上到下都是Banner形式的樓層。

1）圖片的比例

因為Banner設(shè)計的形式比較單一，采用圖片+文字的視覺樣式。每個樓層就是一個小模塊，那么模塊與模塊之間的如何通過視覺手段進(jìn)行區(qū)分了？Life應(yīng)用采用了1+N的設(shè)計形式。設(shè)計樣式上，Life上半部分大Banner加半透明黑底，下半部分用白色背景，有一個白色上三角，這樣很清晰讓用戶明白，下半部分的商品是從屬于上半部分的專題。

△ ?Life的樓層Banner

Life上半部分Banner采用了750*400PX的分辨率， 與16:9相比扣除了22px，沒有采用16:9的原因是，是因為上半部分與下半部分之前有30px的留白，為了不讓整個Banner太高浪費面積，所以取整選了400PX高度。

下半部分Banner采用了176*176PX（1:1）的小圖。這樣圖片比例符合之前分析的專題圖適合16:9，商品圖適合用1:1。這樣的大小比例看起來可以讓版塊之前區(qū)分的很清楚。當(dāng)然如果下半部分圖片一定要使用小圖，否則看起來層次就混亂，。例如男衣邦的首頁，上圖和下圖的比例看起來非常的接近。模塊層次區(qū)分的就不是非常好。

△ ?男衣邦的樓層Banner

2）視覺樣式

同一個界面反復(fù)排布出現(xiàn)Banner，所以設(shè)計形式感要統(tǒng)一。Life采用的是圖標(biāo)+標(biāo)題+欄目上下排版形式。這樣的設(shè)計好處是每個模塊很清晰，且用戶可以很清晰的對應(yīng)分類各種子頻道。所以設(shè)計樣式不是隨意的選擇，單純的看視覺美學(xué)樣式。而是需要有效的對產(chǎn)品運營的需求進(jìn)行支撐。

△ Life首頁樓層banner與分類頁

模塊6：底部導(dǎo)航欄

底部導(dǎo)航一般分為4到5個模塊。以圖標(biāo)+文字的設(shè)計形式進(jìn)行展示，電商最常見的底部導(dǎo)航欄設(shè)置是首頁，分類，購物車，社區(qū)，我的。

1）商品分類

因為垂直類 ? 電商的商品品類有限。所以很多時候用戶甚至不知道可以搜什么關(guān)鍵詞，去尋找他想要的商品。所以垂直類電商必須設(shè)計商品的分類頁面，對于用戶來說這是一種商品的重要檢索形式。

同時也讓用戶知道你的平臺有哪些商品可以購買。氧氣的商品分類有二級，所以采用的是類似B2C綜合平臺的品類設(shè)計形式，小圖+文字形式顯得非常的緊湊。這種設(shè)計的好處是在足夠小的面積內(nèi)，可以查看到盡可能多的信息。

△ 氧氣的分類頁

如果產(chǎn)品的分類只有一級，可以采用大圖片+文字的設(shè)計形式。大圖的設(shè)計信息密度低，占用更多的頁面面積。例如想一屏幕只顯示了4個分類，但好看的圖片總是吸引人的眼球。

△ 去的分類頁

2）購物車

一些垂直類電商應(yīng)用，是導(dǎo)購的性質(zhì)，類似一個中介。通過收取品牌的廣告或者導(dǎo)購的提成生存。當(dāng)用戶通過某個專題，看上這個商品需要購買的時候，可以跳轉(zhuǎn)天貓或者其他B2C電商完成購買，所以并沒有購買支付的模塊，也就沒有購物車。

△ Life購買商品轉(zhuǎn)跳天貓

3）社區(qū)

社區(qū)的核心在于解答“什么值得買”這個問題，也可能是各種專題推薦的頻道集合地。社區(qū)分為3個部分：內(nèi)容曝光單品，達(dá)人輔助決策，購買。這個屬于內(nèi)容電商。我準(zhǔn)備在后面章節(jié)單獨詳細(xì)去講。

4）我的

這個模塊和B2C綜合類應(yīng)用設(shè)計差不多，這是一個個人后臺的作用，管理自己購買商品后的一系列狀態(tài)。例如查看商品物流狀態(tài)，退換商品，商品評價等。

總結(jié)：

現(xiàn)在打開各種設(shè)計網(wǎng)站，去找尋找app界面設(shè)計參考。你會發(fā)現(xiàn)如果去掉圖標(biāo)，僅僅去看界面設(shè)計，很多app的界面設(shè)計差異性非常小。App設(shè)計有一種趨于同質(zhì)化的傾向。那么這對界面設(shè)計師就是一個挑戰(zhàn)，也是一個機會。

經(jīng)過這幾年的移動創(chuàng)業(yè)風(fēng)潮，大量App設(shè)計已經(jīng)存在，現(xiàn)在設(shè)計師遇到的不是從0如何設(shè)計一款A(yù)pp的問題了，而是面臨各種改版設(shè)計的需求。如何設(shè)計一款和競品有差異化設(shè)計的界面，這是UI設(shè)計師越來越迫切的需求。

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

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