中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

Part1：項目背景

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

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

Part2：項目目標

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

• 全面修改商詳頁設計風格，提升整體設計感，提升視覺層面的用戶體驗
• 借此優化商詳頁頁面加載性能，降低蹦失率，提高轉化

Part3：目前現狀&解決方案

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

1、頂部banner和輪播指示器

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

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

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

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

如圖：

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

解決方案：

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

優化草圖：

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

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

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

如圖：

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

解決方案：

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

優化草圖：

3、標簽位置

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

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

如圖：

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

解決方案：

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

優化草圖：

4、商品增減控件

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

如圖：

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

解決方案：

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

優化草圖：

5、立即購買按鈕

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

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

解決方案：

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

功能草圖：

6、立即購買按鈕、加車按鈕、收藏按鈕、活動按鈕的權重設計

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

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

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

除此之外，新增的“立即購買”按鈕優先級應該最高。

如圖：

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

解決方案：

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

優化草圖：

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

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

如圖：

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

解決方案：

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

優化草圖：

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

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

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

如圖：

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

解決方案：

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

優化草圖：

9、推薦商品模塊

這一塊沒啥好說的，主要有一個問題是，關聯推薦跟上面的內容不是同一個層級的，它是一個單獨的模塊，但是卻在設計上沒有做任何區分。

如圖：

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

解決方案：

將關聯推薦單獨作為一個模塊展示，與上面的內容進行明確區分。

優化草圖：

Part4：遇到的坑

坑1

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

但是，由于我司的運營同學權力實在太大了，對產品設計細節干涉太多，而我勸說無果，最終慘敗。

比如顏色屬性這塊內容。

本來我的設計方案是這樣的：

但是，運營同學非要照著其他網站來，將顏色屬性設計成縮略圖的形式。于是，我調整了一下，變成了運營想要的。

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

我問：為什么？

 

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

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

 

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

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

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

坑2

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

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

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

說在最后

說了這么多，其實這些優化的方案沒有一點是有足夠的數據，或者用戶反饋，或者根據用戶調研的結論來支撐我的觀點的。

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

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

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

另一方面，運營同學權力太大，也要聽她們的，不然自己不開心。

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

當然，這一切的一切也有自己專業度不夠，對業務理解不夠深的原因。——可是，相關需求方就真的比我更了解業務嗎，恐怕也未必?？赡芪疫@樣想就又寬心了一點。

我想，這也是很多產品經理朋友在工作中經常遇到的坑，甚至可能是常態。

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

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

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

相關閱讀

電商網站設計系列（1）：購物車營銷功能的設計思考

電商網站設計系列（2）——購物車是否前置登錄流程思考

作者：卿宗偉，一名法學專業畢業的產品經理。專注于探索電商和移動社交領域的產品設計與用戶體驗。筆名：#十三#，主業扯犢子，副業聊騷。微信公眾號：#卿宗偉#

本文由 @卿宗偉 原創發布于人人都是產品經理。未經許可，禁止轉載。