房雅珉

中國傳媒大學(xué)南廣學(xué)院動(dòng)畫與數(shù)字藝術(shù)學(xué)院，江蘇南京 210037

“漢堡導(dǎo)航”在移動(dòng)應(yīng)用及網(wǎng)頁設(shè)計(jì)中的應(yīng)用研究

房雅珉

中國傳媒大學(xué)南廣學(xué)院動(dòng)畫與數(shù)字藝術(shù)學(xué)院，江蘇南京 210037

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

交互設(shè)計(jì)；界面設(shè)計(jì)；導(dǎo)航；扁平化

1 概述

1.1 溯源

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

“漢堡導(dǎo)航”誕生最初是為了適應(yīng)在智能手機(jī)相對(duì)較小的屏幕上的應(yīng)用?！皾h堡導(dǎo)航”可以節(jié)約屏幕空間，拓寬原本有限的智能手機(jī)界面的空間，讓導(dǎo)航隱藏在界面一側(cè)，將主要的屏幕空間讓給更重要的內(nèi)容。在此之前導(dǎo)航設(shè)計(jì)主要有以下幾種形式：腹肌式導(dǎo)航、下拉式導(dǎo)航、標(biāo)簽式導(dǎo)航等。而網(wǎng)頁設(shè)計(jì)中長期使用的頂部導(dǎo)航也因?yàn)椤皾h堡導(dǎo)航”的出現(xiàn)而掀起了一波嶄新的“再設(shè)計(jì)”風(fēng)潮。

1.2 形式

“漢堡導(dǎo)航”在移動(dòng)應(yīng)用設(shè)計(jì)中主要分為側(cè)邊欄式和下拉式兩種形式，而在網(wǎng)頁設(shè)計(jì)中除了側(cè)邊欄式和下拉式之外還衍生出全屏式、文字彈出式等形式。

1.2.1 側(cè)邊欄式

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

1.2.2 下拉式

下拉式“漢堡導(dǎo)航”是指由用戶點(diǎn)擊“漢堡圖標(biāo)”后，由圖標(biāo)向下方彈出的導(dǎo)航菜單。

1.2.3 全屏式

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

2 “漢堡導(dǎo)航”優(yōu)勢(shì)分析

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

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

眾多設(shè)計(jì)新穎的網(wǎng)站在紛紛“扁平化”改版之后采用了更為簡約的設(shè)計(jì)，去掉傳統(tǒng)的導(dǎo)航欄使整個(gè)頁面清爽了起來，這樣的設(shè)計(jì)方式更加吸引用戶注意，創(chuàng)造出嶄新的用戶體驗(yàn)。

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

3 “漢堡導(dǎo)航”在用戶體驗(yàn)中的問題

在“漢堡導(dǎo)航”簡潔的設(shè)計(jì)性及強(qiáng)大的適配性給用戶帶來清晰的視覺體驗(yàn)與方便快捷的交互的同時(shí)，也暴露出它在用戶的體驗(yàn)上的諸多弊端。

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

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

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

4 “漢堡導(dǎo)航”的應(yīng)用原則

首先是有超過3個(gè)頂層界面。“漢堡導(dǎo)航”非常適合同時(shí)顯示多個(gè)導(dǎo)航目標(biāo)，如果有3個(gè)以上的頂層界面就比較適合用它，否則的話，使用固定標(biāo)簽切換頂層界面會(huì)更方便。抽屜的原始功能就是收納你放不下的東西。注意說的是你擺不下的東西，而不是所有的東西都往里面放，因?yàn)橛行〇|西是必要的東西，或者是本身的東西很少?zèng)]有太多的分支標(biāo)簽，那么放在抽屜里就相當(dāng)?shù)穆闊?，這對(duì)于抽屜式導(dǎo)航也是一樣的。拿手機(jī)QQ的例子來講，因?yàn)槭謾C(jī)QQ有超過3個(gè)功能如果全部放在外面就顯得十分冗雜，美觀性也直線下降。

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

然后是有深層的導(dǎo)航分支。如果移動(dòng)應(yīng)用某個(gè)子界面分支有很深的層級(jí)，那么回到頂層界面就會(huì)成為重復(fù)點(diǎn)按返回鍵的枯燥活動(dòng)，而“漢堡導(dǎo)航”會(huì)讓這個(gè)過程高效得多。

最后就是有導(dǎo)航中樞?！皾h堡導(dǎo)航”反映了移動(dòng)應(yīng)用的結(jié)構(gòu)，也可以展示移動(dòng)應(yīng)用的導(dǎo)航重點(diǎn)，可以把移動(dòng)應(yīng)用中用戶最常訪問的部分放在里面以便快速跳轉(zhuǎn)，一般來說，這個(gè)導(dǎo)航中樞里可以只有頂層的幾個(gè)界面。

5 結(jié)論

“混搭”這種流行元素在交互設(shè)計(jì)領(lǐng)域已經(jīng)廣泛應(yīng)用。獨(dú)立設(shè)計(jì)元素已經(jīng)遠(yuǎn)遠(yuǎn)滿足用戶在交互中所要求的愉悅感?！澳阒杏形?，我中有你”的生態(tài)模式也已經(jīng)逐步穩(wěn)固。而“扁平化設(shè)計(jì)”“視差效果”、“漢堡導(dǎo)航”也已經(jīng)成為交互設(shè)計(jì)中的“標(biāo)配”。在這種生態(tài)環(huán)境中，“漢堡導(dǎo)航”的無縫插入，可以完美融合多種設(shè)計(jì)風(fēng)格的特點(diǎn)，讓其在今后的交互設(shè)計(jì)中可以如魚得水，得到更廣泛的應(yīng)用。

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

TP3

A

1674-6708（2015）149-0035-02

房雅珉，碩士，中國傳媒大學(xué)南廣學(xué)院動(dòng)畫與數(shù)字藝術(shù)學(xué)院講師