您的品牌或企業(yè)在網(wǎng)上的形象比以往任何時(shí)候都更加重要。雖然您的網(wǎng)站需要通過高質(zhì)量的視覺內(nèi)容保持外觀，但 31% 的消費(fèi)者也認(rèn)為引人入勝的用戶體驗(yàn)應(yīng)該是重中之重。

當(dāng)您自己創(chuàng)建網(wǎng)站時(shí)，打造有影響力的用戶體驗(yàn)通常取決于關(guān)注網(wǎng)站結(jié)構(gòu)等看不見的細(xì)節(jié)。雖然一個(gè)好的網(wǎng)站結(jié)構(gòu)可能無法被訪問者的眼睛識別，但一個(gè)不適當(dāng)?shù)慕Y(jié)構(gòu)無疑會脫穎而出并留下不好的印象。在本文中，我們將定義一個(gè)網(wǎng)站結(jié)構(gòu)，解釋如何通過用戶體驗(yàn)設(shè)計(jì)的視角來構(gòu)建它，并討論當(dāng)今網(wǎng)站設(shè)計(jì)和網(wǎng)站模板中使用的最流行的模型。

什么是網(wǎng)站結(jié)構(gòu)？

網(wǎng)站結(jié)構(gòu)是指您網(wǎng)站頁面的層次結(jié)構(gòu)、順序和組織，由所需的用戶體驗(yàn)映射。它將您的所有網(wǎng)頁與菜單、內(nèi)部鏈接和內(nèi)容的導(dǎo)航系統(tǒng)連接起來。

與您網(wǎng)站的信息架構(gòu)一起，網(wǎng)站結(jié)構(gòu)是影響訪問者用戶旅程的重要UX 設(shè)計(jì)因素。但這也是您作為創(chuàng)建者規(guī)劃站點(diǎn)布局和內(nèi)容并確定每個(gè)元素應(yīng)該放置的位置的一種方式。尤其是在設(shè)計(jì)一個(gè)包含多個(gè)頁面的網(wǎng)站時(shí)，一開始您越注意網(wǎng)站的結(jié)構(gòu)，您以后遇到的驚喜就越少。

網(wǎng)站結(jié)構(gòu)中有哪些元素？

定義網(wǎng)站結(jié)構(gòu)可確保訪問者在您的網(wǎng)站上發(fā)現(xiàn)信息時(shí)遵循邏輯用戶旅程。該結(jié)構(gòu)必須包括您網(wǎng)站上的所有網(wǎng)頁、用于組織這些網(wǎng)頁的類別系統(tǒng)以及訪問者從一個(gè)元素導(dǎo)航到另一個(gè)元素的方法。您網(wǎng)站的結(jié)構(gòu)應(yīng)確保首先發(fā)現(xiàn)最重要的信息，同時(shí)邀請?jiān)L問者繼續(xù)探索以下元素：

• 類別和子類別
• 導(dǎo)航
• 鏈接系統(tǒng)

類別和子類別

類別為組織網(wǎng)站結(jié)構(gòu)、對具有相似內(nèi)容的網(wǎng)站頁面進(jìn)行分組以及使訪問者更容易找到所需內(nèi)容奠定了基礎(chǔ)。此外，具有大量類別的較大站點(diǎn)應(yīng)將其內(nèi)容進(jìn)一步劃分為子類別。

如果您是一家服裝零售商，您的電子商務(wù)網(wǎng)站主頁將以指向主要購物類別的鏈接開頭，例如“鞋子”、“外套”、“褲子”或“配飾”。最終，這些頁面會將訪問者引導(dǎo)至各個(gè)子類別；例如，“涼鞋”將位于“鞋子”下方，而“羊毛”等子類別將位于“外套”下方。

導(dǎo)航

您網(wǎng)站的導(dǎo)航為訪問者布置了其結(jié)構(gòu)，充當(dāng)他們所需內(nèi)容的方向圖。在大多數(shù)情況下，這從網(wǎng)站菜單開始——可能是頂部的經(jīng)典標(biāo)題菜單或更簡約的漢堡菜單。

由于導(dǎo)航的目的是引導(dǎo)訪問者，因此您的主頁應(yīng)該清楚地顯示他們在您網(wǎng)站上尋找的頁面和類別。從那里，子類別也應(yīng)該是可發(fā)現(xiàn)的，無論是使用下拉菜單還是使用其他方式顯示子類別頁面的鏈接。此外，您需要確保網(wǎng)站的導(dǎo)航能夠?qū)⒃L問者引導(dǎo)至與您的品牌相關(guān)的其他重要網(wǎng)頁，例如“關(guān)于我們”頁面或“聯(lián)系”頁面。

鏈接系統(tǒng)

實(shí)施經(jīng)過深思熟慮的鏈接系統(tǒng)可確保您的用戶正確瀏覽您的網(wǎng)站。根據(jù)您使用的網(wǎng)站結(jié)構(gòu)類型，訪問者對您的鏈接系統(tǒng)的依賴程度會有所不同。除了網(wǎng)站菜單中的鏈接外，結(jié)構(gòu)還可以利用以下類型的鏈接來提升用戶體驗(yàn)：

• CTA或號召性用語是戰(zhàn)略性放置的鏈接，可將訪??問者帶到直接目標(biāo)，鼓勵他們采取行動。無論是指向“注冊”還是“購買”的鏈接，CTA 對在您的網(wǎng)站上有特定目標(biāo)的訪問者都非常有幫助。使用粗體文本、誘人的縮略圖或按鈕設(shè)計(jì)來展示它們。
• 內(nèi)部鏈接是指網(wǎng)站內(nèi)連接到同一網(wǎng)站其他頁面的那些鏈接。每個(gè)網(wǎng)站的網(wǎng)頁之間自然都有內(nèi)部鏈接，是否以最適合訪問者的方式組織完全取決于您。有時(shí)，企業(yè)會將其頁面分組為類別“集群”，以此為指導(dǎo)。擁有內(nèi)部鏈接系統(tǒng)也恰好是一個(gè)強(qiáng)大的 SEO 最佳實(shí)踐。由于它反映在您的站點(diǎn)地圖中，因此 Google 機(jī)器人會看到為以正確的順序向訪問者提供最相關(guān)的信息所做的努力。
• 上下文鏈接將訪問者帶到您自己網(wǎng)站網(wǎng)頁之外的相關(guān)內(nèi)容，例如其他企業(yè)的產(chǎn)品頁面、博客文章、資源或新聞。

不同類型的網(wǎng)站結(jié)構(gòu)

看看下面不同類型的網(wǎng)站結(jié)構(gòu)和示例。你注意到什么模式？各有什么特點(diǎn)？哪種類型的用戶將從這些結(jié)構(gòu)中獲益最多？掌握四種最基本的結(jié)構(gòu)及其使用方式將有助于您更好地了解如何構(gòu)建自己的設(shè)計(jì)或使用哪種網(wǎng)站模板：

• 分層模型
• 順序（又名線性）模型
• 矩陣模型
• 數(shù)據(jù)庫模型

分層模型

最流行的網(wǎng)站結(jié)構(gòu)類型是分層模型，其中主頁作為起點(diǎn)，根據(jù)重要性分為不同的類別和頁面。由于用途廣泛，這種結(jié)構(gòu)適用于各種類型的網(wǎng)站——從個(gè)人服務(wù)網(wǎng)站到在線投資組合。

首先，根據(jù)重要性對內(nèi)容進(jìn)行排序。大多數(shù)時(shí)候，這意味著確保用戶在發(fā)現(xiàn)更多細(xì)節(jié)之前首先獲得一般信息。要起草和測試您的層次結(jié)構(gòu)，請使用線框和卡片分類練習(xí)。然后，一旦您創(chuàng)建并映射了頁面，就可以使用互連系統(tǒng)和導(dǎo)航菜單在您的網(wǎng)站上實(shí)現(xiàn)此層次結(jié)構(gòu)。

在下面的示例中，我們在Steven Popovich的在線作品集中看到了分層網(wǎng)站結(jié)構(gòu)的完美表現(xiàn)。最終，它促進(jìn)了用戶通過網(wǎng)站上不同級別的信息和操作的旅程——從主頁上的“美容”和“廣告”等更大的類別，訪問者在搜索特定項(xiàng)目和品牌時(shí)獲得更詳細(xì)的信息。

順序（又名線性）模型

連續(xù)的 Web 結(jié)構(gòu)會引導(dǎo)用戶逐步實(shí)現(xiàn)他們的目標(biāo)，無論是縮小類別、指導(dǎo)他們的搜索過程還是幫助他們找到注冊表單。這種基本的、低維護(hù)的結(jié)構(gòu)適合內(nèi)容和頁面最少的網(wǎng)站，例如小型企業(yè)網(wǎng)站或在線投資組合。

順序網(wǎng)站結(jié)構(gòu)從您的主頁或著陸頁開始，其中列出了許多頁面或類別。訪問者遵循線性流程，引導(dǎo)他們通過父頁面的旅程，最終將他們帶到他們想要的內(nèi)容。

在下面的例子中，Aly Gray設(shè)計(jì)了她的健身網(wǎng)站來引導(dǎo)用戶完成一個(gè)連續(xù)的旅程。通過在她的主頁上顯示四種類型的培訓(xùn)包，訪問者可以選擇最初聽起來最好的一種，然后一頁一頁地開始注冊過程。

矩陣模型

雖然矩陣是最古老的網(wǎng)站結(jié)構(gòu)模型之一，但它在今天仍然很流行。為了讓訪問者享受沒有嚴(yán)格類別的瀏覽，遵循矩陣模型的網(wǎng)站結(jié)構(gòu)沒有考慮嚴(yán)格的用戶旅程。這聽起來可能很混亂，但對于訪問者來說，這意味著完全的自由和訪問您網(wǎng)站所有內(nèi)容的多個(gè)入口點(diǎn)。

雖然類別、子類別和單個(gè)頁面仍應(yīng)存在于矩陣模型中，但您不必為用戶安排它們的出現(xiàn)順序。相反，該網(wǎng)站強(qiáng)大的鏈接和對導(dǎo)航功能（如網(wǎng)站菜單或搜索欄）的重要性不斷提高，服務(wù)于用戶體驗(yàn)。

矩陣網(wǎng)站結(jié)構(gòu)的一些最好的例子是在線報(bào)紙、在線資源或大型電子商務(wù)網(wǎng)站，這些網(wǎng)站的各種內(nèi)容相互關(guān)聯(lián)。下面，Tach Clothing使用矩陣模型，通過在搜索欄中添加面包屑和建議的“熱門產(chǎn)品”下拉列表，將訪問者帶到他們當(dāng)前的旅程之外——盡管會分散注意力。

數(shù)據(jù)庫模型

遵循數(shù)據(jù)庫模型的網(wǎng)站結(jié)構(gòu)通常會創(chuàng)建動態(tài)和個(gè)性化的體驗(yàn)。按照這種模式訪問網(wǎng)站的訪問者通常需要輸入他們自己的個(gè)人詳細(xì)信息、查詢或偏好。從那里，該網(wǎng)站將向他們展示存儲在網(wǎng)頁數(shù)據(jù)庫中的相關(guān)內(nèi)容，如個(gè)人詳細(xì)信息或產(chǎn)品頁面。

要自行完成此操作，您需要使用允許您創(chuàng)建內(nèi)部數(shù)據(jù)庫或與外部數(shù)據(jù)庫集成的網(wǎng)站軟件。使用自下而上的方法來組織您的內(nèi)容并勾勒出最具活力的設(shè)計(jì)以將其展示給訪問者。

Code Zero Yachts的商業(yè)網(wǎng)站（如下所示）使用Velo集成了一個(gè)復(fù)雜的數(shù)據(jù)系統(tǒng)，以幫助訪問者找到在特定時(shí)間、價(jià)格范圍和位置可用的游艇。

提示：如果在低代碼到無代碼的范圍內(nèi)，您處于無代碼方面，請嘗試使用這種簡單的方法在您的 Wix 站點(diǎn)上顯示數(shù)據(jù)庫集合中的內(nèi)容。

如何處理您的網(wǎng)站結(jié)構(gòu)

準(zhǔn)備好設(shè)計(jì)網(wǎng)站后，請決定是使用自上而下還是自下而上的網(wǎng)站結(jié)構(gòu)來組織內(nèi)容。自上而下的方法從根據(jù)您網(wǎng)站的一般主題概述類別層次結(jié)構(gòu)開始，而自下而上的方法從最不重要的子類別開始，一直到更一般的類別和內(nèi)容。

如果您從模板開始，您可能無需考慮創(chuàng)建網(wǎng)站結(jié)構(gòu)——只需尋找適合您內(nèi)容的結(jié)構(gòu)即可。如果您要從頭開始制作網(wǎng)站，在線框圖和起草設(shè)計(jì)架構(gòu)等階段使用UX 工具對于啟動此過程非常有幫助。

為什么關(guān)注您的網(wǎng)站結(jié)構(gòu)很重要？

為了讓訪問者在您的網(wǎng)站上實(shí)現(xiàn)目標(biāo)，他們必須按特定順序點(diǎn)擊元素。據(jù)GoodFirms稱，34.6% 的在線訪問者會離開內(nèi)容結(jié)構(gòu)不佳的網(wǎng)站。無論您是從網(wǎng)站模板開始，還是從頭開始進(jìn)行網(wǎng)頁設(shè)計(jì)，您都有責(zé)任確保訪問者可以在您的網(wǎng)站上準(zhǔn)確找到他們需要的內(nèi)容，確保可靠的網(wǎng)站結(jié)構(gòu)來支持他們的用戶體驗(yàn)。

但是所有這些都在談?wù)撃慕Y(jié)構(gòu)將如何使用戶受益，作為其創(chuàng)建者的您呢？從商業(yè)角度來看，穩(wěn)固的網(wǎng)站結(jié)構(gòu)也值得付出努力。擁有易于使用的網(wǎng)站無疑會讓客戶滿意。通過正確的策略，您的結(jié)構(gòu)將通過幫助客戶購買和加快結(jié)帳或聯(lián)系流程來支持您的業(yè)務(wù)。