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

前言

電商產(chǎn)品最重要的兩個(gè)板塊，一是首頁(yè)，負(fù)責(zé)流量分發(fā)；二是產(chǎn)品站，也叫產(chǎn)品詳情頁(yè)，負(fù)責(zé)銷(xiāo)售轉(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è)方面：用戶(hù)篇-需求篇-競(jìng)品篇-改版篇，每個(gè)環(huán)節(jié)循序漸進(jìn)，層層環(huán)扣，本文盡可能把改版的底層邏輯說(shuō)明白，講透徹。

一、用戶(hù)篇-購(gòu)買(mǎi)情緒

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

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

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

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

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

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

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

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

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

感性購(gòu)買(mǎi)情緒也容易果斷下單，但下單的動(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)感性情緒用戶(hù)，從UI設(shè)計(jì)上來(lái)講，要保證高質(zhì)量且好看的產(chǎn)品圖，全方位展示產(chǎn)品的細(xì)節(jié)、產(chǎn)品的使用場(chǎng)景圖、感性的文案、規(guī)范的頁(yè)面設(shè)計(jì)等等。

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

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

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

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

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

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

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

所以在產(chǎn)品設(shè)計(jì)上，能夠快速有效讓用戶(hù)對(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)理念等，這些都是助力理性情緒用戶(hù)下單的條件。

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

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

4. 小結(jié)

每個(gè)人都會(huì)存在這三種購(gòu)買(mǎi)情緒，所以在設(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)題，其次要做用戶(hù)調(diào)研，過(guò)往數(shù)據(jù)研究并具體分析，競(jìng)品分析等等。

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

這些內(nèi)容是最具價(jià)值的需求和問(wèn)題總結(jié)，“需求”是公司的發(fā)展戰(zhàn)略，“問(wèn)題”是近幾年的用戶(hù)反饋積累，所以這次產(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)品賣(mài)點(diǎn)瀏覽效率低，不容易高效對(duì)比同類(lèi)產(chǎn)品。

3）線(xiàn)上線(xiàn)下融合

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

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

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

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

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

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

一體化銷(xiāo)售服務(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)品的定位，甚至客服的話(huà)術(shù)也是如此，比如小米商城的客服也跟用戶(hù)說(shuō)“親”，那就很難形成自我品牌定位的認(rèn)知。

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

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

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

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

一個(gè)信息冗余的頁(yè)面，沒(méi)有品牌元素信息、也沒(méi)有表達(dá)自我的設(shè)計(jì)語(yǔ)言，注定會(huì)大大影響用戶(hù)的購(gòu)物體驗(yàn)，甚至還會(huì)拉低用戶(hù)對(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)銷(xiāo)信息合理展示。

2）克制的

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

3）極致的

以用戶(hù)語(yǔ)言，打造產(chǎn)品細(xì)節(jié)，打磨用戶(hù)體驗(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ì)改版前，主線(xiàn)是研究自家的產(chǎn)品，次線(xiàn)是對(duì)競(jìng)品有充分的了解，知己知彼，才能更好進(jìn)行自己的設(shè)計(jì)。

1. 產(chǎn)品定位

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

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

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

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

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

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

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

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

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

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

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

四、改版篇-案例解析

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

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

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

1. 頭圖改版

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

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

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

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

交互邏輯是，當(dāng)用戶(hù)選中一個(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à)值信息傳遞，反而讓用戶(hù)在此區(qū)域停留時(shí)間過(guò)長(zhǎng)，產(chǎn)生厭倦情緒。

同時(shí)，從技術(shù)的角度來(lái)講，過(guò)多的圖片產(chǎn)品性能受影響，產(chǎn)生加載和卡頓也影響用戶(hù)體驗(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)用戶(hù)左右滑動(dòng)頭圖時(shí)，用戶(hù)關(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)的用戶(hù)習(xí)慣，他們的產(chǎn)品底層邏輯，UI的設(shè)計(jì)要避免同質(zhì)化。

4. 3D展示

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

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

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

舊版的點(diǎn)擊數(shù)據(jù)非常低，不符合此功能的預(yù)期，等于是花了大價(jià)錢(qián)開(kāi)發(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)的信息，要給用戶(hù)打造這種心智，黑色的價(jià)格更為冷靜，等于削弱了營(yíng)銷(xiāo)感。

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)品名稱(chēng)改為變動(dòng)展示，比如在“已選”中選擇了其他規(guī)格參數(shù)，那價(jià)格與產(chǎn)品名稱(chēng)的規(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)拉開(kāi)，導(dǎo)致整體看起來(lái)是一篇“小作文”。

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

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

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

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

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

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

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

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

舊版的分享按鈕，在產(chǎn)品名稱(chēng)旁邊也合理，但在頁(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ì)形式較弱，很難引起用戶(hù)的注意，歷史數(shù)據(jù)也不是很好。

13. 選購(gòu)指南

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

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

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

比如用戶(hù)搜索“手機(jī)”，而不是精準(zhǔn)的搜索某款手機(jī)，這種情況用戶(hù)大概率購(gòu)買(mǎi)手機(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)看，用戶(hù)問(wèn)“這款產(chǎn)品什么時(shí)候上市的？”的頻率非常之高，所以用戶(hù)需要這個(gè)信息。

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

15. 已選/收貨方式

1）已選

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

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

當(dāng)用戶(hù)在已選頁(yè)面，重新選擇參數(shù)后，頁(yè)面上方的價(jià)格及產(chǎn)品名稱(chēng)聯(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ì)給用戶(hù)發(fā)貨速度很慢的感覺(jué)，等于跟用戶(hù)說(shuō)，“你明天這個(gè)時(shí)候下單也是一樣的時(shí)間到貨”。

因?yàn)楦犊钪芷陂L(zhǎng)，用戶(hù)還會(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)鍵詞都是用戶(hù)的爽點(diǎn)，能吸引用戶(hù)下單，所以設(shè)計(jì)上要重點(diǎn)提醒，萬(wàn)萬(wàn)不可把“今天”“明天”的時(shí)間以“XX月XX日”呈現(xiàn)。

3）門(mén)店閃送

新版

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

4）到店自取

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

舊版

新版

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

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

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

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

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

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

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

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

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

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

16. 官方服務(wù)

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

其實(shí)官方商城有天然的信任屬性，來(lái)官方商城購(gòu)物的用戶(hù)，很多就是圖個(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ǔ)言，目的就是建立用戶(hù)對(duì)小米商城的品牌認(rèn)知度。

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

17. 推薦搭購(gòu)

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

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

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

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

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

18. 信任體系改版

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

理性購(gòu)買(mǎi)情緒用戶(hù)，一般線(xiàn)上購(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ì)形式是，米圈包含買(mǎi)家秀（評(píng)價(jià)），這種包含的設(shè)計(jì)形式，在我看來(lái)是一個(gè)錯(cuò)誤的邏輯，用戶(hù)在此處很容易變得迷茫，不知道進(jìn)哪個(gè)。

米圈包含評(píng)價(jià)的設(shè)計(jì)形式，會(huì)導(dǎo)致用戶(hù)有知行不一的操作，心里想的看評(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à)模塊名稱(chēng)叫“買(mǎi)家秀”，這個(gè)詞其實(shí)是淘寶的基因，這極不符合小米商城的調(diào)性，所以在新版中，也改為了業(yè)內(nèi)通用名稱(chēng)“評(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é)的增加，新版用戶(hù)評(píng)價(jià)信息的下方，增加了評(píng)價(jià)用戶(hù)購(gòu)買(mǎi)產(chǎn)品的規(guī)格，根據(jù)人的從眾心理，能給用戶(hù)帶來(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è)名稱(chēng)和用戶(hù)名稱(chēng)，時(shí)常不能完全顯示，這樣就導(dǎo)致用戶(hù)對(duì)主題意思不明，就會(huì)降低用戶(hù)對(duì)評(píng)測(cè)視頻的點(diǎn)擊興趣。

22. 商品推薦

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