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

前言

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

前陣子跟大家分享了小米商城首頁設(shè)計改版，這次分享產(chǎn)品站，產(chǎn)品站的改版過程持續(xù)了多半年，踩了很多坑，總結(jié)了很多有價值的經(jīng)驗，接下來跟大家一并分享。

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

一、用戶篇-購買情緒

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

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

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

1. 果斷購買情緒

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

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

場景再現(xiàn)：

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

2. 感性購買情緒

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

打動感性情緒用戶，從UI設(shè)計上來講，要保證高質(zhì)量且好看的產(chǎn)品圖，全方位展示產(chǎn)品的細節(jié)、產(chǎn)品的使用場景圖、感性的文案、規(guī)范的頁面設(shè)計等等。

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

場景再現(xiàn)：

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

3. 理性購買情緒

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

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

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

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

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

場景再現(xiàn)：

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

4. 小結(jié)

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

二、需求篇-設(shè)計方向

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

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

這些內(nèi)容是最具價值的需求和問題總結(jié)，“需求”是公司的發(fā)展戰(zhàn)略，“問題”是近幾年的用戶反饋積累，所以這次產(chǎn)品站的改版目標非常明確。

1. 問題與需求總結(jié)

通過對需求和問題的總結(jié)，再結(jié)合各種調(diào)研和產(chǎn)品設(shè)計的思考，我們總結(jié)了六點改版的方向。

1）產(chǎn)品定位不清晰

有官網(wǎng)之名，無官網(wǎng)之魂，購物體驗差。

2）產(chǎn)品站信息亂，不易理解

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

3）線上線下融合

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

4）官網(wǎng)形象高端化

提升用戶體驗，服務(wù)體驗更貼心。

5）做好新品及自營大促

持續(xù)建立官網(wǎng)認知，將官網(wǎng)價值內(nèi)核轉(zhuǎn)化為用戶語言，通過關(guān)鍵節(jié)點傳遞，建立官網(wǎng)心智。

6）承載手機 x汽車

一體化銷售服務(wù)。

結(jié)合這六點總結(jié)，再依據(jù)品牌電商產(chǎn)品的定位，公司戰(zhàn)略，分析現(xiàn)有問題，思考設(shè)計解決方案，下面我們來研究幾個問題。

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

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

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

對于品牌電商來說，要有自我的品牌調(diào)性，這不僅是用戶認識你的基礎(chǔ)，更是品牌發(fā)揮優(yōu)勢的重要能力。

很多設(shè)計師認為，借鑒主流成熟產(chǎn)品的設(shè)計不容易出錯，有一定的道理，但是這不應(yīng)該是你思考的主線，主線是先找準自家產(chǎn)品的定位，其次才是如何結(jié)合主流產(chǎn)品優(yōu)點，打造自己的產(chǎn)品。

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

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

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

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

2. 設(shè)計語言/原則

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

根據(jù)小米商城品牌電商的產(chǎn)品定位，公司高端化戰(zhàn)略，再經(jīng)過一系列的研究和探索，最終總結(jié)制定4條產(chǎn)品設(shè)計語言/原則。

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

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

2）克制的

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

3）極致的

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

4）有品牌感知的

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

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

三、競品篇-認識自己

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

1. 產(chǎn)品定位

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

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

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

在UI設(shè)計上，不能過分強調(diào)利益點，不能過度刺激消費，應(yīng)聚焦商品本身，強調(diào)商品賣點，體現(xiàn)商品的本身價值、品牌價值。

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

2. 認識自己-模塊分析

認識自己遠比研究競品更重要（強東哥說過這話），我個人非常認同。接下來，我們?nèi)轿坏牟鸾庑∶咨坛钱a(chǎn)品站，同時進行模塊化分析。

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

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

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

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

四、改版篇-案例解析

在產(chǎn)品站改版的半年多時間里，中大概出了7-8版，一直在不斷的優(yōu)化調(diào)整，下面以最終稿來講解。

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

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

1. 頭圖改版

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

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

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

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

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

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

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

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

2. 圖標設(shè)計

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

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

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

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

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

3. 視頻/圖片

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

對于借鑒的理解：

淘寶、京東這樣的國民產(chǎn)品，當然要借鑒，但一定是借鑒他們產(chǎn)品的結(jié)構(gòu)，他們培養(yǎng)出來的用戶習慣，他們的產(chǎn)品底層邏輯，UI的設(shè)計要避免同質(zhì)化。

4. 3D展示

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

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

行內(nèi)的人都知道，產(chǎn)品3D展示的功能，非?；ㄥX，若第三方開發(fā)，一般也是部署在人家的服務(wù)器上，按周期付費，一次性買斷很貴。

舊版的點擊數(shù)據(jù)非常低，不符合此功能的預期，等于是花了大價錢開發(fā)的功能，并沒有發(fā)揮出應(yīng)有的價值。

5. 頭圖規(guī)范

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

6. 優(yōu)惠/屬性模塊改版

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

7. 價格設(shè)計

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

8. 優(yōu)惠入口設(shè)計

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

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

9. 排行榜/副標題

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

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

排行榜設(shè)計理念：

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

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

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

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

10. 按鈕位置調(diào)整

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

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

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

11. 圖標設(shè)計問題

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

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

12. 活動小入口

下圖是活動入口的設(shè)計改版，此活動入口是，對應(yīng)當前產(chǎn)品的優(yōu)惠活動入口，點擊后跳轉(zhuǎn)活動頁。

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

13. 選購指南

先說結(jié)論，“選購指南”在產(chǎn)品站出現(xiàn)不合理。

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

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

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

14. 關(guān)鍵參數(shù)

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

另外一個是增加了“更多參數(shù)”的點擊引導，因為在用戶調(diào)研中，很多用戶不知道這里是可以點擊跳轉(zhuǎn)的。

15. 已選/收貨方式

1）已選

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

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

當用戶在已選頁面，重新選擇參數(shù)后，頁面上方的價格及產(chǎn)品名稱聯(lián)動同步變化。

2）快遞配送

這里的改版做了很大的業(yè)務(wù)挑戰(zhàn)，主要是改變了下單、配送時間的表達方式。

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

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

修改后，根據(jù)當前時間，匹配物流業(yè)務(wù)，把下單提示時間控制在當前天。

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

新版-調(diào)整后

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

3）門店閃送

新版

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

4）到店自取

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

舊版

新版

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

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

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

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

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

5）一個錯誤想法

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

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

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

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

16. 官方服務(wù)

官方服務(wù)的信息，能夠讓用戶產(chǎn)生信任感，能體現(xiàn)官方優(yōu)勢，也是最能打動理性購物情緒用戶的信息。

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

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

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

17. 推薦搭購

推薦搭購是買主品的同時，搭購一些與主品有關(guān)聯(lián)的推薦品，這樣有時會有一些優(yōu)惠政策。

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

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

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

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

18. 信任體系改版

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

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

19. 評價

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

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

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

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

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

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

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

20. 問答

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

21. 評測

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

22. 商品推薦

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

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

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

23. 底部導航按鈕

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

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

過程稿解析：

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

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

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

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

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

圓角矩形按鈕：

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

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

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

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

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

終稿整體效果

最終設(shè)計完成，得到了大老板與業(yè)務(wù)方的肯定，下圖為產(chǎn)品站改版前后的對比。