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

前言

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

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

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

一、用戶篇-購買情緒

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

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

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

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展示的功能，非?；ㄥX，若第三方開發，一般也是部署在人家的服務器上，按周期付費，一次性買斷很貴。

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

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. 商品推薦

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

但是海報上的推薦菜太多，那又會增加用戶的選擇成本，所以新版的設計每幀給用戶推薦三個品，同樣可以側滑查看更多，同時也增加了所有推薦品的承接頁。

這樣的好處不僅節省了整個頁面的長度，也為不關心此模塊的用戶，提高了當前產品信息的瀏覽效率。

23. 底部導航按鈕

“加入購物車”與“立即購買”按鈕重新做了設計，與淘寶設計風格拉開差距，圖標做了加粗處理，視覺表現厚重敦實，會給人一種可靠安全感，這也是品牌電商需要的氣質。

另外，去掉了“收藏”功能，對于品牌電商來說，品類不多，也不存在店鋪的概念，所以對用戶來說，收藏的功能必要性不強，并且加入購物車功能完全滿足收藏的需求，事實也如此，數據上收藏的點擊率非常低。

過程稿解析：

上圖是最早的一版，有三個不同之處，“購物車”改為“購物袋”、按鈕改為圓角矩形、文案“立即購買”改為“購買”。

“購物車”改為“購物袋”：

我之所以想改為“購物袋”，原因是分析小米之家的購物場景，在小米之家購物時，沒人會推著購物車買東西，購物車只有在超市購物才會用到，所以購物袋心智更符合小米之家的購物場景。

再比如賣車的APP，也絕對不能有加入購物車、購物袋一說，現實中不符合邏輯呀，現實中買車都是訂購，所以線上用訂購就是對的。

雖然我堅持想用“購物袋”但是奈何我推不動，阻力太大，他們的觀點是，主流電商都叫“購物車”所以不出錯，我也是認同了。

圓角矩形按鈕：

我想用圓角矩形的原因是，圓角矩形穩重、嚴肅、圓角又不失親和力，外形與手機也相似，是小米商城應該有的氣質。

設計之初我也能預料到，改按鈕形狀的難度，因為小米商城之前的設計語言都是圓角按鈕，一個產品中可能有上百個圓角按鈕，要換都得統一換，難度非常大，所以，最后還是采用圓角按鈕。

“立即購買”改為“購買”：

“立即購買”的意思有營銷感，我依舊堅持品牌電商在常規的設計上，要去營銷化，去掉銷售心理學上的套路，誠實、真誠才是品牌電商應該有的調性，讓產品力干掉一切。

三者雖然最終都沒有落地通過，但有部分人認同這三點的改版，我覺得努力就沒有白費。

終稿整體效果

最終設計完成，得到了大老板與業務方的肯定，下圖為產品站改版前后的對比。