前段時間筆者主導(dǎo)了網(wǎng)站 wap 端的商詳頁改版設(shè)計，這次終于騰出時間來好好分析總結(jié)下。雖然從這個項目中能夠獲得的經(jīng)驗遠遠低于我的預(yù)期，但這個小項目多少也融入了筆者很多思考，當(dāng)然其中有很多不足，在這里一并分享給大家，相互學(xué)習(xí)。

本文會從以下四個方面分別闡述：

• Part1：項目背景
• Part2：項目目標(biāo)
• Part3：目前現(xiàn)狀&解決方案
• Part4：遇到的坑

Part1：項目背景

商詳頁改版設(shè)計項目是運營同學(xué)發(fā)起的，發(fā)起原因大致有以下三點，分述如下：

• 商詳頁整體設(shè)計感差，樣式排版混亂
• 商詳頁蹦失率太高，轉(zhuǎn)化低
• 目前只有“加入購物車”流程，希望增加“立即購買”流程，給用戶更多選擇

Part2：項目目標(biāo)

運營同學(xué)希望通過本次改版優(yōu)化，達到以下兩個目標(biāo)：

• 全面修改商詳頁設(shè)計風(fēng)格，提升整體設(shè)計感，提升視覺層面的用戶體驗
• 借此優(yōu)化商詳頁頁面加載性能，降低蹦失率，提高轉(zhuǎn)化

Part3：目前現(xiàn)狀&解決方案

經(jīng)過筆者分析，目前商詳頁存在的問題諸多，主要表現(xiàn)在以下幾個方面，并針對每個問題提出了自己的解決方案，分述如下：

1、頂部banner和輪播指示器

商詳頁決定著用戶是否愿意將商品加入購物車，以及在多長時間內(nèi)做出加車購買決策。

由于受限于手機屏幕尺寸，一屏內(nèi)能呈現(xiàn)的內(nèi)容極其有限，頂部banner的展示占據(jù)了較大問題。banner的展示我相信運營有自己的考慮，更多是希望在商詳頁向其他頁面（如活動頁、專題頁）引流。

可是有沒有想過，商詳頁最重要的任務(wù)在于讓用戶盡快加車，提高“商詳頁的轉(zhuǎn)化”，把用戶引流到其他頁面去，我實在無法理解這是為什么。

另外，就是輪播指示器目前是放在圖片之上的，這個也是要占空間的。

如圖：

因此，針對以上問題，我做了如下優(yōu)化。

解決方案：

1. 建議直接去掉banner；或者對商品類型進行分類管理，針對不同類型的商品進行差異化運營——比如熱賣sku不加banner，銷量平平的sku可以加banner（不一定對，我只是隨便舉個栗子）；
2. 將輪播指示器放到圖片上去，節(jié)省空間。

優(yōu)化草圖：

2、銷售屬性（主要指尺寸和顏色兩種屬性）

目前尺寸和顏色兩種屬性的選擇都采用的是「下拉列表式」的設(shè)計方式，我能想到的弊端在于：

1. 展示不直觀，用戶選擇屬性需要操作兩步：點擊下拉列表——選中屬性，當(dāng)需要切換屬性時，又要重復(fù)操作兩個步驟，反復(fù)如此，操作成本實在太大；
2. 不符合移動端的用戶操作習(xí)慣，用戶在移動端操作更喜歡「標(biāo)簽式」or「點選式」的設(shè)計。

如圖：

因此，針對這個問題，我做了如下優(yōu)化。

解決方案：

針對這個問題，我采用了直觀清晰的平鋪的「點選式」設(shè)計方案，即將尺寸和顏色屬性設(shè)計成按鈕，全部一 一平鋪展示出來，清晰可見，點擊即選中，一方面更符合用戶操作習(xí)慣，改善了用戶體驗，同時也符合「所見即所得」的設(shè)計原則。

優(yōu)化草圖：

3、標(biāo)簽位置

目前由于各種促銷活動、商品本身屬性和類型等各種原因，會將商品在商詳頁打上各種標(biāo)簽，以示說明。對于庫存標(biāo)、熱銷標(biāo)和促銷時間標(biāo)等更是起到一個反饋商品熱銷情況，引導(dǎo)用戶快快下單的效果。

但是由于未形成比較規(guī)范的標(biāo)準(zhǔn)，這些標(biāo)很可能放置位置不是固定的，而且我們是跨境電商，有很多幣種，遇到某個幣種導(dǎo)致價格太長，就不得不折行顯示了。所以常常導(dǎo)致“今天放在這個位置，明天就放到那個位置了”的位置。整體是混亂的。

如圖：

因此，針對這個問題，我做了如下優(yōu)化。

解決方案：

1. 對于促銷標(biāo)，只能放到價格這一行（位于價格后面）；
2. 對于促銷時間標(biāo)，放到價格下方，并與“免郵標(biāo)”放到同一行。

優(yōu)化草圖：

4、商品增減控件

商品增減控件存在兩個問題，一個是樣式丑，控件樣式大，占空間；一個是當(dāng)商品數(shù)量為1時，「-」控件沒有做類似置灰這樣的處理，導(dǎo)致用戶常常點擊卻沒反應(yīng)。這是明顯違反「實時反饋交互效果」原則的。

如圖：

因此，針對這個問題，我做了如下優(yōu)化。

解決方案：

1. 優(yōu)化控件大小和樣式，看起來更協(xié)調(diào)
2. 因為商品數(shù)量最小極限值是1，不允許選擇0。所以當(dāng)數(shù)量為1時，必須做相應(yīng)處理，提示用戶不可以點擊「-」刪減商品。我采用的是置灰「-」控件的方案。據(jù)筆者觀察，大部分電商平臺都是這樣處理的，不過筆者也曾見過直接隱藏「-」的做法。

優(yōu)化草圖：

5、立即購買按鈕

目前只有“加入購物車”按鈕，沒有“立即購買”按鈕。尤其體驗爛的地方在于，商品加入購物車沒有任何提示與反饋，用戶根本不知道自己是否成功加入了商品。

因此，針對這個問題，我做了如下優(yōu)化。

解決方案：

1. 增加“立即購買”按鈕，給用戶提供雙重選擇。對于購買意向特別強，買完即走的用戶，可能更傾向于直接點擊“立即購買”，快速跳轉(zhuǎn)購物車頁面完成下單行為；而對于購買意向不是很強烈，或買了還想買的用戶而言，他們其實并不希望加入一個商品就立即跳轉(zhuǎn)到購物車頁面，這樣如果他們還要瀏覽購買其他商品的話，必須得返回原頁面或其他頁面，增加操作成本，體驗并不好。
2. 就“加入購物車”這一步驟，我增加了實時反饋的交互效果——即加入購物車的同時，頁面快速拉到頂部，mini購物車下拉展示剛才加入的商品流卡片信息，停留 5 秒后自動收起，同時該卡片上突出強調(diào)展示“查看購物車”按鈕，這一設(shè)計細節(jié)也是為了引導(dǎo)一部分用戶進入購物車，以最短時間完成下單，卻又不想“立即購買”流程一樣顯得強硬和突兀，更加如何用戶心理預(yù)期。

功能草圖：

6、立即購買按鈕、加車按鈕、收藏按鈕、活動按鈕的權(quán)重設(shè)計

首先咱們先說加車按鈕、收藏按鈕和活動按鈕，因為這是目前已經(jīng)有的三個按鈕。從我對業(yè)務(wù)的理解來看，加車按鈕的優(yōu)先級應(yīng)該是最高的，其次是收藏按鈕，最后才是活動按鈕。

可是從目前的處理方式來看，表現(xiàn)為“活動按鈕>加車按鈕>收藏按鈕”的優(yōu)先級順序。原因如下：

1. 活動按鈕雖然用的是邊框按鈕，面積卻最大，站了整個屏幕寬度；
2. 加車按鈕與收藏按鈕放在同一行，但加車按鈕是放在左邊的。根據(jù)用戶操作習(xí)慣，加車按鈕應(yīng)該放在右邊吧。當(dāng)然，這個我沒有確切依據(jù)，不知道老外是不是跟我們一樣的使用習(xí)慣。

除此之外，新增的“立即購買”按鈕優(yōu)先級應(yīng)該最高。

如圖：

因此，針對以上問題，我做了如下優(yōu)化。

解決方案：

1. 立即購買按鈕權(quán)重最大，優(yōu)先級最高，所以放在第一位，用網(wǎng)站主色調(diào)玫紅色，重點突出
2. 加入購物車優(yōu)先級略低于立即購買，但是也很高，所以放在緊靠著立即購買按鈕的下方，用邊框+玫紅色
3. 收藏按鈕與活動按鈕優(yōu)先級差不多，并低于上兩個按鈕，所以用了小按鈕，并將按鈕和字體顏色均弱化

優(yōu)化草圖：

7、第三方社會化分享平臺icon

網(wǎng)站的按鈕和 icon 樣式基本都是圓角的，這些第三方平臺的 icon 卻用的是正方形，我是真覺得丑——沒有修改依據(jù)，真的是單純的覺得丑，又顯得突兀。

如圖：

因此，針對這個問題，我做了如下優(yōu)化。

解決方案：

讓前端修改了樣式，改成了圓形icon——第三方平臺的 icon 樣式都可以改，但是沒法按照我們的想法隨意調(diào)整 icon 之間的間距。

優(yōu)化草圖：

8、商品描述、尺碼表和模特信息等內(nèi)容的展示方式

目前這三部分內(nèi)容采用的是類似 Tab 式的切換方式，跟 web 端的方式一模一樣。個人也是覺得不符合用戶習(xí)慣的。有兩個理由：

1. 當(dāng)用戶瀏覽商品描述時，看完這部分內(nèi)容如果還要看尺碼表或模特信息，他還需要往上拉動頁面；
2. 可擴展性差。模特信息不是固定的，也就是說有的商品有模特信息，有的商品是沒有的。當(dāng)沒有模特信息時，那么這一塊就是缺失的，大大降低了頁面視覺體驗；當(dāng)需要增加內(nèi)容時，這塊是完全沒法擴展的，不可能做成左右滑動展示的標(biāo)簽。所以你可以看到同屬于一個層級的“評論”只能設(shè)計成列表式的了。

如圖：

因此，針對以上問題，我做了如下優(yōu)化。

解決方案：

全部用類似 App 端的列表式方式，與“評論”統(tǒng)一起來。預(yù)期目的是為了優(yōu)化展示方式，使之更符合用戶操作習(xí)慣；可擴展性強。

優(yōu)化草圖：

9、推薦商品模塊

這一塊沒啥好說的，主要有一個問題是，關(guān)聯(lián)推薦跟上面的內(nèi)容不是同一個層級的，它是一個單獨的模塊，但是卻在設(shè)計上沒有做任何區(qū)分。

如圖：

因此，針對這個問題，我做了如下優(yōu)化。

解決方案：

將關(guān)聯(lián)推薦單獨作為一個模塊展示，與上面的內(nèi)容進行明確區(qū)分。

優(yōu)化草圖：

Part4：遇到的坑

坑1

首先在這里要感謝一下運營同學(xué)，提供的一些切切實實存在的問題以及建議，在這里表示感謝。這也是以上解決方案的一大重要思路源泉。

但是，由于我司的運營同學(xué)權(quán)力實在太大了，對產(chǎn)品設(shè)計細節(jié)干涉太多，而我勸說無果，最終慘敗。

比如顏色屬性這塊內(nèi)容。

本來我的設(shè)計方案是這樣的：

但是，運營同學(xué)非要照著其他網(wǎng)站來，將顏色屬性設(shè)計成縮略圖的形式。于是，我調(diào)整了一下，變成了運營想要的。

然后，運營同學(xué)又跟我說：偉哥啊，手機屏幕太小了，一屏展示的內(nèi)容不夠，要拉到第2屏才能看到加車按鈕這些，由于咱們有的 sku 屬性比較多，要不你一行再多放一個顏色吧。

我問：為什么？

 

她說：能多放一個是一個嘛。

我說：要是屬性太多，可以優(yōu)先默認展示幾個屬性，多余的折疊起來，點擊更多再展開就好了。

 

她說：不行，要全部展示出來。

嗯，好。你說了算。你開心就好。

于是，最后變成了這個鬼樣子。

坑2

因為公司基本上不做數(shù)據(jù)埋點，也沒幾個人有埋點的意識。我曾經(jīng)很多次推動要做數(shù)據(jù)埋點，然而人微言輕，相關(guān)合作方根本不把我的話放在眼里，覺得這個一點都不重要。

當(dāng)然，或許只是因為能力有限，真的不會做吧。

很顯然，這個改版項目必然也是沒做埋點的。因此，改版效果到底好不好，我也不知道（攤手無奈.TPG）

說在最后

說了這么多，其實這些優(yōu)化的方案沒有一點是有足夠的數(shù)據(jù)，或者用戶反饋，或者根據(jù)用戶調(diào)研的結(jié)論來支撐我的觀點的。

大部分都是憑著自己對電商的一點了解，對用戶的一點淺顯理解yy出來的需求和方案，認為這可能就是用戶所需要的，認為我這樣做就能提升用戶體驗。

我想要去做更多有理有據(jù)的事情，可是目前的情況無法支撐我做這些。所以我只能隨意yy。

一方面老板最大，必須要聽老板的，不然沒飯吃。

另一方面，運營同學(xué)權(quán)力太大，也要聽她們的，不然自己不開心。

那既然這樣，都聽你們的咯。

當(dāng)然，這一切的一切也有自己專業(yè)度不夠，對業(yè)務(wù)理解不夠深的原因?！墒牵嚓P(guān)需求方就真的比我更了解業(yè)務(wù)嗎，恐怕也未必。可能我這樣想就又寬心了一點。

我想，這也是很多產(chǎn)品經(jīng)理朋友在工作中經(jīng)常遇到的坑，甚至可能是常態(tài)。

但是，但是，不管怎么說，讓自己強大牛逼起來，用經(jīng)驗和專業(yè)說服需求方接受自己的方案，這個任何時候都是非常重要的。

項目完成一個月了，這次把項目經(jīng)歷分享出來，談不上經(jīng)驗，就當(dāng)是交流學(xué)習(xí)吧。當(dāng)然，最后這段話當(dāng)是和大家吐槽與共勉。

最后的最后，分享一下筆者做的這個項目的需求文檔。沒有那么多條條框框。

相關(guān)閱讀

電商網(wǎng)站設(shè)計系列（1）：購物車營銷功能的設(shè)計思考

電商網(wǎng)站設(shè)計系列（2）——購物車是否前置登錄流程思考

作者：卿宗偉，一名法學(xué)專業(yè)畢業(yè)的產(chǎn)品經(jīng)理。專注于探索電商和移動社交領(lǐng)域的產(chǎn)品設(shè)計與用戶體驗。筆名：#十三#，主業(yè)扯犢子，副業(yè)聊騷。微信公眾號：#卿宗偉#

本文由 @卿宗偉 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。