前段時間筆者主導了網站 wap 端的商詳頁改版設計，這次終于騰出時間來好好分析總結下。雖然從這個項目中能夠獲得的經驗遠遠低于我的預期，但這個小項目多少也融入了筆者很多思考，當然其中有很多不足，在這里一并分享給大家，彼此學習。

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

Part1：項目配景Part2：項目目標Part3：目前現狀&解決方案Part4：遇到的坑Part1：項目配景

商詳頁改版設計項目是運營同學發起的，發起原因大致有以下三點，分述如下：

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

運營同學希望通過本次改版優化，達到以下兩個目標：

全面修改商詳頁設計風格，提升整體設計感，提升視覺層面的用戶體驗借此優化商詳頁頁面加載性能，降低蹦失率，提高轉化Part3：目前現狀&解決方案

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

1、頂部banner和輪播指示器

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

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

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

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

如圖：

因此，針對以上問題，我做了如下優化。

解決方案：

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

優化草圖：

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

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

展示不直不雅觀，用戶選擇屬性需要操作兩步：點擊下拉列表——選中屬性，當需要切換屬性時，又要重復操作兩個步驟，反復如此，操作成本實在太大；不符合移動端的用戶操作習慣，用戶在移動端操作更喜歡「標簽式」or「點選式」的設計。

如圖：

因此，針對這個問題，我做了如下優化。

解決方案：

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

優化草圖：

3、標簽位置

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

但是由于未形成比較規范的尺度，這些標很可能放置位置不是固定的，并且我們是跨境電商，有很多幣種，遇到某個幣種導致價格太長，就不得不折行顯示了。所以常常導致“今天放在這個位置，明天就放到阿誰位置了”的位置。整體是混亂的。

如圖：

因此，針對這個問題，我做了如下優化。

解決方案：

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

優化草圖：

4、商品增減控件

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

如圖：

因此，針對這個問題，我做了如下優化。

標簽：鹽城 九江 烏魯木齊 林芝 東營