電商產(chǎn)品設(shè)計歷經(jīng)集市時代的比拼價格，到腦部內(nèi)容意見領(lǐng)袖引導(dǎo)階段，再到一種數(shù)據(jù)用戶A知道數(shù)據(jù)用戶B的需求，從而A用戶精準(zhǔn)滿足B用戶的需求，與此對應(yīng)的例子在海外比較明顯：比如亞馬遜的Wishlist，而這個階段的電商在國內(nèi)還不明顯。因此本文主要總結(jié)國內(nèi)腦部內(nèi)容電商移動端設(shè)計Tips。

垂直化內(nèi)容移動端設(shè)計不需要迎合所有人口味，但是一定要給針對性的用戶一個明確的暗示，“嘿，Girl,我是不同的”，這是產(chǎn)品設(shè)計的重點。

首先：從首頁第一視覺停留開始

首屏是第一視覺第一塊信息展示區(qū)域，適合設(shè)計成時尚和引領(lǐng)當(dāng)下熱點潮流或者產(chǎn)品攝影圖等視覺沖擊力較強(qiáng)的圖片，和符合用戶知覺的文案，吸引用戶的注意力。第一視覺最好以大圖海報形式出現(xiàn)，而海報本身的設(shè)計是決定用戶是否點擊進(jìn)入的關(guān)鍵，什么樣的內(nèi)容容易吸引用戶呢？根據(jù)經(jīng)驗有以下三個特點：特征一、以能夠喚起用戶共鳴的話題性圖文切入，引出用戶的知感。特征二、融入時下創(chuàng)意性的元素，展現(xiàn)垂直內(nèi)容的不同視角。特征三、以彰顯個體為中心的關(guān)懷式設(shè)計，將用戶的視覺重點分為幾個小點，不同的內(nèi)容能夠降低網(wǎng)頁的跳失率。

其次：垂直電商的移動端搜索設(shè)計

根據(jù)對APP搜索設(shè)計知覺負(fù)載理論的研究。每行2圖比每行4圖用戶搜索效率更高，因為簡單頁面布局用戶所需的認(rèn)知加工負(fù)載較低，更利于進(jìn)行模式識別及認(rèn)知加工，因此搜索效率較高。第二點，淺色背景的導(dǎo)航界面設(shè)計的搜索效率相對較高，因為深色背景頁面的無關(guān)刺激會對用戶搜索產(chǎn)生干擾作用。

第三：精選內(nèi)容頁面

會放置一些二級頁面的主推內(nèi)容，快速便捷扼要的讓用戶了解到精選頁面都有些什么。同時首頁對移動端總結(jié)的能力越強(qiáng)，越有調(diào)理，越能快速的幫助用戶定位，了解移動端的主要內(nèi)容。選擇內(nèi)容越搶眼，越符合用戶的知感，越能吸引消費者繼續(xù)瀏覽的興趣。網(wǎng)絡(luò)購物和線下不同，用戶是通過一個個入口購買衣服，不管是平臺，還是垂直應(yīng)用，商家都不可能同時將所有商品展現(xiàn)在用戶面前，只能選擇自己內(nèi)容中已經(jīng)被用戶感知認(rèn)可過的，獲得銷量的商品，方能提高用戶進(jìn)入本店繼續(xù)瀏覽的幾率，將最好的精選優(yōu)先快速的推送給用戶，是增加轉(zhuǎn)化率的最佳產(chǎn)品設(shè)計手段。

對上述頁面的分析總結(jié)出以下幾點設(shè)計Tips

• Tips1: 垂直化移動端更強(qiáng)調(diào)用戶可以識別的統(tǒng)一風(fēng)格
• Tips 2: 首頁內(nèi)容就相當(dāng)于一個人初次見面穿著打扮如何，從視覺上來說，也是影響別人對自己印象的關(guān)鍵，這就是網(wǎng)站的風(fēng)格，風(fēng)格設(shè)計好的移動端首頁能更好的體現(xiàn)移動端的各種功能內(nèi)容，更能吸引瀏覽者的注意，提高首頁轉(zhuǎn)化率。
• Tips 3:讓內(nèi)容層次感清晰,以垂直女裝移動端電商為例來說，首先，要讓用戶了解到，此處都是售賣具體某一類女裝的。比如：黑色的裙子，內(nèi)衣專場，還是什么女性類目都有。
• Tips 4: 營銷模式是怎么樣的，是三級分銷，用戶分享，還是精美的場景化的圖文。

如何在多如牛毛的眾多移動端里突出，不僅要注重設(shè)計美學(xué)布局，更要懂得用戶的需求心里分析，垂直電商用戶一言不合就會翻到下個應(yīng)用里去，所以短時間內(nèi)做到有效，通俗易懂好操作是首要原則，削弱首頁的學(xué)習(xí)性，不盲目設(shè)計非常規(guī)的操作流程，降低教育用戶的成本，方能突出。

第四:垂直化移動端商品列表頁設(shè)計

進(jìn)一步篩選出更加精準(zhǔn)，只剩下符合用戶需求的款式，是商品列表頁最核心的使命。

商品列表頁設(shè)計Tips

• 一、保持信息簡明扼要，產(chǎn)品設(shè)計者應(yīng)當(dāng)深度研究用戶畫像，了解用戶在對比此商品時，哪些信息是必須關(guān)注的，哪些是其次，盡量將用戶最最需求的內(nèi)容展現(xiàn)在這一頁，就可以減少點進(jìn)去，再返回，再點開其他頁面，再返回通過跳轉(zhuǎn)頁面來回對比商品的麻煩現(xiàn)象。
• 二、界面布局設(shè)計做到操作更加順手，上文提到復(fù)雜和簡單頁面兩種布局，一種是一行2圖，一種是一行4圖，目的給予用戶方便的操作流程，先選擇大類目，再篩選具體的關(guān)鍵詞，再瀏覽商品，因此Tips是注意不要顛倒流程的先后順序，同時可以從精選、大家喜歡、顏色，大小，圖標(biāo)等方面區(qū)分更精準(zhǔn)。

話說商品詳情頁是用戶從首頁到進(jìn)入商品詳情頁的第一環(huán)節(jié)，產(chǎn)品設(shè)計者最主要的是清晰用戶畫像，精準(zhǔn)呈現(xiàn)用戶希望看到的內(nèi)容。

第五:產(chǎn)品詳情頁

用戶需要對某一商品進(jìn)一步了解時，點擊進(jìn)入商品詳情頁面，該頁面包含了商品的全部必須信息。

此頁面為了崔進(jìn)用戶點擊購買轉(zhuǎn)化率，除了包含商品主圖、購買說明，顏色選擇、尺碼選擇、數(shù)量選擇、價格、郵費、購買按鈕外，還應(yīng)該加些感性介紹，例如：告知用戶這件衣服的穿著風(fēng)格，和什么什么搭配、適合穿什么鞋，背什么包，適合什么場合等等，通過不同的思維路線，幫助消費者遠(yuǎn)距離理解一件商品。同時設(shè)計的還有其他已購買用戶的評價，因為用戶的評價反饋更為真實和具有價值參考，這也是當(dāng)下社群化電商之所以逐漸興起的原因。用戶是否愿意購買的關(guān)鍵在于產(chǎn)品的詳情頁。

最好還有商品的關(guān)聯(lián)推薦，里面是和本商品類似或者相搭配的商品，給用戶更多選擇機(jī)會，以傳達(dá)給用戶的感知是本站點商品豐富專業(yè)度高的信任背書。

商品詳情頁設(shè)計Tips：

產(chǎn)品設(shè)計者應(yīng)再次深度了解產(chǎn)品內(nèi)核要傳達(dá)出的用戶知感點。是美食、是內(nèi)衣、是運動還是二手精選

展示圖不宜過大或過小，圖片的面積、數(shù)量形式方向要保持視覺的平衡，且要讓用戶哪怕是無意間觸發(fā)都會有種一切盡在自己控制之下的效果。

產(chǎn)品導(dǎo)航，用戶已經(jīng)瀏覽路線較深，用戶越不知道自己在哪個界面，所以產(chǎn)品導(dǎo)航跟隨可以幫用戶定位，方便用戶才是用戶喜歡的設(shè)計。

商品詳情頁面不宜過長，用戶的耐心總是有限的，用戶消費總是感性的沖動的，所以設(shè)計長度適中的商品詳情頁，即讓用戶了解了商品關(guān)鍵一面，又不啰嗦，控制長度是用戶點擊 購買按鈕的關(guān)鍵。

第六：內(nèi)容化購物頁板塊設(shè)計分析

內(nèi)容化購物頁面，具有媒體屬性，是垂直導(dǎo)購網(wǎng)站最具有特色的板塊，內(nèi)容多為時尚垂直資訊，即解析當(dāng)下潮流的圖文，比如：普世化的價值觀的解析來攫取用戶的關(guān)注，通過分析某個垂直領(lǐng)域的用戶想要的內(nèi)容，而用戶有沒想到的內(nèi)容，內(nèi)容產(chǎn)品設(shè)計者可以在此尋找到一個銜接點，告訴用戶去哪里吃美食，買什么樣的衣服，戴什么樣的配飾。

同商品列表以及商品詳情頁一樣，垂直化內(nèi)容頁面設(shè)計也具有兩級頁面，一是所有媒體屬性的專題內(nèi)容聚合頁面，一是某一專題內(nèi)容詳細(xì)頁面

內(nèi)容化列表頁面設(shè)計Tips：

• 一、首先區(qū)分不同的內(nèi)容，大大小小的專題和資訊，和商品一樣，更加橫向縱向交叉分類，商品可以按照款式，價格，顏色等分類，資訊則是按照時間，關(guān)注熱度，以及資訊內(nèi)容等，和商品不同的是，商品圖的構(gòu)圖較為統(tǒng)一，而資訊的封面圖則參差不齊，很難想成統(tǒng)一視覺效果，因此關(guān)鍵點事將不同的資訊形成自己的區(qū)域，做好區(qū)分。例如：不同的內(nèi)容的背景色有適當(dāng)?shù)淖兓?，或者分為幾大塊兒，每塊相對獨立，但編排上有規(guī)劃感。
• 二：內(nèi)容展示要有針對性和熱鬧性，內(nèi)容應(yīng)包含：標(biāo)題、概述、封面圖、評論數(shù)、點贊數(shù)、以及瀏覽量，營造熱鬧的氛圍同時封面設(shè)計傳達(dá)文章主旨，以能引發(fā)好奇心或者用戶共鳴。

內(nèi)容化詳情頁設(shè)計Tips:

從內(nèi)容列表頁進(jìn)入詳情頁之后，主要分為兩類，一類是類似微信訂閱號推送的圖文形式，另一類則是像時尚雜志的精致排版。前者主要適用新聞性屬性、內(nèi)容介紹性、及對商品自身的價值及周邊價值的內(nèi)容介紹為主，輔以商品屬性介紹。后者主要適用于模擬用戶生活場景、專題性，場景性購物推薦.

Tips ：產(chǎn)品設(shè)計者首先應(yīng)細(xì)分內(nèi)容，將不同的場景分成不同的專題，越細(xì)分，總結(jié)性越強(qiáng)，導(dǎo)購的作用越具有吸引力。

而且內(nèi)容場景關(guān)聯(lián)路線要清晰，從設(shè)計上幫助用戶進(jìn)行整理，降低用戶學(xué)習(xí)難度，能夠使用戶快速了解專題。

第七：品牌展示頁

羅列所有入住該站點的品牌，有利于增加站點的信任背書，

設(shè)計Tips：品牌頁一般根據(jù)品牌數(shù)量決定預(yù)覽形式，由多到少會選擇，品牌名稱預(yù)覽>品牌LOGO預(yù)覽>品牌簡介預(yù)覽的順序進(jìn)行產(chǎn)品設(shè)計。數(shù)量較多的也可以選擇三種方式結(jié)合的方法，以熱門程度從高到低進(jìn)行排列，目的是方便用戶篩選。

第八：產(chǎn)品設(shè)計的個人頁面部分

主要包含個人主頁、個人基本信息、個人收藏信息、關(guān)注、訂單交易記錄、社交記錄等版塊，此類頁面設(shè)計心得是做到理性和人性化，理性方面：當(dāng)用戶決定購買，加入購物車或者選擇立即購買，因此購物車頁面，購買信息填寫頁面，付款頁面等，均屬于強(qiáng)調(diào)理性，功能化的頁面，但是來到個人中心頁面之前所瀏覽的商品，點贊過的商品，關(guān)注過的人等用戶的足跡要及時推送給用戶。因此在設(shè)計個人中心頁面時，要強(qiáng)調(diào)個人的歸屬感、安全感，因為這里匯聚了用戶的“人財物的信息”。

綜上所述：通過對主要頁面的分析，當(dāng)今比較火的設(shè)計趨勢有二：一是展示型，例如，首頁首屏，商品列表，商品詳情，媒體性咨詢、專題內(nèi)容等。這類頁面的設(shè)計主要是通過感性設(shè)計使得用戶容易找到 ，從而產(chǎn)生獵奇心理，進(jìn)而到達(dá)下一級頁面。另一種是功能性頁面，例如：社交和社區(qū)的構(gòu)建，個人中心頁面，這類頁面需要功能歸類清晰，并使得用戶操作學(xué)習(xí)成本降到最低，從而產(chǎn)品具有安全感和歸屬感。

無論哪種產(chǎn)品設(shè)計思路，都需要產(chǎn)品設(shè)計者讀懂所針對的用戶畫像，深刻了解用戶對何種內(nèi)容感興趣到通過社區(qū)留下用戶，然后通過交易功能的設(shè)計帶來高轉(zhuǎn)化率的效果。

作為從零到一策劃設(shè)計過不同產(chǎn)品的我來說，主要想通過此文獲得對產(chǎn)品設(shè)計和產(chǎn)品運營有獨到觀點的人交流。（微信號：Line15201991967,郵箱：firstproduct@163.com）

本文由 @lianshilu 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。