復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計(jì)才合理舒適?

2022-5-17    ui設(shè)計(jì)分享達(dá)人

具有大量庫存商品,或是涉及復(fù)雜產(chǎn)品的網(wǎng)站,通常會提供產(chǎn)品類別頁面,或者是產(chǎn)品列表頁面。 類別頁面就像是特定產(chǎn)品類別的主頁。他們可能不提供完整的產(chǎn)品列表,但可能會展示一些產(chǎn)品并提供產(chǎn)品子類別的鏈接。這種頁面本質(zhì)上是用戶在進(jìn)入產(chǎn)品列表頁面的過程中經(jīng)過的一個(gè)中間步驟,讓用戶不用一下子面對海量的分類信息。

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計(jì)才合理舒適?我總結(jié)了7個(gè)方面!

Eddie Bauer 在其全局導(dǎo)航中, WOMEN 鏈接將用戶帶到了這個(gè)傳統(tǒng)的類別頁面。這些頁面通常包含產(chǎn)品照片和營銷內(nèi)容,以及促銷子類別(例如SHOP FLANNEL 和 SHOP FLEECE )的鏈接。

類別頁面通常提供以下組合:

  • 類別的描述、解釋及其包含的內(nèi)容
  • 帶有描述和代表性圖像的子類別菜單
  • 推銷該類別中的特色產(chǎn)品

并非所有產(chǎn)品都需要專門的類別頁面。 不過這種情況有時(shí)候會讓用戶非常惱火,因?yàn)橛脩粜枰ㄟ^額外的步驟才能查看特定類別的產(chǎn)品。

許多網(wǎng)站完全省略了類別頁面,而是將用戶直接引導(dǎo)到產(chǎn)品列表頁面,在那里他們可以借助過濾篩選的方式來瀏覽產(chǎn)品。

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計(jì)才合理舒適?我總結(jié)了7個(gè)方面!

Bonobos 網(wǎng)站上的 Pants & Jeans 鏈接不是類別頁面,而是將用戶直接帶到產(chǎn)品的列表頁面。這種方法通常效果很好,因?yàn)樗M快向客戶展示了他們可選的選擇。

雖然本文偏向于電商網(wǎng)站中的類別頁面的探討,但實(shí)際上這些頁面也用于其他類型的網(wǎng)站,特別是新聞資訊和教育類的網(wǎng)站。這些建議也可能適用于這些情況,但最好根據(jù)領(lǐng)域?qū)δ愕脑O(shè)計(jì)進(jìn)行測試,以防你的用戶需求與購物型用戶的需求不同。

何時(shí)使用類別頁面

如果您的電商網(wǎng)站所涉及的產(chǎn)品非常復(fù)雜,以至于您的許多客戶需要經(jīng)過學(xué)習(xí)之后才會使用,才能正確地過濾和比較產(chǎn)品,那么類別頁面就是一個(gè)好主意了 。此外,具有 大類別和大量子類別的網(wǎng)站,有時(shí)會提供某種類型的獨(dú)立類別頁面,以幫助用戶找到有意義的起點(diǎn)。

不過,你可以決定讓特定的產(chǎn)品具有類別頁面,而其他的則不具有獨(dú)立的類別頁面。例如,Lululemon 主打的健身服裝產(chǎn)品(大多不需要分類頁面),同時(shí)也銷售一種名為 MIRROR 的昂貴的家庭健身產(chǎn)品,后者需要更詳細(xì)的解釋,因此有自己的分類頁面。

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計(jì)才合理舒適?我總結(jié)了7個(gè)方面!

Lululemon 為其復(fù)雜的家庭健身產(chǎn)品 MIRROR 提供了一個(gè)單獨(dú)的類別頁面,但并未為其所有產(chǎn)品類別使用類別頁面。

闡釋復(fù)雜產(chǎn)品

類別頁面可以對電子產(chǎn)品等復(fù)雜產(chǎn)品起到解釋作用 。如果用戶還不了解產(chǎn)品選項(xiàng),他們可能還沒有準(zhǔn)備好單擊單個(gè)產(chǎn)品。與隨機(jī)點(diǎn)擊不同的產(chǎn)品相比,類別頁面為他們提供了一種更有效地了解各種潛在相關(guān)產(chǎn)品功能的途徑。

例如,智能手表通常會有不同的功能和價(jià)格范圍,著名智能手表品牌 Fossil 在自己的網(wǎng)站提供了一個(gè)類別頁面,列出了不同類型的智能手表,并提供「立即購買」、「了解更多」 以及「比較」的選項(xiàng)。

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計(jì)才合理舒適?我總結(jié)了7個(gè)方面!

Fossil 的 智能手表分類頁面解釋了不同型號的智能手表的功能和性能差異

子類別的特征

購物型用戶可能不需要通過網(wǎng)站來學(xué)習(xí)服裝或食品等熟悉商品的內(nèi)容和知識。然而,一個(gè)擁有大量產(chǎn)品和內(nèi)容,并組織成許多子類別的網(wǎng)站,仍然可以從類別頁面中受益——尤其當(dāng)子類別頁面可以通過獨(dú)特的圖文清楚地介紹產(chǎn)品的時(shí)候。這比一長串標(biāo)簽文本更容易方便用戶了解產(chǎn)品,此外它還可以為國外的購物者提供幫助。

REI 銷售用于各種戶外活動的許多產(chǎn)品,從皮劃艇到登山用具。如果點(diǎn)擊網(wǎng)站的全局導(dǎo)航中Camp & Hike 鏈接之后,頁面跳轉(zhuǎn)到一個(gè)包含所有露營產(chǎn)品的列表面,用戶可能會不知所措,而且無趣。相反,REI 讓鏈接指向到一個(gè)傳統(tǒng)的類別頁面,而不是列表,這個(gè)頁面包括:

  • 子類別 (帳篷, 睡袋 , 遠(yuǎn)足)
  • 該類別中最受歡迎的品牌(Osprey、YETI)
  • 與類別相關(guān)的季節(jié)性信息(寒冷天氣徒步旅行)
  • 建議(如何選擇睡墊、食物儲存和處理的技巧)

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計(jì)才合理舒適?我總結(jié)了7個(gè)方面!

REI 使用傳統(tǒng)的類別頁面來幫助購物者在龐大的 Camp & Hike 類別中找到適合自己的產(chǎn)品。

不要強(qiáng)迫客戶瀏覽類別頁面

如果你的網(wǎng)站確實(shí)提供了傳統(tǒng)的類別頁面,請同樣為用戶提供了避免進(jìn)入這些頁面的簡單方法,并在他們愿意時(shí),也能直接轉(zhuǎn)到產(chǎn)品列表頁面。為你的站點(diǎn)的全局導(dǎo)航,提供指向子類別產(chǎn)品的列表頁面(比如使用超大導(dǎo)航 Megamenu ),以及指向傳統(tǒng)類別頁面的鏈接。

可能還需要確保搜索結(jié)果始終指向產(chǎn)品選項(xiàng),而不是將購物者引導(dǎo)到類別頁面。在我們的研究中,Zappos 會將某些搜索結(jié)果指向到以品牌為中心的類別頁面,而不是鏈接到該品牌的產(chǎn)品。

在用戶測試的時(shí)候,一位參與者看到孩子后很生氣,因?yàn)樗阉魉钕矚g的品牌 Sam Edelman 時(shí),她進(jìn)入了一個(gè)具有促銷感的傳統(tǒng)類別頁面,而不是指向她要的產(chǎn)品。對她來說,這感覺像是一個(gè)不必要的額外步驟。

「當(dāng)我進(jìn)入 Sam Edelman 時(shí),我想看到結(jié)果。我不希望打開一個(gè)品牌的分類頁面?!?

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計(jì)才合理舒適?我總結(jié)了7個(gè)方面!

當(dāng)用戶在 Zappos.com 上搜索「sam edelman」時(shí),她很惱火地看到一個(gè)沒有列出任何單個(gè)產(chǎn)品的品牌類別頁面。

當(dāng)用戶搜索時(shí),他們希望立即看到結(jié)果。

混合:在產(chǎn)品列表頁面上提供類別信息 

為了避免傳統(tǒng)的類別頁面的缺陷,并提供對產(chǎn)品列表的快速訪問,許多電商網(wǎng)站現(xiàn)在在主產(chǎn)品列表頁面中,結(jié)合混用了少量的類別有頁面的設(shè)計(jì)——例如簡短的描述性內(nèi)容,或簡短的子類別菜單。

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計(jì)才合理舒適?我總結(jié)了7個(gè)方面!

在女士緊身褲 產(chǎn)品列表頁面上,Lululemon 包含了一些傳統(tǒng)會在類別頁面上顯示的元素:營銷內(nèi)容(藍(lán)綠色框標(biāo)注的區(qū)域)和對不同緊身褲樣式的解釋,以及指向這些子類別的鏈接(以黃色框標(biāo)注的區(qū)域)。

這種混合呈現(xiàn)方法效果很好,因?yàn)閷γ枋龌蜃宇悇e菜單感興趣的用戶可以暫停并閱讀它,而不感興趣的用戶可以簡單地跳過,直接快速訪問實(shí)際的產(chǎn)品列表。

說明內(nèi)容

一些電商網(wǎng)站在 產(chǎn)品 Banner 旁邊加入營銷的內(nèi)容和元素,這些元素傳達(dá)有用的信息而不會減慢用戶的速度,就像傳統(tǒng)的類別頁面一樣。

高級珠寶零售商 VRAI 使用混合式設(shè)計(jì),在一些產(chǎn)品列表頁面中包含類別頁面樣式元素。它的一個(gè)產(chǎn)品列表頁面當(dāng)中,圓形訂婚戒指頁面中,包含了帶有價(jià)格的產(chǎn)品列表,以及解釋性的內(nèi)容。頂部的文字描述了此類產(chǎn)品的一般特征。側(cè)面板提供了有關(guān)該類別中所有產(chǎn)品共有特征的說明,以及更多詳細(xì)信息。

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計(jì)才合理舒適?我總結(jié)了7個(gè)方面!

在這個(gè)列表頁面中,VRAI 包含了促銷內(nèi)容(以藍(lán)綠色框標(biāo)注)和說明性內(nèi)容(以黃色框標(biāo)注)。其中所呈現(xiàn)的圖文內(nèi)容是典型的傳統(tǒng)類別頁面的特征(沒有產(chǎn)品列表)。

子導(dǎo)航

一些零售類的網(wǎng)站不使用類別頁面,而是提供指向產(chǎn)品列表頁面上的子類別的導(dǎo)航鏈接。這些鏈接(這是最初發(fā)明類別頁面的原因之一)讓用戶輕松瀏覽網(wǎng)站的產(chǎn)品庫存。

例如,Ann Taylor 的 褲子 列表頁面顯示了不同款式褲子的類別,并提供指向該子類別的鏈接。這些內(nèi)容直接顯示在產(chǎn)品列表上方,幫助用戶了解可用類別項(xiàng)目,并且直接導(dǎo)航到這些類別。

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計(jì)才合理舒適?我總結(jié)了7個(gè)方面!

Ann Taylor 的網(wǎng)站在 褲子 的列表頁面的頂部,加入了不同褲子款式和合身度的說明和圖片,以便用戶了解其中的差異。

文章來源:優(yōu)設(shè)  作者:陳子木
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


日歷

鏈接

個(gè)人資料

存檔