《站點(diǎn)導(dǎo)航全接觸》知識(shí)清單

《站點(diǎn)導(dǎo)航全接觸》知識(shí)清單一、課程主題理解1、站點(diǎn)導(dǎo)航是什么站點(diǎn)導(dǎo)航就像是一張地圖，不過是網(wǎng)絡(luò)上的地圖。比如說，你去一個(gè)超級(jí)大的商場(chǎng)，這個(gè)商場(chǎng)有好多樓層，好多店鋪。如果沒有商場(chǎng)的指示牌告訴你每層都有什么店，哪個(gè)方向是電梯，哪個(gè)方向是衛(wèi)生間，你可能會(huì)在里面轉(zhuǎn)得暈頭轉(zhuǎn)向。站點(diǎn)導(dǎo)航在網(wǎng)絡(luò)里就起到這個(gè)作用，它告訴我們網(wǎng)站里各個(gè)部分在哪里，怎么找到我們想要的東西。在一些大型的新聞網(wǎng)站上，像新浪網(wǎng)，它的站點(diǎn)導(dǎo)航會(huì)把新聞分類，有娛樂新聞、體育新聞、國(guó)際新聞等等。你只要根據(jù)導(dǎo)航欄里的分類，就能快速找到你感興趣的新聞板塊，就像你在商場(chǎng)里根據(jù)指示牌找到你想去的服裝店一樣方便。2、為什么需要站點(diǎn)導(dǎo)航想象一下，你要在一個(gè)巨大的圖書館里找一本書。如果圖書館沒有目錄或者索引，你可能要在書架之間穿梭很久才能找到。站點(diǎn)導(dǎo)航就像是網(wǎng)站的目錄和索引。對(duì)于網(wǎng)站的管理者來說，好的站點(diǎn)導(dǎo)航能讓用戶快速找到信息，這樣用戶就會(huì)更喜歡這個(gè)網(wǎng)站，就像顧客喜歡布局清晰的商場(chǎng)一樣。比如說，我曾經(jīng)在一個(gè)旅游網(wǎng)站上預(yù)訂酒店。這個(gè)網(wǎng)站的導(dǎo)航非常清晰，有目的地搜索、酒店星級(jí)篩選、價(jià)格范圍篩選等功能在導(dǎo)航欄里很容易找到。我可以很快地根據(jù)導(dǎo)航找到我想要的酒店。但是有一次在一個(gè)不太知名的旅游網(wǎng)站上，導(dǎo)航很混亂，我找了好久才找到酒店預(yù)訂的入口，而且價(jià)格篩選和酒店類型篩選的功能還藏得很深，我差點(diǎn)就放棄在這個(gè)網(wǎng)站預(yù)訂了。所以站點(diǎn)導(dǎo)航好不好直接影響用戶的體驗(yàn)。二、站點(diǎn)導(dǎo)航的類型1、橫向?qū)Ш竭@是最常見的一種導(dǎo)航類型，就像在網(wǎng)頁的頂部或者底部有一排鏈接。這些鏈接就像是菜單一樣，點(diǎn)擊每個(gè)鏈接就可以進(jìn)入網(wǎng)站的不同部分。比如說淘寶網(wǎng)，它的頂部有“淘寶首頁”“天貓”“聚劃算”等橫向?qū)Ш芥溄印．?dāng)你想從淘寶的普通商品頁面切換到天貓的頁面時(shí)，直接點(diǎn)擊“天貓”這個(gè)橫向?qū)Ш芥溄泳涂梢粤?。橫向?qū)Ш降膬?yōu)點(diǎn)是很直觀，用戶一眼就能看到有哪些主要的板塊可以選擇。但是如果板塊太多，可能會(huì)在一行里顯示不下，就需要一些特殊的設(shè)計(jì)，比如下拉菜單或者滾動(dòng)條來顯示更多的選項(xiàng)。2、縱向?qū)Ш娇v向?qū)Ш酵ǔＴ诰W(wǎng)頁的一側(cè)，就像一列菜單。很多企業(yè)網(wǎng)站喜歡用縱向?qū)Ш?。比如一個(gè)企業(yè)的官網(wǎng)，左邊的縱向?qū)Ш娇赡苡小肮竞?jiǎn)介”“產(chǎn)品展示”“客戶服務(wù)”“聯(lián)系我們”等項(xiàng)目。當(dāng)你想了解這個(gè)企業(yè)的產(chǎn)品時(shí)，你就可以點(diǎn)擊“產(chǎn)品展示”這個(gè)縱向?qū)Ш巾?xiàng)目?？v向?qū)Ш降暮锰幨强梢苑藕芏囗?xiàng)目，不用擔(dān)心一行顯示不下。而且它可以根據(jù)內(nèi)容的重要性從上到下排列，最重要的項(xiàng)目放在最上面。不過如果網(wǎng)頁的寬度比較窄，縱向?qū)Ш娇赡軙?huì)占據(jù)比較大的空間，讓頁面的主體內(nèi)容顯示的空間變小了。3、面包屑導(dǎo)航這個(gè)名字很有趣，就像面包屑一樣，給你留下你來時(shí)的“腳印”。比如說你在一個(gè)電商網(wǎng)站上，你從“首頁”進(jìn)入“電子產(chǎn)品”分類，然后又進(jìn)入“手機(jī)”分類，最后進(jìn)入某一款手機(jī)的詳細(xì)頁面。面包屑導(dǎo)航就會(huì)顯示“首頁＞電子產(chǎn)品＞手機(jī)＞某款手機(jī)名稱”。這樣你就知道自己是怎么一步步來到這個(gè)頁面的，如果你想回到上一級(jí)或者首頁就很方便。我有一次在一個(gè)學(xué)術(shù)網(wǎng)站上查找論文資料。我從網(wǎng)站的首頁進(jìn)入到“文學(xué)研究”板塊，再到“古代文學(xué)”的子板塊，最后找到一篇關(guān)于唐詩的論文。這個(gè)過程中面包屑導(dǎo)航一直在頁面的上方顯示我的路徑，當(dāng)我看完論文想回到“古代文學(xué)”板塊去看其他論文時(shí)，我只要點(diǎn)擊面包屑導(dǎo)航里的“古代文學(xué)”就可以了，非常方便。三、站點(diǎn)導(dǎo)航的設(shè)計(jì)原則1、簡(jiǎn)潔性站點(diǎn)導(dǎo)航不能太復(fù)雜，就像一個(gè)簡(jiǎn)單的指示牌比一個(gè)密密麻麻寫滿字的指示牌更容易讓人看懂。在導(dǎo)航里，每個(gè)項(xiàng)目的名稱要簡(jiǎn)短明了。比如說一個(gè)美食網(wǎng)站，導(dǎo)航里如果有“熱門菜品推薦”就比“這里是我們網(wǎng)站為您精心挑選出來的大家都很喜歡吃的菜品推薦哦”要好得多。我看到過一個(gè)設(shè)計(jì)得很糟糕的個(gè)人博客網(wǎng)站。它的導(dǎo)航欄里有一些很長(zhǎng)很長(zhǎng)的項(xiàng)目名稱，像“我在旅行途中遇到的那些超級(jí)有趣的故事分享”，而且導(dǎo)航欄里項(xiàng)目還特別多，整個(gè)導(dǎo)航看起來亂亂的。這樣的導(dǎo)航讓我很難快速找到我想要的內(nèi)容，比如我想找博主關(guān)于攝影技巧的分享，但是根本找不到對(duì)應(yīng)的導(dǎo)航項(xiàng)目。2、一致性整個(gè)網(wǎng)站的導(dǎo)航風(fēng)格要保持一致。不管你在網(wǎng)站的哪個(gè)頁面，導(dǎo)航的位置、顏色、字體大小等都應(yīng)該差不多。就像一個(gè)商場(chǎng)里，每層樓的指示牌風(fēng)格都一樣，你才不會(huì)覺得迷茫。比如說百度，它的每個(gè)頁面的導(dǎo)航欄位置基本都是在頂部，而且顏色和字體風(fēng)格都是統(tǒng)一的。有一次我在一個(gè)藝術(shù)網(wǎng)站上，首頁的導(dǎo)航是在頂部，是白色的字體，很簡(jiǎn)潔。但是當(dāng)我進(jìn)入到某個(gè)藝術(shù)家的作品展示頁面時(shí)，導(dǎo)航欄跑到了側(cè)面，而且字體變成了彩色的藝術(shù)字，看起來很花哨。我一下子就有點(diǎn)懵了，找其他頁面的時(shí)候花了不少時(shí)間去適應(yīng)這個(gè)新的導(dǎo)航樣式。3、可訪問性導(dǎo)航要方便所有用戶使用，包括那些使用輔助設(shè)備的用戶，比如盲人使用的屏幕閱讀器。所以導(dǎo)航的文字要能夠被屏幕閱讀器正確識(shí)別，而且導(dǎo)航的交互元素，像按鈕，要能夠方便地用鍵盤操作。我聽說有一個(gè)專為殘疾人服務(wù)的網(wǎng)站，它的導(dǎo)航設(shè)計(jì)就非常注重可訪問性。它的導(dǎo)航項(xiàng)目有明確的標(biāo)簽，而且按鈕足夠大，方便那些行動(dòng)不太方便的用戶點(diǎn)擊。這個(gè)網(wǎng)站還提供了語音導(dǎo)航功能，用戶可以用語音指令來操作導(dǎo)航，這對(duì)于盲人用戶來說是非常友好的。四、站點(diǎn)導(dǎo)航的優(yōu)化1、提高搜索效率在站點(diǎn)導(dǎo)航里加入搜索功能是個(gè)很好的辦法。就像在商場(chǎng)里，除了有指示牌，還有服務(wù)臺(tái)可以問工作人員你要找的店鋪在哪里。網(wǎng)站的搜索功能就像這個(gè)服務(wù)臺(tái)。比如說京東，它的導(dǎo)航欄里有一個(gè)很明顯的搜索框。你可以直接在里面輸入你想要購買的商品名稱，然后就會(huì)出現(xiàn)相關(guān)的商品頁面。我有一次在一個(gè)音樂網(wǎng)站上找一首很冷門的歌曲。這個(gè)網(wǎng)站的導(dǎo)航分類很雜，我按照音樂類型、歌手等分類去找都沒找到。但是當(dāng)我使用它導(dǎo)航欄里的搜索功能，輸入歌曲名字后，很快就找到了這首歌曲的播放頁面。2、適應(yīng)不同設(shè)備現(xiàn)在大家使用的設(shè)備多種多樣，有電腦、手機(jī)、平板等。站點(diǎn)導(dǎo)航要能夠適應(yīng)這些不同的設(shè)備。在手機(jī)上，因?yàn)槠聊槐容^小，導(dǎo)航可能需要變成下拉菜單或者折疊菜單的形式。比如說微博，在電腦上它的導(dǎo)航是橫向的比較完整的菜單，但是在手機(jī)上，導(dǎo)航就變成了一個(gè)可以點(diǎn)擊展開的圖標(biāo)，點(diǎn)擊后會(huì)彈出菜單。我自己的經(jīng)歷是，我在電腦上訪問一個(gè)在線教育網(wǎng)站，它的導(dǎo)航很清晰，各個(gè)板塊都能很好地顯示。但是當(dāng)我用手機(jī)訪問這個(gè)網(wǎng)站時(shí)，導(dǎo)航欄里的一些項(xiàng)目被擠在一起，看起來很擁擠，而且有一些項(xiàng)目點(diǎn)擊不了。后來這個(gè)網(wǎng)站更新了，在手機(jī)上的導(dǎo)航變成了滑動(dòng)式的菜單，這樣就方便多了。五、典型問題1、如果站點(diǎn)導(dǎo)航設(shè)計(jì)得太復(fù)雜，會(huì)有什么后果？如果站點(diǎn)導(dǎo)航設(shè)計(jì)得太復(fù)雜，用戶可能會(huì)迷失方向，找不到自己想要的內(nèi)容。就像在一個(gè)迷宮里，路太多反而不知道怎么走了。這會(huì)導(dǎo)致用戶體驗(yàn)變差，用戶可能會(huì)離開這個(gè)網(wǎng)站，不再回來。比如說一些政府部門的網(wǎng)站，如果導(dǎo)航設(shè)計(jì)得很復(fù)雜，市民在上面查找辦事流程或者政策信息的時(shí)候就會(huì)很困難，可能就會(huì)抱怨這個(gè)網(wǎng)站不好用。2、如何讓站點(diǎn)導(dǎo)航在不同文化背景的用戶中都能被理解？要使用通用的圖標(biāo)和簡(jiǎn)單的文字。比如說，用一個(gè)放大鏡的圖標(biāo)表示搜索功能，這個(gè)圖標(biāo)在不同文化背景下都能被理解。文字也要盡量避免使用有文化局限性的詞匯。比如一個(gè)國(guó)際旅游網(wǎng)站，如果用一些只有本地人才懂的方言詞匯在導(dǎo)航里，外國(guó)游客就會(huì)看不懂。可以使用像“目的地”“酒店”“景點(diǎn)”這樣的通用詞匯。3、站點(diǎn)導(dǎo)航中的下拉菜單有什么優(yōu)缺點(diǎn)？?jī)?yōu)點(diǎn)是可以在有限的空間里展示更多的導(dǎo)航項(xiàng)目。比如在一個(gè)電商網(wǎng)站上，商品分類很多，如果都平鋪在導(dǎo)航欄里會(huì)占很多地方，使用下拉菜單就可以把同一類商品的子分類放在下拉菜單里。缺點(diǎn)是有時(shí)候用戶可能看不到下拉菜單里的所有項(xiàng)目，特別是當(dāng)項(xiàng)目很多的時(shí)候，需要滾動(dòng)才能看到全部，而且有些用戶可能不知道有下拉菜單的存在，容易忽略。一、基礎(chǔ)題1、站點(diǎn)導(dǎo)航像什么？（）A.網(wǎng)絡(luò)上的游戲B.網(wǎng)絡(luò)上的地圖C.網(wǎng)絡(luò)上的照片答案：B。站點(diǎn)導(dǎo)航就像網(wǎng)絡(luò)上的地圖，它可以幫助用戶找到網(wǎng)站里的各個(gè)部分，就像地圖能幫助我們找到目的地一樣。2、橫向?qū)Ш揭话阍诰W(wǎng)頁的哪里？（）A.頂部或者底部B.左側(cè)C.右側(cè)答案：A。橫向?qū)Ш酵ǔＴ诰W(wǎng)頁的頂部或者底部，像一排菜單一樣，方便用戶點(diǎn)擊進(jìn)入網(wǎng)站的不同部分。二、提高題1、請(qǐng)說出面包屑導(dǎo)航的一個(gè)優(yōu)點(diǎn)。答案：面包屑導(dǎo)航的一個(gè)優(yōu)點(diǎn)是它能顯示用戶的訪問路徑，方便用戶返回上一級(jí)或者首頁。例如在電商網(wǎng)站上，當(dāng)用戶從首頁進(jìn)入到商品分類再到具體商品頁面時(shí)，面包屑導(dǎo)航能讓用戶清楚地知道自己是怎么來的，方便返回之前的頁面查看其他內(nèi)容。2、站點(diǎn)導(dǎo)航設(shè)計(jì)的一致性體現(xiàn)在哪些方面？答案：站點(diǎn)導(dǎo)航設(shè)計(jì)的一致性體現(xiàn)在導(dǎo)航的位置、顏色、字體大小等方面。不管在網(wǎng)站的哪個(gè)頁面，這些元素都應(yīng)該保持相似。比如百度，它的每個(gè)頁面導(dǎo)航欄位置基本都在頂部，顏色和字體風(fēng)格也都是統(tǒng)一的，這樣用戶在瀏覽網(wǎng)站時(shí)就不會(huì)感到迷茫。三、拓展題1、如果你要設(shè)計(jì)一個(gè)美食網(wǎng)站的站點(diǎn)導(dǎo)航，你會(huì)遵循哪些設(shè)計(jì)原則？請(qǐng)?jiān)敿?xì)說明。答案：簡(jiǎn)潔性：導(dǎo)航項(xiàng)目名稱要簡(jiǎn)短明了，比如“熱門菜品”“特色小吃”“餐廳推薦”等，避免使用冗長(zhǎng)復(fù)雜的名稱。一致性：整個(gè)網(wǎng)站的導(dǎo)航風(fēng)格要保持一致。無論是在首頁還是菜品詳細(xì)頁面，導(dǎo)航的位置、顏色、字體等都要相似?？稍L問性：確保導(dǎo)航的文字能被屏幕閱讀器正確識(shí)別，按鈕方便操作。例如，導(dǎo)航按鈕要足夠大，方便用戶點(diǎn)擊，特別是在手機(jī)端訪問時(shí)。還要考慮到提高搜索效率，可以在導(dǎo)航欄設(shè)置搜索框，方便用戶直接搜索菜品或者餐廳。同時(shí)要適應(yīng)不同設(shè)備，在手機(jī)上導(dǎo)航可以采用折疊菜單等形式，方便在小屏幕上操作。2、一個(gè)新的購物網(wǎng)站，發(fā)現(xiàn)用戶經(jīng)常在導(dǎo)航里找不到自己想要的商品分類，你認(rèn)為可能是哪些原因造成的？應(yīng)該如何改進(jìn)？答案：可能的原因：導(dǎo)航設(shè)計(jì)太復(fù)雜：如果商品分類過多且沒有合理的組織，比如一些子分類嵌套太深，用戶就很難找到。缺乏搜索功能：沒有搜索框或者搜索功能不明顯，用戶不能快速定位到想要的商品分類。導(dǎo)航名稱