您現在的位置是:首頁 > 單機遊戲首頁單機遊戲

獨立站店鋪裝修,導航欄設計避坑指南!

  • 由 店匠全球DTC品牌智庫 發表于 單機遊戲
  • 2021-09-01
簡介四:導航欄內容最佳化一級目錄在設定好後通常不會修改,避免給訪問消費者造成困惑,增加學習時間

隱藏關注怎麼設定

導航欄是獨立站店鋪裝修裡的第一個重要板塊

,它不僅是消費者進入品牌獨立站官網首先關注到的部分,也是商家在有限的資訊內向消費者

展示獨立站售賣商品、品牌調性的視窗

。優秀的導航欄設計就像是一隻無形的手,引導消費者沿著規劃的旅程前進,最終完成轉化目標。

如何才算好的導航欄裝修呢?SHOPLAZZA 認為有

三個標準:

-提供好的使用者體驗,消費者可輕鬆找到想了解的內容

-儘可能展示商品,提升獨立站轉化率

-透過視覺、結構、內容設計,凸顯品牌調性

具體應該怎麼做?提供了以下幾點為參考:

獨立站店鋪裝修,導航欄設計避坑指南!

一:導航欄結構設計

1.符合獨立站內容結構

將獨立站內容整理歸類並體現於導航欄目錄中,目錄劃分要注意邏輯層次,層層細分。一級目錄將直接呈現給消費者,一般包含 Shop、About US、Support、 Blog 等專案;二級目錄則是對一級目錄的細分,更詳細地介紹專案分類;三級目錄在對商品劃分時被更多使用,消費者會根據指示選擇自己要瀏覽的類別。

獨立站店鋪裝修,導航欄設計避坑指南!

(Vermont Woods Studios 售賣傢俱產品,他們的二級目錄指示傢俱使用的不同場所,三級目錄指示傢俱的型別。)

注意:要避免重複分類,重複性內容容易讓訪問者產生倦怠感,降低有針對性需求的消費者的購物體驗。

2.設定簡潔的目錄標籤

消費者在導航欄停留的時間可能只有幾秒鐘,因此消費者對目錄標籤的理解至關重要,標籤文字應避免出現難以理解的詞彙,比如專業術語、縮寫和個性化語言等,確保消費者能立刻理解每個標籤的含義。

3.限制目錄數量不超過7個

美國心理學家 George Armitage Miller 經過多次實驗發現,人類短期記憶的平均極限值為7。導航中的選項越多,消費者記住和處理資訊的難度就越大,所以消費者在面對多個標籤選擇時可能產生困惑。

獨立站店鋪裝修,導航欄設計避坑指南!

(這家售賣服飾的商店三級目錄中塞滿了所有可能的選項,太多的選擇反而讓消費者找不到重點,影響下一步轉化。)

 4.對目錄進行優先順序排序

根據不同國家地區消費者的閱讀習慣對目錄進行優先順序排序,確保必須讓消費者關注的專案排在前列,以免忽略重要資訊。

德國心理學家 Hermann Ebbinghaus 提出:

人們傾向於對首先見到的事物和最後見到的事物有更好的印象

。這也是我們常說的首因效應和近因效應,根據這兩個效應,

開頭和結尾的內容更容易讓消費者大腦記住

,那麼可以在導航開頭或結尾放置更需要消費者注意的內容。

二:導航欄互動設計

 1.減少導航欄學習成本

導航欄一定程度上會促使消費者學習思考下一步動作。在做導航欄設計時,可以適當假想使用物件都是新使用者或是沒有耐心的使用者,儘量削弱導航需要學習的難度,第一時間滿足消費者需求,不要讓消費者覺得複雜繁瑣。

客戶 Exway 甚至隱藏了導航欄目錄,僅留下小圖示,當消費者沒有除購物外的其他目的時,可以略過導航欄,而專注於首頁的商品展示,從而提高轉化。

獨立站店鋪裝修,導航欄設計避坑指南!

 2.固定導航欄位置

將頂部導航選項始終保持在螢幕的可見區域

。無論消費者向下滾動頁面多深,或跳轉站內其他頁面,導航欄都能停留在螢幕頂部,以便滿足消費者有針對性的需求。

在提供的主題模版中,已預設為獨立站店鋪的導航欄開啟此功能,商戶可以在卡片裝修中設定此項。

獨立站店鋪裝修,導航欄設計避坑指南!

3.新增搜尋以簡化導航

搜尋功能為消費者提供尋找所需內容的快捷方式,節省了訪問的時間成本。在SHOPLAZZA 提供的店鋪裝修模版中,提供了兩種呈現方式,商戶可以根據頁面設計選擇僅使用搜索圖示還是展開搜尋欄。

獨立站店鋪裝修,導航欄設計避坑指南!

4.恰當運用導航欄廣告位

導航欄裡恰當融入廣告位不僅不會引起消費者的反感,相反還能

提升消費者的訪問體驗

。要注意設定消費者感興趣的內容,對廣告位的圖片、標題、描述等進行精心設計,吸引消費者點選,提高轉化率。

獨立站店鋪裝修,導航欄設計避坑指南!

每個主題裝修模版中都添加了廣告位功能,可自主設計展示最新商品、部落格、活動預告等任意資訊,廣告位將隨消費者使用者觸發一級選單一起出現。

獨立站店鋪裝修,導航欄設計避坑指南!

三:導航欄視覺設計

1.遵循色彩搭配原則

導航欄顏色需結合主頁整體色彩搭配,確保獨立站風格統一。透過顏色深淺排列將導航欄與其他板塊區分開,同時,在色彩的使用上應避免大片亮色,這會間接降低導航欄文字的可識別度。

獨立站店鋪裝修,導航欄設計避坑指南!

(BLUE PLANET 將公告欄和導航欄都設定為白色,視覺衝擊力大且沒有視線焦點,但這正巧妙凸顯了其商品太陽眼鏡的功能。)

 2.通用功能圖示化

圖形在視覺上比文字更具衝擊力,並且透過傳達具像事物讓消費者輕鬆理解其含義

。對於消費者來說,長期的獨立站購物習慣培養使他們建立了固定的具象圖形—抽象文字認知,如放大鏡代表查詢、人形圖示代表賬戶,手提袋或推車代表選購商品。這些內容都可透過圖示展現,文字反而增加了時間。

獨立站店鋪裝修,導航欄設計避坑指南!

獨立站店鋪裝修,導航欄設計避坑指南!

四:導航欄內容最佳化

一級目錄在設定好後通常不會修改,避免給訪問消費者造成困惑,增加學習時間。但二級三級目錄可以透過分析使用者訪問獨立站的行為資料進行更新最佳化,如果能在導航中推薦一些熱門商品給消費者,也許能促進獨立站商品的售賣。

在後臺數據板塊,您可以看到消費者的搜尋熱詞排行、商品瀏覽量排行、著陸頁瀏覽量排行等資料,可據此來調整您的目錄設定,如將近期高搜尋高流量的標籤排在前列,為消費者提供訪問嚮導。

獨立站店鋪裝修,導航欄設計避坑指南!

SHOPLAZZA 即將推出新的模板主題,支援更多導航欄的玩法,分享轉發文章,在評論區留言,24小時內為開通新模版試用資格!

Top