前言 

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

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

 產(chǎn)品定位 

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

 

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

 

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

 目標(biāo)用戶 

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

1、米粉用戶

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

2、科技發(fā)燒友

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

3、追求小資用戶

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

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

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

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

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

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

而自營類電商產(chǎn)品，因為品類較少，用戶很難逛起來，也是因為用戶使用自營類產(chǎn)品本身就是帶有目的性的，這樣用戶通常會是“找”的行為，所以首頁的功能上通常會推薦主題產(chǎn)品和打造爆款。 

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

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

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

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

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

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

 小米商城-首頁解析 

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

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

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

1、品牌DNA

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

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

2、布局體驗設(shè)計

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

雙十一期間截圖 

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

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

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

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

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

打造沉浸式體驗

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

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

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

同時因為用戶在此版塊是“逛”的心態(tài)，所以設(shè)計上采用瀑布流，也可以稱為Feed流，這樣的設(shè)計形式重點突出的是圖片，也就是商品本身，參數(shù)配置會弱化或不出現(xiàn)，因為用戶閑逛時是沒有目的的，當(dāng)一個商品對他吸引后，用戶才會主動點擊查看詳情。

如果用戶是有目的搜索某個或某個品類商品時，此時列表流更為合適，因為用戶是有目的性的查找商品，他是認(rèn)識這款或這類產(chǎn)品的，所以必定會開始關(guān)注產(chǎn)品的參數(shù)配置等，列表流的左右結(jié)構(gòu)，能非常合理的呈現(xiàn)出參數(shù)配置等信息。

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

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

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

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

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

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

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

第一排剩下的是三個手機圖標(biāo)，其中位于中間位置的“至尊新品”是動效展示，也是因為要強調(diào)和推廣新款手機。

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

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

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

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

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

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

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

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

不包郵是用戶最大的痛點 

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

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

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

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

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

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

5、參與感設(shè)計

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

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

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

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

 最后 

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

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

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

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