小米作為國内生态系統最為完善的手機品牌之一，它的商城設計也是一直被學習的案例。“品牌電商”和“高端化”，是小米商城設計的兩大主題。本文作者對小米商城APP的首頁設計進行了分析，希望對你有幫助。
一年多以前，老闆們針對小米商城給出了清晰的定位：“小米商城是具有官方屬性的品牌電商，在設計上要結合集團戰略走高端化路線”。
我主要工作就是小米商城的首頁設計，是以在這一年中，一直對商城的首頁設計做探索和改版，目前已經到了一個階段，終于可以跟大家做一個分享，這篇文章準備的時間很長，内容很多，希望閱讀的你能有所收獲。
一、提煉設計語言
根據最新的産品定位，能提煉出兩個重要的資訊，即“品牌電商”和“高端化”，若想把這兩點落實到産品設計當中，首先就是對這兩個關鍵詞有充分且客觀的認識。
1. 什麼是品牌電商？
京東、淘寶、拼多多是不是品牌電商？肯定不是，他們屬于綜合類電商，他們銷售各種品牌的産品，品牌電商的特征是，隻針對一個品牌或集團旗下多個品牌（集團為品牌）的産品進行銷售。
綜合類電商：追求成本效益，更多的是滿足消費者物質層面的需求，購買動機是功能、賣點、價值等利益點。
綜合類電商在設計上，貼近使用者的心智訴求，就應該注重産品的利益點露出，頁面設計上強調熱鬧的氛圍，這樣才能進一步刺激使用者的消費欲望。
品牌電商：品牌電商應注重品牌的調性，賦能品牌，使用者追求品牌溢價，滿足精神層面的需求，購買動機注重品質，以及身份的價值認同感，符合自己的社會屬性等。
設計上，不應過分強調利益點，不然會降低品牌的品質感，品牌電商應聚焦商品本身，更多的去解讀産品的價值和優勢，讓使用者感到品牌産品的品質。
2. 如何了解高端化？
什麼是高端的？那首先得明白什麼是低端的，從人類發展的客觀事實上來看，或從我們普遍認同的價值觀上來看，落後往往代表低端，先進則更能表現高端，下面我們看幾組圖檔。
從圖檔的對比上來看，粗糙、多色彩、雜亂看起來是低端的，精緻、單色、簡潔更多人會認同是高端的。
最終通過品牌電商的特點，以及高端化設計認識，我總結出4條設計語言：
1）回歸産品本身
聚焦産品價值為核心，回歸本真，營銷資訊合理展示。
2）克制的
克制色彩營銷的導向， 複雜的設計，助力品牌高端化。
3）極緻的
以使用者語言，打造産品細節，打磨使用者體驗，做好服務。
4）有品牌感覺的
提取品牌DNA，建立官網心智，打造官方商城優勢。
有了設計語言的方向指導，那所有的設計都要依據這四條原則進行設計，接下來看一下案例中如何運用設計原則。
二、案例解析
下圖是一年前的首頁，最直覺的感受就是，整體看上去色調很多，圖素的飽和度也較高，根據我們的設計語言，對banner、金剛位、活動腰帶、一拖三（瓷片區）等、做了一系列的改版，同時還增加了幾個子產品，接下來我們細講。
1. banner頭圖改版
banner圖區域結合需求，做了非常大膽的嘗試，對頭圖設定了幾種狀态，日常狀态、活動狀态、新品釋出會狀态。
日常狀态：依舊是輪播banner展示，在圖素的設計上，對版式和用色做了規範調整。
色調上不再采用高飽和的圖素，闆式上去掉了行動按鈕，原因就是結合設計語言“回歸産品本身”這一理念，去營銷化，圖素上的資訊就展示關于産品本身，圖、名稱、賣點、價格。
這就是一個品牌電商，在日常展示上，應該有的一種态度，吸引使用者的一定是産品本身，而不應該是一個利益點。
活動狀态：當有重要的活動或新品時，會直接把所有banner都下掉，直接把一個加長的活動圖素放上去，業務方給起了個名字叫huner，意思就是直接“呼臉上”的意思，邏輯上就是重點強調。
huner展示
根據活動的重要程度，huner的高度會不一樣，左圖是與哈利波特聯名的一款手機，比較重要，是以更大，右圖是每月一次的F會員日活動，是以相對較小。
關于活動氛圍，在設計上還有一個遞進關系，當活動越重要，那huner的底部圓角就會越圓潤，因為越圓潤的設計越活躍，越活躍的設計活動氛圍就會越熱鬧。
另外有時我也會做一些動效上去，來重點渲染活動氛圍，下圖所示：
迪士尼聯名産品釋出會動畫：
雙11活動huner動畫設計：
春節期間年貨節huner動畫設計：
618倒計時huner動畫設計：
新品釋出會/重大節日狀态：這個狀态會在huner圖中下方增加多個次級活動入口，原因釋出會和重大節日流量較高，這樣的設計形式，流量聚焦，減少路徑，能更好的完成活動目的。
另外在這個樣式的基礎上還有一種形式，huner下方的坑位會去掉産品圖，弱化展示，目的是為了給下方活動腰帶更多的流量。
大促期間各個需求組，都希望在首頁分到更多的流量，在衆多活動中，肯定有主有次之分，放在一起設計形式相同就會平均流量，這顯然不是平台想要的效果，是以解決方案就是，通過設計形式來幹預流量的走向。
對于一個多業務方的首頁，設計上往往還需考量各方利益，不能因為一方，影響另一方，做好權重需求配置設定，平衡利益，這也是設計師需要有意識思考的問題。
總結：banner頭圖的改版設計，日常輪播不會存在任何營銷資訊，保持品牌電商的調性，活動期間根據不同級别的活動，給出級别不同設計方案，活動過多時，通過設計形式幹預流量的走向。
2. 金剛位優化
金剛位做了簡單的優化，之前最大的問題是，産品的形狀各異，都是以最大要求尺寸展示，導緻最終的視覺呈現常常不統一。
解決方案下圖所示，規範了較為方正的産品和較長産品，不同的呈現尺寸，讓視覺盡可能看起來統一。
米金商城圖示進行了改版，采用寫實效果，降低飽和度，盡可能看起來更貼近真實，這樣與真實的産品圖示會更加契合。
金剛位中“小米釋出”的入口，有一個重要的改變，之前一直是一個圓角矩形，現在結合我們的設計語言“有品牌感覺的”原則，進行調整。
提取小米logo的超橢圓形狀，直接用于圖示的呈現，小米釋出是一個重流量的入口，是以一直是一個動效狀态。
因為“小米釋出”是中間位置，圖示尺寸保持最大也不會不和諧，較大的展示面積，能把動效内容展示的更清晰。
3. 新品大卡
這個内容是新增子產品，非常态化呈現，每次會随着釋出會新品釋出出現，比如老闆在釋出會上正在介紹一款新品，那小米商城就會随着釋出會的節奏，首頁首屏出現一個非常突出的新品大卡。
當介紹第二款新品時，新品大卡就會以banner輪播的形式出現，另外有一點很重要，新品大卡的副文案，一定得是賣點，而不能是利益點。
賣點就是展示這個産品本身的亮點，利益點是這個産品有什麼優惠，對于剛釋出的新品就直接上利益點，有損新品的價值感，不符合我們“回歸産品”的設計語言。
是以每次業務方給出的是利益點，我都會提醒他換成賣點，講明原因，他們通常也是非常認可的。
4. 活動腰帶
活動腰帶是重營運區域，是以設計形式會常常換樣式，不然使用者容易視覺疲勞，但任何設計形式，也都是圍繞設計語言開展，下圖所示，新舊活動腰帶對比。
新舊對比很直覺的感受就是，變得冷靜克制了，場景變得寫實了，減少色相了，降低飽和度和明度了，下面我精選了一些近一年中用過的活動腰帶。
寫實風格的KV能增強商品的品質，也更符合目前的産品定位，從資料來看對比以前也是增長趨勢。
對于品牌電商來說，能給使用者帶來品質感，其實就等于使用者對平台增加了信任感，設計促進了使用者的信任，那就等于設計賦能了品牌。
5. 手機腰帶
手機腰帶也是新增的子產品，原因很簡單，集團的主營業務就是手機，是以手機要有個專門的子產品展示。
手機腰帶日常保持冷靜的設計調性，大促期間會增加标簽和突出利益點的處理。
另外值得說的一點是，手機腰帶下面三個手機做到了“千人千面”，不同标簽的使用者會看到不同的手機推薦。
6. 一拖三（瓷片區）
這個子產品的改版非常有講頭，這一年中也是經曆了多個版本的疊代，首先看一下最初的設計稿，其實是非常符合當時的産品定位，與之前的活動腰帶也非常契合，營銷感較重，主打的就是一個熱鬧。
最初的設計沒有問題，符合當時的産品定位，但後來應業務方的需求，加了一個配置标簽的功能。
當時告訴營運同學的是，四個卡片中隻能加一個，功能上并沒有限制隻能加一個，後來如上圖所示，每個都加，誇張的時候四個都加。
本來就是多色的色塊，再加上幾個突出的标簽，那直接就“花枝招展”了，每個卡片都加标簽，就等于沒有突出任何一個。
後來公司提出高端化路線，就快速做了一個用不到開發的去色的調整，去掉标簽，下圖所示，修改尺寸闆式需要開發介入。
在用去色後樣式的同時，我也在進行需要開發介入的設計疊代優化。
首先分享一下我對改版優化的設計思考，對于改版設計拿到需求後，不提倡直接去找參考，應該先去調研改版的目的，了解業務方的想法。
然後結合産品定位，分析目前的設計存在哪些問題，深入去思考如何改版才能深入人心，這個環節非常重要，不僅能培養獨立思考能力和意識，而且也是鍛煉設計提案能力的重要方法。
拿到需求直接去找參考不僅是一種“懶”的行為，而且非常容易做很多徒勞無功的工作，因為不了解真正的改版目的，不思考存在的問題，最後難免就是多次的改稿。
在一拖三的案例中，我總結了四個問題：
- 整體看起來非常緊湊；
- 産品圖檔不能完全展示；
- 大卡片的産品名稱字号過大；
- 大卡片的文案居中對齊，不符合現在的設計原則；
問題一：整體看起來緊湊，其實也并非緊湊，而是如若有一個寬松和它對比，那它就是緊湊的，我先有個方案，再對應給它定義一個問題，當然前提是問題與解決方案是客觀成立的。
我堅信寬松一定會打敗緊湊，緊湊變寬松會給人一種輕松的清爽感，事實上也的确如此，最後的寬松方案大家都非常認可。
問題二：産品不能完全露出，導緻使用者看不到産品全貌，進而會降低點選的興趣，露出半個産品，這樣對使用者不僅不友好，而且也是對産品不尊重，是以展示出産品的全貌迫在眉睫。
問題三：大卡片的産品名稱字号過大，甚至大過闆塊标題的字，常态展示子產品不應該出現不冷靜的字号，會顯得不精緻。
問題四：大卡片的文字排版為居中，居中排版的優點是表現力會更強，缺點是闆式結構變得不夠整潔，且不耐看，結合我們的設計語言“克制的”能簡潔絕不會讓它複雜。
最大的改變是一拖三變成了一拖四，整體看起來不再有緊繃感，雖說增加了子產品的高度，但也增加了一個坑位，這對對應的業務方來說也是求之不得的好事。
産品圖不在部分露出，每個子產品都是對角排版，文字左對齊，且可以展示更長的産品名稱，整體看起來較為工整，整齊的設計，帶來的就是信任感。
接下來我們看一下規範上的整理，邊距上視覺統一，産品名稱與賣點的間距是賣點與價格邊距的二分之一，即五分原則。
同時賣點與價格的邊距與外邊距相同，在這種小子產品設計中，在能把資訊層級厘清楚的基礎上，UI設計間距越少越好，大小相等的東西都會看起來就會更整潔。
産品圖的規範設定與前面的金剛位一樣，方正的産品貼合小框大小，較長的産品貼合大框。
最後整體看一下，小米商城首頁一年前後的對比。
總結：
這次首頁的改版主要就是根據公司高端化戰略和清晰的産品定位，總結得出設計語言，然後根據設計語言進行改版優化。
- 首頁banner頭圖，常态化展示進行了去營銷化設計，目的就是渲染品牌電商的品質調性，活動期間做了huner的創新型設計。
- 金剛位的産品圖，統一了視覺大小的規範設計，優化圖示，融入公司logo的圖形元素，促進品牌官網心智的建立。
- 新品釋出會直播時，在商城首頁實時同步新品資訊，通過新品大卡的形式，做到全網購買新品最快途徑。
- 腰帶風格改變，走品質路線，去繁從簡，不同的級别的活動，有不同的設計形式承載。
- 新增手機腰帶，同時手機針對不同特征使用者做了更精準的投放，做到了“千人千面”。
- 一拖三改為一拖四，卡片資訊重新排版，同時也做了去營銷化設計，不再出現标簽等營銷資訊。
首頁還有會員樓層、省心優惠、新品上新三個樓層，依舊在改版中，上線後再與大家分享。
關于設計語言：
這四條設計語言，是我一年多以前在改版設計産品站（産品詳情頁）時做的總結，有些原則在這次的首頁改版并沒有展現，比如“極緻的”使用者體驗服務，但在産品站的改版中有非常多的展現。
對于電商産品最重要的兩個闆塊就是，首頁和産品站，首頁負責準确的流量分發，産品站負責銷售轉化，是以産品站的設計也是非常非常有學問，下一篇文章就是産品站的改版，敬請期待。
三、最後
最後跟大家分享一下，這次改版的重要心得，電商首頁的每個子產品都是一個業務方，設計上要考慮各方利益，不然你的設計很難推動。
設計形式可以影響流量的走向，合理運用會有非常不錯的效果。
設計前的深度思考尤為重要，不僅能培養獨立思考的意識，也能無形中鍛煉設計提案的能力。
專欄作家
吳星辰，微信公衆号：網際網路設計幫，人人都是産品經理專欄作家。
本文原創釋出于人人都是産品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協定。
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。