導(dǎo)航系統(tǒng)所遭遇的挑戰(zhàn)

iPhone Native App較常見的導(dǎo)航如下圖所示：

手機(jī)屏幕頂端：主要有四種形式。第①種形式是在該位置中心顯示產(chǎn)品的logo;也可以將logo適當(dāng)調(diào)整位置，將常用操作或快捷入口放在該位置的右側(cè)。第②種形式是在該位置有兩或三個(gè)tab選項(xiàng)。第③種形式是在該位置中間顯示當(dāng)前任務(wù)標(biāo)題，在左右兩側(cè)放置導(dǎo)航控件或功能控件。第④種形式是在該位置放置搜索框。

與以上的Native App導(dǎo)航方式相比，Web App導(dǎo)航方式有著巨大的不同，如下圖所示：

如果產(chǎn)品的功能比較少，且沒有特別要突出的功能的時(shí)候，可以設(shè)計(jì)成上圖中第①種導(dǎo)航方式。此時(shí)存在的問題是如何表現(xiàn)出產(chǎn)品的品牌，畢竟在Safari瀏覽器登錄某網(wǎng)站比運(yùn)行一個(gè)Native App給人的品牌認(rèn)同感弱很多。

如果將產(chǎn)品logo表現(xiàn)出來，且產(chǎn)品需要將用戶常用功能突出(比如刷新功能或者發(fā)布入口)，就需要設(shè)計(jì)成上圖中的第②種導(dǎo)航方式。

如果在A功能板塊下，還需要設(shè)置子類別選項(xiàng)，則導(dǎo)航欄中又多一組tab。此時(shí)的導(dǎo)航方式就如同上圖中的第③種了。

當(dāng)然，在執(zhí)行某一項(xiàng)任務(wù)的時(shí)候，全局導(dǎo)航可以暫時(shí)“歸隱”，只保留一行標(biāo)題欄和左右兩側(cè)的導(dǎo)航控件或功能控件。如上圖中第④種導(dǎo)航方式所示。

在該產(chǎn)品設(shè)計(jì)中，為方便用戶在各功能板塊之間快速省力地切換，設(shè)計(jì)師希望全局導(dǎo)航欄可以保持長久懸停，不要像一般wap網(wǎng)頁似的讓導(dǎo)航隨網(wǎng)頁滾動消失。這樣的話，基于瀏覽器的Web App 導(dǎo)航系統(tǒng)便捷性就和Native App相媲美了。

然而，瀏覽器工具欄將全局導(dǎo)航逼到了屏幕的頂端，卻又造成了導(dǎo)航頭部過于沉重的問題。如下圖所示：

讓用戶在如此狹小的空間不得不頻繁滑動屏幕瀏覽信息，這樣的體驗(yàn)太糟糕了。這個(gè)嚴(yán)重的問題很讓設(shè)計(jì)師困擾，因此需要重新設(shè)計(jì)一下導(dǎo)航系統(tǒng)。設(shè)計(jì)過程主要包括：優(yōu)秀競品分析、方案遴選。

優(yōu)秀競品分析

首先，分析對比了三款優(yōu)秀的Web App：Google+、FT Web App、Twitter的導(dǎo)航方式。瀏覽環(huán)境均為iphone Safari瀏覽器。

1.Google+

?全局導(dǎo)航單獨(dú)形成一個(gè)頁面，其他頁面不出現(xiàn)全局導(dǎo)航;

?導(dǎo)航欄沿用了ios系統(tǒng)原生控件的形式：標(biāo)題+導(dǎo)航或功能控件;

?標(biāo)題欄在頁面中懸停不動

優(yōu)點(diǎn)分析：

保證了每個(gè)信息瀏覽頁面的導(dǎo)航欄簡潔輕薄，盡量少的占用信息詳情的顯示空間;保證了其核心功能(此處是微博瀏覽功能)的良好使用體驗(yàn)。

缺點(diǎn)分析：

全局導(dǎo)航隱藏較深，降低了用戶在不同功能板塊快速切換的便利性;全局導(dǎo)航隱藏較深，用戶看不到其它板塊功能，大大降低了用戶點(diǎn)擊使用其他功能的可能性。

2. FT Web App

導(dǎo)航系統(tǒng)特點(diǎn)：

?Safari瀏覽器URL一欄一直懸停存在，并將品牌文字FT Web App顯示在頂端;

?全局導(dǎo)航被隱藏起來，點(diǎn)擊功能鍵后在頁面頂端出現(xiàn);

?二級導(dǎo)航出現(xiàn)在頁面頂端;

?全局導(dǎo)航和二級導(dǎo)航由于新聞板塊數(shù)量較多，都采取了單行空間不完全呈現(xiàn)的方式，可滑動選擇其中某一項(xiàng);

?所有導(dǎo)航隨頁面滾動，不在屏幕中保持懸停;

優(yōu)點(diǎn)分析：

FT Web App導(dǎo)航設(shè)計(jì)最大的優(yōu)點(diǎn)就是繁重導(dǎo)航的輕量化處理。全局導(dǎo)航和二級導(dǎo)航中的新聞板塊都非常多，若將這些板塊都展示出來，恐怕要占用屏幕的一半顯示空間。FT Web App于是將全局導(dǎo)航隱藏在一個(gè)功能鍵之后，二級導(dǎo)航也只給了一行的顯示空間。

缺點(diǎn)分析：

展示給用戶的導(dǎo)航只是其全部新聞板塊的冰山一角，無法給予用戶全部概況瀏覽的機(jī)會，也就無法很好的激勵用戶去嘗試被隱藏的新聞版塊;同時(shí)，用戶尋找某一個(gè)新聞版塊或者在頁面底端回到頁面頂端的操作成本略高。

3.Twitter

?全局導(dǎo)航只有一行，品牌展示濃縮在主頁圖標(biāo)中(Twitter小鳥圖標(biāo));

?全局導(dǎo)航一直保持在屏幕頂端懸停不動，不隨頁面滾動而滾動;

?二級導(dǎo)航在點(diǎn)擊全局導(dǎo)航某tab后，以菜單列表形式出現(xiàn)。

優(yōu)點(diǎn)分析：

在屏幕頂端懸停不動的全局導(dǎo)航，可以方便用戶在不同的功能板塊之間快捷切換，降低了用戶的信息尋找成本;Twitter Web App的導(dǎo)航只有一行，為用戶保證了盡量大的正文內(nèi)容顯示空間。

缺點(diǎn)分析：

一些常用的功能鍵被隱藏在二級導(dǎo)航中(比如新信息發(fā)布入口)，一方面增大了用戶的尋找成本，另一方面降低了這些常用功能對用戶的激勵使用效用。

基于對以上三款Web App產(chǎn)品導(dǎo)航系統(tǒng)的分析，設(shè)計(jì)師對目標(biāo)項(xiàng)目的導(dǎo)航系統(tǒng)設(shè)計(jì)形成了以下框定：

?全局導(dǎo)航方便用戶快速尋找以及功能板塊間的切換;

?導(dǎo)航盡量輕薄化處理，盡量保證足夠的正文內(nèi)容區(qū)顯示空間;

?將用戶經(jīng)常使用的功能鍵呈現(xiàn)在前面。

方案遴選階段

基于項(xiàng)目的實(shí)際需要以及對競品分析的思考總結(jié)，設(shè)計(jì)師嘗試了3款導(dǎo)航設(shè)計(jì)方案，并對每一款方案的優(yōu)劣之處進(jìn)行了詳細(xì)分析。

導(dǎo)航設(shè)計(jì)方案一

? ABCD是產(chǎn)品的四個(gè)功能板塊，組成全局導(dǎo)航。

? 全局導(dǎo)航在屏幕頂端保持懸停不動。

? E是新消息發(fā)布入口，屬于用戶常用功能。

? E采用半透明顯示方式。

? E停留在屏幕的右下角

該方案的優(yōu)點(diǎn)：

屏幕頂端只有全局導(dǎo)航一欄，導(dǎo)航的輕量化為正文內(nèi)容區(qū)節(jié)省了盡量大的顯示空間;全局導(dǎo)航懸停不動，可以便于用戶快速切換到不同的功能板塊。

該方案的缺點(diǎn)：

右下角的新信息發(fā)布入口致使瀏覽頁面不夠清爽，會對用戶造成一定的視覺干擾;新信息發(fā)布入口沒有必要在任何頁面都顯示，于是可尋性出現(xiàn)了危機(jī);品牌logo無法顯示，品牌感較弱。

導(dǎo)航設(shè)計(jì)方案二

? E是新消息發(fā)布入口，屬于用戶常用功能。

? ABCD是產(chǎn)品的四個(gè)功能板塊，組成全局導(dǎo)航。

? 屏幕頂端的兩行導(dǎo)航欄在用戶剛進(jìn)入頁面的時(shí)候出現(xiàn)，在用戶滑動屏幕瀏覽信息的時(shí)候消失。

? 屏幕右下角半透明功能鍵在導(dǎo)航欄消失后出現(xiàn)，點(diǎn)擊該鍵導(dǎo)航欄出現(xiàn)。

該方案的優(yōu)點(diǎn)：

瀏覽信息的時(shí)候?qū)Ш綑谙В瑸橛脩籼峁┨峁┝俗畲蟮恼膬?nèi)容顯示空間;可以顯示logo，品牌感較強(qiáng);新信息發(fā)布入口的可尋性較好。

該方案的缺點(diǎn)：

屏幕右下角半透明功能鍵致使瀏覽頁面不夠清爽，會對用戶造成一定的視覺干擾。

導(dǎo)航設(shè)計(jì)方案三

? E是新消息發(fā)布入口，屬于用戶常用功能。

? ABCD是產(chǎn)品的四個(gè)功能板塊，組成全局導(dǎo)航。

? 屏幕頂端的兩行導(dǎo)航欄在用戶剛進(jìn)入頁面的時(shí)候出現(xiàn)，在用戶滑動屏幕瀏覽信息的時(shí)候第一欄向上消失，第二欄上移至頂部保持懸停不動。

? 手動下拉全局導(dǎo)航欄，可以下拉出第一欄導(dǎo)航。

該方案的優(yōu)點(diǎn)：

瀏覽正文信息的時(shí)候，僅顯示全局導(dǎo)航一欄，做到了導(dǎo)航的輕薄化;全局導(dǎo)航懸停不動，可以便于用戶快速切換到不同的功能板塊。

該方案的缺點(diǎn)：

下拉全局導(dǎo)航時(shí)，可能會有誤操作的危險(xiǎn)，雖然可能性很小。

綜合以上的分析，考慮到正文內(nèi)容區(qū)顯示空間的大小、對產(chǎn)品的操作便利性以及產(chǎn)品品牌感三方面因素，最終決定將方案三作為導(dǎo)航設(shè)計(jì)的基本形式，并繼續(xù)進(jìn)行進(jìn)一步豐富細(xì)化。

總結(jié)：

瀏覽器的工具欄一直占據(jù)著屏幕的底端位置，全局導(dǎo)航只能被動移動到屏幕的頂端位置。如何平衡操作的便捷性與正文信息顯示空間最大化的關(guān)系，是Web App導(dǎo)航設(shè)計(jì)的關(guān)鍵所在。

最佳方案總是權(quán)衡的結(jié)果。每一款設(shè)計(jì)方案解決某些問題的同時(shí)也會產(chǎn)生新的問題。此時(shí)設(shè)計(jì)師需要知道哪些功能是最重要、優(yōu)先級最高的，保證核心功能的良好用戶體驗(yàn)是評判設(shè)計(jì)方案的重要準(zhǔn)繩。