解析!電商首頁的模塊佈局

文/張朦朦 在電商首頁的設計中,常會將頁面分拆成一個個模塊,做好之後再拼合成整個頁面,使首頁看起來層次分明、架構明顯。首頁佈局就是有目的的展示一些商品,並讓顧客能夠快速的找到商品,並完成電商形象的傳遞和營銷的目的。

解析!電商首頁的模塊佈局


①形象展示。產品品牌是區別產品的重要標誌之一,當顧客進入首頁感受到這些差異並能夠與其他首頁有所區別,從而形成認知上的區分和對品牌的信任感。

解析!電商首頁的模塊佈局


②商品搜索。顧客從某一款商品頁面進入首頁時,意味著顧客可能有其他商品的消費需求,當顧客有明確的購買目的時,首頁需要有搜索導購功能,幫助顧客快速方便地找到所需的商品。

解析!電商首頁的模塊佈局


③推薦和活動。當顧客無明確購買需求時,需要一些推薦和活動來激發顧客的潛在購買需求,例如:新商品的推薦、促銷打折、搭配減價。如果店鋪正在做這些活動,就需要在首頁的明顯位置進行展示,以吸引客戶下單。

解析!電商首頁的模塊佈局


解析!電商首頁的模塊佈局

要了解電商首頁的佈局方式,首先要了解首頁上出現的圖像和問題以及其作用和聯繫,以下將著重分析首頁的功能性模塊:

解析!電商首頁的模塊佈局


■店招。其包含了店鋪商品、店鋪品牌、店鋪價位等重要信息。顧客通過搜索進入產品詳情頁或者店鋪首頁,首頁看到的是店招,這對顧客是否選擇繼續瀏覽起到了一定的作用,在設計店招時要注意品牌定位、產品定位和價格信息三方面。

解析!電商首頁的模塊佈局


■標誌。品牌專營店一般會沿用商品品牌標誌,或重新設計與品牌標誌相符的標識,以達到達延續利用品牌效應的效果。

解析!電商首頁的模塊佈局


■通欄。首頁並不能囊括所有內容,而大部分信息是在自定義頁面進行展示,通欄的作用是將這些自定義頁面用清晰明確的方式進行介紹,通欄一般放在店招的下面,全部分類、信用評價、會員制度、品牌故事是常用的通欄設計。

解析!電商首頁的模塊佈局


■導航。導航一般為方便顧客搜索商品而設置,主要分為隱形導航、半隱形導航和顯形導航。隱形導航一般以全店產品和所有類目為標題,當鼠標移動到上面時才會顯示所有類目,所佔位置最小,不易被發現;半隱形導航主要設置幾個主要的大類標題,鼠標移動到上面停滯後顯示細分類目,比較容易被發現;顯形導航一般出現在首頁底部區域,給予顧客全面的產品類目提示對流量進行分流和引導。

解析!電商首頁的模塊佈局


■分類。分類和導航的作用類似,只是分類的展現會在更多產品頁面的左側得到展示,而導航僅在首頁展示。分類可以使用純文字,也可以使用圖文結合的方式劃分一級、二級欄目。

■活動Banner。常見的活動Banner有穿插型Banner,這種 Banner因為佔用面積小,可以靈活的放在任意的位置,或者作為不同類產品之間的穿插間隔,有活動分流的作用。

解析!電商首頁的模塊佈局


■海報。海報也就是首頁中較大型活動的展示,如果出現在首頁第一屏,一般稱之為促銷圖、店鋪焦點圖等。海報的特點是佔用面積較大、內容豐富,一般當做品牌展示、新品展示、活動展示,還可以用作輪播形式循環播放。

■產品展示區。產品展示是將部分商品按照一定的順序和規則排列出來,商品展示的框架可以根據不同產品的大小和獨特的展示方式來設計。

解析!電商首頁的模塊佈局


■服務。為客戶提供方便的自助購物,幫助和提供一定程度的售前和售後服務說明,可以提高客戶的體驗,減少客服的工作強度,減少客戶服務需求的等待週期。服務模塊放置在頁面的最底端,也有一定的引導目的,也會給顧客增加信息,增加信任感。

解析!電商首頁的模塊佈局


■推薦。推薦模塊主要完善首頁內其他模塊未能展現的產品,也可以是推廣產品、增加預熱產品或者主推產品的展現,增加產品的展現。

■活動展示。用活動展示模塊來增加點擊量、提升轉化率,活動模塊的展示方式直接影響銷售情況。

解析!電商首頁的模塊佈局


■客服在線。客服在線模塊是為了方便客戶在瀏覽過程中可以隨時有效可以得到解答與幫助。

■品牌。除了在首頁的頂端設置店招和標誌外,還需要有說明品牌和表現品牌的地方,以便增加客戶對品牌的印象。

解析!電商首頁的模塊佈局


■收藏。收藏功能不僅僅侷限於店招、導航、頁尾,只要考慮好結構上的美觀,都可以添加收藏按鈕。

■返回。返回模塊是為方便客戶在瀏覽到頁尾時,能夠快速返首頁頭部重新瀏覽。

解析!電商首頁的模塊佈局


以上分析的首頁15個功能模塊是出現在大部分電商店鋪中的,但並不是每一個模塊都要出現在首頁上,也沒有絕對的表現順序。我們在設計首頁時,需要根據產品類目、產品列表、企業戰略以及營銷策略的不同,對這些功能模塊進行重新排列組合,同時要根據瀏覽數據對頁面佈局做出動態調整,以期達到最優化的首頁佈局。

解析!電商首頁的模塊佈局


解析!電商首頁的模塊佈局

首頁第一屏的設計上,要加強對品牌形象、LOGO、品牌產品優勢、品牌服務優勢、與同類產品對比的優勢等方面信息的傳達力度,同時需要加上主打產品的展示。注重誠信和口碑的信息傳遞,以增加顧客的購買信息,同時加以一定的促銷活動信息推動顧客嘗試下單。

解析!電商首頁的模塊佈局


解析!電商首頁的模塊佈局

促銷性首頁的特色是打折力度較大,促銷產品具有性價比,單品轉化率較高,單品庫存量充足。為了達到促銷效果,首頁第一屏的內容基本圍繞促銷進行,因此促銷模塊需要上移,並且進行大量的堆砌,營造熱賣的氣氛。此類首頁要有明確的導航幫助顧客進行查找商品,與明確的引導性產品海報、促銷海報引導客戶。

解析!電商首頁的模塊佈局


解析!電商首頁的模塊佈局

(此處已添加圈子卡片,請到今日頭條客戶端查看)


① 官方頭條號:設計智造 頂級創意設計師必備


分享到:


相關文章: