正文

如何設(shè)計(jì)網(wǎng)站（如何設(shè)計(jì)網(wǎng)站的鏈接結(jié)構(gòu)）

發(fā)布時(shí)間：2023-04-26 16:18:35 稿源：創(chuàng)意嶺閱讀： 401

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于如何設(shè)計(jì)網(wǎng)站的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶(hù)遍布全國(guó)，相關(guān)業(yè)務(wù)請(qǐng)撥打175-8598-2043，或微信：1454722008

本文目錄:

1、怎么制作網(wǎng)站啊?
2、如何設(shè)計(jì)網(wǎng)站
3、自己如何做網(wǎng)站？
4、【重要】如何設(shè)計(jì)一個(gè)優(yōu)秀的網(wǎng)站

如何設(shè)計(jì)網(wǎng)站（如何設(shè)計(jì)網(wǎng)站的鏈接結(jié)構(gòu)）

一、怎么制作網(wǎng)站啊?

申請(qǐng)一個(gè)智能建站系統(tǒng)。以前建網(wǎng)站需要懂代碼和設(shè)計(jì)，但是現(xiàn)在只需要一個(gè)智能的建站系統(tǒng)就可以完成建網(wǎng)站，只要你會(huì)上網(wǎng)會(huì)打字就行。

進(jìn)入編輯頁(yè)面，安裝樣板網(wǎng)站。樣板網(wǎng)站是建站公司已經(jīng)做好的漂亮網(wǎng)站，挑選一個(gè)喜歡的進(jìn)行安裝，只需要更換樣板網(wǎng)站圖片和文章即能完成網(wǎng)站，非?？焖俸?jiǎn)單。

更換樣板網(wǎng)站的圖片、LOGO、文章等。進(jìn)入編輯頁(yè)面，點(diǎn)擊你需要修改的模塊，重新上傳圖片或者輸入文字。綁定域名。

域名就是網(wǎng)站的地址，但如果網(wǎng)站不是商業(yè)性需要推廣的網(wǎng)站，甚至連域名都不需要，因?yàn)樽?cè)的智能建站系統(tǒng)是免費(fèi)贈(zèng)送一個(gè)二級(jí)域名，用二級(jí)域名也是可以打開(kāi)網(wǎng)站。

二、如何設(shè)計(jì)網(wǎng)站

設(shè)計(jì)是一種審美活動(dòng)，成功的設(shè)計(jì)作品一般都很藝術(shù)化。但藝術(shù)只是設(shè)計(jì)的手段，而并非設(shè)計(jì)的任務(wù)。設(shè)計(jì)的任務(wù)是要實(shí)現(xiàn)設(shè)計(jì)者的意圖，而并非創(chuàng)造美。

網(wǎng)頁(yè)設(shè)計(jì)的任務(wù)，是指設(shè)計(jì)者要表現(xiàn)的主題和要實(shí)現(xiàn)的功能。站點(diǎn)的性質(zhì)不同，設(shè)計(jì)的任務(wù)也不同。從形式上，可以將站點(diǎn)分為以下三類(lèi)。

第一類(lèi)是資訊類(lèi)站點(diǎn)，像新浪、網(wǎng)易、搜狐等門(mén)戶(hù)網(wǎng)站。這類(lèi)站點(diǎn)將為訪問(wèn)者提供大量的信息，而且訪問(wèn)量較大。因此需注意頁(yè)面的分割、結(jié)構(gòu)的合理、頁(yè)面的優(yōu)化、界面的親和等問(wèn)題。

第二類(lèi)是資訊和形象相結(jié)合的網(wǎng)站，像一些較大的公司、國(guó)內(nèi)的高校等。這類(lèi)網(wǎng)站在設(shè)計(jì)上要求較高，既要保證資訊類(lèi)網(wǎng)站的上述要求，同時(shí)又要突出企業(yè)、單位的形象。然而就現(xiàn)狀上來(lái)看，這類(lèi)網(wǎng)站有粗制濫造的嫌疑。

第三類(lèi)則是形象類(lèi)網(wǎng)站，比如一些中小型的公司或單位。這類(lèi)網(wǎng)站一般較小，有的則有幾頁(yè)，需要實(shí)現(xiàn)的功能也較為簡(jiǎn)單，網(wǎng)頁(yè)設(shè)計(jì)的主要任務(wù)是突出企業(yè)形象。這類(lèi)網(wǎng)站對(duì)設(shè)計(jì)者的美工水平要求較高。

當(dāng)然，這只是從整體上來(lái)看，具體情況還要具體分析。不同的站點(diǎn)還要區(qū)別對(duì)待。別忘了最重要的一點(diǎn)，那就是客戶(hù)的要求，它也屬于設(shè)計(jì)的任務(wù)。

明確了設(shè)計(jì)的任務(wù)之后，接下來(lái)要想的就是如何完成這個(gè)任務(wù)了

三、自己如何做網(wǎng)站？

自己做網(wǎng)站的步驟如下：

1、域名注冊(cè)。網(wǎng)站建設(shè)首先你需要一個(gè)屬于你自己的網(wǎng)址，也就是域名。

2、網(wǎng)站空間注冊(cè)。網(wǎng)站空間是用來(lái)放網(wǎng)站程序的。網(wǎng)站空間分為ASP、PHP、NET，三種類(lèi)型。

3、網(wǎng)站備案

國(guó)內(nèi)的網(wǎng)站空間都需要備案，沒(méi)有備案的網(wǎng)站不允許上線。

4、上傳網(wǎng)站程序

網(wǎng)上有很多免費(fèi)網(wǎng)站程序，論壇（discuz）、博客（Emlog、WordPress、Z-blog）、綜合站（PageAdminCMS系統(tǒng)）等，根據(jù)自己的網(wǎng)站來(lái)選擇程序。

5、添加網(wǎng)站內(nèi)容。我們可以在備案期間來(lái)完成網(wǎng)站內(nèi)容添加，添加網(wǎng)站內(nèi)容也是比較簡(jiǎn)單。進(jìn)入網(wǎng)站后臺(tái)新建網(wǎng)站欄目，自己需要幾個(gè)欄目就建幾個(gè)。

6、解析域名和綁定域名。備案號(hào)后通過(guò)我就可以把域名解析到空間IP上了，域名解析完成后，再在空間的管理面板上把解析好的域名綁定。在地址欄輸入你的域名。就可以訪問(wèn)到你的網(wǎng)站。

四、【重要】如何設(shè)計(jì)一個(gè)優(yōu)秀的網(wǎng)站

現(xiàn)今，網(wǎng)站和web技術(shù)已經(jīng)不算是新興技術(shù)了，但是不得不承認(rèn)，在當(dāng)下的移動(dòng)互聯(lián)網(wǎng)時(shí)代，web技術(shù)仍然算得上是新潮的技術(shù)之一，并且網(wǎng)站也是各企業(yè)商業(yè)價(jià)值中的重要一環(huán)。因此，規(guī)劃、設(shè)計(jì)具有優(yōu)秀用戶(hù)體驗(yàn)的網(wǎng)站，仍然是我們的重要技能之一。

前戲：明確網(wǎng)站的業(yè)務(wù)模型

在開(kāi)始正式地規(guī)劃網(wǎng)站之前，我們有必要了解網(wǎng)站的主要業(yè)務(wù)模型。盡管人們都更加愿意獲得免費(fèi)的信息，但信息提供方（企業(yè)）還是希望能夠由此得到回報(bào)的。

要明白： 大多數(shù)企業(yè)要想存活，就必須要掙錢(qián)。

在為企業(yè)建設(shè)網(wǎng)站之前，我們要知道公司的業(yè)務(wù)模型是什么，如果不了解業(yè)務(wù)模型，就無(wú)法知道用戶(hù)哪些行為是有意義的，哪些行為是毫無(wú)價(jià)值的。

主流的業(yè)務(wù)模型包括：

找準(zhǔn)了業(yè)務(wù)模型，我們就可以開(kāi)始設(shè)計(jì)出支持業(yè)務(wù)需求的網(wǎng)站了。

一、明確目標(biāo)用戶(hù)

在開(kāi)始網(wǎng)站設(shè)計(jì)之前，我們首先要問(wèn)自己一個(gè)問(wèn)題：“網(wǎng)站是為誰(shuí)搭建的？”不是每個(gè)網(wǎng)站的設(shè)計(jì)者都能準(zhǔn)確有效地回答這個(gè)問(wèn)題，有的人會(huì)說(shuō)“網(wǎng)上的每一個(gè)人”，還有的會(huì)說(shuō)“所有喜愛(ài)某類(lèi)產(chǎn)品的人”、“所有愛(ài)看書(shū)的人”或者“所有喜歡美食的人”。

這些回答都不是準(zhǔn)確的回答，因?yàn)槟銦o(wú)法從這些回答中得到精確的用戶(hù)角色。

我們可以采取如下工作方式，去明確目標(biāo)用戶(hù)：

1. 找到公司的市場(chǎng)/運(yùn)營(yíng)部門(mén)，市場(chǎng)/運(yùn)營(yíng)部門(mén)的人員或許對(duì)公司用戶(hù)的統(tǒng)計(jì)數(shù)據(jù)結(jié)果以及心理方面做過(guò)了大量的研究。

2. 咨詢(xún)公司負(fù)責(zé)人或高管，了解他們希望產(chǎn)品所面向的用戶(hù)，以及他們所認(rèn)為的具有價(jià)值的用戶(hù)行為。

在和各相關(guān)部門(mén)同事的談話(huà)中，并不只是收集用戶(hù)的統(tǒng)計(jì)信息，真正要做的是得到一些合適的行為信息來(lái)幫助我們更好的設(shè)計(jì)網(wǎng)站。

比如，我們了解到用戶(hù)的年齡較大，就要做出一些初步的設(shè)計(jì)決策。如：字體要放大、交互操作要盡量簡(jiǎn)單、以及頁(yè)面上哪些元素更應(yīng)該突出等。

二、與目標(biāo)用戶(hù)交流

招募目標(biāo)用戶(hù)通常需要公司內(nèi)部其他部門(mén)的配合，比如客服部門(mén)，可以通過(guò)諸如電話(huà)邀約、郵件邀約等方式，如果目標(biāo)用戶(hù)是企業(yè)，則可以通過(guò)公司高層或市場(chǎng)部門(mén)，向企業(yè)致電或發(fā)送邀請(qǐng)函等方式，總之，盡量通過(guò)其他部門(mén)的協(xié)助完成用戶(hù)的邀約。

在訪談的過(guò)程中，我們要注意理解得到的反饋。比如，用戶(hù)可能會(huì)說(shuō)“我希望按鈕大一些?！倍麄兊膶?shí)際想法可能是“付款的過(guò)程太復(fù)雜了。”或者用戶(hù)可能會(huì)說(shuō)“我希望這個(gè)的演顏色是紅色。”他們真正的意思可能是“要招到我想要的東西太耗費(fèi)時(shí)間?！?span style="display:none">tQc創(chuàng)意嶺 - 安心托付、值得信賴(lài)的品牌設(shè)計(jì)、營(yíng)銷(xiāo)策劃公司

最佳的方式是： 當(dāng)用戶(hù)在正常的環(huán)境中具體完成任務(wù)時(shí)實(shí)際地跟蹤用戶(hù)的行為。

所以，在訪談中，我們可以問(wèn)一些諸如“你想做什么？”、“你希望得到什么”這樣的問(wèn)題，而避免去問(wèn)“你認(rèn)為這個(gè)按鈕應(yīng)該放在哪里？”這種問(wèn)題。我們要把重點(diǎn)放在用戶(hù)完成任務(wù)時(shí)遇到的難題上。

三、創(chuàng)建用戶(hù)角色模型

角色模型可以幫助我們更深入地理解設(shè)計(jì)所針對(duì)的對(duì)象，以及怎樣才能真正滿(mǎn)足這個(gè)用戶(hù)的需求。當(dāng)然，也可以不去創(chuàng)建復(fù)雜的角色模型，只不過(guò)，如果能針對(duì)一個(gè)特定的“人”來(lái)進(jìn)行設(shè)計(jì)，會(huì)讓我們的設(shè)計(jì)更加有效。

1. 總結(jié)用戶(hù)交流結(jié)果，把結(jié)果分發(fā)給各利益相關(guān)者或相關(guān)部門(mén)人員

在第二步中，我們會(huì)收集到一些信息?？赡芤呀?jīng)得到用戶(hù)的相關(guān)信息，比如：性別、地理位置、上網(wǎng)習(xí)慣、技術(shù)水平或是他們使用競(jìng)品的方式。

我們了解到用戶(hù)當(dāng)前遇到的麻煩，也了解到哪些方面還算不錯(cuò)等信息。

針對(duì)于收集到的信息，我們需要建立一份報(bào)告，這份報(bào)告可能會(huì)涉及以下信息：

這里需要注意的是：

2. 與各相關(guān)部門(mén)人員召開(kāi)會(huì)議，腦暴形成用戶(hù)角色

尋求各部門(mén)相關(guān)人員的協(xié)作，往往比單槍匹馬作戰(zhàn)更高效。

每一個(gè)部門(mén)都會(huì)對(duì)用戶(hù)有自己的理解，是男人還是女人？年齡段如何？住在哪里？如果大家不確定，可以參照上一步的報(bào)告文檔。

當(dāng)大家提出了大量用戶(hù)特征后，可以開(kāi)始合并這些特征，并將其改進(jìn)為角色，比如：女性+25~35+華北地區(qū)=來(lái)自北京的27歲女性，甚至還可以為她取一個(gè)名字。

3. 讓角色成為真正的人

為用戶(hù)角色增加一些具體的個(gè)性化內(nèi)容，比如：照片、姓名、職業(yè)、個(gè)人背景、職業(yè)、教育背景、目標(biāo)、愛(ài)好、最喜歡的網(wǎng)站、他的愿望等信息。確保用戶(hù)角色的真實(shí)是這一步的關(guān)鍵。

4. 為人物角色加入場(chǎng)景表達(dá)

通過(guò)創(chuàng)建場(chǎng)景，會(huì)使得人物更加豐滿(mǎn)，同時(shí)有助于我們完成網(wǎng)站交互系統(tǒng)的設(shè)計(jì)。場(chǎng)景，就是人物角色使用產(chǎn)品時(shí)的背景故事簡(jiǎn)介。

比如：王強(qiáng)（人物角色名字）打開(kāi)瀏覽器，從網(wǎng)站上看到了感興趣的電影介紹，首先他回選擇自己關(guān)心的電影類(lèi)型，然后網(wǎng)站會(huì)推薦給他可能相看的電影；接下來(lái)，他會(huì)選擇真正感興趣的電影，并進(jìn)行觀看。

四、繪制用戶(hù)路徑草圖

用戶(hù)路徑草圖可以幫助我們確定不同類(lèi)型用戶(hù)會(huì)完成哪些類(lèi)型的動(dòng)作，由此我們可以決定需要為網(wǎng)站設(shè)計(jì)什么。通過(guò)畫(huà)出不同用戶(hù)的路徑，可以幫助我們查看是否有遺漏。

舉一個(gè)例子：

比如，要建立一個(gè)小型電子商務(wù)網(wǎng)站的用戶(hù)路徑草圖，可以有這樣一個(gè)場(chǎng)景故事：買(mǎi)禮物的人瀏覽主頁(yè)，找到適合的禮物，買(mǎi)下禮物，寫(xiě)下一張賀卡，寫(xiě)上朋友的信息，付款。

起初的用戶(hù)路徑草圖如下：

接下來(lái)可以考慮：

網(wǎng)站的用戶(hù)不只是送禮物的人，也會(huì)有給自己買(mǎi)禮物的用戶(hù)、不滿(mǎn)意的用戶(hù)、失業(yè)想要在線賣(mài)東西的用戶(hù)、其他渠道接收到廣告的用戶(hù)。

我們可以繼續(xù)為這些用戶(hù)添加用戶(hù)路徑：

五、明確業(yè)務(wù)流程與任務(wù)流程

繪制了全用戶(hù)的全路徑草圖，現(xiàn)在就要拆解用戶(hù)的全部任務(wù)，明確交互中每一步的細(xì)節(jié)。

其實(shí)這一步，就是根據(jù)用戶(hù)的任務(wù)，完成各個(gè)任務(wù)/功能的流程圖設(shè)計(jì)，以及和網(wǎng)站后臺(tái)系統(tǒng)交互的業(yè)務(wù)流程圖設(shè)計(jì)。

關(guān)于功能流程與業(yè)務(wù)流程，網(wǎng)上已有不少文章做出詳述，本文不再詳細(xì)闡述。

六、網(wǎng)站的用戶(hù)體驗(yàn)設(shè)計(jì)

本步驟不再敘述如何繪制網(wǎng)站的原型圖，這里要談的是在網(wǎng)站的設(shè)計(jì)中，值得注意的要點(diǎn)。

1. 網(wǎng)站上的一切要井井有條

網(wǎng)站中會(huì)含有豐富的信息，用戶(hù)來(lái)到我們的網(wǎng)站時(shí)為了查找信息或者完成任務(wù)或者二者兼有，作為網(wǎng)站的設(shè)計(jì)者，我們的任務(wù)就是用好的設(shè)計(jì)幫助用戶(hù)達(dá)到他們的目的。

（1）幫助確認(rèn)是否到達(dá)了正確的位置

來(lái)到網(wǎng)站，用戶(hù)希望知道這是不是他所需要的，也就是他是否達(dá)到了正確的位置。

用戶(hù)來(lái)到我們的網(wǎng)站時(shí)，首先看到的就是網(wǎng)站的組織方案。

組織方案有兩個(gè)作用：

因此，組織方案需要為用戶(hù)展示所有的產(chǎn)品范圍。比如，淘寶網(wǎng)站的分類(lèi)導(dǎo)航：

（2）幫助用戶(hù)找到他們需要的東西

用戶(hù)知道他們?cè)L問(wèn)了正確的網(wǎng)站，接下來(lái)他們需要標(biāo)識(shí)導(dǎo)引來(lái)找到他們想要的東西，標(biāo)識(shí)導(dǎo)引有四方面的內(nèi)容：

（3）讓用戶(hù)知道網(wǎng)站上有更好的東西

無(wú)論用戶(hù)是否在網(wǎng)站上找到了他們需要的東西，他們都會(huì)想找到更多的類(lèi)似的更好的內(nèi)容。

在這里，可以有效利用導(dǎo)航或面包屑導(dǎo)引，突出顯示用戶(hù)在網(wǎng)站中的當(dāng)前位置，并顯示相關(guān)的內(nèi)容，讓用戶(hù)可以鏈接到其他的地方。

另外，也可以使用提供“更多內(nèi)容”的選項(xiàng)，可以向用戶(hù)提供相關(guān)商品的快捷途徑。

“更多內(nèi)容”導(dǎo)航工具對(duì)于一組相關(guān)商品以及相關(guān)種類(lèi)的快捷途徑最為有效，例如電商網(wǎng)站的“猜你喜歡”，文章網(wǎng)站的“相關(guān)文章”。

（4）為用戶(hù)提供下一步操作

用戶(hù)已經(jīng)找到了他們想要的東西，我們要為用戶(hù)的下一步操作提供相應(yīng)的選擇，我們應(yīng)該在設(shè)計(jì)網(wǎng)站時(shí)詢(xún)問(wèn)自己“用戶(hù)希望在找到他們需要的東西后，做些什么？”

對(duì)于一個(gè)電商網(wǎng)站，用戶(hù)肯定是要購(gòu)買(mǎi)到找到的商品，電商網(wǎng)站提供的“加入購(gòu)物車(chē)”和“購(gòu)買(mǎi)”按鈕有效幫助用戶(hù)解決了問(wèn)題。對(duì)于一個(gè)文章網(wǎng)站，用戶(hù)閱讀一篇文章后需要做些什么呢？應(yīng)該是評(píng)論、分享、收藏、復(fù)制、粘貼這篇文章。

用戶(hù)會(huì)利用網(wǎng)站提供的“下一步”操作拉近與其目標(biāo)的距離。

2. 網(wǎng)站導(dǎo)航的細(xì)節(jié)闡述

這里之所以把網(wǎng)站的導(dǎo)航設(shè)計(jì)拿出來(lái)，是因?yàn)榭此坪?jiǎn)單的導(dǎo)航設(shè)計(jì)，里面含有很多的設(shè)計(jì)細(xì)節(jié)。

在討論導(dǎo)航的細(xì)節(jié)之前，我們先要明確用戶(hù)查找信息的方式，用戶(hù)訪問(wèn)我們的網(wǎng)站就是為了獲取查找相關(guān)信息，而導(dǎo)航可以幫助用戶(hù)去完成這一操作，所以有必要了解用戶(hù)查找信息的方式。

（1）用戶(hù)查找信息的方法

（2）導(dǎo)航的分類(lèi)

三類(lèi)導(dǎo)航分別對(duì)應(yīng)不同的用戶(hù)查找信息方法：

（3）全局導(dǎo)航

在很多網(wǎng)站上，全局導(dǎo)航就是導(dǎo)航條，比如：

對(duì)網(wǎng)站內(nèi)容分類(lèi)并選擇組織系統(tǒng)時(shí)，全局導(dǎo)航作為頂層類(lèi)別，對(duì)用戶(hù)和企業(yè)來(lái)說(shuō)是意義重大的，因?yàn)樗宫F(xiàn)了網(wǎng)站的頂層架構(gòu)。

全局導(dǎo)航需要再每個(gè)頁(yè)面都出現(xiàn)，不論用戶(hù)現(xiàn)在在哪里，都能通過(guò)全局導(dǎo)航繼續(xù)訪問(wèn)網(wǎng)站的任何位置。

同時(shí)，全局導(dǎo)航還有一個(gè)作用，就是會(huì)告訴告訴用戶(hù)網(wǎng)站是關(guān)于什么的，以及用戶(hù)可以利用網(wǎng)站來(lái)做些什么。

全局導(dǎo)航通常會(huì)顯示在頁(yè)面的最上方，因?yàn)檫@樣就能將頁(yè)面的其余部分聚焦于內(nèi)容數(shù)據(jù)。

當(dāng)然，垂直的全局導(dǎo)航也是一種選擇，但是這樣會(huì)限制局部導(dǎo)航以及頁(yè)面內(nèi)容的可用空間。

（4）局部導(dǎo)航

局部導(dǎo)航也稱(chēng)為欄目導(dǎo)航，因?yàn)樗峁┝艘唤M鏈接。當(dāng)點(diǎn)擊了一個(gè)全部導(dǎo)航時(shí)，會(huì)進(jìn)入到相應(yīng)頁(yè)面，此時(shí)會(huì)在全局導(dǎo)航下方出現(xiàn)新的一組導(dǎo)航條，這就是局部導(dǎo)航。

利用局部導(dǎo)航，只需要提供一個(gè)欄目下其他頁(yè)面的鏈接即可。

在一個(gè)復(fù)雜的分類(lèi)系統(tǒng)中，用戶(hù)希望從一個(gè)類(lèi)別移到子類(lèi)別，然后再移回來(lái)，設(shè)計(jì)局部導(dǎo)航就是為了讓用戶(hù)能夠輕松地在不同類(lèi)別間導(dǎo)航。

局部導(dǎo)航可以有效的幫助“探測(cè)內(nèi)容查找”型用戶(hù)，這些用戶(hù)知道他們需要某些東西，但是又不確定到底是什么。

選擇一個(gè)全局導(dǎo)航后，局部導(dǎo)航可以幫助他們?yōu)g覽更加具體的內(nèi)容。而對(duì)于“不知道自己要查找什么”的用戶(hù)，局部導(dǎo)航可以為他們提供一組相關(guān)的選項(xiàng)，幫助他們做出決策。

局部導(dǎo)航通常出現(xiàn)在全局導(dǎo)航的下方（或頁(yè)面的左側(cè)）。這種布局方式也強(qiáng)調(diào)了內(nèi)容的組織方式：子類(lèi)在類(lèi)別下方，把相關(guān)性最強(qiáng)的鏈接放在最接近用戶(hù)需要的位置。

用戶(hù)在訪問(wèn)網(wǎng)站的一個(gè)頁(yè)面時(shí)，會(huì)關(guān)注頁(yè)面的內(nèi)容，如果他看到的頁(yè)面上沒(méi)有需要的內(nèi)容，那么局部導(dǎo)航通常要放在離頁(yè)面內(nèi)容更近的位置，用戶(hù)想要訪問(wèn)其他類(lèi)別時(shí)，首先要找的便會(huì)是局部導(dǎo)航。

（5）導(dǎo)航訪問(wèn)模式

在全局導(dǎo)航和局部導(dǎo)航這里，介紹一下用戶(hù)訪問(wèn)導(dǎo)航的模型，用戶(hù)查找網(wǎng)站內(nèi)容的方式取決于網(wǎng)站的導(dǎo)航，通過(guò)導(dǎo)航訪問(wèn)內(nèi)容有兩種基本模式（我喜歡這么叫這兩種方式）：彈跳模型和爬行模型。

彈跳模型： 這種模型會(huì)使用戶(hù)前往一個(gè)子類(lèi)，然后必須回到其父類(lèi)（首頁(yè)）來(lái)選擇另一個(gè)不同的子類(lèi)。

此模型適用于用戶(hù)瀏覽龐大的異構(gòu)內(nèi)容集的時(shí)候，眾多分類(lèi)龐雜的網(wǎng)站如電商網(wǎng)站、素材類(lèi)網(wǎng)站，這些類(lèi)型網(wǎng)站中面包屑導(dǎo)引工具就顯得異常重要，用戶(hù)會(huì)沿著面包屑導(dǎo)航的軌跡返回。

采用該模型，為了讓用戶(hù)在網(wǎng)站中轉(zhuǎn)移時(shí)將其余的頂層類(lèi)別隱藏，使用戶(hù)更沉浸當(dāng)前類(lèi)別中。

同時(shí)，對(duì)于包含大量?jī)?nèi)容的網(wǎng)站，不可能把所有頂層類(lèi)別連同所有局部導(dǎo)航都顯示在一起。

例如，京東的面包屑還自帶了篩選功能：

爬行模型 ：在該模型中，用戶(hù)可以采用橫向的方式在各類(lèi)別間轉(zhuǎn)移，用戶(hù)選擇一個(gè)類(lèi)別后，可以繼續(xù)選擇頁(yè)面上的“兄弟”類(lèi)別的導(dǎo)航，用戶(hù)只需要單擊一次就可以進(jìn)行切換。

做一個(gè)簡(jiǎn)單的總結(jié)：全局和局部導(dǎo)航統(tǒng)稱(chēng)為結(jié)構(gòu)導(dǎo)航，優(yōu)秀的結(jié)構(gòu)導(dǎo)航能支持用戶(hù)的所有信息搜尋行為，包括前文中三類(lèi)查找信息的用戶(hù)。

（6）關(guān)聯(lián)導(dǎo)航

關(guān)聯(lián)導(dǎo)航就是網(wǎng)站頁(yè)面上能為該頁(yè)面上的內(nèi)容關(guān)聯(lián)到額外內(nèi)容的鏈接，比如：文章詳情的“更多文章”、電商網(wǎng)站的“猜你喜歡”、新聞詳情的“相關(guān)新聞”等。

關(guān)聯(lián)導(dǎo)航有時(shí)很容易被我們忘記，因?yàn)樗鼈兿喈?dāng)于跨越了網(wǎng)站信息架構(gòu)體系結(jié)構(gòu)的快捷方式。

但是，不得不承認(rèn)，關(guān)聯(lián)導(dǎo)航是保證網(wǎng)站可用性強(qiáng)大的驅(qū)動(dòng)力，可以促使用戶(hù)沉浸于我們的內(nèi)容。

關(guān)聯(lián)導(dǎo)航關(guān)注兩方面內(nèi)容：

a. 上文中已經(jīng)提到過(guò)“下一步”操作。當(dāng)用戶(hù)找到了他們希望的東西時(shí)，下一步要做什么？

如果是訪問(wèn)了一篇文章，就應(yīng)該為用戶(hù)提供更多相關(guān)文章的鏈接；如果是觀看了一個(gè)視頻，就可以提供更多相關(guān)的視頻鏈接給用戶(hù)。

例如：在36kr網(wǎng)站，當(dāng)用戶(hù)閱讀了一篇文章后，網(wǎng)站提供了收藏、評(píng)論、分享等功能。

或者，用戶(hù)心情不錯(cuò)想要繼續(xù)查看相關(guān)內(nèi)容，為此，網(wǎng)站提供了相關(guān)文章和感興趣文章的鏈接。

又或者，用戶(hù)不想看類(lèi)似文章了，此時(shí)網(wǎng)站提供了下一篇文章的鏈接。

b. 如果當(dāng)前頁(yè)面展示的不是用戶(hù)想要的，那么該怎么辦呢？我們當(dāng)然不能保證每一個(gè)頁(yè)面都是用戶(hù)想要的。

我們要做的，就是要提供一些其他的內(nèi)容給用戶(hù)看到，可以提供一些相關(guān)內(nèi)容的鏈接，或者是提供同一內(nèi)容不同格式的鏈接，比如在一個(gè)新聞詳情內(nèi)，可以給用戶(hù)提供文字、音頻以及視頻多種查看方式。

例如：在用百度搜索內(nèi)容時(shí)，并不是一下子就能搜索到用戶(hù)想找的內(nèi)容，此時(shí)在搜索頁(yè)面上提供了多種格式的搜索類(lèi)型，同時(shí)還提供了搜索工具幫助用戶(hù)篩選搜索的結(jié)果，在界面的右側(cè)也提供了一些與搜索關(guān)鍵字相關(guān)的鏈接。

（7）可用性導(dǎo)航

信息架構(gòu)領(lǐng)域的美國(guó)知名作家James Kalbach給出了可用性導(dǎo)航的定義“可用性導(dǎo)航將工具和特性相連接，這些特性可以幫助訪問(wèn)者使用網(wǎng)站?！?span style="display:none">tQc創(chuàng)意嶺 - 安心托付、值得信賴(lài)的品牌設(shè)計(jì)、營(yíng)銷(xiāo)策劃公司

好吧，專(zhuān)家的定義總是這么晦澀。

其實(shí)我們對(duì)可用性導(dǎo)航并不陌生，網(wǎng)站的登錄/注冊(cè)、搜索、個(gè)人信息、個(gè)人賬戶(hù)、客服、我的訂單等都是可用性導(dǎo)航。

可用性導(dǎo)航通常放在全局導(dǎo)航附近，比如頁(yè)面的右上方，因?yàn)榭捎眯詫?dǎo)航也需要在網(wǎng)站的所有地方都能訪問(wèn)到。

在設(shè)計(jì)可用性導(dǎo)航時(shí)，要利用視覺(jué)線索和頁(yè)面上的屋里位置將它和全局導(dǎo)航分開(kāi)。

不同類(lèi)型網(wǎng)站可用性導(dǎo)航包含的信息不同，根據(jù)網(wǎng)站各自的業(yè)務(wù)進(jìn)行具體設(shè)計(jì)，比如：京東的“登錄/注冊(cè)、我的訂單、我的京東、京東會(huì)員、企業(yè)采購(gòu)、客戶(hù)服務(wù)、手機(jī)京東”、站酷網(wǎng)的“搜索、上傳、消息、個(gè)人信息”等。

（8）小結(jié)：

全局導(dǎo)航和局部導(dǎo)航可以幫助用戶(hù)縮小網(wǎng)站的內(nèi)容范圍。關(guān)聯(lián)導(dǎo)航可以將用戶(hù)連接到相關(guān)的內(nèi)容，提供不同情況的“下一步”。

可用性導(dǎo)航可以放置另外三類(lèi)導(dǎo)航未能妥善處理的其他重要鏈接。

三部分導(dǎo)航綜合到一起，就可以得到一個(gè)可用性很高的網(wǎng)站了。

如果在設(shè)計(jì)網(wǎng)站的導(dǎo)航時(shí)，還是無(wú)從下手，試著回答自己三個(gè)問(wèn)題“內(nèi)容如何組織？”“用戶(hù)希望通過(guò)網(wǎng)站做什么？”“你希望用戶(hù)通過(guò)網(wǎng)站做什么？”

3. 網(wǎng)站內(nèi)容的基石—元數(shù)據(jù)

元數(shù)據(jù)是網(wǎng)站組織系統(tǒng)的基礎(chǔ)，搜索以及電商網(wǎng)站上的導(dǎo)航系統(tǒng)都依賴(lài)于元數(shù)據(jù)。

網(wǎng)站上的信息可以有不同的形式，比如：一篇文章、一張圖片或者是一個(gè)視音頻。

元數(shù)據(jù)可以確保以上各種形式的內(nèi)容都能夠被用戶(hù)查找瀏覽到，元數(shù)據(jù)就是每一項(xiàng)內(nèi)容的所有信息。比如，一首歌曲，元數(shù)據(jù)可能包括：出處，版本，作詞人，作曲人，演唱者，專(zhuān)輯名，時(shí)長(zhǎng)，音樂(lè)類(lèi)型等等。

元數(shù)據(jù)通常包括以下三種：

1. 固有性元數(shù)據(jù)。與內(nèi)容構(gòu)成有關(guān)的元數(shù)據(jù)，比如這是一個(gè)word文檔、jpeg圖片、ZIP文件。

2. 管理性元數(shù)據(jù)。與內(nèi)容構(gòu)成有關(guān)的元數(shù)據(jù)，比如圖片的用途、編輯人、是否已發(fā)表。

3. 描述性元數(shù)據(jù)。與內(nèi)容本質(zhì)有關(guān)的元數(shù)據(jù)，比如一個(gè)圖片的描述性元數(shù)據(jù)：狗、犬科、可愛(ài)等。

下圖展示一些元數(shù)據(jù)的類(lèi)型：

我們要根據(jù)網(wǎng)站的具體定位，組織具體的內(nèi)容及其元數(shù)據(jù)，明確每一個(gè)元數(shù)據(jù)對(duì)用戶(hù)來(lái)說(shuō)是否有用。

4. 網(wǎng)站設(shè)計(jì)要遵循的基本原則

用戶(hù)體驗(yàn)設(shè)計(jì)部分的最后，總結(jié)一些常用的設(shè)計(jì)原則吧：

七、目標(biāo)（種子）用戶(hù)測(cè)試網(wǎng)站

可以給用戶(hù)測(cè)試我們的網(wǎng)站原型，也可以快速搭建第一個(gè)版本后讓用戶(hù)使用得到反饋。無(wú)論采用哪一種方式，目標(biāo)都是要盡快得到用戶(hù)的反饋，以及時(shí)調(diào)整解決出現(xiàn)的問(wèn)題。

同時(shí)，我們要為發(fā)現(xiàn)的問(wèn)題預(yù)留出足夠的處理時(shí)間。

八、迭代優(yōu)化我們的網(wǎng)站

接下來(lái)，就是不斷的去迭代、優(yōu)化網(wǎng)站了，根據(jù)公司業(yè)務(wù)的調(diào)整、或是配合其他產(chǎn)品線、或是增加產(chǎn)品功能，不斷的去完善網(wǎng)站。

九、總結(jié)

本文討論了系統(tǒng)規(guī)劃網(wǎng)站的大致流程，重點(diǎn)討論了提升網(wǎng)站用戶(hù)體驗(yàn)的設(shè)計(jì)要點(diǎn)，從中又引出了導(dǎo)航、元數(shù)據(jù)以及基本的設(shè)計(jì)原則，希望本文的內(nèi)容能給大家?guī)?lái)一些幫助。

以上就是關(guān)于如何設(shè)計(jì)網(wǎng)站相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢(xún)，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。