前言 

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

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

 產(chǎn)品定位 

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

 

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

 

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

 目標用戶 

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

1、米粉用戶

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

2、科技發(fā)燒友

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

3、追求小資用戶

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

 全品類商城與自營商城設計差異 

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

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

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

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

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

2、自營類商城設計上注重品牌

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

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

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

導航欄設計注重品牌

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

 小米商城-首頁解析 

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

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

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

1、品牌DNA

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

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

2、布局體驗設計

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

雙十一期間截圖 

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

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

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

引導用戶查看內容

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

打造沉浸式體驗

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

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

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

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

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

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

3、金剛區(qū)設計

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

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

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

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

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

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

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

4、登錄前后設計

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

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

新人登錄前，首頁內容促進第一單購買

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

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

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

不包郵是用戶最大的痛點 

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

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

個人中心登錄前后有意思的設計

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

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

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

5、參與感設計

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

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

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

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

 最后 

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

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

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

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