前段時間筆者主導(dǎo)了網(wǎng)站 wap 端的商詳頁改版設(shè)計，這次終于騰出時間來好好分析總結(jié)下。雖然從這個項目中能夠獲得的經(jīng)驗遠(yuǎn)遠(yuǎn)低于我的預(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)化，達(dá)到以下兩個目標(biāo)：

全面修改商詳頁設(shè)計風(fēng)格，提升整體設(shè)計感，提升視覺層面的用戶體驗借此優(yōu)化商詳頁頁面加載性能，降低蹦失率，提高轉(zhuǎn)化Part3：目前現(xiàn)狀&解決方案

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

1、頂部banner和輪播指示器

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

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

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

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

如圖：

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

解決方案：

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

優(yōu)化草圖：

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

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

展示不直不雅觀，用戶選擇屬性需要操作兩步：點擊下拉列表——選中屬性，當(dāng)需要切換屬性時，又要重復(fù)操作兩個步驟，反復(fù)如此，操作成本實在太大；不符合移動端的用戶操作習(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)很可能放置位置不是固定的，并且我們是跨境電商，有很多幣種，遇到某個幣種導(dǎo)致價格太長，就不得不折行顯示了。所以常常導(dǎo)致“今天放在這個位置，明天就放到阿誰位置了”的位置。整體是混亂的。

如圖：

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

解決方案：

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

優(yōu)化草圖：

4、商品增減控件

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

如圖：

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

標(biāo)簽：鹽城 九江 烏魯木齊 林芝 東營