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

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

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

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

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

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

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

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

1、頂部banner和輪播指示器

商詳頁(yè)決定著用戶(hù)是否愿意將商品加入購(gòu)物車(chē)，以及在多長(zhǎng)時(shí)間內(nèi)做出加車(chē)購(gòu)買(mǎi)決策。

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

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

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

如圖：

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

解決方案：

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

優(yōu)化草圖：

2、銷(xiāo)售屬性（主要指尺寸和顏色兩種屬性）

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

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

如圖：

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

解決方案：

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

優(yōu)化草圖：

3、標(biāo)簽位置

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

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

如圖：

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

解決方案：

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

優(yōu)化草圖：

4、商品增減控件

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

如圖：

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

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