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

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