最近在做iphone端Web App的項目。由于產(chǎn)品形式新穎，技術環(huán)境不成熟，公司給與了較寬松的研發(fā)時間。在一個月的交互設計階段，每個環(huán)節(jié)都得到多次討論推敲，我從中感悟頗多。導航系統(tǒng)的設計是一個比較典型的點，拿出來與大家分享討論一下。

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

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

手機屏幕底端：A、B、C、D四個tab組成該Native App的全局導航，這是我們經(jīng)常見到的tab導航欄。

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

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

Safari瀏覽器的工具欄將一直占據(jù)著屏幕的底端位置，全局導航只能被動移動到屏幕的頂端位置。這是影響Web App導航設計的最重要因素。

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

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

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

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

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

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

如果將logo欄中的常用功能（例如刷新或發(fā)布入口）和全局導航都設計為懸浮停留的形式，內(nèi)容區(qū)的信息展示空間就比Native App減少了一行的高度，如上圖中的①。而且，某些頁面需要在全局導航的下方出現(xiàn)二級導航；懸停不動的3行導航大大吞噬了屏幕本來就很寶貴的內(nèi)容顯示空間，如上圖中的②。

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

標簽： 應用設計 導航設計 app設計 

版權(quán)申明：本站文章部分自網(wǎng)絡，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。