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

本文會從以下四個(gè)方面別離闡述：

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

商詳頁改版設(shè)計(jì)項(xiàng)目是運(yùn)營同學(xué)發(fā)起的，發(fā)起原因大致有以下三點(diǎn)，分述如下：

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

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

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

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

1、頂部banner和輪播指示器

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

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

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

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

如圖：

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

解決方案：

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

優(yōu)化草圖：

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

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

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

如圖：

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

解決方案：

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

優(yōu)化草圖：

3、標(biāo)簽位置

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

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

如圖：

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

解決方案：

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

優(yōu)化草圖：

4、商品增減控件

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

如圖：

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

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