IOS開發：Web App導航設計探討

 

　　導航系統所遭遇的挑戰

　　iPhone Native App較常見的導航如下圖所示：

　　手機螢幕底端：A、B、C、D四個tab組成該Native App的全域導航，這是我們經常見到的tab導覽列。

　　手機螢幕頂端：主要有四種形式。第①種形式是在該位置中心顯示產品的logo;也可以將logo適當調整位置，將常用操作或快捷入口放在該位置的右側。第②種形式是在該位置有兩或三個tab選項。第③種形式是在該位置中間顯示當前任務標題，在左右兩側放置導航控制項或功能控制項。第④種形式是在該位置放置搜尋方塊。

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

　　Safari瀏覽器的工具列將一直佔據著螢幕的底端位置，全域導航只能被動移動到螢幕的頂端位置。這是影響Web App導航設計的最重要因素。

　　如果產品的功能比較少，且沒有特別要突出的功能的時候，可以設計成上圖中第①種導航方式。此時存在的問題是如何表現出產品的品牌，畢竟在Safari瀏覽器登入某網站比運行一個Native App給人的品牌認同感弱很多。

　　如果將產品logo表現出來，且產品需要將使用者常用功能突出(比如重新整理功能或者發布入口)，就需要設計成上圖中的第②種導航方式。

　　如果在A功能板塊下，還需要設定子類別選項，則導覽列中又多一組tab。此時的導航方式就如同上圖中的第③種了。

　　當然，在執行某一項任務的時候，全域導航可以暫時“歸隱”，只保留一列名欄和左右兩側的導航控制項或功能控制項。如上圖中第④種導航方式所示。

　　在該產品設計中，為方便使用者在各功能板塊之間快速省力地切換，設計師希望全域導覽列可以保持長久懸停，不要像一般wap網頁似的讓導航隨網頁滾動消失。這樣的話，基於瀏覽器的Web App 導航系統便捷性就和Native App相媲美了。

　　然而，瀏覽器工具列將全域導航逼到了螢幕的頂端，卻又造成了導航頭部過於沉重的問題。如下圖所示：

　　如果將logo欄中的常用功能(例如重新整理或發布入口)和全域導航都設計為懸浮停留的形式，內容區的資訊展示空間就比Native App減少了一行的高度，如上圖中的①。而且，某些頁面需要在全域導航的下方出現二級導航;懸停不動的3行導航大大吞噬了螢幕本來就很寶貴的內容顯示空間，如上圖中的②。

　　讓使用者在如此狹小的空間不得不頻繁滑動螢幕瀏覽資訊，這樣的體驗太糟糕了。這個嚴重的問題很讓設計師困擾，因此需要重新設計一下導航系統。設計過程主要包括：優秀競品分析、方案遴選。

　　優秀競品分析

　　首先，分析對比了三款優秀的Web App：Google+、FT Web App、Twitter的導航方式。瀏覽環境均為iphone Safari瀏覽器。

　　1.Google+

　　導航系統特點：

　　￭全域導航單獨形成一個頁面，其他頁面不出現全域導航;

　　￭導覽列沿用了ios系統原生控制項的形式：標題+導航或功能控制項;

　　￭標題列在頁面中懸停不動

　　優點分析：

　　保證了每個資訊瀏覽頁面的導覽列簡潔輕薄，盡量少的佔用資訊詳情的顯示空間;保證了其核心功能(此處是微博瀏覽功能)的良好使用體驗。

　　缺點分析：

　　全域導航隱藏較深，降低了使用者在不同功能板塊快速切換的便利性;全域導航隱藏較深，使用者看不到其它板塊功能，大大降低了使用者點擊使用其他功能的可能性。

　　2. FT Web App

　　導航系統特點：

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

　　￭全域導航被隱藏起來，點擊功能鍵後在頁面頂端出現;

　　￭二級導航出現在頁面頂端;

　　￭全域導航和二級導航由於新聞板塊數量較多，都採取了單行空間不完全呈現的方式，可滑動選擇其中某一項;

　　￭所有導航隨頁面滾動，不在螢幕中保持懸停;

　　優點分析：

　　FT Web App導航設計最大的優點就是繁重導航的輕量化處理。全域導航和二級導航中的新聞板塊都非常多，若將這些板塊都展示出來，恐怕要佔用螢幕的一半顯示空間。FT Web App於是將全域導航隱藏在一個功能鍵之後，二級導航也只給了一行的顯示空間。

　　缺點分析：

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

　　3.Twitter

　　導航設計特點：

　　￭全域導航只有一行，品牌展示濃縮在首頁表徵圖中(Twitter小鳥表徵圖);

　　￭全域導航一直保持在螢幕頂端懸停不動，不隨頁面滾動而滾動;

　　￭二級導航在點擊全域導航某tab後，以菜單列表形式出現。

　　優點分析：

　　在螢幕頂端懸停不動的全域導航，可以方便使用者在不同的功能板塊之間快捷切換，降低了使用者的資訊尋找成本;Twitter Web App的導航只有一行，為使用者保證了盡量大的本文內容顯示空間。

　　缺點分析：

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

　　基於對以上三款Web App產品導航系統的分析，設計師對目標項目的導航系統設計形成了以下框定：

　　￭全域導航方便使用者快速尋找以及功能板塊間的切換;

　　￭導航盡量輕薄化處理，盡量保證足夠的本文內容區顯示空間;

　　￭將使用者經常使用的功能鍵呈現在前面。

　　方案遴選階段

　　基於項目的實際需要以及對競品分析的思考總結，設計師嘗試了3款導航設計方案，並對每一款方案的優劣之處進行了詳細分析。

　　導航設計方案一

　　設計說明：

　　￭ ABCD是產品的四個功能板塊，組成全域導航。

　　￭ 全域導航在螢幕頂端保持懸停不動。

　　￭ E是新訊息發布入口，屬於使用者常用功能。

　　￭ E採用半透明顯示方式。

　　￭ E停留在螢幕的右下角

　　該方案的優點：

　　螢幕頂端只有全域導航一欄，導航的輕量化為本文內容區節省了盡量大的顯示空間;全域導航懸停不動，可以便於使用者快速切換到不同的功能板塊。

　　該方案的缺點：

　　右下角的新資訊發布入口致使瀏覽頁面不夠清爽，會對使用者造成一定的視覺幹擾;新資訊發布入口沒有必要在任何頁面都顯示，於是可尋性出現了危機;品牌logo無法顯示，品牌感較弱。

　　導航設計方案二

　　設計說明：

　　￭ E是新訊息發布入口，屬於使用者常用功能。

　　￭ ABCD是產品的四個功能板塊，組成全域導航。

　　￭ 螢幕頂端的兩行導覽列在使用者剛進入頁面的時候出現，在使用者滑動螢幕瀏覽資訊的時候消失。

　　￭ 螢幕右下角半透明功能鍵在導覽列消失後出現，點擊該鍵導覽列出現。

　　該方案的優點：

　　瀏覽資訊的時候導覽列消失，為使用者提供提供了最大的本文內容顯示空間;可以顯示logo，品牌感較強;新資訊發布入口的可尋性較好。

　　該方案的缺點：

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

　　導航設計方案三

　　設計說明：

　　￭ E是新訊息發布入口，屬於使用者常用功能。

　　￭ ABCD是產品的四個功能板塊，組成全域導航。

　　￭ 螢幕頂端的兩行導覽列在使用者剛進入頁面的時候出現，在使用者滑動螢幕瀏覽資訊的時候第一欄向上消失，第二欄上移至頂部保持懸停不動。

　　￭ 手動下拉全域導覽列，可以下拉出第一欄導航。

　　該方案的優點：

　　瀏覽本文資訊的時候，僅顯示全域導航一欄，做到了導航的輕薄化;全域導航懸停不動，可以便於使用者快速切換到不同的功能板塊。

　　該方案的缺點：

　　下拉全域導航時，可能會有誤操作的危險，雖然可能性很小。

　　綜合以上的分析，考慮到本文內容區顯示空間的大小、對產品的操作便利性以及產品品牌感三方面因素，最終決定將方案三作為導航設計的基本形式，並繼續進行進一步豐富細化。

　　總結：

　　瀏覽器的工具列一直佔據著螢幕的底端位置，全域導航只能被動移動到螢幕的頂端位置。如何平衡操作的便捷性與本文資訊顯示空間最大化的關係，是Web App導航設計的關鍵所在。

　　最佳方案總是權衡的結果。每一款設計方案解決某些問題的同時也會產生新的問題。此時設計師需要知道哪些功能是最重要、優先順序最高的，保證核心功能的良好使用者體驗是評判設計方案的重要準繩。