域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

導(dǎo)航是互聯(lián)網(wǎng)網(wǎng)站最重要的組成部分之一，它涉及到產(chǎn)品的信息架構(gòu)、頁(yè)面布局和用戶交互行為等諸多方面。一個(gè)網(wǎng)站用戶體驗(yàn)的優(yōu)劣往往和導(dǎo)航的優(yōu)劣有密切的聯(lián)系。

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，越來(lái)越多的網(wǎng)站以移動(dòng)網(wǎng)站的形式移植到手機(jī)上。在網(wǎng)站移植過(guò)程中，導(dǎo)航的重新設(shè)計(jì)有什么變化和設(shè)計(jì)要點(diǎn)呢，本文嘗試做出一些研究。

導(dǎo)航的目的

在研究導(dǎo)航之前，我們不妨從導(dǎo)航的使用目的談起。如果把網(wǎng)站比成一座大廈，那導(dǎo)航可認(rèn)作是大廈內(nèi)的指引系統(tǒng)。導(dǎo)航的使用目的歸納起來(lái)主要有以下幾個(gè)方面：

1. 引導(dǎo)用戶在網(wǎng)站頁(yè)面間移動(dòng)和瀏覽，提供獲取信息的路徑。全局導(dǎo)航、局部導(dǎo)航等都是為了用戶瀏覽相關(guān)的頁(yè)面提供引導(dǎo)，方便用戶找到所求。

2. 理清網(wǎng)站各部分內(nèi)容之間的關(guān)系，使用戶了解網(wǎng)站全景。最常見(jiàn)于全局導(dǎo)航和站點(diǎn)信息導(dǎo)航，它們展現(xiàn)了整個(gè)網(wǎng)站的目錄信息，用戶可快速理解網(wǎng)站結(jié)構(gòu)，對(duì)網(wǎng)站有整體的把握。

3. 定位用戶在網(wǎng)站中所處的位置。這個(gè)功能常見(jiàn)于面包屑和相關(guān)導(dǎo)航中，它幫助用戶識(shí)別當(dāng)前瀏覽的頁(yè)面與網(wǎng)站整體內(nèi)容間關(guān)系，使用戶了解當(dāng)前頁(yè)面和網(wǎng)站其它內(nèi)容的聯(lián)系和區(qū)別。

導(dǎo)航變化的原因

從PC端到移動(dòng)端導(dǎo)航變化的原因歸根結(jié)底是由物(設(shè)備的軟、硬件差異)、景(使用情景和操作方式)、事(用戶需求和使用目的)差異。這些因素相互交織，對(duì)移動(dòng)終端的導(dǎo)航設(shè)計(jì)有顯著的影響。

本文嘗試從類型、內(nèi)容、樣式等方面結(jié)合實(shí)例來(lái)說(shuō)明PC端到移動(dòng)端網(wǎng)站導(dǎo)航設(shè)計(jì)的變化：

一、常用導(dǎo)航類型變化

網(wǎng)頁(yè)導(dǎo)航的劃分有不同的維度。網(wǎng)頁(yè)導(dǎo)航按照作用范圍的不同可以分為三大類：結(jié)構(gòu)性導(dǎo)航、關(guān)聯(lián)性導(dǎo)航和公用程序?qū)Ш健８鶕?jù)《web 導(dǎo)航設(shè)計(jì)》，三者的關(guān)系可描述如下：

根據(jù)外在形式的不同，網(wǎng)頁(yè)導(dǎo)航通常又可以分為頂部橫向?qū)Ш?、?cè)邊欄導(dǎo)航、Tab標(biāo)簽導(dǎo)航、面包屑導(dǎo)航、頁(yè)內(nèi)錨點(diǎn)導(dǎo)航等多種形式。

由于移動(dòng)終端特性，移動(dòng)網(wǎng)站可以采用的導(dǎo)航種類較PC端要少很多，主要有縱向?qū)Ш?、分類鏈接?dǎo)航、Tab標(biāo)簽導(dǎo)航、相關(guān)導(dǎo)航等。

下面就常用的移動(dòng)網(wǎng)頁(yè)的導(dǎo)航形式進(jìn)行一些介紹：

縱向?qū)Ш?/p>

由于移動(dòng)設(shè)備更適合縱向的瀏覽方式，PC站點(diǎn)的頂部橫向?qū)Ш胶蛡?cè)邊欄導(dǎo)航在移動(dòng)端通常轉(zhuǎn)變?yōu)榭v向?qū)Ш?。例如下圖dell 和hp的移動(dòng)版網(wǎng)站設(shè)計(jì)中，均采用這種轉(zhuǎn)換方式，較好地完成了導(dǎo)航的遷移。

分類鏈接導(dǎo)航

常見(jiàn)的是在首頁(yè)設(shè)置分類鏈接導(dǎo)航，將網(wǎng)站的主要模塊入口放置在主頁(yè)頂部。如果分類太多可以加入“更多”入口，在更多頁(yè)面將所有分類全部展現(xiàn)。 圖標(biāo)導(dǎo)航是文字鏈接導(dǎo)航的衍生，它更適合在觸屏手機(jī)上，方便用戶用手指進(jìn)行操作。

Tab標(biāo)簽導(dǎo)航

支持HTML5特性的高端機(jī)型通常可以實(shí)現(xiàn)頁(yè)面的局部刷新。通過(guò)Tab的應(yīng)用，導(dǎo)航可以在有限的頁(yè)面空間顯示更多的內(nèi)容。例如 Myspace頂部的導(dǎo)航設(shè)計(jì)：三個(gè)主導(dǎo)航下面各有3-4個(gè)二級(jí)導(dǎo)航，展現(xiàn)了網(wǎng)站的主要功能。

SEO專題推薦：

關(guān)鍵詞優(yōu)化專題：網(wǎng)站關(guān)鍵詞優(yōu)化沒(méi)效果?來(lái)這里學(xué)習(xí)最實(shí)用的關(guān)鍵詞優(yōu)化技巧!

內(nèi)鏈優(yōu)化專題：最能提升網(wǎng)站權(quán)重的內(nèi)鏈部署優(yōu)化技巧與方法

外鏈建設(shè)專題：高質(zhì)量自然外鏈怎么做?讀完這些你將質(zhì)的飛躍

網(wǎng)站降權(quán)專題：2015年最有用的網(wǎng)站降權(quán)、被K、被黑、被攻擊的解決方法

用戶體驗(yàn)專題：學(xué)習(xí)完這些，作為站長(zhǎng)的你可以秒懂如何做網(wǎng)站用戶體驗(yàn)

行業(yè)網(wǎng)站專題：優(yōu)化行業(yè)網(wǎng)站的“葵花寶典”看完后無(wú)優(yōu)化壓力

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！