直達電梯-導航的交互設計

超大信息類站點的導航條就像中藥舖的抽屜,一字排開氣勢恢宏,分別拉開,別有洞天。

國人喜好:多!大!全!最好全部鋪開才有氣勢。從不爭氣的'S浪'網多年沒怎麼變的首頁導航模式可見一般。至此,對比瀏覽了同類大型新聞信息類站點,發現中/洋;東/西,界面感受果然不同。

今天只說導航,只對比了新聞類站點:

(娛樂類,設計類,個人站點導航形式多樣,邏輯複雜,暫來不及鋪開)

Yahoo News / BBC News / CNN / abc News / China Daily / CCTV News / The Japan Times / The Korea Times / 騰訊新聞/ 新浪

首先關注首頁橫向主導航:

(常規縱嚮導航通常配合橫向主導航試用,且在商務型,大型信息類站點主頁中單獨使用頻率不高,通常在次級頁面出現,且一定是信息內容量大,分類繁瑣的站點。)

可見基本導航條模式如下:

1. 對於信息統一,歸納性強的站點,通常會使用簡單模式:

2.  對於有豐富次級信息的,通常會使用以下兩種模式:

a. 鼠標hover下拉

b. tab展開

a 型導航方便快捷預覽, b 型導航直接展開次級信息,也有站點把a/b模式合併。

3. 特別案例,蓋澆飯類型的,把所有信息都鋪出來,比如s浪:

(與其說導航,不如說是歸納過的標籤)

導航操作性:

一個完美的導航,最基本最重要的是隨時隨地,快速引導用戶去相關頁面,而且能及時返回,方便跳轉到其他頁面。

有意思的是,去容易,反而找到來時路就千差萬別了。

比如:用戶很可能是從首頁任何一個興趣點,誤入了詳情頁面,去的容易,1步到~!但從詳情頁面返回到其他模塊或想去其他分支類別頁面,就要仰賴導航了。

為了提供必要引導,當用戶進入到足夠深的詳細頁面,各種索引,麵包屑都配合導航條應運而生。

做一個反向測試,看哪種導航配套設置更便捷。

測試內容:從A類詳情頁【1】去B類詳情頁【2】:

測試站點:

Korea Times

http://www.koreatimes.co. kr/www/news/nation/2011/10/115_97248.html

BBC News

http://www.bbc.co.uk/news/ uk-england-leeds-15438299

Yahoo News

http://news.yahoo.com

China Daily

http://www.chinadaily.com.cn/ china/2011-10/25/content_13968775.htm

導航配套類型:

Korea Times

主導航+ 麵包屑+ 左側縱向索引導航

BBC News

主導航 (展開tab)

Yahoo News 和 China Daily

主導航(展開tab + 鼠標懸停下拉列表)

操作:

Korea Times

第一種方式:從主導航返回――進入其他模塊B――分支次級頁面――詳情頁

第二種方式:從左側便捷索引直接抵達其他模塊B――分支次級頁面――詳情頁

(麵包屑對應同一目錄下的內容切換更便捷,但和左側索引導航一起,功能性不突出。)

BBC News

從主導航Tab選擇其他模塊B――抵達其他模塊分支次級頁面――詳情頁

Yahoo News 和 China Daily

Mouse on主導航第一層其他模塊B――展開下拉點擊進入其他模塊分支次級頁面――詳情頁

測試體會:

使用便捷性Yahoo News 和 China Daily最方便,Korea Times第二種基於左側縱嚮導航輔助的操作是最快的。 Korea Times功能方式多,且樣式不統一,分類太細節化,反而在使用時覺得有點手足無措,操作時會停頓猶疑。 BBC News沒有整合hover下拉查看其他模塊選項的效果,不如Yahoo News 和 China Daily靈活,但是感官上 BBC News更利落。

所以說,如果用一個控件可以解決得很漂亮的問題,為什麼要到處鋪開各設據點? !功能模塊集中,操作行為更靈便,使用感覺更舒暢,減少操作中的反复思考,停頓點更有前途。

其實一個舒服的導航,除了歸納清晰,操作便捷,乍一看第一印像也很重要~

不要一口氣把全部底細都攤在人家面前是好習慣。有的導航雖然強大,但是內容一多,功能一高級,看著就煩了。這種時候,需要

解套選擇恐懼症:

以BBC為例,它的主頁導航正如首頁頭條展示的信息,簡單直接,只有大模塊:

當點擊到感興趣的模塊後,例如進入單獨News頁面:

導航展開,信息量非常更大,且所在頁面導航次級信息也一併羅列。

感受:如果直接進入信息頁面,可能無從下手,正是第一步的簡單模塊引導,剝離了選擇困難。

再來看China Daily,雖然不是個特別貼合的例子,但是可以說明一些問題。初始進入所看到的導航其實是最簡單的【一】字導航,最多加了個mouse on下拉功能,但依然是大模塊讓選擇有了個範圍:

當點擊任何一個模塊或者使用下拉到達次級頁面,導航終於鋪開了:

這是個快速索引,同時合併其hover功效,導航就強大了:

最後廢話又要說回來了,站點導航到底用那種方式?還是弄個變形金剛什麼都包括了,要看站點的信息分類,同時也要從分類開始就要考慮到整個站點鋪開有多少點?導航才能牽得了線,小頭套不了大帽子,反之亦然。

來源:http://ued.ctrip.com/blog/?p=2561

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.