唯品會(huì)這樣垂直類B2C電商的交互設(shè)計(jì)和普通的B2C網(wǎng)站有什么區(qū)別？

時(shí)間：2023-04-05 00:04:02 | 來源：電子商務(wù)

時(shí)間：2023-04-05 00:04:02 來源：電子商務(wù)

以提供品牌折扣的唯品會(huì)（http://vipshop.com），涵蓋包括多種奢侈品的眾多品牌。走的是高端品牌路線，目標(biāo)用戶消費(fèi)需求量大。

下面嘗試在交互設(shè)計(jì)角度對其進(jìn)行淺顯解讀！

首頁布局：

采用頂端banner+導(dǎo)航欄+banner，下部布局為 2 : 1 結(jié)構(gòu)，左側(cè)呈現(xiàn)各大在售品牌陳列，右側(cè)為廣告和信息發(fā)布區(qū)。

首頁最多的就是各大在售品牌的陳列，這是由他的網(wǎng)站特性——提供品牌折扣，決定的。下拉表單很長很長，分為"今天新品""昨天上線""最后瘋搶""即將推出"三大塊。

消費(fèi)者在逛唯品會(huì)的時(shí)候終究會(huì)找到逛商場的感覺吧，漫長而又琳瑯滿目，如果說女性消費(fèi)者會(huì)樂此不彼，粘性更高。這個(gè)長長的下拉設(shè)計(jì)選擇也就是為女人而做出的選擇。

還有就是網(wǎng)站本身不提供搜索，所以導(dǎo)航的功能就尤顯重要了。

導(dǎo)航欄：

主導(dǎo)航欄分為六個(gè)導(dǎo)航標(biāo)簽："特賣會(huì)""奢侈品""唯品團(tuán)""旅游""唯品尚""手機(jī)版"，點(diǎn)擊全都是新建一頁！第一次是在淘寶發(fā)現(xiàn)的，很毀印象中的tab頁導(dǎo)航的形象。應(yīng)該叫做友情鏈接更合適！

默認(rèn)的是特賣會(huì)，總共五個(gè)類別：全部品牌，女士，男士，兒童，居家（充分體現(xiàn)垂直電商定位明確（會(huì)省很多麻煩）的特點(diǎn)），不過有個(gè)嘈點(diǎn)就是這個(gè)導(dǎo)航點(diǎn)擊會(huì)使網(wǎng)頁整體刷新一遍。tab頁！

接下來不得不說的是，他與其他電商網(wǎng)站非常具有差異性的地方就是"商品分類"放置在頁面右側(cè)。（這里指的是首頁，在各大品牌賣場里面除了在頂端加了品牌集匯體現(xiàn)其網(wǎng)站特點(diǎn)，其他設(shè)計(jì)與其他B2C無異）

該商品分類分為三級導(dǎo)航，二級和三級標(biāo)簽同時(shí)顯示（能以較短路徑顯示用戶所需要的內(nèi)容，同時(shí)以分組（二級標(biāo)簽）的形式呈現(xiàn)(組塊原則)）。這也在京東，當(dāng)當(dāng)?shù)缺挥玫?，是B2C網(wǎng)站商品導(dǎo)航的一個(gè)設(shè)計(jì)模式。

而采用的設(shè)計(jì)是抽屜式菜單（減少了左側(cè)空間利用率，但是這又是由前面的差異所決定的，而用戶鼠標(biāo)從右往左比左往右代價(jià)高，確保左側(cè)品牌曝光度好像不算理由），同時(shí)每次只打開一個(gè)抽屜來增加右側(cè)可憐區(qū)域的利用率。

不過唯品會(huì)的10個(gè)一級標(biāo)簽區(qū)分度不夠，看著都背景和文字都擠一堆去了。

ps1. 發(fā)現(xiàn)京東，當(dāng)當(dāng)也在三級導(dǎo)航欄里嘗試向用戶推薦自己的品牌！(你中有我，我中有你)

ps2. 唯品會(huì)自己也在做相關(guān)調(diào)查，希望知道消費(fèi)者進(jìn)唯品會(huì)的主要購物意向。

您來到唯品會(huì)通常都有明確的購物意向嗎？ [單選題]

• 
  有，想購買某品牌商品
  
• 
  有，想購買某品類商品（如上衣）
  
• 
  沒有
  

購物功能流程（只就其有別于其他網(wǎng)站的品牌特賣會(huì)討論）：

選擇品牌-->（選擇商品分類-->選擇尺碼-->）逛該品牌-->放入購物袋-->去購物袋結(jié)算-->立即結(jié)算-->確認(rèn)訂單信息（收貨人，收貨時(shí)間，支付方式，商品清單）-->立即結(jié)算

（逛該品牌的時(shí)候提供篩選方式：只顯示有貨商品，按折扣或價(jià)格排序）

應(yīng)該說購物流程非常清晰，同時(shí)在該流程上加入很多引誘消費(fèi)者多購物的因素

1.首頁：品牌折扣剩余時(shí)間倒計(jì)時(shí)

2.品牌商品列表頁：品牌折扣倒計(jì)時(shí)，各商品提供現(xiàn)價(jià)和市場價(jià)做對比以及折扣數(shù)（最高不過5，確實(shí)又便宜的）

3.商品詳情頁：商品超過288元會(huì)在商品價(jià)格上打上"免運(yùn)費(fèi)"的標(biāo)簽，稍微歪著頭引人注目

4.成功放入購物袋提示框：提示"購物袋中的商品，為您保留20分00秒，請及時(shí)結(jié)算"，"繼續(xù)購物"按鈕比結(jié)算按鈕醒目

5.清空購物袋倒計(jì)時(shí)一直持續(xù)到最后結(jié)算成功