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

前言

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

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

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

一、用戶篇-購(gòu)買情緒

人是情緒動(dòng)物，當(dāng)用戶購(gòu)買商品時(shí)，無(wú)論是在線下還是在線上，都會(huì)有不一樣的情緒行為，比如有時(shí)會(huì)特別爽快下單，有時(shí)又會(huì)猶猶豫豫沒(méi)有購(gòu)買沖動(dòng)，有時(shí)還會(huì)精挑細(xì)選花費(fèi)很長(zhǎng)時(shí)間最后決定先加入購(gòu)物車，這些都是購(gòu)買情緒。

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

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

1. 果斷購(gòu)買情緒

一般需求明確且強(qiáng)烈，亦是對(duì)品牌認(rèn)可，對(duì)產(chǎn)品信任，購(gòu)買過(guò)程中，看重關(guān)鍵要素需求，以目標(biāo)為導(dǎo)向。

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

場(chǎng)景再現(xiàn)：

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

2. 感性購(gòu)買情緒

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

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

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

場(chǎng)景再現(xiàn)：

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

3. 理性購(gòu)買情緒

一般來(lái)說(shuō)，用戶對(duì)于沒(méi)用過(guò)的品牌，不了解的產(chǎn)品，不熟悉的購(gòu)物平臺(tái)，通常是理性情緒，這是很自然的心理現(xiàn)象。

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

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

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

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

場(chǎng)景再現(xiàn)：

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

4. 小結(jié)

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

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

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

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

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

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

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

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

有官網(wǎng)之名，無(wú)官網(wǎng)之魂，購(gòu)物體驗(yàn)差。

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

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

3）線上線下融合

同價(jià)同促，通過(guò)門店自提，門店閃送，增加門店訂單量。

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

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

5）做好新品及自營(yíng)大促

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

6）承載手機(jī) x汽車

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

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

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

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

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

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

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

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

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

一個(gè)信息冗余的頁(yè)面，沒(méi)有品牌元素信息、也沒(méi)有表達(dá)自我的設(shè)計(jì)語(yǔ)言，注定會(huì)大大影響用戶的購(gòu)物體驗(yàn)，甚至還會(huì)拉低用戶對(duì)品牌的好感與信任。

以上是簡(jiǎn)單的做了幾個(gè)問(wèn)題分析，分析問(wèn)題，研究需求，是為了思考接下來(lái)的設(shè)計(jì)語(yǔ)言的制定。

2. 設(shè)計(jì)語(yǔ)言/原則

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

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

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

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

2）克制的

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

3）極致的

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

4）有品牌感知的

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

有了設(shè)計(jì)語(yǔ)言就有了設(shè)計(jì)風(fēng)格指導(dǎo)，這四條設(shè)計(jì)語(yǔ)言不僅僅是支持產(chǎn)品站的設(shè)計(jì)，而是貫通指導(dǎo)整個(gè)產(chǎn)品的設(shè)計(jì)。

三、競(jìng)品篇-認(rèn)識(shí)自己

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

1. 產(chǎn)品定位

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

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

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

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

從設(shè)計(jì)風(fēng)格上來(lái)看，綜合類電商設(shè)計(jì)，營(yíng)銷感強(qiáng)，注重?zé)狒[的氛圍渲染；品牌電商則設(shè)計(jì)更輕量，聚焦產(chǎn)品功能賣點(diǎn)，營(yíng)銷感較低。

2. 認(rèn)識(shí)自己-模塊分析

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

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

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

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

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

四、改版篇-案例解析

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

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

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

1. 頭圖改版

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

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

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

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

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

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

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

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

2. 圖標(biāo)設(shè)計(jì)

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

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

其實(shí)，對(duì)于品牌電商來(lái)說(shuō)，并不會(huì)像B2B電商平臺(tái)，商家自行上傳頭圖，圖片規(guī)范質(zhì)量不可控。

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

再者，當(dāng)用戶左右滑動(dòng)頭圖時(shí)，用戶關(guān)注的是圖片信息，一般不會(huì)對(duì)上面的三個(gè)圖標(biāo)有興趣，所以即便顏色沖突看不見(jiàn)也無(wú)關(guān)緊要，為了一個(gè)無(wú)關(guān)緊要的能力，影響視覺(jué)表現(xiàn)其實(shí)有點(diǎn)因小失大。

3. 視頻/圖片

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

對(duì)于借鑒的理解：

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

4. 3D展示

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

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

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

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

5. 頭圖規(guī)范

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

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

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

7. 價(jià)格設(shè)計(jì)

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

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

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

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

9. 排行榜/副標(biāo)題

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

舊版之所以看起來(lái)亂，一是排版問(wèn)題，二是視覺(jué)層級(jí)沒(méi)拉開，導(dǎo)致整體看起來(lái)是一篇“小作文”。

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

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

其實(shí)用戶點(diǎn)不點(diǎn)擊排行榜，對(duì)平臺(tái)來(lái)說(shuō)不重要，從品牌電商來(lái)講，都是自家的孩子，都是寶，誰(shuí)愿意讓別人看到自家孩子誰(shuí)好誰(shuí)差點(diǎn)呢。

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

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

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

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

新舊兩版雖都有對(duì)比功能，但因?yàn)槿肟谖恢迷O(shè)計(jì)不同，用戶的使用體驗(yàn)差異就很不一樣，數(shù)據(jù)也會(huì)有較大的差距。

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

11. 圖標(biāo)設(shè)計(jì)問(wèn)題

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

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

12. 活動(dòng)小入口

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

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

13. 選購(gòu)指南

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

當(dāng)用戶進(jìn)入一個(gè)產(chǎn)品的詳情頁(yè)，說(shuō)明用戶的需求是明確的，同時(shí)用戶對(duì)當(dāng)前商品也是有興趣的，所以這里出現(xiàn)“選購(gòu)指南”的功能，與用戶此時(shí)的心境不貼切。

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

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

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

關(guān)鍵參數(shù)模塊做了兩個(gè)關(guān)鍵的改版，一是增加了產(chǎn)品的上市時(shí)間，并且永遠(yuǎn)在第一個(gè)，因?yàn)閺目头臄?shù)據(jù)上來(lái)看，用戶問(wèn)“這款產(chǎn)品什么時(shí)候上市的？”的頻率非常之高，所以用戶需要這個(gè)信息。

另外一個(gè)是增加了“更多參數(shù)”的點(diǎn)擊引導(dǎo)，因?yàn)樵谟脩粽{(diào)研中，很多用戶不知道這里是可以點(diǎn)擊跳轉(zhuǎn)的。

15. 已選/收貨方式

1）已選

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

點(diǎn)擊此入口，鏈接的是購(gòu)買流程頁(yè)面，所以視覺(jué)上加強(qiáng)引導(dǎo)也非常有必要。

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

2）快遞配送

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

舊版配送文案是這樣表達(dá)“明天14點(diǎn)前付款，預(yù)計(jì)4月21日送達(dá)”（當(dāng)前時(shí)間14點(diǎn)），所以，付款周期是24小時(shí)，這樣就會(huì)給用戶發(fā)貨速度很慢的感覺(jué)，等于跟用戶說(shuō)，“你明天這個(gè)時(shí)候下單也是一樣的時(shí)間到貨”。

因?yàn)楦犊钪芷陂L(zhǎng)，用戶還會(huì)產(chǎn)生拖延下單的心理，最終就有可能導(dǎo)致訂單的流失。

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

• “現(xiàn)在下單，預(yù)計(jì)【今天】21:00前送達(dá)”（當(dāng)日到訂單）
• “今天11點(diǎn)前下單，預(yù)計(jì)【明天】18:00前送達(dá)”（上午下單）
• “今天18點(diǎn)前下單，預(yù)計(jì)4月21日送達(dá)”（下午下單）

新版-調(diào)整后

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

3）門店閃送

新版

閃送是一個(gè)新增的業(yè)務(wù)，業(yè)務(wù)特點(diǎn)就是塊，所以送達(dá)時(shí)間要精確到分鐘，文案信息一定是“現(xiàn)在下單，預(yù)計(jì)最快今日12:08送達(dá)”，主打一個(gè)快，因?yàn)橛脩暨x擇閃送業(yè)務(wù)，就是選擇了配送速度。

4）到店自取

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

舊版

新版

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

舊版雖然已定位了一個(gè)最近門店，但交互上還需要點(diǎn)擊到二級(jí)頁(yè)面，重新選擇門店，才可以進(jìn)入支付流程，如果選擇的門店缺貨，那無(wú)法進(jìn)入支付流程，且沒(méi)有任何提示，購(gòu)物體驗(yàn)很不友好。

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

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

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

5）一個(gè)錯(cuò)誤想法

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

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

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

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

16. 官方服務(wù)

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

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

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

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

17. 推薦搭購(gòu)

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

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

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

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

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

18. 信任體系改版

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

理性購(gòu)買情緒用戶，一般線上購(gòu)物會(huì)直奔評(píng)價(jià)區(qū)，看見(jiàn)好評(píng)數(shù)量高就會(huì)安心，看見(jiàn)差評(píng)就容易動(dòng)搖。

19. 評(píng)價(jià)

舊版的設(shè)計(jì)形式是，米圈包含買家秀（評(píng)價(jià)），這種包含的設(shè)計(jì)形式，在我看來(lái)是一個(gè)錯(cuò)誤的邏輯，用戶在此處很容易變得迷茫，不知道進(jìn)哪個(gè)。

米圈包含評(píng)價(jià)的設(shè)計(jì)形式，會(huì)導(dǎo)致用戶有知行不一的操作，心里想的看評(píng)價(jià)，結(jié)果進(jìn)入的是米圈。

在新版的設(shè)計(jì)中，去掉了此處的米圈入口，當(dāng)點(diǎn)擊評(píng)價(jià)時(shí)，進(jìn)入的就是米圈下的評(píng)價(jià)tab。

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

當(dāng)評(píng)價(jià)數(shù)字千位數(shù)時(shí)顯示（XXXX），萬(wàn)位數(shù)時(shí)顯示（X萬(wàn)+），這樣的展示邏輯，數(shù)字過(guò)長(zhǎng)時(shí)，數(shù)字大小第一視覺(jué)感知也是明確的。

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

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

20. 問(wèn)答

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

21. 評(píng)測(cè)

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

22. 商品推薦

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

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

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

23. 底部導(dǎo)航按鈕

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

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

過(guò)程稿解析：

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

“購(gòu)物車”改為“購(gòu)物袋”：

我之所以想改為“購(gòu)物袋”，原因是分析小米之家的購(gòu)物場(chǎng)景，在小米之家購(gòu)物時(shí)，沒(méi)人會(huì)推著購(gòu)物車買東西，購(gòu)物車只有在超市購(gòu)物才會(huì)用到，所以購(gòu)物袋心智更符合小米之家的購(gòu)物場(chǎng)景。

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

雖然我堅(jiān)持想用“購(gòu)物袋”但是奈何我推不動(dòng)，阻力太大，他們的觀點(diǎn)是，主流電商都叫“購(gòu)物車”所以不出錯(cuò)，我也是認(rèn)同了。

圓角矩形按鈕：

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

設(shè)計(jì)之初我也能預(yù)料到，改按鈕形狀的難度，因?yàn)樾∶咨坛侵暗脑O(shè)計(jì)語(yǔ)言都是圓角按鈕，一個(gè)產(chǎn)品中可能有上百個(gè)圓角按鈕，要換都得統(tǒng)一換，難度非常大，所以，最后還是采用圓角按鈕。

“立即購(gòu)買”改為“購(gòu)買”：

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

三者雖然最終都沒(méi)有落地通過(guò)，但有部分人認(rèn)同這三點(diǎn)的改版，我覺(jué)得努力就沒(méi)有白費(fèi)。

終稿整體效果

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