技術(shù)資訊
瞎扯之Web導(dǎo)航
2009-03-16 14:29:00
這年頭,信息和獲得信息的渠道越來越多。隨著信息量的增大,先有了分類,又有了導(dǎo)航,再有了搜索,后面的發(fā)展還不得而知。在此只是根據(jù)平日的所看所想簡單聊下導(dǎo)航,歡迎各路高手拍磚~
導(dǎo)航的目的很簡單:告訴你現(xiàn)在的位置,你可以怎樣來,又可以到哪去。生活中最常見的導(dǎo)航是路標,當遇到錯誤或指向性不明確的路標,你一定會抓狂。偶本人就曾在某大型商場見到一幅消防逃生路線圖,指引標注的甚為詳細,可惜的是沒有標注“您當前的位置”……
當然生活中的例子不是本文哼唧的重點,下面開始扯web網(wǎng)站中導(dǎo)航的應(yīng)用。
介個是我們熟悉的瀏覽器和PS的導(dǎo)航。瀏覽器提供的“前進”“后退”功能能夠讓用戶雙向返回瀏覽過的頁面。PS的導(dǎo)航器則清楚的標明了當前所在的位置。
圖1:世界之窗瀏覽器
圖2:Photoshop
在Web網(wǎng)站中,導(dǎo)航則被創(chuàng)造性的賦予了多種多樣的表現(xiàn)形式。偶主要以友商網(wǎng)做個例子,繼續(xù)瞎扯。
全站性導(dǎo)航
顧名思意,全站性導(dǎo)航是在網(wǎng)站的每一頁都會出現(xiàn)的一種統(tǒng)一表現(xiàn)的全局性導(dǎo)航方式。通常出現(xiàn)在網(wǎng)頁的頂端,直接鏈接到向用戶展示的重要區(qū)域。另外有一種俗稱“面包屑”的導(dǎo)航,雖然未必會出現(xiàn)在所有頁面,但是它承擔了告知用戶所在頁面的位置,以及由哪來到哪去的重要功能。(面包屑的由來詳見格林童話《Hansel and Gretel》)
圖3:友商網(wǎng)的全站導(dǎo)航和面包屑導(dǎo)航
區(qū)域性導(dǎo)航
區(qū)域性導(dǎo)航作為全站性導(dǎo)航的輔助,主要用于對本區(qū)域中信息做進一步的分類,讓用戶更方便查閱。需要強調(diào)的是,此類區(qū)域性導(dǎo)航需要設(shè)計得比較靈活,能夠應(yīng)對信息增加導(dǎo)致導(dǎo)航層級增加的問題。下圖是友商課堂欄目的區(qū)域?qū)Ш剑呀?jīng)無法滿足下一級目錄分類的需求了-_-||
圖4:友商課堂的區(qū)域?qū)Ш?/P>
內(nèi)嵌式導(dǎo)航
內(nèi)嵌式導(dǎo)航則更加靈活滴穿插在頁面的各個部分,為區(qū)域不同卻有關(guān)聯(lián)的內(nèi)容做牽線。在引導(dǎo)用戶獲得更多相關(guān)信息的同時,也可以增加網(wǎng)站的內(nèi)鏈。友商網(wǎng)在4.0改版的設(shè)計中就大量使用了如下的內(nèi)嵌式導(dǎo)航:
圖5:友商網(wǎng)的內(nèi)嵌式導(dǎo)航
輔助性導(dǎo)航
輔助性導(dǎo)航包括了網(wǎng)站地圖(Sitemap),索引(Index)以及其他基本導(dǎo)航以外的導(dǎo)航方式。網(wǎng)站地圖需要清晰的寫明整個網(wǎng)站的目錄結(jié)構(gòu),雖然幾乎沒有人去看,但是他的核心作用是指引搜索引擎的爬蟲直接爬向網(wǎng)站上的重要頁面。索引則多數(shù)出現(xiàn)于有海量信息的商務(wù)網(wǎng)站(如B2B類站點),他能讓用戶跳過所有的目錄級,直觀得看到全部的底層信息。
圖6:Globalsources的索引導(dǎo)航
社會化導(dǎo)航
相比前面提到的導(dǎo)航類型,社會化導(dǎo)航則典型的擁有web2.0的靈魂。這類導(dǎo)航的開山鼻祖是amazon.com。當你購買一本書的時候,系統(tǒng)會根據(jù)其他用戶購買的類似書籍或目錄中的類似書籍,通過一套復(fù)雜的算法推薦給你相關(guān)的書籍,絕大多數(shù)情況下這本書是你需要或者感興趣的,從而提高了銷量。目前國內(nèi)此類導(dǎo)航做的最優(yōu)秀的非淘寶莫屬。你瀏覽了商品,系統(tǒng)會“猜你喜歡”,推薦給你相關(guān)的商品信息;你收藏了商品,同樣會推薦給你其他用戶收藏的同類商品。研究一下這些推薦規(guī)則,不失為又一種網(wǎng)絡(luò)推廣的途徑。另外一種值得一提的是云標簽,實際上他是眾多關(guān)鍵詞的集合,不同的是他同樣通過算法將熱門的關(guān)鍵詞以不同的顏色或字號加以區(qū)分,并且實時動態(tài)變化,告訴用戶哪些信息最“熱門”,引導(dǎo)用戶去點擊。
圖7:淘寶的“猜你喜歡”
圖8:淘寶的“同類收藏推薦”
圖9:Flickr的“云標簽”
網(wǎng)絡(luò)上還有眾多牛X創(chuàng)意的導(dǎo)航方式,大致都屬于上述類型無法一一囊括舉例。但目標都是一個,以更好的交互方式,友好得引導(dǎo)用戶最大程度滴瀏覽站內(nèi)信息,減少跳出率退出率,增加停留時間。相信隨著思想和技術(shù)的深入,會有更好更強大的導(dǎo)航方式不斷滴出現(xiàn),讓我們試目以待……
原文:http://www.kdued.com/2009/03/%e7%9e%8e%e6%89%af%e4%b9%8bweb%e5%af%bc%e8%88%aa/
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計
- [2020-12-16 16:55:32] 建設(shè)一個常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
青島網(wǎng)絡(luò)公司 外貿(mào)網(wǎng)站建設(shè) 色彩心理學 微信小程序 力圖 網(wǎng)站SEO 網(wǎng)站設(shè)計 企業(yè)網(wǎng)站為什么要備案 robots 插畫 版面布局 青島海洋投資集團 搜索引擎 青島IT資訊 青島網(wǎng)站建設(shè)公司哪家好 H5專題頁面 IT資訊 青島網(wǎng)頁制作 中小型企業(yè)網(wǎng)站建設(shè) 青島輪胎網(wǎng)站設(shè)計 輪胎網(wǎng)站設(shè)計 青島抖音小程序開發(fā) 青島網(wǎng)站SEO 程序開發(fā) H5 微官網(wǎng) 青島開發(fā)區(qū)建站公司 青島高端網(wǎng)站建設(shè) 平面設(shè)計 青島網(wǎng)站營銷