起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識垂直化內容電商頁面設計Tips
電商產品設計歷經集市時代的比拼價格，到腦部內容意見領袖引導階段，再到一種數據用戶A知道數據用戶B的需求，從而A用戶精準滿足B用戶的需求，與此對應的例子在海外比較明顯：比如亞馬遜的Wishlist，而這個階段的電商在國內還不明顯。因此本文主要總結國內腦部內容電商移動端設計Tips。
垂直化內容移動端設計不需要迎合所有人口味，但是一定要給針對性的用戶一個明確的暗示，“嘿，Girl,我是不同的”，這是產品設計的重點。
首先：從首頁第一視覺停留開始
首屏是第一視覺第一塊信息展示區域，適合設計成時尚和引領當下熱點潮流或者產品攝影圖等視覺沖擊力較強的圖片，和符合用戶知覺的文案，吸引用戶的注意力。第一視覺最好以大圖海報形式出現，而海報本身的設計是決定用戶是否點擊進入的關鍵，什么樣的內容容易吸引用戶呢？根據經驗有以下三個特點：特征一、以能夠喚起用戶共鳴的話題性圖文切入，引出用戶的知感。特征二、融入時下創意性的元素，展現垂直內容的不同視角。特征三、以彰顯個體為中心的關懷式設計，將用戶的視覺重點分為幾個小點，不同的內容能夠降低網頁的跳失率。
其次：垂直電商的移動端搜索設計
根據對APP搜索設計知覺負載理論的研究。每行2圖比每行4圖用戶搜索效率更高，因為簡單頁面布局用戶所需的認知加工負載較低，更利于進行模式識別及認知加工，因此搜索效率較高。第二點，淺色背景的導航界面設計的搜索效率相對較高，因為深色背景頁面的無關刺激會對用戶搜索產生干擾作用。
第三：精選內容頁面
會放置一些二級頁面的主推內容，快速便捷扼要的讓用戶了解到精選頁面都有些什么。同時首頁對移動端總結的能力越強，越有調理，越能快速的幫助用戶定位，了解移動端的主要內容。選擇內容越搶眼，越符合用戶的知感，越能吸引消費者繼續瀏覽的興趣。網絡購物和線下不同，用戶是通過一個個入口購買衣服，不管是平臺，還是垂直應用，商家都不可能同時將所有商品展現在用戶面前，只能選擇自己內容中已經被用戶感知認可過的，獲得銷量的商品，方能提高用戶進入本店繼續瀏覽的幾率，將最好的精選優先快速的推送給用戶，是增加轉化率的最佳產品設計手段。
對上述頁面的分析總結出以下幾點設計Tips
- Tips1: 垂直化移動端更強調用戶可以識別的統一風格
- Tips 2: 首頁內容就相當于一個人初次見面穿著打扮如何，從視覺上來說，也是影響別人對自己印象的關鍵，這就是網站的風格，風格設計好的移動端首頁能更好的體現移動端的各種功能內容，更能吸引瀏覽者的注意，提高首頁轉化率。
- Tips 3:讓內容層次感清晰,以垂直女裝移動端電商為例來說，首先，要讓用戶了解到，此處都是售賣具體某一類女裝的。比如：黑色的裙子，內衣專場，還是什么女性類目都有。
- Tips 4: 營銷模式是怎么樣的，是三級分銷，用戶分享，還是精美的場景化的圖文。
如何在多如牛毛的眾多移動端里突出，不僅要注重設計美學布局，更要懂得用戶的需求心里分析，垂直電商用戶一言不合就會翻到下個應用里去，所以短時間內做到有效，通俗易懂好操作是首要原則，削弱首頁的學習性，不盲目設計非常規的操作流程，降低教育用戶的成本，方能突出。
第四:垂直化移動端商品列表頁設計
進一步篩選出更加精準，只剩下符合用戶需求的款式，是商品列表頁最核心的使命。
商品列表頁設計Tips
- 一、保持信息簡明扼要，產品設計者應當深度研究用戶畫像，了解用戶在對比此商品時，哪些信息是必須關注的，哪些是其次，盡量將用戶最最需求的內容展現在這一頁，就可以減少點進去，再返回，再點開其他頁面，再返回通過跳轉頁面來回對比商品的麻煩現象。
- 二、界面布局設計做到操作更加順手，上文提到復雜和簡單頁面兩種布局，一種是一行2圖，一種是一行4圖，目的給予用戶方便的操作流程，先選擇大類目，再篩選具體的關鍵詞，再瀏覽商品，因此Tips是注意不要顛倒流程的先后順序，同時可以從精選、大家喜歡、顏色，大小，圖標等方面區分更精準。
話說商品詳情頁是用戶從首頁到進入商品詳情頁的第一環節，產品設計者最主要的是清晰用戶畫像，精準呈現用戶希望看到的內容。
第五:產品詳情頁
用戶需要對某一商品進一步了解時，點擊進入商品詳情頁面，該頁面包含了商品的全部必須信息。
此頁面為了崔進用戶點擊購買轉化率，除了包含商品主圖、購買說明，顏色選擇、尺碼選擇、數量選擇、價格、郵費、購買按鈕外，還應該加些感性介紹，例如：告知用戶這件衣服的穿著風格，和什么什么搭配、適合穿什么鞋，背什么包，適合什么場合等等，通過不同的思維路線，幫助消費者遠距離理解一件商品。同時設計的還有其他已購買用戶的評價，因為用戶的評價反饋更為真實和具有價值參考，這也是當下社群化電商之所以逐漸興起的原因。用戶是否愿意購買的關鍵在于產品的詳情頁。
最好還有商品的關聯推薦，里面是和本商品類似或者相搭配的商品，給用戶更多選擇機會，以傳達給用戶的感知是本站點商品豐富專業度高的信任背書。
商品詳情頁設計Tips：
產品設計者應再次深度了解產品內核要傳達出的用戶知感點。是美食、是內衣、是運動還是二手精選
展示圖不宜過大或過小，圖片的面積、數量形式方向要保持視覺的平衡，且要讓用戶哪怕是無意間觸發都會有種一切盡在自己控制之下的效果。
產品導航，用戶已經瀏覽路線較深，用戶越不知道自己在哪個界面，所以產品導航跟隨可以幫用戶定位，方便用戶才是用戶喜歡的設計。
商品詳情頁面不宜過長，用戶的耐心總是有限的，用戶消費總是感性的沖動的，所以設計長度適中的商品詳情頁，即讓用戶了解了商品關鍵一面，又不啰嗦，控制長度是用戶點擊 購買按鈕的關鍵。
第六：內容化購物頁板塊設計分析
內容化購物頁面，具有媒體屬性，是垂直導購網站最具有特色的板塊，內容多為時尚垂直資訊，即解析當下潮流的圖文，比如：普世化的價值觀的解析來攫取用戶的關注，通過分析某個垂直領域的用戶想要的內容，而用戶有沒想到的內容，內容產品設計者可以在此尋找到一個銜接點，告訴用戶去哪里吃美食，買什么樣的衣服，戴什么樣的配飾。
同商品列表以及商品詳情頁一樣，垂直化內容頁面設計也具有兩級頁面，一是所有媒體屬性的專題內容聚合頁面，一是某一專題內容詳細頁面
內容化列表頁面設計Tips：
- 一、首先區分不同的內容，大大小小的專題和資訊，和商品一樣，更加橫向縱向交叉分類，商品可以按照款式，價格，顏色等分類，資訊則是按照時間，關注熱度，以及資訊內容等，和商品不同的是，商品圖的構圖較為統一，而資訊的封面圖則參差不齊，很難想成統一視覺效果，因此關鍵點事將不同的資訊形成自己的區域，做好區分。例如：不同的內容的背景色有適當的變化，或者分為幾大塊兒，每塊相對獨立，但編排上有規劃感。
- 二：內容展示要有針對性和熱鬧性，內容應包含：標題、概述、封面圖、評論數、點贊數、以及瀏覽量，營造熱鬧的氛圍同時封面設計傳達文章主旨，以能引發好奇心或者用戶共鳴。
內容化詳情頁設計Tips:
從內容列表頁進入詳情頁之后，主要分為兩類，一類是類似微信訂閱號推送的圖文形式，另一類則是像時尚雜志的精致排版。前者主要適用新聞性屬性、內容介紹性、及對商品自身的價值及周邊價值的內容介紹為主，輔以商品屬性介紹。后者主要適用于模擬用戶生活場景、專題性，場景性購物推薦.
Tips ：產品設計者首先應細分內容，將不同的場景分成不同的專題，越細分，總結性越強，導購的作用越具有吸引力。
而且內容場景關聯路線要清晰，從設計上幫助用戶進行整理，降低用戶學習難度，能夠使用戶快速了解專題。
第七：品牌展示頁
羅列所有入住該站點的品牌，有利于增加站點的信任背書，
設計Tips：品牌頁一般根據品牌數量決定預覽形式，由多到少會選擇，品牌名稱預覽>品牌LOGO預覽>品牌簡介預覽的順序進行產品設計。數量較多的也可以選擇三種方式結合的方法，以熱門程度從高到低進行排列，目的是方便用戶篩選。
第八：產品設計的個人頁面部分
主要包含個人主頁、個人基本信息、個人收藏信息、關注、訂單交易記錄、社交記錄等版塊，此類頁面設計心得是做到理性和人性化，理性方面：當用戶決定購買，加入購物車或者選擇立即購買，因此購物車頁面，購買信息填寫頁面，付款頁面等，均屬于強調理性，功能化的頁面，但是來到個人中心頁面之前所瀏覽的商品，點贊過的商品，關注過的人等用戶的足跡要及時推送給用戶。因此在設計個人中心頁面時，要強調個人的歸屬感、安全感，因為這里匯聚了用戶的“人財物的信息”。
綜上所述：通過對主要頁面的分析，當今比較火的設計趨勢有二：一是展示型，例如，首頁首屏，商品列表，商品詳情，媒體性咨詢、專題內容等。這類頁面的設計主要是通過感性設計使得用戶容易找到 ，從而產生獵奇心理，進而到達下一級頁面。另一種是功能性頁面，例如：社交和社區的構建，個人中心頁面，這類頁面需要功能歸類清晰，并使得用戶操作學習成本降到最低，從而產品具有安全感和歸屬感。
無論哪種產品設計思路，都需要產品設計者讀懂所針對的用戶畫像，深刻了解用戶對何種內容感興趣到通過社區留下用戶，然后通過交易功能的設計帶來高轉化率的效果。
作為從零到一策劃設計過不同產品的我來說，主要想通過此文獲得對產品設計和產品運營有獨到觀點的人交流。（微信號：Line15201991967,郵箱：firstproduct@163.com）
本文由 @lianshilu 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
受教