小米作為國內(nèi)生態(tài)系統(tǒng)最為完善的手機品牌之一，它的商城設(shè)計也是一直被學習的案例?！捌放齐娚獭焙汀案叨嘶?，是小米商城設(shè)計的兩大主題。本文作者對小米商城APP的首頁設(shè)計進行了分析，希望對你有幫助。

一年多以前，老板們針對小米商城給出了清晰的定位：“小米商城是具有官方屬性的品牌電商，在設(shè)計上要結(jié)合集團戰(zhàn)略走高端化路線”。

我主要工作就是小米商城的首頁設(shè)計，所以在這一年中，一直對商城的首頁設(shè)計做探索和改版，目前已經(jīng)到了一個階段，終于可以跟大家做一個分享，這篇文章準備的時間很長，內(nèi)容很多，希望閱讀的你能有所收獲。

一、提煉設(shè)計語言

根據(jù)最新的產(chǎn)品定位，能提煉出兩個重要的信息，即“品牌電商”和“高端化”，若想把這兩點落實到產(chǎn)品設(shè)計當中，首先就是對這兩個關(guān)鍵詞有充分且客觀的認識。

1. 什么是品牌電商？

京東、淘寶、拼多多是不是品牌電商？肯定不是，他們屬于綜合類電商，他們銷售各種品牌的產(chǎn)品，品牌電商的特征是，只針對一個品牌或集團旗下多個品牌（集團為品牌）的產(chǎn)品進行銷售。

綜合類電商：追求性價比，更多的是滿足消費者物質(zhì)層面的需求，購買動機是功能、賣點、價值等利益點。

綜合類電商在設(shè)計上，貼近用戶的心智訴求，就應(yīng)該注重產(chǎn)品的利益點露出，頁面設(shè)計上強調(diào)熱鬧的氛圍，這樣才能進一步刺激用戶的消費欲望。

品牌電商：品牌電商應(yīng)注重品牌的調(diào)性，賦能品牌，用戶追求品牌溢價，滿足精神層面的需求，購買動機注重品質(zhì)，以及身份的價值認同感，符合自己的社會屬性等。

設(shè)計上，不應(yīng)過分強調(diào)利益點，不然會降低品牌的品質(zhì)感，品牌電商應(yīng)聚焦商品本身，更多的去解讀產(chǎn)品的價值和優(yōu)勢，讓用戶感到品牌產(chǎn)品的品質(zhì)。

2. 如何理解高端化？

什么是高端的？那首先得明白什么是低端的，從人類發(fā)展的客觀事實上來看，或從我們普遍認同的價值觀上來看，落后往往代表低端，先進則更能表現(xiàn)高端，下面我們看幾組圖片。

從圖片的對比上來看，粗糙、多色彩、雜亂看起來是低端的，精致、單色、簡潔更多人會認同是高端的。

最終通過品牌電商的特點，以及高端化設(shè)計認識，我總結(jié)出4條設(shè)計語言：

1）回歸產(chǎn)品本身

聚焦產(chǎn)品價值為核心，回歸本真，營銷信息合理展示。

2）克制的

克制色彩營銷的導(dǎo)向， 復(fù)雜的設(shè)計，助力品牌高端化。

3）極致的

以用戶語言，打造產(chǎn)品細節(jié)，打磨用戶體驗，做好服務(wù)。

4）有品牌感知的

提取品牌DNA，建立官網(wǎng)心智，打造官方商城優(yōu)勢。

有了設(shè)計語言的方向指導(dǎo)，那所有的設(shè)計都要依據(jù)這四條原則進行設(shè)計，接下來看一下案例中如何運用設(shè)計原則。

二、案例解析

下圖是一年前的首頁，最直觀的感受就是，整體看上去色調(diào)很多，圖素的飽和度也較高，根據(jù)我們的設(shè)計語言，對banner、金剛位、活動腰帶、一拖三（瓷片區(qū)）等、做了一系列的改版，同時還增加了幾個模塊，接下來我們細講。

1. banner頭圖改版

banner圖區(qū)域結(jié)合需求，做了非常大膽的嘗試，對頭圖設(shè)定了幾種狀態(tài)，日常狀態(tài)、活動狀態(tài)、新品發(fā)布會狀態(tài)。

日常狀態(tài)：依舊是輪播banner展示，在圖素的設(shè)計上，對版式和用色做了規(guī)范調(diào)整。

色調(diào)上不再采用高飽和的圖素，板式上去掉了行動按鈕，原因就是結(jié)合設(shè)計語言“回歸產(chǎn)品本身”這一理念，去營銷化，圖素上的信息就展示關(guān)于產(chǎn)品本身，圖、名稱、賣點、價格。

這就是一個品牌電商，在日常展示上，應(yīng)該有的一種態(tài)度，吸引用戶的一定是產(chǎn)品本身，而不應(yīng)該是一個利益點。

活動狀態(tài)：當有重要的活動或新品時，會直接把所有banner都下掉，直接把一個加長的活動圖素放上去，業(yè)務(wù)方給起了個名字叫huner，意思就是直接“呼臉上”的意思，邏輯上就是重點強調(diào)。

huner展示

根據(jù)活動的重要程度，huner的高度會不一樣，左圖是與哈利波特聯(lián)名的一款手機，比較重要，所以更大，右圖是每月一次的F會員日活動，所以相對較小。

關(guān)于活動氛圍，在設(shè)計上還有一個遞進關(guān)系，當活動越重要，那huner的底部圓角就會越圓潤，因為越圓潤的設(shè)計越活躍，越活躍的設(shè)計活動氛圍就會越熱鬧。

另外有時我也會做一些動效上去，來重點渲染活動氛圍，下圖所示：

迪士尼聯(lián)名產(chǎn)品發(fā)布會動畫：

雙11活動huner動畫設(shè)計：

春節(jié)期間年貨節(jié)huner動畫設(shè)計：

618倒計時huner動畫設(shè)計：

新品發(fā)布會/重大節(jié)日狀態(tài)：這個狀態(tài)會在huner圖中下方增加多個次級活動入口，原因發(fā)布會和重大節(jié)日流量較高，這樣的設(shè)計形式，流量聚焦，減少路徑，能更好的完成活動目的。

另外在這個樣式的基礎(chǔ)上還有一種形式，huner下方的坑位會去掉產(chǎn)品圖，弱化展示，目的是為了給下方活動腰帶更多的流量。

大促期間各個需求組，都希望在首頁分到更多的流量，在眾多活動中，肯定有主有次之分，放在一起設(shè)計形式相同就會平均流量，這顯然不是平臺想要的效果，所以解決方案就是，通過設(shè)計形式來干預(yù)流量的走向。

對于一個多業(yè)務(wù)方的首頁，設(shè)計上往往還需考量各方利益，不能因為一方，影響另一方，做好權(quán)重需求分配，平衡利益，這也是設(shè)計師需要有意識思考的問題。

總結(jié)：banner頭圖的改版設(shè)計，日常輪播不會存在任何營銷信息，保持品牌電商的調(diào)性，活動期間根據(jù)不同級別的活動，給出級別不同設(shè)計方案，活動過多時，通過設(shè)計形式干預(yù)流量的走向。

2. 金剛位優(yōu)化

金剛位做了簡單的優(yōu)化，之前最大的問題是，產(chǎn)品的形狀各異，都是以最大要求尺寸展示，導(dǎo)致最終的視覺呈現(xiàn)常常不統(tǒng)一。

解決方案下圖所示，規(guī)范了較為方正的產(chǎn)品和較長產(chǎn)品，不同的呈現(xiàn)尺寸，讓視覺盡可能看起來統(tǒng)一。

米金商城圖標進行了改版，采用寫實效果，降低飽和度，盡可能看起來更貼近真實，這樣與真實的產(chǎn)品圖標會更加契合。

金剛位中“小米發(fā)布”的入口，有一個重要的改變，之前一直是一個圓角矩形，現(xiàn)在結(jié)合我們的設(shè)計語言“有品牌感知的”原則，進行調(diào)整。

提取小米logo的超橢圓形狀，直接用于圖標的呈現(xiàn)，小米發(fā)布是一個重流量的入口，所以一直是一個動效狀態(tài)。

因為“小米發(fā)布”是中間位置，圖標尺寸保持最大也不會不和諧，較大的展示面積，能把動效內(nèi)容展示的更清晰。

3. 新品大卡

這個內(nèi)容是新增模塊，非常態(tài)化呈現(xiàn)，每次會隨著發(fā)布會新品發(fā)布出現(xiàn)，比如老板在發(fā)布會上正在介紹一款新品，那小米商城就會隨著發(fā)布會的節(jié)奏，首頁首屏出現(xiàn)一個非常突出的新品大卡。

當介紹第二款新品時，新品大卡就會以banner輪播的形式出現(xiàn)，另外有一點很重要，新品大卡的副文案，一定得是賣點，而不能是利益點。

賣點就是展示這個產(chǎn)品本身的亮點，利益點是這個產(chǎn)品有什么優(yōu)惠，對于剛發(fā)布的新品就直接上利益點，有損新品的價值感，不符合我們“回歸產(chǎn)品”的設(shè)計語言。

所以每次業(yè)務(wù)方給出的是利益點，我都會提醒他換成賣點，講明原因，他們通常也是非常認可的。

4. 活動腰帶

活動腰帶是重運營區(qū)域，所以設(shè)計形式會常常換樣式，不然用戶容易視覺疲勞，但任何設(shè)計形式，也都是圍繞設(shè)計語言開展，下圖所示，新舊活動腰帶對比。

新舊對比很直觀的感受就是，變得冷靜克制了，場景變得寫實了，減少色相了，降低飽和度和明度了，下面我精選了一些近一年中用過的活動腰帶。

寫實風格的KV能增強商品的品質(zhì)，也更符合目前的產(chǎn)品定位，從數(shù)據(jù)來看對比以前也是增長趨勢。

對于品牌電商來說，能給用戶帶來品質(zhì)感，其實就等于用戶對平臺增加了信任感，設(shè)計促進了用戶的信任，那就等于設(shè)計賦能了品牌。

5. 手機腰帶

手機腰帶也是新增的模塊，原因很簡單，集團的主營業(yè)務(wù)就是手機，所以手機要有個專門的模塊展示。

手機腰帶日常保持冷靜的設(shè)計調(diào)性，大促期間會增加標簽和突出利益點的處理。

另外值得說的一點是，手機腰帶下面三個手機做到了“千人千面”，不同標簽的用戶會看到不同的手機推薦。

6. 一拖三（瓷片區(qū)）

這個模塊的改版非常有講頭，這一年中也是經(jīng)歷了多個版本的迭代，首先看一下最初的設(shè)計稿，其實是非常符合當時的產(chǎn)品定位，與之前的活動腰帶也非常契合，營銷感較重，主打的就是一個熱鬧。

最初的設(shè)計沒有問題，符合當時的產(chǎn)品定位，但后來應(yīng)業(yè)務(wù)方的需求，加了一個配置標簽的功能。

當時告訴運營同學的是，四個卡片中只能加一個，功能上并沒有限制只能加一個，后來如上圖所示，每個都加，夸張的時候四個都加。

本來就是多色的色塊，再加上幾個突出的標簽，那直接就“花枝招展”了，每個卡片都加標簽，就等于沒有突出任何一個。

后來公司提出高端化路線，就快速做了一個用不到開發(fā)的去色的調(diào)整，去掉標簽，下圖所示，修改尺寸板式需要開發(fā)介入。

在用去色后樣式的同時，我也在進行需要開發(fā)介入的設(shè)計迭代優(yōu)化。

首先分享一下我對改版優(yōu)化的設(shè)計思考，對于改版設(shè)計拿到需求后，不提倡直接去找參考，應(yīng)該先去調(diào)研改版的目的，了解業(yè)務(wù)方的想法。

然后結(jié)合產(chǎn)品定位，分析目前的設(shè)計存在哪些問題，深入去思考如何改版才能深入人心，這個環(huán)節(jié)非常重要，不僅能培養(yǎng)獨立思考能力和意識，而且也是鍛煉設(shè)計提案能力的重要方法。

拿到需求直接去找參考不僅是一種“懶”的行為，而且非常容易做很多徒勞無功的工作，因為不了解真正的改版目的，不思考存在的問題，最后難免就是多次的改稿。

在一拖三的案例中，我總結(jié)了四個問題：

1. 整體看起來非常緊湊；
2. 產(chǎn)品圖片不能完全展示；
3. 大卡片的產(chǎn)品名稱字號過大；
4. 大卡片的文案居中對齊，不符合現(xiàn)在的設(shè)計原則；

問題一：整體看起來緊湊，其實也并非緊湊，而是如若有一個寬松和它對比，那它就是緊湊的，我先有個方案，再對應(yīng)給它定義一個問題，當然前提是問題與解決方案是客觀成立的。

我堅信寬松一定會打敗緊湊，緊湊變寬松會給人一種輕松的清爽感，事實上也的確如此，最后的寬松方案大家都非常認可。

問題二：產(chǎn)品不能完全露出，導(dǎo)致用戶看不到產(chǎn)品全貌，從而會降低點擊的興趣，露出半個產(chǎn)品，這樣對用戶不僅不友好，而且也是對產(chǎn)品不尊重，所以展示出產(chǎn)品的全貌迫在眉睫。

問題三：大卡片的產(chǎn)品名稱字號過大，甚至大過板塊標題的字，常態(tài)展示模塊不應(yīng)該出現(xiàn)不冷靜的字號，會顯得不精致。

問題四：大卡片的文字排版為居中，居中排版的優(yōu)點是表現(xiàn)力會更強，缺點是板式結(jié)構(gòu)變得不夠整潔，且不耐看，結(jié)合我們的設(shè)計語言“克制的”能簡潔絕不會讓它復(fù)雜。

最大的改變是一拖三變成了一拖四，整體看起來不再有緊繃感，雖說增加了模塊的高度，但也增加了一個坑位，這對對應(yīng)的業(yè)務(wù)方來說也是求之不得的好事。

產(chǎn)品圖不在部分露出，每個模塊都是對角排版，文字左對齊，且可以展示更長的產(chǎn)品名稱，整體看起來較為工整，整齊的設(shè)計，帶來的就是信任感。

接下來我們看一下規(guī)范上的整理，邊距上視覺統(tǒng)一，產(chǎn)品名稱與賣點的間距是賣點與價格邊距的二分之一，即五分原則。

同時賣點與價格的邊距與外邊距相同，在這種小模塊設(shè)計中，在能把信息層級分清楚的基礎(chǔ)上，UI設(shè)計間距越少越好，大小相等的東西都會看起來就會更整潔。

產(chǎn)品圖的規(guī)范設(shè)定與前面的金剛位一樣，方正的產(chǎn)品貼合小框大小，較長的產(chǎn)品貼合大框。

最后整體看一下，小米商城首頁一年前后的對比。

總結(jié)：

這次首頁的改版主要就是根據(jù)公司高端化戰(zhàn)略和清晰的產(chǎn)品定位，總結(jié)得出設(shè)計語言，然后根據(jù)設(shè)計語言進行改版優(yōu)化。

• 首頁banner頭圖，常態(tài)化展示進行了去營銷化設(shè)計，目的就是渲染品牌電商的品質(zhì)調(diào)性，活動期間做了huner的創(chuàng)新型設(shè)計。
• 金剛位的產(chǎn)品圖，統(tǒng)一了視覺大小的規(guī)范設(shè)計，優(yōu)化圖標，融入公司logo的圖形元素，促進品牌官網(wǎng)心智的建立。
• 新品發(fā)布會直播時，在商城首頁實時同步新品信息，通過新品大卡的形式，做到全網(wǎng)購買新品最快途徑。
• 腰帶風格改變，走品質(zhì)路線，去繁從簡，不同的級別的活動，有不同的設(shè)計形式承載。
• 新增手機腰帶，同時手機針對不同特征用戶做了更精準的投放，做到了“千人千面”。
• 一拖三改為一拖四，卡片信息重新排版，同時也做了去營銷化設(shè)計，不再出現(xiàn)標簽等營銷信息。

首頁還有會員樓層、省心優(yōu)惠、新品上新三個樓層，依舊在改版中，上線后再與大家分享。

關(guān)于設(shè)計語言：

這四條設(shè)計語言，是我一年多以前在改版設(shè)計產(chǎn)品站（產(chǎn)品詳情頁）時做的總結(jié)，有些原則在這次的首頁改版并沒有體現(xiàn)，比如“極致的”用戶體驗服務(wù)，但在產(chǎn)品站的改版中有非常多的體現(xiàn)。

對于電商產(chǎn)品最重要的兩個板塊就是，首頁和產(chǎn)品站，首頁負責準確的流量分發(fā)，產(chǎn)品站負責銷售轉(zhuǎn)化，所以產(chǎn)品站的設(shè)計也是非常非常有學問，下一篇文章就是產(chǎn)品站的改版，敬請期待。

三、最后

最后跟大家分享一下，這次改版的重要心得，電商首頁的每個模塊都是一個業(yè)務(wù)方，設(shè)計上要考慮各方利益，不然你的設(shè)計很難推動。

設(shè)計形式可以影響流量的走向，合理運用會有非常不錯的效果。

設(shè)計前的深度思考尤為重要，不僅能培養(yǎng)獨立思考的意識，也能無形中鍛煉設(shè)計提案的能力。