導航是互聯(lián)網(wǎng)網(wǎng)站最重要的組成部分之一，它涉及到產(chǎn)品的信息架構(gòu)、頁面布局和用戶交互行為等諸多方面。一個網(wǎng)站用戶體驗的優(yōu)劣往往和導航的優(yōu)劣有密切的聯(lián)系。
隨著移動互聯(lián)網(wǎng)的發(fā)展，越來越多的網(wǎng)站以移動網(wǎng)站的形式移植到手機上。在網(wǎng)站移植過程中，導航的重新設計有什么變化和設計要點呢，本文嘗試做出一些研究。
導航的目的
在研究導航之前，我們不妨從導航的使用目的談起。如果把網(wǎng)站比成一座大廈，那導航可認作是大廈內(nèi)的指引系統(tǒng)。導航的使用目的歸納起來主要有以下幾個方面：
1. 引導用戶在網(wǎng)站頁面間移動和瀏覽，提供獲取信息的路徑。全局導航、局部導航等都是為了用戶瀏覽相關的頁面提供引導，方便用戶找到所求。
2. 理清網(wǎng)站各部分內(nèi)容之間的關系，使用戶了解網(wǎng)站全景。最常見于全局導航和站點信息導航，它們展現(xiàn)了整個網(wǎng)站的目錄信息，用戶可快速理解網(wǎng)站結(jié)構(gòu)，對網(wǎng)站有整體的把握。
3. 定位用戶在網(wǎng)站中所處的位置。這個功能常見于面包屑和相關導航中，它幫助用戶識別當前瀏覽的頁面與網(wǎng)站整體內(nèi)容間關系，使用戶了解當前頁面和網(wǎng)站其它內(nèi)容的聯(lián)系和區(qū)別。
導航變化的原因
從PC端到移動端導航變化的原因歸根結(jié)底是由物(設備的軟、硬件差異)、景(使用情景和操作方式)、事(用戶需求和使用目的)差異。這些因素相互交織，對移動終端的導航設計有顯著的影響。
本文嘗試從類型、內(nèi)容、樣式等方面結(jié)合實例來說明PC端到移動端網(wǎng)站導航設計的變化：
一、常用導航類型變化
網(wǎng)頁導航的劃分有不同的維度。網(wǎng)頁導航按照作用范圍的不同可以分為三大類：結(jié)構(gòu)性導航、關聯(lián)性導航和公用程序?qū)Ш?。根?jù)《web 導航設計》，三者的關系可描述如下：
根據(jù)外在形式的不同，網(wǎng)頁導航通常又可以分為頂部橫向?qū)Ш健?cè)邊欄導航、Tab標簽導航、面包屑導航、頁內(nèi)錨點導航等多種形式。
由于移動終端特性，移動網(wǎng)站可以采用的導航種類較PC端要少很多，主要有縱向?qū)Ш健⒎诸愭溄訉Ш健ab標簽導航、相關導航等。
下面就常用的移動網(wǎng)頁的導航形式進行一些介紹：
縱向?qū)Ш?/p>
由于移動設備更適合縱向的瀏覽方式，PC站點的頂部橫向?qū)Ш胶蛡?cè)邊欄導航在移動端通常轉(zhuǎn)變?yōu)榭v向?qū)Ш?。例如下圖dell 和hp的移動版網(wǎng)站設計中，均采用這種轉(zhuǎn)換方式，較好地完成了導航的遷移。
分類鏈接導航
常見的是在首頁設置分類鏈接導航，將網(wǎng)站的主要模塊入口放置在主頁頂部。如果分類太多可以加入“更多”入口，在更多頁面將所有分類全部展現(xiàn)。 圖標導航是文字鏈接導航的衍生，它更適合在觸屏手機上，方便用戶用手指進行操作。
Tab標簽導航
支持HTML5特性的高端機型通常可以實現(xiàn)頁面的局部刷新。通過Tab的應用，導航可以在有限的頁面空間顯示更多的內(nèi)容。例如 Myspace頂部的導航設計：三個主導航下面各有3-4個二級導航，展現(xiàn)了網(wǎng)站的主要功能。
SEO專題推薦：
關鍵詞優(yōu)化專題：網(wǎng)站關鍵詞優(yōu)化沒效果?來這里學習最實用的關鍵詞優(yōu)化技巧!
內(nèi)鏈優(yōu)化專題：最能提升網(wǎng)站權(quán)重的內(nèi)鏈部署優(yōu)化技巧與方法
外鏈建設專題：高質(zhì)量自然外鏈怎么做?讀完這些你將質(zhì)的飛躍
網(wǎng)站降權(quán)專題：2015年最有用的網(wǎng)站降權(quán)、被K、被黑、被攻擊的解決方法
用戶體驗專題：學習完這些，作為站長的你可以秒懂如何做網(wǎng)站用戶體驗
行業(yè)網(wǎng)站專題：優(yōu)化行業(yè)網(wǎng)站的“葵花寶典”看完后無優(yōu)化壓力
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
