前言 

互聯(lián)網(wǎng)產(chǎn)品首頁是與用戶進(jìn)行交流的第一步，首頁設(shè)計(jì)不僅代表著一家企業(yè)的形象，還會(huì)直接影響公司的業(yè)務(wù)營收和口碑。

本文將深度解析“小米商城”APP的首頁設(shè)計(jì)，分析B2C模式下的自營電商是如何通過設(shè)計(jì)打造品牌感，增加用戶參與感，從而促進(jìn)產(chǎn)品的銷售轉(zhuǎn)化。

 產(chǎn)品定位 

了解一款A(yù)PP產(chǎn)品首先要了解它的產(chǎn)品定位，從小米商城的slogan“讓每個(gè)人都能享受科技的樂趣”不難看出小米的產(chǎn)品定位是性價(jià)比高的科技類產(chǎn)品。

 

另一方面，從商業(yè)模式來看，小米商城是B2C自營電商，與其他B2C自營電商平臺(tái)不同的是，小米主打高性價(jià)比，以好口碑深入大眾，撬動(dòng)市場(chǎng)，以互聯(lián)網(wǎng)思維賣產(chǎn)品，把硬件產(chǎn)品當(dāng)互聯(lián)網(wǎng)軟件產(chǎn)品賣。

 

由此可見，科技、高性價(jià)比是小米商城產(chǎn)品定位的兩大關(guān)鍵詞。

 目標(biāo)用戶 

目標(biāo)用戶是產(chǎn)品模式和功能制定的重要考慮因素，小米商城的目標(biāo)用戶可以分為三類人群：

1、米粉用戶

這類用戶是小米的忠實(shí)粉絲，也或許是雷總的粉絲，他們認(rèn)同小米文化，喜愛小米產(chǎn)品，熱衷購買和傳播小米產(chǎn)品，是小米商城最有價(jià)值的用戶群體。

2、科技發(fā)燒友

這類用戶本身就是科技愛好者，喜愛探索新鮮前沿的科技產(chǎn)品，熱衷購買科技類創(chuàng)新性的產(chǎn)品，對(duì)于深度發(fā)燒友還會(huì)專研參數(shù)配置，并會(huì)在論壇探討分享。

3、追求小資用戶

這類用戶追求品質(zhì)，喜愛有設(shè)計(jì)感的產(chǎn)品，如果了解到小米有什么產(chǎn)品好看又好用，他們會(huì)為了保證品質(zhì)和服務(wù)，選擇從官方購物平臺(tái)購買。

 全品類商城與自營商城設(shè)計(jì)差異 

雖然了解了小米商城的定位與目標(biāo)用戶，但還需要從產(chǎn)品的商業(yè)模式上去推導(dǎo)設(shè)計(jì)，比如淘寶與小米商城的首頁設(shè)計(jì)大有不同，原因就是因?yàn)樯虡I(yè)模式不同，致使產(chǎn)品的設(shè)計(jì)存在差異。

1、全品類與自營首頁設(shè)計(jì)區(qū)別

自營類商品其實(shí)是全品類商城的一個(gè)分支，全品類商城首頁衍生了很多獨(dú)立平臺(tái)，所以全品類商城首頁設(shè)計(jì)形式上更注重流量分發(fā)，而自營類是垂直領(lǐng)域，所以會(huì)更突出商品，并且創(chuàng)造商品賣點(diǎn)，打造爆款。

全品類電商產(chǎn)品因?yàn)槠奉惐姸?，用戶長(zhǎng)時(shí)間使用會(huì)形成“逛”的習(xí)慣，從運(yùn)營的角度，首頁運(yùn)營板塊就會(huì)以千人千面的形式出現(xiàn)各類產(chǎn)品，所以首頁在設(shè)計(jì)上需要放置更多的產(chǎn)品，甚至要不停的變化產(chǎn)品，以覆蓋到用戶的需求點(diǎn)。 

而自營類電商產(chǎn)品，因?yàn)槠奉愝^少，用戶很難逛起來，也是因?yàn)橛脩羰褂米誀I類產(chǎn)品本身就是帶有目的性的，這樣用戶通常會(huì)是“找”的行為，所以首頁的功能上通常會(huì)推薦主題產(chǎn)品和打造爆款。 

2、自營類商城設(shè)計(jì)上注重品牌

自營類商城運(yùn)營的是品牌，能發(fā)展壯大的自營電商都成功塑造了品牌形象，所以在產(chǎn)品設(shè)計(jì)上突出品牌，會(huì)與用戶建立信任感，提高轉(zhuǎn)化，同時(shí)也能做到與其他電商的差異化設(shè)計(jì)。

下圖所示，小米商城、小米有品、網(wǎng)易嚴(yán)選三款產(chǎn)品，為了能快速與用戶建立品牌認(rèn)知，導(dǎo)航欄都放了自家的logo。

另外，還可以從色調(diào)，板式，服務(wù)等等各個(gè)緯度突出品牌形象，總之在產(chǎn)品設(shè)計(jì)上要與品牌形象貼合，讓用戶處處能感知到品牌。

導(dǎo)航欄設(shè)計(jì)注重品牌

了解產(chǎn)品定位和目標(biāo)用戶以及平臺(tái)的商業(yè)模式，對(duì)我們分析一個(gè)產(chǎn)品非常重要，這樣更容易從正確的方向理解產(chǎn)品的設(shè)計(jì)，下面我們帶著對(duì)產(chǎn)品定位和目標(biāo)用戶的理解，開始對(duì)小米商城APP首頁設(shè)計(jì)的全面解析。

 小米商城-首頁解析 

B2C模式下的品牌電商，首頁設(shè)計(jì)需要做到可以讓任何一款產(chǎn)品成為爆品，也不會(huì)讓任何一款產(chǎn)品出現(xiàn)庫存滯銷。 

小米商城首頁的設(shè)計(jì)與運(yùn)營緊密聯(lián)系，有帶貨能力超強(qiáng)的模塊，如小米眾籌、小米秒殺，也有能快速推廣新品的模塊，如小米新品、新品發(fā)布，這些都是品牌電商重要的組成部分。 

接下里我們從品牌DNA、布局體驗(yàn)設(shè)計(jì)、金剛區(qū)設(shè)計(jì)、登錄前后設(shè)計(jì)、參與感設(shè)計(jì)等方面對(duì)小米商城首頁進(jìn)行解析。

1、品牌DNA

當(dāng)前小米公司有著非常強(qiáng)大的品牌勢(shì)能，給人們留下了性價(jià)比高、高端、簡(jiǎn)約、科技、堅(jiān)持的好印象，這些都可以看作是小米的品牌DNA，因此在設(shè)計(jì)小米商城APP時(shí)，設(shè)計(jì)需要貼合小米品牌DNA，讓用戶使用產(chǎn)品時(shí)能感受到小米的品牌力。

打開小米商城APP，處處能感受到小米的品牌元素，橘色的品牌色、小米的產(chǎn)品圖標(biāo)等，都在傳遞著小米的符號(hào)，整體UI的設(shè)計(jì)秉承了小米硬件產(chǎn)品的一貫風(fēng)格，如簡(jiǎn)約的風(fēng)格、高質(zhì)感元素等，細(xì)節(jié)上體現(xiàn)品質(zhì)。

2、布局體驗(yàn)設(shè)計(jì)

用戶瀏覽電商產(chǎn)品首頁，第一屏流量最高，隨著往下走第二屏、第三屏...跳失率會(huì)越來越高，根據(jù)數(shù)據(jù)統(tǒng)計(jì)通常產(chǎn)品第三屏之后流量會(huì)大打折扣。

雙十一期間截圖 

上圖的數(shù)據(jù)并不能代表所有產(chǎn)品的數(shù)據(jù)，好的設(shè)計(jì)形式可以影響數(shù)據(jù)的變化。

如何減少跳失率，要從用戶在當(dāng)前位置的所思所想出發(fā)，做好第二屏到第三屏的功能制定和引導(dǎo)設(shè)計(jì)非常重要。

小米商城首屏最后的位置可以看到第二屏的內(nèi)容標(biāo)題，能夠起到引導(dǎo)性作用，并且放的是最有吸引力“小米秒殺”和“新品發(fā)布”雙十一期間增加了運(yùn)營模塊，雖然這兩塊在第二屏，但看到的同樣是最有吸引力的雙11促銷信息。

引導(dǎo)用戶查看內(nèi)容

另外在不增加運(yùn)營板塊時(shí)會(huì)發(fā)現(xiàn)，小米商城重要板塊不會(huì)放到第三屏，在第二屏下面已經(jīng)開始出現(xiàn)精選（猜你喜歡）閑逛區(qū)，因?yàn)槭翘喟鍓K用戶會(huì)感覺首頁很亂，不容易對(duì)各板塊功能形成認(rèn)知，其次就是隨著跳失率的增加，重要板塊也會(huì)失去好的轉(zhuǎn)化效果。

打造沉浸式體驗(yàn)

多數(shù)用戶在第三屏?xí)r會(huì)失去再向下探索的動(dòng)力，這時(shí)系統(tǒng)通過算法給用戶推薦用戶喜歡的內(nèi)容，會(huì)再次吸引到用戶，重塑用戶向下探索的好奇心。

用戶在“猜你喜歡”版塊心態(tài)是無目的的閑逛，當(dāng)用戶不想再向下探索時(shí)，隨時(shí)可以側(cè)滑屏幕切換到其他品類，這樣也大大減少了用戶首頁閑逛的跳失率，營造出了一種沉浸式的交互體驗(yàn)。

閑逛區(qū)（猜你喜歡）沉浸式體驗(yàn)

同時(shí)因?yàn)橛脩粼诖税鎵K是“逛”的心態(tài)，所以設(shè)計(jì)上采用瀑布流，也可以稱為Feed流，這樣的設(shè)計(jì)形式重點(diǎn)突出的是圖片，也就是商品本身，參數(shù)配置會(huì)弱化或不出現(xiàn)，因?yàn)橛脩糸e逛時(shí)是沒有目的的，當(dāng)一個(gè)商品對(duì)他吸引后，用戶才會(huì)主動(dòng)點(diǎn)擊查看詳情。

如果用戶是有目的搜索某個(gè)或某個(gè)品類商品時(shí)，此時(shí)列表流更為合適，因?yàn)橛脩羰怯心康男缘牟檎疑唐?，他是認(rèn)識(shí)這款或這類產(chǎn)品的，所以必定會(huì)開始關(guān)注產(chǎn)品的參數(shù)配置等，列表流的左右結(jié)構(gòu)，能非常合理的呈現(xiàn)出參數(shù)配置等信息。

總結(jié)：當(dāng)用戶無目的“逛”時(shí)會(huì)關(guān)注產(chǎn)品本身，所以這時(shí)需要重點(diǎn)突出產(chǎn)品圖，使用瀑布流更合適；當(dāng)用戶有目的查找商品時(shí)，因?yàn)橐褜?duì)商品有一定的認(rèn)識(shí)，所以不僅希望看到圖片，同時(shí)也希望能夠直觀看到產(chǎn)品的參數(shù)配置，這點(diǎn)對(duì)科技類產(chǎn)品的展示尤其重要。

3、金剛區(qū)設(shè)計(jì)

小米商城-金剛區(qū)

金剛區(qū)的圖標(biāo)設(shè)計(jì)直接用產(chǎn)品來代替，真實(shí)的手機(jī)、電腦、筆記本等，這樣不僅能與眾多電商平臺(tái)的金剛區(qū)有差異化，更加能夠把入口功能表現(xiàn)的有識(shí)別性、直觀性，能夠使用產(chǎn)品模型作為圖標(biāo)元素，這本身形成了一種優(yōu)勢(shì)。

“觸碰想象，感受真實(shí)”金剛區(qū)的圖標(biāo)設(shè)計(jì)符合小米的設(shè)計(jì)理念，設(shè)計(jì)師從圖標(biāo)的設(shè)計(jì)營造出了貼合目標(biāo)用戶認(rèn)知的氛圍，讓用戶感受到了歸屬感。

金剛區(qū)圖標(biāo)的布局設(shè)計(jì)與產(chǎn)品定位和用戶特征非常吻合，第一個(gè)圖標(biāo)是“小米新品”，對(duì)于米粉來說，這應(yīng)該是最關(guān)注的功能入口，關(guān)注新品的用戶也是最容易購買新品的人群，從產(chǎn)品的角度來講，新品也是需要大力推廣宣傳的，所以新品入口放置首位無可厚非。

第二個(gè)是“小米眾籌”，此功能入口對(duì)于追求性價(jià)比的用戶是最有吸引力的，因?yàn)楸娀I價(jià)低于零售價(jià)，符合性價(jià)比屬性，此模式是先付錢再生產(chǎn)，解決了庫存、物流成本等。

第一排剩下的是三個(gè)手機(jī)圖標(biāo)，其中位于中間位置的“至尊新品”是動(dòng)效展示，也是因?yàn)橐獜?qiáng)調(diào)和推廣新款手機(jī)。

“小米秒殺”放在第二排第一個(gè)，是因?yàn)榇四K也非常重要，是一大流量入口，秒殺功能板塊是利用時(shí)間的緊迫感來刺激用戶轉(zhuǎn)化，走量能力極強(qiáng)，正因如此，在頁面的下方有專門的“小米秒殺”板塊。剩下的四個(gè)圖標(biāo)是小米生態(tài)鏈中四個(gè)類別的產(chǎn)品入口，代表了大多數(shù)產(chǎn)品。

4、登錄前后設(shè)計(jì)

新人首次打開產(chǎn)品，促進(jìn)第一單購買

小米商城新用戶第一次打開產(chǎn)品時(shí)，會(huì)直接彈出“新人專享福利”彈窗，點(diǎn)擊查看都是性價(jià)比極高，且生活中常用的物件，性價(jià)比高是為了促進(jìn)與新用戶的第一筆交易，推薦常用物品是為了讓用戶在生活中看到用到這些常用物品時(shí)，可以想到物品的購買渠道，從而提高復(fù)購。

新人登錄前，首頁內(nèi)容促進(jìn)第一單購買

如果用戶不小心關(guān)閉了彈窗，沒關(guān)系在首頁最重要的位置也會(huì)看到“新人福利”板塊，如果享受新人福利，那在購買前一定要做的是要注冊(cè)登錄的，所以新人福利，不僅可以促成與新人的第一筆訂單，而且也有助于引導(dǎo)新人成為注冊(cè)用戶。

新人登錄后，繼續(xù)促進(jìn)第一單購買

從下載小米商城到登錄后，會(huì)有三次提示有新人福利，上面介紹了前兩次，第三次是當(dāng)?shù)卿浐髸?huì)直接跳轉(zhuǎn)到“新人專享福利”，目的還是促成一單有性價(jià)比的交易，給用戶留下第一次好的購物體驗(yàn)，最終變成有價(jià)值的用戶。

不包郵是用戶最大的痛點(diǎn) 

據(jù)調(diào)查電商購物，用戶最大的痛點(diǎn)就是不包郵，同樣一件商品，99元包郵比90元+8元快遞費(fèi)組合更容易讓人接受。

上圖小米商城的新人福利，都在強(qiáng)調(diào)包郵，消除用戶痛點(diǎn)，讓用戶的首次購物真正的感受到小米商品的性價(jià)比。

個(gè)人中心登錄前后有意思的設(shè)計(jì)

小米商城登錄前后在個(gè)人中心有個(gè)地方的設(shè)計(jì)非常有意思，看下圖未登錄前的5個(gè)圖標(biāo)設(shè)計(jì)，相信身為設(shè)計(jì)師的你一眼就能看出“錢包”的圖標(biāo)偏小，這是為什么呢？

登錄后才發(fā)現(xiàn)，較大的四個(gè)圖標(biāo)都會(huì)換成數(shù)字，數(shù)字的大小正好與錢包圖標(biāo)的大小視覺上一致，設(shè)計(jì)師似乎很淘氣。

登錄后數(shù)字與圖標(biāo)大小視覺上一致

5、參與感設(shè)計(jì)

小米商城的商品具有低頻購買的屬性，如手機(jī)、家電等，好在商品的種類相對(duì)較多，小米也在不斷的研發(fā)新品，為了促活，小米商城在設(shè)計(jì)上有很多參與感的設(shè)計(jì)。 

小米商城有“星球”板塊，可以理解為是一個(gè)基于產(chǎn)品討論為導(dǎo)向的社交平臺(tái)，這樣的功能就是讓用戶有參與感。 

當(dāng)對(duì)比華為商城和OPPO商城后，發(fā)現(xiàn)華為與OPPO只是把產(chǎn)品呈現(xiàn)出來，卻很少有讓用戶有參與感的設(shè)計(jì)，而小米商城處處都在打造參與感設(shè)計(jì)，如游戲化設(shè)計(jì)、互動(dòng)平臺(tái)等等，當(dāng)然這些功能的設(shè)計(jì)與小米主打性價(jià)比和粉絲屬性的用戶有關(guān)。 

在小米商城的首頁用戶可以打開紅包雨游戲功能、答題領(lǐng)紅包功能、智取盲盒機(jī)功能等，這些雖然都是營銷策略，但因?yàn)槿の缎?、游戲化的設(shè)計(jì)也大大提高了用戶參與感，從而增加了銷售機(jī)會(huì)。

 最后 

對(duì)于負(fù)責(zé)流量分發(fā)的首頁，不僅要引導(dǎo)用戶瀏覽和購買商品，給用戶創(chuàng)造優(yōu)秀的產(chǎn)品體驗(yàn)，首頁也是體現(xiàn)公司品牌形象的關(guān)鍵點(diǎn)位，品牌形象能夠讓用戶了解你、信任你、感受到價(jià)值，從而促成購買轉(zhuǎn)化，這些都可以用設(shè)計(jì)助力表現(xiàn)。 

以上講的是UI設(shè)計(jì)前的探索工作，也是非常有必要的工作，產(chǎn)品設(shè)計(jì)者只有真正了解了產(chǎn)品的底層架構(gòu)，才能精準(zhǔn)的把控設(shè)計(jì)，在各方面掌握好平衡。

文章來源：站酷 作者：吳星辰

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)