剛剛過去的 2021 年 12 月 28 日，小米舉行了小米 12 系列旗艦新品發布會。這場發布會，除了備受關注的小米 12 系列手機，全新 MIUI 13 操作系統也正式發布。

MIUI 從誕生之時起就是各大安卓手機操作系統中的佼佼者，其功能豐富性和細節體驗一直遠超其他安卓競品系統。但是在過去一年，MIUI 12 系統卻因為各種 bug 和體驗上的退步而遭遇不少差評。

現在，全新的 MIUI 13 發布了，它是否能夠力挽 MIUI 12 的頹勢，重整 MIUI 系統一直以來的優秀品質呢？今天我們就通過實際的上手體驗來深入了解一些。

IT之家使用搭載 MIUI 13 穩定版（版本號 13.0.12.0.SLBCNXM）的小米 12 Pro 手機來進行體驗測試，話不多說，我們直接開始吧。

一、基礎體驗，穩定快速

對于 MIUI 12 的問題，小米表示自己一直在關注并解決，過去一年，他們拆解了 6000 多個網絡反饋的視頻，梳理了 425 個問題，并持續將他們修復、清零。到今年 11 月的增強版更新。MIUI 穩定性其實已經回歸往年水準。

而在此基礎上，今年全新的 MIUI 13 系統的總思路就是更快、更穩。MIUI 團隊放棄了可有可無的更新，而是將重點聚焦在對用戶有切實意義和強烈感知的功能。在手機上，第一點就是基礎優化。

首先是流暢性，IT之家同時通過“玄學曲線”和手機系統的幀率來觀察小米 12 Pro MIUI 13 系統的流暢性。

小編觀察了小米 12 Pro 在主屏幕滑動、負一屏功能使用、后臺切換以及打開《天氣》等系統自帶應用的流暢性。

從上面的錄屏中能看到，在這些最常用的場景測試中，MIUI 的系統流暢性的確很穩定，系統的幀率波動基本保持在 3 幀左右，而且主屏幕、設置等基礎界面都是 120fps 的幀率，實際感受更是絲滑流暢了。

只有像《天氣》、《音樂》等個別自帶應用限制 90fps 或 60fps，但整體使用起來仍然是順滑穩定的。

然后是打開第三方應用的流暢性。小編選取了《IT之家》、《嗶哩嗶哩》、《微博》、《QQ》、《微信》這幾款最常用的 App 來測試，結果也比較符合小編的期待，這幾款應用的流暢性都非常出色，使用過程中，幀數的波動都很低，玄學曲線的藍色豎形調也基本在紅線之下，很穩。實際體驗感受上，也沒有掉幀的感覺。

結合小編的日常使用體驗，在小米 12 Pro 上，MIUI 13 的穩定性、流暢性確實已經處在比較高的水平，日常使用、操作都可以做到運轉如飛。曾經 MIUI 那種爽快的使用感又回來了。

MIUI 13 的基礎優化另一體現，就是后臺應用的駐留能力。為了驗證這一特性，IT之家做了后臺駐留能力的測試。測試時，小編先將小米 12 Pro 的后臺應用清空，然后選取 20 款主流應用，逐個打開。20 款應用都完成啟動后，再回到第一款重新打開一遍。

從下面的錄屏過程來看，20 款應用打開后，只有 4 款應用的后臺被殺掉了，這種后臺應用駐留表現還是很讓人滿意的。過去用手機稍微切換一下應用，再回來就重啟的情況再也不會出現了。

此外，MIUI 13 還支持液態存儲技術，官方表示持續使用 36 個月后，讀寫性能衰減小于 5%，久用如新。這一點因為小米 12 Pro 發布時間還不長，因此不能立刻進行相關測試，需要長期觀察。

總體來說，MIUI 13 的基礎核心體驗回到了應有的水準，日常使用也足夠穩定流暢，當然，偶爾的掉幀也是存在的，但已經非常少見了。可以說，MIUI 13 在基礎優化方面所做的努力值得肯定。

二、隱私體驗

基礎體驗的優化對 MIUI 13 來說是重點，但不是全部。除了基礎體驗，MIUI 13 也在用戶體驗的其他方面做了升級，他們最先關注的就是隱私。

其實之前 MIUI 12 在隱私保護方面已經做的比較周全了，這次 MIUI 13 重點增加了三個隱私保護的能力。

第一是針對人臉識別的系統級隱私遮擋。之前有一條熱門的新聞，很多手機的人臉識別雖然交互界面用戶只能看到自己的臉部，但其實攝像頭半身都能拍到，這就有可能暴露隱私。

現在，小米在 MIUI 13 中做到了系統級的隱私遮擋，這是基于系統底層做的修改，這樣，當用戶在進行人臉識別時，臉部以外的地方都會被遮擋起來。

因為這是系統級的，所以無論用戶是在系統中做人臉識別，還是在第三方應用調用人臉識別，都可做到一樣的隱私保護。

第二個功能是隱私水印。因為現在可以在網上辦理的業務越來越多，拍身份張上傳的情況也越來越頻繁。這些身份證照片如果沒有做一定的保護措施，就很可能被盜用，用在別的地方。現在，MIUI 13 在相冊 App 中引入了一鍵添加隱私水印的功能。它可以智能識別證件照等敏感照片，然后提示添加隱私水印。點開后，只需輸入水印文字，就可以給圖片加上水印。這樣就可以防止照片被用在別處。

除了隱私水印，MIUI 13 防電信詐騙方面也做了功能升級，引入了系統級全鏈路反詐功能，貫穿電信詐騙整條鏈路，提供“電詐預警”、“官方標識”、“轉賬防護”等多重守護，讓電信詐騙無機可乘。

當用戶接到詐騙電話或短信時，MIUI13 將在相關頁面直接進行預警提示，讓詐騙電話和短信一目了然。

同時，MIUI13 對國家相關部門的電話以及短信提供了官方標識，進一步避免用戶錯過重要信息；甚至在轉賬時，MIUI13 也會進行風險轉賬預警，從而避免用戶上當受騙。

三、系統美學，顏值更佳

一款操作系統要為用戶帶來舒適的體驗，除了功能細節要做好，系統本身的設計美感、交互的細節也要足夠出色。那么在美學上，MIUI 13 做得如何呢？

首先，MIUI 13 中引入了 9 套主題為結晶的動態壁紙，在系統的壁紙設置中可選用。結晶壁紙在桌面并非動態，但是在鎖屏狀態下電量屏幕，就可以看到元素物質結晶的過程，既新鮮又好看。

而且，鎖屏上的結晶動畫進入到主界面是連貫的，當結晶完成之后，桌面壁紙就會變成靜態。

在圖標風格、下拉控制中心和通知中心等方面，MIUI 13 相比 MIUI 12 并沒有做太大的變動，整體美學風格還是延續了上一代，色彩平和、簡單優雅。

不過，小米在 MIUI 13 中對系統字體做了更換，引入了全新的 MiSans 字體。全新的字體形式更簡潔，平直有力，更利于屏幕顯示，相比之前的蘭亭字體視覺上看起來更加清爽。

另外，MiSans 字體還有更豐富的排版特性，比如小寫的字符會自動下沉，數學符號等特殊字符也會有對應標準的排版格式，同時不同行的文字也可以通過字間距、大小的調整做到兩端對齊，整體來說看起來更舒適。

值得一提的是，全新 MiSans 字體是免費開放的，無論是商業公司、自由的設計師或者其他從業者，都可以自由使用這款字體。

另外就是動畫和動效方面，這是在設計層面影響交互舒適度的重要細節。在 MIUI 13 上，整體動效還是比較豐富和統一的，比如你使用前面說的結晶壁紙，點亮屏幕就能看到美麗的物質結晶過程。

從鎖屏進入系統主界面的動畫簡單快速，并伴有短暫的回彈：

控制中心的按鈕點按也會有對應的小動效，而且伴隨輕微的震動，很舒適：

類似設置、相冊等自帶 App 在推出回到主界面時，圖標會出現對應的小動畫：

點按應用圖標，圖標也會收縮一下再彈回來：

這些細節的動畫，既沒有夸張到干擾交互的流暢性，但又能讓用戶清晰地感知到，在對靈動活潑的細致把控中帶給用交互的愉悅感。

不過，說到動效，也有一些小編不是很習慣。或者感覺不是很統一的地方。首先就是通知中心、下拉控制中心推出的動畫有些生硬。

再比如打開文件夾沒有了背景模糊，和進入后臺的模糊特效以及下拉菜單的模糊特效不是很統一。

當然，類似這樣的改動，從另一方面講對于系統的流暢性提升則是有幫助的，總體來說，MIUI 13 的系統的顏值也是在線的，整體交互的舒適感相信也能滿足絕大部分消費者的需求。

四、個性化，千機千面

在 MIUI13 中，還包含了一些功能性的升級，其中小部件功能的提升以及小愛同學的升級是比較值得一說的。

首先是小部件功能的提升，MIUI 13 加入了全新的小部件體系，小部件的種類、樣式非常豐富，比如單是時鐘部件就有北歐馴鹿、抽象構成、動態彩色文字、輝光管、藍色星球、摩爾斯密碼等不同種類的趣味風格。

另外 MIUI 13 還加入了個性小部件，可以讓你在主屏上顯示個性簽名，這些個性簽名的卡片有不同的設計風格可選擇，可讓你的手機桌面與眾不同。

除了個性簽名，MIUI 13 中還有個性工具的小部件，比如喝水量杯、手賬拼貼、彩虹電池、今天吃什么、運動步數等等，總之有很多可以去探索的。

第三方應用的小部件支持也很豐富，常用的如網易云音樂、微博、愛奇藝、地圖類部件、支付寶、去哪兒旅行等等等等，應有盡有。

而且值得一提的是，MIUI 13 中小部件和系統負一屏的卡片是“一家人”，主桌面的小部件可以直接移動到負一屏的卡片里，這一點非常好。

小部件的存在，可以讓每個用戶手上的小米手機做到“千機千面”，大大增加了個性化能力與可玩性。

說到個性化和可玩性，MIUI 13 還有一個重要舉措，就是用戶可以全方位定制自己的小愛同學了。

在小愛同學的設置頁面，你可以自定義小愛同學的喚醒詞、音色以及虛擬形象，這三點，基本上足夠大家打造屬于自己的、獨一無二的小愛同學。

喚醒詞的自定義允許用戶使用 4-6 個漢字組成的中文詞，比如“你好小愛”、“哈嘍米兔”等等。

小愛音色的定制，需要用戶朗讀系統給定的文字片段進行錄音，當聲音被錄入后，就可以成為小愛同學的聲音了。

錄音的時候，大家最好找一個比較安靜的環境進行，從實際結果來看，小愛同學對錄入者音色的還原還是比較準確的，音質效果也比較飽滿。如果大家身邊有播音的朋友，那就更好了。

還有虛擬形象的定制，大家可以在系統中選擇男女性別，也可以拍照上傳形象，不過IT之家嘗試拍照，發現生成的形象并不是按照拍照者的樣貌進行建模的，基本上只是性別和拍照者一樣。

在角色細節方面，像發型、臉型、眼鏡、鼻唇、身型、服裝、配飾等等，都可以定制，可選的模型組合還是很豐富的。

形象定制好之后，MIUI 13 還會給出一段自定義虛擬形象的登場動畫。這樣，以后大家喚醒小愛同學時，自定義的虛擬形象也會跳出來，不同的指令下還會有不同的動作，大大增加了小愛同學的親切感。

如果你經常使用手機里的語音助手，那么擁有全新定制形象的小愛同學會大大增加你使用語音助手的愉悅感，而且要比之前的表情包形象定制用起來要高頻得多。

結語

安卓手機的操作系統，在經過這么多年探索和升級后，各大廠商的系統在功能上其實都已比較完善，持續做加法，在體驗上帶來的編輯效益其實已經較低。相反，在保證核心體驗的基礎上適當做減法，才是更考慮軟件交互能力的地方。

MIUI 也是如此。全新的 MIUI 13 并沒有太多花樣繁復的功能更新，而是將重點重新回歸到了基礎流暢性、穩定性、舒適性方面。這可以理解成在經歷 MIUI 12 波折之后的必需舉措，但本質上，也是隨著小米手機體量增多，MIUI 覆蓋終端種類擴張之后的應該要走的一步。

從這一點來說，MIUI 13 也實現了恢復元氣，整頓旗鼓的目的，它的基礎體驗，核心交互已經回到了 MIUI 該有的水平。保持這個基礎，不斷優化，也是為 MIUI 迎接萬物互聯時代夯實了基石。

電商產品中，產品詳情頁的設計、或者說產品站的設計是十分重要的，因為這一板塊很大程度上影響著銷售轉化。那么，產品站的設計該怎么做，才能達到更好的展示效果呢？這篇文章里，作者做了分析和解讀，一起來看看吧。

前言

電商產品最重要的兩個板塊，一是首頁，負責流量分發；二是產品站，也叫產品詳情頁，負責銷售轉化；這兩個板塊基本串聯著整個產品，設計的好壞，直接影響購物體驗和轉化。

前陣子跟大家分享了小米商城首頁設計改版，這次分享產品站，產品站的改版過程持續了多半年，踩了很多坑，總結了很多有價值的經驗，接下來跟大家一并分享。

分享的內容分為四個方面：用戶篇-需求篇-競品篇-改版篇，每個環節循序漸進，層層環扣，本文盡可能把改版的底層邏輯說明白，講透徹。

一、用戶篇-購買情緒

人是情緒動物，當用戶購買商品時，無論是在線下還是在線上，都會有不一樣的情緒行為，比如有時會特別爽快下單，有時又會猶猶豫豫沒有購買沖動，有時還會精挑細選花費很長時間最后決定先加入購物車，這些都是購買情緒。

影響購買情緒的因素非常之多，比如用戶需求的強弱、對品牌的認可度、產品的功能、服務感受、價值感、信任感、安全感等等。在銷售過程中，若能夠掌控用戶購買情緒，那就會大大增加用戶下單的意愿。

購買情緒大體可分為三大類，果斷型、感性型、理性型，三者因為購買情緒的不同，在購買過程中，關注點和心態也會有所不一樣，所以“對癥下藥”才能更好的促銷售。

1. 果斷購買情緒

一般需求明確且強烈，亦是對品牌認可，對產品信任，購買過程中，看重關鍵要素需求，以目標為導向。

這類用戶群體最具價值，是平臺的寶貴財富，他們往往對品牌認可度高，對平臺信任，粘性高，購買行為大多是果斷下單，同時多數人還愿意將品牌/產品推薦給他人。

場景再現：

用戶：期待的小米14終于問世了，參數真的很高能，拍照無敵，必須整一個；想買個掃地機看了好幾個，還是買小米的吧，畢竟大品牌服務好；必須官方平臺購買，沒優惠無所謂，正品保證，物流快，服務可靠。

2. 感性購買情緒

感性購買情緒也容易果斷下單，但下單的動機與果斷情緒下單的動機不同，“果斷”是因為對品牌，對平臺信任，需求也強烈；“感性”則可能是因，產品外觀好看，或是有朋友推薦，再或是聯想到了產品的某個使用場景，從而觸發了感性情緒而下單。

打動感性情緒用戶，從UI設計上來講，要保證高質量且好看的產品圖，全方位展示產品的細節、產品的使用場景圖、感性的文案、規范的頁面設計等等。

當然這些只是能夠助力用戶下單的因素，對于品牌電商來說，讓用戶愛上品牌才是真正的價值，所以平臺還要不斷傳遞品牌價值和產品優勢，提升產品力，同時給到用戶真誠貼心的服務，長此以往，用戶就會對品牌產生潛移默化的認可。

場景再現：

用戶：哇唔，這款手表也太好看了吧，還是（XXX明星）同款，跟我那件衣服也很搭，買買買；這包在模特身上氣質絕佳，放我身上肯定也不錯，買回來試試。

3. 理性購買情緒

一般來說，用戶對于沒用過的品牌，不了解的產品，不熟悉的購物平臺，通常是理性情緒，這是很自然的心理現象。

也有很多人，在消費上一貫是理性情緒，正所謂錢要花在刀刃上，要找到最合適的產品，認同的價格，才會入手。

理性情緒用戶關注點一般有兩個方向：一個是關注產品的性價比、客觀評價、售后服務、產品功能細節等；另一個是關注自我價值認同，這就需要讓用戶感受到信任感、價值感、安全感等。

所以在產品設計上，能夠快速有效讓用戶對比商品，另外評價體系在設計和運營上做好體驗，同時UI設計上還要巧用品牌元素，表達品牌感。

對于品牌商城，還要強調官方商城，服務至上等運營理念等，這些都是助力理性情緒用戶下單的條件。

場景再現：

用戶：嗯這個產品感覺不錯，先去看看評價，評價有人說不好啊，再看看吧；這兩個款都還行，糾結，先都加入購物車，再看看有沒有更好的；不了解產品，不知道買哪個，找朋友推薦一下吧；這服務態度太差了，以后都不會買這個品牌了。

4. 小結

每個人都會存在這三種購買情緒，所以在設計上，應該是綜合的，即要對“果斷”親和、又要對“感性”友好、還要對“理性”有效，好的電商平臺基本都做到了這三點。

二、需求篇-設計方向

產品站改版屬于重點的大項目，這樣級別的項目，難度非常之大，首先要明確改版方向，從產品、交互、設計角度總結問題，其次要做用戶調研，過往數據研究并具體分析，競品分析等等。

關于設計方向和問題總結，在部門大會時，老板提了很多，拿到資料做了一下梳理，下圖所示。

這些內容是最具價值的需求和問題總結，“需求”是公司的發展戰略，“問題”是近幾年的用戶反饋積累，所以這次產品站的改版目標非常明確。

1. 問題與需求總結

通過對需求和問題的總結，再結合各種調研和產品設計的思考，我們總結了六點改版的方向。

1）產品定位不清晰

有官網之名，無官網之魂，購物體驗差。

2）產品站信息亂，不易理解

無法捕捉產品賣點瀏覽效率低，不容易高效對比同類產品。

3）線上線下融合

同價同促，通過門店自提，門店閃送，增加門店訂單量。

4）官網形象高端化

提升用戶體驗，服務體驗更貼心。

5）做好新品及自營大促

持續建立官網認知，將官網價值內核轉化為用戶語言，通過關鍵節點傳遞，建立官網心智。

6）承載手機 x汽車

一體化銷售服務。

結合這六點總結，再依據品牌電商產品的定位，公司戰略，分析現有問題，思考設計解決方案，下面我們來研究幾個問題。

第一個提到了“產品定位不清晰”，先去找找原因，看下圖是能否快速感知到，哪個是小米商城的產品站，我們做了一些調研，多數人很難分的清楚，甚至有相當一部分人會誤認為這都是淘寶。

在產品站的頁面中，最具有產品辨識度的底部按鈕，兩款產品設計形式與顏色幾乎一摸一樣，從品牌勢能上來看，淘寶強于品牌電商的小米商城，所以把小米商城誤以為是淘寶很正常。

當然產品定位不清晰，不能只從設計上去看，比如產品邏輯，運營策略都能體現一個產品的定位，甚至客服的話術也是如此，比如小米商城的客服也跟用戶說“親”，那就很難形成自我品牌定位的認知。

對于品牌電商來說，要有自我的品牌調性，這不僅是用戶認識你的基礎，更是品牌發揮優勢的重要能力。

很多設計師認為，借鑒主流成熟產品的設計不容易出錯，有一定的道理，但是這不應該是你思考的主線，主線是先找準自家產品的定位，其次才是如何結合主流產品優點，打造自己的產品。

第二個問題說到，“產品站信息亂，不易理解，瀏覽效率低，不容易高效對比同類產品”，原因是頭圖信息太多，標題下方也是文字堆積，想給用戶的信息太多，反而導致用戶根本不會去讀這些信息，所以提煉信息和重新排版設計迫在眉睫。

其中提到的“不容易高效對比同類產品”原因也很顯然，“機型對比”的設計形式，像不可點擊的標簽，從點擊數據上來看，確實極低，在用戶調研中，也有很大一部分人認為不可點擊。

一個信息冗余的頁面，沒有品牌元素信息、也沒有表達自我的設計語言，注定會大大影響用戶的購物體驗，甚至還會拉低用戶對品牌的好感與信任。

以上是簡單的做了幾個問題分析，分析問題，研究需求，是為了思考接下來的設計語言的制定。

2. 設計語言/原則

設計語言是“塑造自我”的重要表達方式，一個優秀的產品一定是有自身的設計語言，所以我們要打造一套符合小米商城定位的設計語言。

根據小米商城品牌電商的產品定位，公司高端化戰略，再經過一系列的研究和探索，最終總結制定4條產品設計語言/原則。

1）回歸產品本身

聚焦產品價值為核心，回歸本真主打產品秀，營銷信息合理展示。

2）克制的

克制色彩營銷的導向， 復雜的設計，助力品牌高端化。

3）極致的

以用戶語言，打造產品細節，打磨用戶體驗，做好服務。

4）有品牌感知的

提取品牌DNA，建立官網心智，打造官方商城優勢。

有了設計語言就有了設計風格指導，這四條設計語言不僅僅是支持產品站的設計，而是貫通指導整個產品的設計。

三、競品篇-認識自己

在設計改版前，主線是研究自家的產品，次線是對競品有充分的了解，知己知彼，才能更好進行自己的設計。

1. 產品定位

通過對市面上主流電商產品設計的研究，能夠分析出，綜合類電商與品牌電商的產品定位差異。

以上是綜合類電商，即全品類，此類平臺的特征是追求性價比，滿足消費者物質層面需求，購買動機是功能、賣點、價值等利益點，UI設計需要注重氛圍渲染，刺激消費欲望。

以上是品牌電商，產品設計注重的是賦能品牌，追求品牌溢價，滿足用戶精神層面需求，如身份的價值認同，用戶的購買動機非常注重品質，以及是否符合自己的社會屬性等方面。

在UI設計上，不能過分強調利益點，不能過度刺激消費，應聚焦商品本身，強調商品賣點，體現商品的本身價值、品牌價值。

從設計風格上來看，綜合類電商設計，營銷感強，注重熱鬧的氛圍渲染；品牌電商則設計更輕量，聚焦產品功能賣點，營銷感較低。

2. 認識自己-模塊分析

認識自己遠比研究競品更重要（強東哥說過這話），我個人非常認同。接下來，我們全方位的拆解小米商城產品站，同時進行模塊化分析。

首先分析每個模塊的歷史數據，是否符合預期，這里的預期指的是某個入口的點擊率是否正常，如果異常思考如何改版。

然后分析每個模塊的功能作用，是否可以改進，滿足新需求，助力新業務，從設計上來看是否合理美觀，最后再結合新的設計語言進行改版。

產品站的信息傳遞邏輯是循序漸進，首先讓用戶快速獲取商品信息，產生信任情緒，認可品牌/商品價值，從而產生下單行為。

產品站的整體設計，如若讓三種情緒用戶（果斷型、感性型、理性型）在購物過程中，通過不同的信息，促進下單概率，并非容易，所以頁面的信息排布的合理性尤為重要，接下來開始改版。

四、改版篇-案例解析

在產品站改版的半年多時間里，中大概出了7-8版，一直在不斷的優化調整，下面以最終稿來講解。

上圖是新舊版本的首屏對比，設計風格上有重大變化，變得更輕量，日常樣式優惠政策都聚合在一個入口中，讓日常的營銷感弱下來。

首屏應該，也是最重要的，能讓用戶快速了解產品，所以首屏應更多展示產品外觀、配置、功能等信息。

1. 頭圖改版

頭圖在非大促期間，不做任何營銷信息的設計，保持干凈整潔的風格，這能滿足追求品質感用戶的心理期望，同時也是滿足感性購買情緒用戶的因素之一。

整潔有品質設計，能提升產品在用戶心中的溢價空間，簡單說就是用戶覺得很值；雜亂的設計，優惠信息冗余，用戶沒有安全感，不能直接感受到，能不能享受到最優惠的政策。

新版的設計理念，結合設計語言“回歸產品本身”，打造產品秀，讓用戶去感受產品本身的價值，對于品牌電商，用戶被產品吸引，遠比促銷信息吸引更有價值。

手機是平臺最重要的主營業務之一，為了能更好的展示手機，新版頭圖的設計，增加了顏色切換的交互功能，此功能后臺可配置，也可用于其他多色產品的展示。

交互邏輯是，當用戶選中一個顏色手機后，然后在往后滑動切換圖片瀏覽，這時看到的圖片都是關于當前選中的顏色手機圖片。

另外，舊版的頭圖數量沒做限制，運營同學常常會上傳幾十張圖片（上圖中舊版頭圖上傳了24張），這個量級不僅沒有起到精準的價值信息傳遞，反而讓用戶在此區域停留時間過長，產生厭倦情緒。

同時，從技術的角度來講，過多的圖片產品性能受影響，產生加載和卡頓也影響用戶體驗。

改版后，重新制定了策略，根據7±2原則，做了最多9張的限制，如果是有顏色切換商品，那就每個顏色分別可以最多上傳9張，同時，建議運營同學上傳6-9張為宜。

2. 圖標設計

頂部icon的優化，舊版三個icon加了黑色透明底，從設計的角度上來看，加肯定沒有不加更簡潔美觀。

加黑色背景，設計的初衷當然是為了適應雜亂信息，或在黑色背景下避免有撞色沖突。

其實，對于品牌電商來說，并不會像B2B電商平臺，商家自行上傳頭圖，圖片規范質量不可控。

對于，自營品牌電商上傳的頭圖完全可控，設計師制定設計規范，即可大概率避免撞色的情況。

再者，當用戶左右滑動頭圖時，用戶關注的是圖片信息，一般不會對上面的三個圖標有興趣，所以即便顏色沖突看不見也無關緊要，為了一個無關緊要的能力，影響視覺表現其實有點因小失大。

3. 視頻/圖片

“視頻”“圖片”按鈕切換的視覺改版，舊板與當時的淘寶也是如出一轍，根據新的設計語言，商品應該是最優展示，所以改掉突出的色塊設計，包括頭圖直播的圖標也是同樣的設計理念，色塊多了就會變得雜亂。

對于借鑒的理解：

淘寶、京東這樣的國民產品，當然要借鑒，但一定是借鑒他們產品的結構，他們培養出來的用戶習慣，他們的產品底層邏輯，UI的設計要避免同質化。

4. 3D展示

接下來借鑒一下主流產品的結構，一個商品可以3D展示，就能讓用戶很靈動的觀察到產品的更多細節，體驗會非常好，尤其對感性購買情緒用戶。

剛說到頭圖主打一個產品秀，所以產品的3D展示入口，一定是在頭圖上，這非常符合用戶的瀏覽商品邏輯，也是主流電商培養出來的用戶習慣。

行內的人都知道，產品3D展示的功能，非常花錢，若第三方開發，一般也是部署在人家的服務器上，按周期付費，一次性買斷很貴。

舊版的點擊數據非常低，不符合此功能的預期，等于是花了大價錢開發的功能，并沒有發揮出應有的價值。

5. 頭圖規范

頭圖產品的展示制定了設計規范，這樣能保證各種形狀產品展示，在視覺上都是相對一樣的大小。

6. 優惠/屬性模塊改版

風格上采用了卡片式設計語言，原因有兩點，當時較為流行，另外就是卡片式設計能夠節省頁面長度，同樣的內容，卡片式設計省空間。

7. 價格設計

價格改為黑色，設計的理念是頁面中出現的紅色元素，盡可能是優惠相關的信息，要給用戶打造這種心智，黑色的價格更為冷靜，等于削弱了營銷感。

8. 優惠入口設計

價格下面依舊是優惠信息匯總的入口，但是做了輕量化處理，比如去掉了色塊按鈕，標簽做統一樣式設計，并且只最多只展示三個優惠政策標簽，這樣次區域不會出現折行的復雜樣式。

產品名稱改為變動展示，比如在“已選”中選擇了其他規格參數，那價格與產品名稱的規格參數信息都會對應變化，這是舊版沒有的功能，是多數電商平臺都有的功能。

9. 排行榜/副標題

標題下方優先展示排行榜，若此品沒有排行榜，就配置一行副標題，且灰色字，這樣整體會有視覺層次。

舊版之所以看起來亂，一是排版問題，二是視覺層級沒拉開，導致整體看起來是一篇“小作文”。

排行榜設計理念：

自營品牌電商排行榜的作用，是讓用戶對商品產生價值感，用戶對產品有興趣恰好排名還高，這種客觀信息的傳遞，就會讓用戶產生價值感受，對于客觀正向、權威的價值信息，最能打動理性購買情緒用戶。

其實用戶點不點擊排行榜，對平臺來說不重要，從品牌電商來講，都是自家的孩子，都是寶，誰愿意讓別人看到自家孩子誰好誰差點呢。

而綜合類電商排行榜，一般要強化入口設計，引導用戶點擊，讓用戶做最優選擇，這樣不僅能提高了用戶選品的體驗，還能激勵商家做好產品，力爭好的名次。

設計很多時候的底層邏輯，來源于商業模式，盲目的借鑒，不思考設計邏輯，就會荒誕不經。

10. 按鈕位置調整

產品名稱的右側“分享”功能改為了“對比”，用戶對比產品，一定是基于當前產品，所以在產品名稱旁邊放置對比功能入口，合情合理。

新舊兩版雖都有對比功能，但因為入口位置設計不同，用戶的使用體驗差異就很不一樣，數據也會有較大的差距。

舊版的分享按鈕，在產品名稱旁邊也合理，但在頁面上方已有常駐的分享功能，重復出現的必要性不大，況且分享在上方已是一個通用認知，所以放置“對比”按鈕更具價值。

11. 圖標設計問題

說一下舊版“分享”圖標的設計問題，在一個不規則的區域，放一個不規則的圖標，就等于是亂上加亂，非常不美觀突兀。

產品名右側的空位，上方、左方、下方都是不規則的空間間距，這時在設計上，要不圖標顏色弱下來，要不強一點，要不設計的更整體，才能看起來融入的更好，更整體。

12. 活動小入口

下圖是活動入口的設計改版，此活動入口是，對應當前產品的優惠活動入口，點擊后跳轉活動頁。

活動即是優惠政策，所以新版加了紅色標簽，并且紅色標簽也能強調了活動屬性，舊版設計形式較弱，很難引起用戶的注意，歷史數據也不是很好。

13. 選購指南

先說結論，“選購指南”在產品站出現不合理。

當用戶進入一個產品的詳情頁，說明用戶的需求是明確的，同時用戶對當前商品也是有興趣的，所以這里出現“選購指南”的功能，與用戶此時的心境不貼切。

舉個例子，當用戶的需求是買一部手機，此時不知道想買哪款，這時應該給用戶提供“選購指南”，這種場景常出現在搜索結果頁。

比如用戶搜索“手機”，而不是精準的搜索某款手機，這種情況用戶大概率購買手機的目標是不清晰的，所以，此時的搜索結果頁應該出現“選購指南”功能。

14. 關鍵參數

關鍵參數模塊做了兩個關鍵的改版，一是增加了產品的上市時間，并且永遠在第一個，因為從客服的數據上來看，用戶問“這款產品什么時候上市的？”的頻率非常之高，所以用戶需要這個信息。

另外一個是增加了“更多參數”的點擊引導，因為在用戶調研中，很多用戶不知道這里是可以點擊跳轉的。

15. 已選/收貨方式

1）已選

已選模塊改版，增加了機型顏色及數量信息展示，這樣能進一步強化用戶對產品的了解，同時起到品宣的作用。

點擊此入口，鏈接的是購買流程頁面，所以視覺上加強引導也非常有必要。

當用戶在已選頁面，重新選擇參數后，頁面上方的價格及產品名稱聯動同步變化。

2）快遞配送

這里的改版做了很大的業務挑戰，主要是改變了下單、配送時間的表達方式。

舊版配送文案是這樣表達“明天14點前付款，預計4月21日送達”（當前時間14點），所以，付款周期是24小時，這樣就會給用戶發貨速度很慢的感覺，等于跟用戶說，“你明天這個時候下單也是一樣的時間到貨”。

因為付款周期長，用戶還會產生拖延下單的心理，最終就有可能導致訂單的流失。

修改后，根據當前時間，匹配物流業務，把下單提示時間控制在當前天。

• “現在下單，預計【今天】21:00前送達”（當日到訂單）
• “今天11點前下單，預計【明天】18:00前送達”（上午下單）
• “今天18點前下單，預計4月21日送達”（下午下單）

新版-調整后

“今天”“明天”到達，這樣的關鍵詞都是用戶的爽點，能吸引用戶下單，所以設計上要重點提醒，萬萬不可把“今天”“明天”的時間以“XX月XX日”呈現。

3）門店閃送

新版

閃送是一個新增的業務，業務特點就是塊，所以送達時間要精確到分鐘，文案信息一定是“現在下單，預計最快今日12:08送達”，主打一個快，因為用戶選擇閃送業務，就是選擇了配送速度。

4）到店自取

設計一個功能，首先搞清楚業務邏輯非常非常重要，“快遞發貨”“門店閃送”都是貨找人，而到店自提是人找貨，所以給用戶傳遞的文案信息肯定是不一樣的。

舊版

新版

舊版的名稱叫“門店”，新版改為“到店自提”，雖然兩者都是線上付款，線下提貨，但是“門店”這個標題就沒有表達清楚當前的業務屬性。

舊版雖然已定位了一個最近門店，但交互上還需要點擊到二級頁面，重新選擇門店，才可以進入支付流程，如果選擇的門店缺貨，那無法進入支付流程，且沒有任何提示，購物體驗很不友好。

新版外露的門店，一定是距離最優，且有貨的門店，同時用戶最關心的，門店具體位置，一定要完整露出，不要有省略號。

另外，給到PM的一個建議是，取消“庫存緊張”的標簽，有貨就是有貨，沒貨就是沒貨，品牌電商應該有一個更真誠的態度。

以上“快遞發貨”“門店閃送“”到店自提“，用戶下單可以三選一，后兩者與門店緊密結合，這就是滿足這次改版需求中，提到的助力新零售模式。

5）一個錯誤想法

在第一版的改版中，當時我滿腦子都想著如何助力新零售模式，所以在產品站中我試著增加了“附近小米之家”。

這個設計等于是給門店做了引流，從小米商城APP平臺來講，更希望用戶在上線下單，而不是把用戶引導進門店購物，所以這個設計不符合平臺的業務策略。

但是，因為新零售線上線下是一家，“附近小米之家”模塊不在產品站中出現，也應該在其他板塊里有所體現。

現在在“服務”Tab中有“小米之家”，這樣不僅能更好的為售后做好承接，也能起到對門店的宣傳。

16. 官方服務

官方服務的信息，能夠讓用戶產生信任感，能體現官方優勢，也是最能打動理性購物情緒用戶的信息。

其實官方商城有天然的信任屬性，來官方商城購物的用戶，很多就是圖個放心，圖個服務好，追求的就是一個保障和信任，所以設計上信任屬性著重去表現很合理。

新版增加了突出的logo標識，標簽也采用logo的外輪廓，用于強調品牌感，小米logo的外輪廓已經是小米商城的一個設計語言，目的就是建立用戶對小米商城的品牌認知度。

另外，整個區域可以點擊，但不引導用戶操作，原因就是都是一些常規信息，外露信息足以打造信任要求，沒必要引導用戶點擊，這一點也是與舊版有所差異。

17. 推薦搭購

推薦搭購是買主品的同時，搭購一些與主品有關聯的推薦品，這樣有時會有一些優惠政策。

新版的設計上主品與搭購品，在樣式上有所區分，這樣信息傳遞更高效合理，推薦搭配商品也是展示更多。

同時，新版還增加了主品的規格選擇，這樣用戶若在此模塊決定搭購商品，操作上更靈活，選擇規格后，可以直接看到最終的價格。

在價格展示上也有優化，總價也用黑色與首屏的價格顏色保持一致，優惠價格則使用紅色突出，這樣更加吸引用戶，同時符合整體的設計理念，即只要看到紅色就是優惠信息。

取消此處的購買大按鈕，數據表明極少有用戶在這里直接下單，原因就是這不符合用戶的操作習慣，所以這里只做搭購商品的選擇，然后統一在底部的按鈕進入結算流程。

18. 信任體系改版

在產品站中“評價”“問答“”測評“，三個模塊是最能打動用戶的客觀信息，客觀信息更能表現真實性，所以容易讓用戶產生信任情緒。

理性購買情緒用戶，一般線上購物會直奔評價區，看見好評數量高就會安心，看見差評就容易動搖。

19. 評價

舊版的設計形式是，米圈包含買家秀（評價），這種包含的設計形式，在我看來是一個錯誤的邏輯，用戶在此處很容易變得迷茫，不知道進哪個。

米圈包含評價的設計形式，會導致用戶有知行不一的操作，心里想的看評價，結果進入的是米圈。

在新版的設計中，去掉了此處的米圈入口，當點擊評價時，進入的就是米圈下的評價tab。

舊版的評價模塊名稱叫“買家秀”，這個詞其實是淘寶的基因，這極不符合小米商城的調性，所以在新版中，也改為了業內通用名稱“評價”。

當評價數字千位數時顯示（XXXX），萬位數時顯示（X萬+），這樣的展示邏輯，數字過長時，數字大小第一視覺感知也是明確的。

另外，評價信息增加“好評率”，這個也是本身就有的數據接口。

最后還有一個細節的增加，新版用戶評價信息的下方，增加了評價用戶購買產品的規格，根據人的從眾心理，能給用戶帶來快速做決策的能力。

20. 問答

問答的改版非常簡單，就是根據我們的設計語言“克制的”，做了去色處理，保證我們整個頁面的視覺邏輯，紅色都是優惠信息。

21. 評測

評測主要做了排版的調整，舊版評測名稱和用戶名稱，時常不能完全顯示，這樣就導致用戶對主題意思不明，就會降低用戶對評測視頻的點擊興趣。

22. 商品推薦

此模塊的作用是，比如在餐廳吃飯，不知道點什么菜，突然看到了旁邊海報上的推薦菜，這樣就為用戶做了引導，這種形式能提升用戶體驗。