“漢堡導航”在移動應用及網頁設計中的應用研究

房雅珉

中國傳媒大學南廣學院動畫與數字藝術學院，江蘇南京 210037

“漢堡導航”在移動應用及網頁設計中的應用研究

房雅珉

中國傳媒大學南廣學院動畫與數字藝術學院，江蘇南京 210037

“漢堡導航”又被稱為“抽屜式導航”，“漢堡導航”誕生最初是為了適應在智能手機相對較小的屏幕上的應用?！皾h堡導航”的特色明確，在界面設計中顯著的提升了虛擬空間的使用，并在用戶體驗領域開啟了嶄新的領域。

交互設計；界面設計；導航；扁平化

1 概述

1.1 溯源

“漢堡導航”又被稱為“抽屜式導航”，最早出現在1981年NormCox設計的個人工作站XeroxStar。2012年前后，眾多知名的移動應用公司紛紛推出了以“漢堡導航”作為最新設計的應用版本，例如Facebook、Path、Youtube等。隨后，“漢堡導航”開始進軍網頁設計領域，2014年至今，國內外眾多知名網站都開始采用這一新穎而又顯得有些特別的導航設計元素。

“漢堡導航”誕生最初是為了適應在智能手機相對較小的屏幕上的應用?！皾h堡導航”可以節約屏幕空間，拓寬原本有限的智能手機界面的空間，讓導航隱藏在界面一側，將主要的屏幕空間讓給更重要的內容。在此之前導航設計主要有以下幾種形式：腹肌式導航、下拉式導航、標簽式導航等。而網頁設計中長期使用的頂部導航也因為“漢堡導航”的出現而掀起了一波嶄新的“再設計”風潮。

1.2 形式

“漢堡導航”在移動應用設計中主要分為側邊欄式和下拉式兩種形式，而在網頁設計中除了側邊欄式和下拉式之外還衍生出全屏式、文字彈出式等形式。

1.2.1 側邊欄式

最開始的“漢堡導航”基本都使用了側邊欄式的設計，也使側邊欄式導航成為最經典的最有代表性的“漢堡導航”形式，這樣的設計為用戶模擬出了一塊向左或向右的虛擬界面，用戶通過平移的動效將視覺流線向左或向右移動從而獲得導航信息。

1.2.2 下拉式

下拉式“漢堡導航”是指由用戶點擊“漢堡圖標”后，由圖標向下方彈出的導航菜單。

1.2.3 全屏式

全屏式“漢堡導航”由側邊欄式“漢堡導航”衍生而來，側邊欄式“漢堡導航”一般是會側拉出面積約占屏幕一半左右的導航界面，而全屏式“漢堡導航”則是完整的側拉或彈出一個和屏幕一樣面積的導航界面。

2 “漢堡導航”優勢分析

從用戶體驗的角度上來說，移動應用或網頁的瀏覽者需要在極有限的時間內尋找到其所需的信息，因此導航的設計既要符合視覺邏輯又能讓瀏覽者有更好的用戶體驗。設計師使用明確色彩定義三條短水平線，后因其形似漢堡的造型被稱之為“漢堡圖標”。這給用戶提供了一種指引，成為用戶點擊的向導。“漢堡導航”自誕生以來，以其清晰的視覺體驗，獨特的側邊交互，在風靡全球的扁平化設計風格、幽靈按鈕等潮流網絡設計元素搭配的使用，實現和諧統一，在網頁設計中占有一席之位。

導航最初的目的是作為網站的地圖索引，配合用戶更好的完成交互。但縱觀許多網站依然沒有脫胎于最初的網頁設計，導航的框架性十分嚴重，用戶雖然點的十分方便，然而雜亂無章的界面始終不能令人賞心悅目，于是漢堡導航這種可以將導航收放自如的“控件”，擴大了內容所占據的空間，并且不影響用戶瀏覽網頁的視覺體驗，能讓用戶更好的閱讀內容，不會被原來的導航所遮擋。

眾多設計新穎的網站在紛紛“扁平化”改版之后采用了更為簡約的設計，去掉傳統的導航欄使整個頁面清爽了起來，這樣的設計方式更加吸引用戶注意，創造出嶄新的用戶體驗。

“漢堡導航”在社交應用中廣泛使用。最初是在2013年九月左右在Facebook（臉書）上得以實現，得到諸多好評。之后在其他社交應用中得到廣泛應用，騰訊在手機QQ5.0版本中就加入了“漢堡導航”。這給騰訊QQ手機用戶帶來了靈動清爽的視覺體驗。整體架構化繁為簡，摒除繁雜的導航界面，讓操作只在左右滑動中就能快速完成。并且一直沿用至今，給用戶帶來更簡潔大方的界面，提供更方便快捷的操作是“漢堡導航”無可比擬的優勢。

3 “漢堡導航”在用戶體驗中的問題

在“漢堡導航”簡潔的設計性及強大的適配性給用戶帶來清晰的視覺體驗與方便快捷的交互的同時，也暴露出它在用戶的體驗上的諸多弊端。

導航設計比較重要的一點是需要用戶不需要指導，能夠迅速理解并且使用。突兀地把“三條杠”擺在用戶面前，如果沒有很好地引導，用戶會茫然不知所措，增加用戶認知負擔。這是對導航的實用性跟方便性的否認。顯然這是在設計中是不能夠被允許的。

“漢堡導航”出現之初，用戶的反饋都是“很好”、“滿分”，但是之后卻發現這卻是一場災難——用戶參與度只有一半。用戶更新之后一度以為“漢堡導航”左側導航欄是作為默認導航彈出的。用戶不能直觀找到導航，這種困頓給用戶帶來接下來的操作無法完成，嚴重影響了用戶的體驗。許多使用“漢堡導航”移動應用沒有明確的引導用戶去找導航界面，這就給用戶的交互帶來極大困難。

另外“漢堡導航”無形之中增加了操作的成本。將所有功能都收納到漢堡導航中之后，每次用戶想要切換頁面都要進行二次操作，給用戶增加了使用摩擦力。這多余的操作讓用戶叫苦不迭。這也是為什么Facebook改版后又不得不改了回來。

4 “漢堡導航”的應用原則

首先是有超過3個頂層界面?！皾h堡導航”非常適合同時顯示多個導航目標，如果有3個以上的頂層界面就比較適合用它，否則的話，使用固定標簽切換頂層界面會更方便。抽屜的原始功能就是收納你放不下的東西。注意說的是你擺不下的東西，而不是所有的東西都往里面放，因為有些東西是必要的東西，或者是本身的東西很少沒有太多的分支標簽，那么放在抽屜里就相當的麻煩，這對于抽屜式導航也是一樣的。拿手機QQ的例子來講，因為手機QQ有超過3個功能如果全部放在外面就顯得十分冗雜，美觀性也直線下降。

再者就是有子界面間的交叉導航。如果移動應用需要子界面間進行交叉導航，可以考慮用“漢堡導航”，因為在移動應用的任何地方都可以打開它，這樣從子界面到其它主要界面都會很方便。如果說一款軟件有非常多的功能，或者是有許多的分類，那么放在界面上與放在漢堡導航中操作的步數是一樣的，也就不存在摩擦力的問題。拿pinterest（拼趣）來說，作為一款社交軟件，它涵蓋的內容和功能是相當多的，為了能夠更快的進入二級甚至是三級的界面打開漢堡導航再尋找二級或是三級界面就夠了，這樣就十分快捷，能夠準確定位。

然后是有深層的導航分支。如果移動應用某個子界面分支有很深的層級，那么回到頂層界面就會成為重復點按返回鍵的枯燥活動，而“漢堡導航”會讓這個過程高效得多。

最后就是有導航中樞?！皾h堡導航”反映了移動應用的結構，也可以展示移動應用的導航重點，可以把移動應用中用戶最常訪問的部分放在里面以便快速跳轉，一般來說，這個導航中樞里可以只有頂層的幾個界面。

5 結論

“混搭”這種流行元素在交互設計領域已經廣泛應用。獨立設計元素已經遠遠滿足用戶在交互中所要求的愉悅感?！澳阒杏形?，我中有你”的生態模式也已經逐步穩固。而“扁平化設計”“視差效果”、“漢堡導航”也已經成為交互設計中的“標配”。在這種生態環境中，“漢堡導航”的無縫插入，可以完美融合多種設計風格的特點，讓其在今后的交互設計中可以如魚得水，得到更廣泛的應用。

[1]塞弗(DanSaffer).微交互[M].李松峰，譯.北京：人民郵電出版社，2013.

TP3

A

1674-6708（2015）149-0035-02

房雅珉，碩士，中國傳媒大學南廣學院動畫與數字藝術學院講師