DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 研究移動網站的導航的重新設計變化和設計要點
研究移動網站的導航的重新設計變化和設計要點
編輯:關於網頁技巧     

導航是互聯網網站最重要的組成部分之一,它涉及到產品的信息架構、頁面布局和用戶交互行為等諸多方面。一個網站用戶體驗的優劣往往和導航的優劣有密切的聯系。

隨著移動互聯網的發展,越來越多的網站以移動網站的形式移植到手機上。在網站移植過程中,導航的重新設計有什麼變化和設計要點呢,本文嘗試做出一些研究。

導航的目的

在研究導航之前,我們不妨從導航的使用目的談起。如果把網站比成一座大廈,那導航可認作是大廈內的指引系統。導航的使用目的歸納起來主要有以下幾個方面:

1. 引導用戶在網站頁面間移動和浏覽,提供獲取信息的路徑。全局導航、局部導航等都是為了用戶浏覽相關的頁面提供引導,方便用戶找到所求。

2. 理清網站各部分內容之間的關系,使用戶了解網站全景。最常見於全局導航和站點信息導航,它們展現了整個網站的目錄信息,用戶可快速理解網站結構,對網站有整體的把握。

3. 定位用戶在網站中所處的位置。這個功能常見於面包屑和相關導航中,它幫助用戶識別當前浏覽的頁面與網站整體內容間關系,使用戶了解當前頁面和網站其它內容的聯系和區別。

導航變化的原因

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

本文嘗試從類型、內容、樣式等方面結合實例來說明PC端到移動端網站導航設計的變化:

一、常用導航類型變化

網頁導航的劃分有不同的維度。網頁導航按照作用范圍的不同可以分為三大類:結構性導航、關聯性導航和公用程序導航。根據《web 導航設計》,三者的關系可描述如下:

根據外在形式的不同,網頁導航通常又可以分為頂部橫向導航、側邊欄導航、Tab標簽導航、面包屑導航、頁內錨點導航等多種形式。

由於移動終端特性,移動網站可以采用的導航種類較PC端要少很多,主要有縱向導航、分類鏈接導航、Tab標簽導航、相關導航等。

下面就常用的移動網頁的導航形式進行一些介紹:

縱向導航

由於移動設備更適合縱向的浏覽方式,PC站點的頂部橫向導航和側邊欄導航在移動端通常轉變為縱向導航。例如下圖dell 和hp的移動版網站設計中,均采用這種轉換方式,較好地完成了導航的遷移。

分類鏈接導航

常見的是在首頁設置分類鏈接導航,將網站的主要模塊入口放置在主頁頂部。如果分類太多可以加入“更多”入口,在更多頁面將所有分類全部展現。 圖標導航是文字鏈接導航的衍生,它更適合在觸屏手機上,方便用戶用手指進行操作。

Tab標簽導航

支持HTML5特性的高端機型通常可以實現頁面的局部刷新。通過Tab的應用,導航可以在有限的頁面空間顯示更多的內容。例如 Myspace頂部的導航設計:三個主導航下面各有3-4個二級導航,展現了網站的主要功能。

相關導航

相關導航一般出現在正文頁,推薦與當前頁面相關內容,向用戶提供類似內容,提升用戶粘性。例如百度知道和BBC新聞均在閱讀正文頁提供了與當前內容相關的推薦。

頁內錨點導航

頁內錨點導航是移動終端特有的導航方式之一,它可以使用戶快速到達頁面頂部、底部和相關板塊。例如BBC在底部有返回頂部的快速鏈接TOP,而谷歌新聞則提供了不同板塊之間快速跳轉的錨點導航。

面包屑導航處理策略

面包屑作為一種有效的導航處理策略在移動端使用頻率也比較多,但由於移動端屏幕橫向寬度有限,通常的處理策略是:保留關鍵的路徑,例如首頁、主欄目、關鍵版塊等;如果當前頁面標題過長,可以在面包屑上以“本文”或者“正文”表示。盡量控制面包屑在一行之內顯示。

二、導航內容的組織、縮減和隱藏

組織與縮減

導航再設計過程中,必然有導航信息的縮減和重新組織。篩選的標准往往有:

1)用戶需求的強度,可以用pv,uv等數據進行判斷。

2)與移動使用場景的契合度。例如拍照、語音等功能的入口。

3)用戶操作便利程度。

其中第三點往往容易被忽視,亞馬遜的移動版在PC版的基礎上對導航的內容進行了合並和刪減,控制了信息量,使之更適合用戶在在移動終端浏覽。例如將電器&電腦這一條目在移動端拆分為兩個條目(電器、電腦辦公),並使子項目的數目由17條縮減到7條。一定程度上也符合了移動端神奇數字7的原則。

導航內容的隱藏

在導航內容重要性不分伯仲的情況下,常見的處理方式是將相對重要的內容展現出來,而將其它內容放入“更多”,用戶可以點擊“更多”在當前頁面展開或跳轉至更多頁面。

三、導航樣式的變化

利用系統特性變形

常用的變形方式有:

1) 調用系統控件

通過結合移動終端的控件特性,可以在較小的尺寸范圍內完成導航的再設計。如上圖cnet移動網站中,導航內搜索框用搜索按鈕代替,二級項目改用下拉選擇器,充分利用了移動端控件特性。

2)利用系統交互特性

Sevnthsin的首頁導航設計巧妙地應用了觸屏手機可拖動元素的特性。用戶拖拽相應的圖標到中心圓點位置即可完成導航,進入該網站。

動態效果的變化

Web動態導航菜單也叫浮出菜單(fly-out menu)或彈出菜單(pop-up menu),通常是鼠標懸停或者點擊導航選項時出現。在PC上動態菜單一般為橫向或者縱向展開。

在移動端:

1) 低端機,不支持折疊展開效果,原網頁動態菜單通常處理為列表形式。通過按鍵控制光標逐步移動選擇每個子項目。

2) 高端機,處理成手風琴折疊(Accordion)或者層級目錄形式,通過點擊展開二級項目。

手風琴折疊的優點:不用跳轉頁面;缺點:次級展示內容有限;

層級目錄形式的優點:可以展示較多內容;缺點:需要進入下一級頁面。

下圖中亞馬遜的導航采用了當前折疊展開的方式而ESPN的則采用了層級導航方式。

四 、總結

在PC端向移動端轉移過程中,頁面產品的導航設計要對原導航進行刪減、隱藏、組織,特別要把握用戶本質需求,結合產品使用場景、用戶需求、軟硬件特性等進行導航的再設計。

參考文獻:《Web導航設計》 James Kalbach / 李曦琳 / 電子工業出版社

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved