最近在做iphone端Web App的項目。由于產(chǎn)品形式新穎，技術(shù)環(huán)境不成熟，公司給與了較寬松的研發(fā)時間。在一個月的交互設(shè)計階段，每個環(huán)節(jié)都得到多次討論推敲，我從中感悟頗多。導(dǎo)航系統(tǒng)的設(shè)計是一個比較典型的點，拿出來與大家分享討論一下。
導(dǎo)航系統(tǒng)所遭遇的挑戰(zhàn)
iphone Native App較常見的導(dǎo)航如下圖所示：
手機屏幕底端：A、B、C、D四個tab組成該Native App的全局導(dǎo)航，這是我們經(jīng)常見到的tab導(dǎo)航欄。
手機屏幕頂端：主要有四種形式。第①種形式是在該位置中心顯示產(chǎn)品的logo；也可以將logo適當(dāng)調(diào)整位置，將常用操作或快捷入口放在該位置的右側(cè)。第②種形式是在該位置有兩或三個tab選項。第③種形式是在該位置中間顯示當(dāng)前任務(wù)標(biāo)題，在左右兩側(cè)放置導(dǎo)航控件或功能控件。第④種形式是在該位置放置搜索框。
與以上的Native App導(dǎo)航方式相比，Web App導(dǎo)航方式有著巨大的不同，如下圖所示：
Safari瀏覽器的工具欄將一直占據(jù)著屏幕的底端位置，全局導(dǎo)航只能被動移動到屏幕的頂端位置。這是影響Web App導(dǎo)航設(shè)計的最重要因素。
如果產(chǎn)品的功能比較少，且沒有特別要突出的功能的時候，可以設(shè)計成上圖中第①種導(dǎo)航方式。此時存在的問題是如何表現(xiàn)出產(chǎn)品的品牌，畢竟在Safari瀏覽器登錄某網(wǎng)站比運行一個Native App給人的品牌認(rèn)同感弱很多。
如果將產(chǎn)品logo表現(xiàn)出來，且產(chǎn)品需要將用戶常用功能突出（比如刷新功能或者發(fā)布入口），就需要設(shè)計成上圖中的第②種導(dǎo)航方式。
如果在A功能板塊下，還需要設(shè)置子類別選項，則導(dǎo)航欄中又多一組tab。此時的導(dǎo)航方式就如同上圖中的第③種了。
當(dāng)然，在執(zhí)行某一項任務(wù)的時候，全局導(dǎo)航可以暫時“歸隱”，只保留一行標(biāo)題欄和左右兩側(cè)的導(dǎo)航控件或功能控件。如上圖中第④種導(dǎo)航方式所示。
在該產(chǎn)品設(shè)計中，為方便用戶在各功能板塊之間快速省力地切換，設(shè)計師希望全局導(dǎo)航欄可以保持長久懸停，不要像一般wap網(wǎng)頁似的讓導(dǎo)航隨網(wǎng)頁滾動消失。這樣的話，基于瀏覽器的Web App 導(dǎo)航系統(tǒng)便捷性就和Native App相媲美了。
然而，瀏覽器工具欄將全局導(dǎo)航逼到了屏幕的頂端，卻又造成了導(dǎo)航頭部過于沉重的問題。如下圖所示：
如果將logo欄中的常用功能（例如刷新或發(fā)布入口）和全局導(dǎo)航都設(shè)計為懸浮停留的形式，內(nèi)容區(qū)的信息展示空間就比Native App減少了一行的高度，如上圖中的①。而且，某些頁面需要在全局導(dǎo)航的下方出現(xiàn)二級導(dǎo)航；懸停不動的3行導(dǎo)航大大吞噬了屏幕本來就很寶貴的內(nèi)容顯示空間，如上圖中的②。
讓用戶在如此狹小的空間不得不頻繁滑動屏幕瀏覽信息，這樣的體驗太糟糕了。這個嚴(yán)重的問題很讓設(shè)計師困擾，因此需要重新設(shè)計一下導(dǎo)航系統(tǒng)。設(shè)計過程主要包括：優(yōu)秀競品分析、方案遴選。
優(yōu)秀競品分析
首先，分析對比了三款優(yōu)秀的Web App：Google+、FT Web App、Twitter的導(dǎo)航方式。瀏覽環(huán)境均為iphone Safari瀏覽器。
1.Google+
導(dǎo)航系統(tǒng)特點：
￭全局導(dǎo)航單獨形成一個頁面，其他頁面不出現(xiàn)全局導(dǎo)航；
￭導(dǎo)航欄沿用了ios系統(tǒng)原生控件的形式：標(biāo)題+導(dǎo)航或功能控件；
￭標(biāo)題欄在頁面中懸停不動
優(yōu)點分析：
保證了每個信息瀏覽頁面的導(dǎo)航欄簡潔輕薄，盡量少的占用信息詳情的顯示空間；保證了其核心功能（此處是微博瀏覽功能）的良好使用體驗。
缺點分析：
全局導(dǎo)航隱藏較深，降低了用戶在不同功能板塊快速切換的便利性；全局導(dǎo)航隱藏較深，用戶看不到其它板塊功能，大大降低了用戶點擊使用其他功能的可能性。
2. FT Web App
導(dǎo)航系統(tǒng)特點：
￭Safari瀏覽器URL一欄一直懸停存在，并將品牌文字FT Web App顯示在頂端;
￭全局導(dǎo)航被隱藏起來，點擊功能鍵后在頁面頂端出現(xiàn)；
￭二級導(dǎo)航出現(xiàn)在頁面頂端；
￭全局導(dǎo)航和二級導(dǎo)航由于新聞板塊數(shù)量較多，都采取了單行空間不完全呈現(xiàn)的方式，可滑動選擇其中某一項；
￭所有導(dǎo)航隨頁面滾動，不在屏幕中保持懸停；
優(yōu)點分析：
FT Web App導(dǎo)航設(shè)計最大的優(yōu)點就是繁重導(dǎo)航的輕量化處理。全局導(dǎo)航和二級導(dǎo)航中的新聞板塊都非常多，若將這些板塊都展示出來，恐怕要占用屏幕的一半顯示空間。FT Web App于是將全局導(dǎo)航隱藏在一個功能鍵之后，二級導(dǎo)航也只給了一行的顯示空間。
缺點分析：
展示給用戶的導(dǎo)航只是其全部新聞板塊的冰山一角，無法給予用戶全部概況瀏覽的機會，也就無法很好的激勵用戶去嘗試被隱藏的新聞版塊；同時，用戶尋找某一個新聞版塊或者在頁面底端回到頁面頂端的操作成本略高。
3.Twitter
導(dǎo)航設(shè)計特點：
￭全局導(dǎo)航只有一行，品牌展示濃縮在主頁圖標(biāo)中（Twitter小鳥圖標(biāo)）；
￭全局導(dǎo)航一直保持在屏幕頂端懸停不動，不隨頁面滾動而滾動；
￭二級導(dǎo)航在點擊全局導(dǎo)航某tab后，以菜單列表形式出現(xiàn)。
優(yōu)點分析：
在屏幕頂端懸停不動的全局導(dǎo)航，可以方便用戶在不同的功能板塊之間快捷切換，降低了用戶的信息尋找成本；Twitter Web App的導(dǎo)航只有一行，為用戶保證了盡量大的正文內(nèi)容顯示空間。
缺點分析：
一些常用的功能鍵被隱藏在二級導(dǎo)航中（比如新信息發(fā)布入口），一方面增大了用戶的尋找成本，另一方面降低了這些常用功能對用戶的激勵使用效用。
基于對以上三款Web App產(chǎn)品導(dǎo)航系統(tǒng)的分析，設(shè)計師對目標(biāo)項目的導(dǎo)航系統(tǒng)設(shè)計形成了以下框定：
￭全局導(dǎo)航方便用戶快速尋找以及功能板塊間的切換；
￭導(dǎo)航盡量輕薄化處理，盡量保證足夠的正文內(nèi)容區(qū)顯示空間；
￭將用戶經(jīng)常使用的功能鍵呈現(xiàn)在前面。
方案遴選階段
基于項目的實際需要以及對競品分析的思考總結(jié)，設(shè)計師嘗試了3款導(dǎo)航設(shè)計方案，并對每一款方案的優(yōu)劣之處進行了詳細(xì)分析。
導(dǎo)航設(shè)計方案一
設(shè)計說明：
￭ ABCD是產(chǎn)品的四個功能板塊，組成全局導(dǎo)航。
￭ 全局導(dǎo)航在屏幕頂端保持懸停不動。
￭ E是新消息發(fā)布入口，屬于用戶常用功能。
￭ E采用半透明顯示方式。
￭ E停留在屏幕的右下角
該方案的優(yōu)點：
屏幕頂端只有全局導(dǎo)航一欄，導(dǎo)航的輕量化為正文內(nèi)容區(qū)節(jié)省了盡量大的顯示空間；全局導(dǎo)航懸停不動，可以便于用戶快速切換到不同的功能板塊。
該方案的缺點：
右下角的新信息發(fā)布入口致使瀏覽頁面不夠清爽，會對用戶造成一定的視覺干擾；新信息發(fā)布入口沒有必要在任何頁面都顯示，于是可尋性出現(xiàn)了危機；品牌logo無法顯示，品牌感較弱。
導(dǎo)航設(shè)計方案二
設(shè)計說明：
￭ E是新消息發(fā)布入口，屬于用戶常用功能。
￭ ABCD是產(chǎn)品的四個功能板塊，組成全局導(dǎo)航。
￭ 屏幕頂端的兩行導(dǎo)航欄在用戶剛進入頁面的時候出現(xiàn)，在用戶滑動屏幕瀏覽信息的時候消失。
￭ 屏幕右下角半透明功能鍵在導(dǎo)航欄消失后出現(xiàn)，點擊該鍵導(dǎo)航欄出現(xiàn)。
該方案的優(yōu)點：
瀏覽信息的時候?qū)Ш綑谙�，為用戶提供提供了最大的正文�?nèi)容顯示空間；可以顯示logo，品牌感較強；新信息發(fā)布入口的可尋性較好。
該方案的缺點：
屏幕右下角半透明功能鍵致使瀏覽頁面不夠清爽，會對用戶造成一定的視覺干擾。
導(dǎo)航設(shè)計方案三
設(shè)計說明：
￭ E是新消息發(fā)布入口，屬于用戶常用功能。
￭ ABCD是產(chǎn)品的四個功能板塊，組成全局導(dǎo)航。
￭ 屏幕頂端的兩行導(dǎo)航欄在用戶剛進入頁面的時候出現(xiàn)，在用戶滑動屏幕瀏覽信息的時候第一欄向上消失，第二欄上移至頂部保持懸停不動。
￭ 手動下拉全局導(dǎo)航欄，可以下拉出第一欄導(dǎo)航。
該方案的優(yōu)點：
瀏覽正文信息的時候，僅顯示全局導(dǎo)航一欄，做到了導(dǎo)航的輕薄化；全局導(dǎo)航懸停不動，可以便于用戶快速切換到不同的功能板塊。
該方案的缺點：
下拉全局導(dǎo)航時，可能會有誤操作的危險，雖然可能性很小。
綜合以上的分析，考慮到正文內(nèi)容區(qū)顯示空間的大小、對產(chǎn)品的操作便利性以及產(chǎn)品品牌感三方面因素，最終決定將方案三作為導(dǎo)航設(shè)計的基本形式，并繼續(xù)進行進一步豐富細(xì)化。
總結(jié)：
瀏覽器的工具欄一直占據(jù)著屏幕的底端位置，全局導(dǎo)航只能被動移動到屏幕的頂端位置。如何平衡操作的便捷性與正文信息顯示空間最大化的關(guān)系，是Web App導(dǎo)航設(shè)計的關(guān)鍵所在。
最佳方案總是權(quán)衡的結(jié)果。每一款設(shè)計方案解決某些問題的同時也會產(chǎn)生新的問題。此時設(shè)計師需要知道哪些功能是最重要、優(yōu)先級最高的，保證核心功能的良好用戶體驗是評判設(shè)計方案的重要準(zhǔn)繩。