調侃幾句,明顯是爲了推薦今天這(zhè)篇超多私貨的好(hǎo)文,從10個方面(miàn)全方位分析...在設計電商網站的導航之前,事(shì)先應該對(duì)網站整體的内容有一個全面(miàn)的了解...

　　今天這(zhè)篇文章讀完後(hòu)，同學(xué)們可以來做一個小練習，根據文章，把優設看做一個電商網站，文章看做商品，來分析一下哪篇文章是熱門，有哪些突出的方法，文章裡(lǐ)藏有哪些引導用戶的細節等等，即學(xué)即用，不容易忘，分析得好(hǎo)，我給你點贊，手動的那種(zhǒng)。

　　電子商務中的商品列表頁也被(bèi)稱爲商品聚合頁，是爲了能(néng)爲消費者提供更完善的商品種(zhǒng)類選擇。這(zhè)一類頁面(miàn)的最大特點就是信息量大、圖片多，所以布局是否清晰合理，以及如何盡可能(néng)的壓縮内容是商品列表頁設計的重點部分。

　　内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司、、、先誠官網：/ 

　　目前，國(guó)内電商網站的商品列表頁常見表現形式有三種(zhǒng)，分别是行列排列、瀑布流和特别款突出。這(zhè)三種(zhǒng)形式各有特點，設計師應該根據商品特色選擇最适合的表現手法。如果商品的種(zhǒng)類數量多且繁雜，規規整整的行列排列方式更利于用戶找到浏覽規律；瀑布流的形式更多的在流行時尚領域的電商中使用；特别款突出的方式可以爲一些節日活動的宣傳促銷而準備。在下面(miàn)的案例中也會一一提及。

　　一、展示基本信息

　　正因爲商品列表頁相較于其他頁面(miàn)會顯得有些擁擠，因此設計師更應該抱著(zhe)在限制的區域範圍内展現最有用的信息的心态來設計網頁。正在浏覽商品列表頁的用戶也許對(duì)商品的細節描述并不是很在意，此時的浏覽模式更偏于走馬觀花，因此，簡單扼要的圖片、商品名稱，以及價格說明就已經(jīng)能(néng)夠滿足用戶在該頁中的需求了。順豐優選的整個商品列表頁面(miàn)看起(qǐ)來很簡明，但展示的商品信息卻并沒(méi)有弱于其他電商網站，用戶真正希望得到的資訊都(dōu)得到了完整的體現。

　　二、鼠标懸停時産生交互效果

　　很多網站都(dōu)會忽略鼠标懸停時應該産生的交互效果，其中也不乏一些知名電商。雖然隻是一個很小的效果，但它存在的意義卻遠不僅如此，甚至承載了一份網站與用戶之間的互動和反饋。天貓的商品列表頁在給予用戶即時反饋這(zhè)方面(miàn)做得很到位。當鼠标懸停在商品範圍時，顯眼的紅色線框就馬上將(jiāng)該商品與其他商品區分開(kāi)來，而線框的紅色與網站主色調相同，這(zhè)樣(yàng)也讓整體表現得不突兀。

　　三、出現适量的附加信息

　　剛才提到了商品列表頁應該盡量做到簡單簡潔，但在此基礎上适量的增加一些對(duì)用戶挑選商品有幫助的附加信息可以起(qǐ)到錦上添花的作用。聚美優品的在列表頁采用了特别款突出的表現形式，并且向(xiàng)用戶展示了商品的多視角圖片，讓用戶無需進(jìn)入到詳情頁就看到商品全貌，間接降低了商品詳情頁的跳出率。美麗說是一個偏向(xiàng)時尚年輕化的網站，因此設計師使用了這(zhè)類人群都(dōu)能(néng)接受的瀑布流展現方法。美麗說的商品列表頁的特點在于增加了其他用戶的評論模塊，這(zhè)也是人們在網上購物時很注重的部分。

　　四、始終帶給用戶指引

　　可能(néng)很多電商網站都(dōu)認爲，當用戶在商品列表頁面(miàn)停留就意味著(zhe)即將(jiāng)找到自己需要的商品；而現實卻告訴我們，用戶很可能(néng)在不斷翻頁的過(guò)程中會不知不覺的改變了之前的目标商品，因此，網站應該始終爲用戶提供指引，帶給他們明确的方向(xiàng)感。YOHO的商品列表頁有利有弊。側邊導航始終存在于頁面(miàn)上，爲用戶的頁面(miàn)跳轉提供了很大程度的便利；但不足之處是側邊導航呈靜态，如果能(néng)實現動态，可以随著(zhe)用戶鼠标的滾動而始終保持在屏幕之中就更好(hǎo)了。

　　五、設置相關推薦，促成(chéng)更多消費

　　用一種(zhǒng)商品推動另一種(zhǒng)商品的銷售，這(zhè)是電子商務網站中的慣用營銷手法，但這(zhè)樣(yàng)的方式如果運用的太過(guò)生硬用戶一定不領情，網站應該試著(zhe)用柔和的方式傳達相同的意思，設計師也許也能(néng)爲此出一份力。淘寶對(duì)此的做法是將(jiāng)推薦信息融入到列表頁的每一個商品中。“找同款”和“找相似”的字樣(yàng)也不會讓用戶覺得有太濃重的商業味。

　　六、掃清頁面(miàn)死角

　　頁面(miàn)中的每一個區域都(dōu)有它的價值和意義，可能(néng)隻是用戶視覺的感知程度不同而已，隻要做好(hǎo)布局，頁面(miàn)死角可以變得不存在。商品列表頁的死角多見于頁面(miàn)側邊和底部，而京東將(jiāng)這(zhè)兩(liǎng)片區域使用爲其他産品的推廣途徑，比如銷量排行和商品精選等。

　　七、用特色商品激發(fā)購物欲

　　如果你覺得特色主推性質的商品隻能(néng)放在網站首頁你就錯了，首頁首屏的确是整個網站最佳的宣傳黃金位置，但所得到的效果卻不一定是最理想的，根據商品的類型安排布局才能(néng)達到事(shì)半功倍的效果。如易迅網案例所示，手機産品的相關推薦就放在手機商品的列表頁頭部，讓真正有購買需求的用戶都(dōu)能(néng)看到。

　　八、吸引人的商品活動盡量置後(hòu)

　　中國(guó)有句諺語，“好(hǎo)戲總在後(hòu)頭”，這(zhè)句話也同樣(yàng)适用于電商商品列表頁的設計中。把相對(duì)吸引人或是目的性強的商品活動放在偏後(hòu)一點的位置，有利于整個網站的運營。一号店將(jiāng)有針對(duì)性的“熱賣推薦”和“與您浏覽記錄相關的商品”放在頁面(miàn)最後(hòu)，讓原本可能(néng)打算結束浏覽的用戶重新發(fā)現新的感興趣的内容。繼續舉個栗子，好(hǎo)戲在這(zhè)裡(lǐ)：《給你一個好(hǎo)心情！電商網站注冊界面(miàn)設計超全面(miàn)指南（三）》

　　九、減少操作步驟

　　在商品列表頁中，力所能(néng)及的步驟減少隻有從商品加入購物車開(kāi)始著(zhe)手。但在此之前的大前提是商品信息展現的足夠全面(miàn)和完整，要在小區域内表達出所有内容也的确是一件比較困難的事(shì)。在商品列表頁上直接顯示“加入購物車”按鈕并不少見，但能(néng)同時顯示購買數量的就不多了，DHC官網實現了這(zhè)一操作，讓用戶能(néng)夠直接選擇商品數量和種(zhǒng)類。

　　十、從衆效應

　　從衆心理是網上購物人群的普遍狀态，因此，買過(guò)該商品的顧客對(duì)此做出的評價對(duì)于用戶來說很有說服力，商家可以利用這(zhè)一點在網頁的設計上做出一些小改變。樂蜂網在商品列表頁增加了用戶很看重的評論和購買人數模塊，這(zhè)樣(yàng)能(néng)讓用戶更直觀的看到商品的人氣指數。

　　總結：

　　我們認爲，商品列表頁是用戶真正進(jìn)入網上購物狀态的第一環節，因此，舒适的用戶體驗變得尤爲重要，設計師應該根據商品或行業的不同商業訴求作爲首要考慮因素。