根據產品層級的深度和廣度，選擇適合的導航模式，是產品設計中的關鍵一環。導航其實只有寄種，但大家一定不能被現有的導航模式所束縛，未來會有新的導航模式，新的操作手勢…，設計的心應該是自由的，若你羽翼未豐，就在規則的天空中飛行，可能不會出彩但不至于犯錯；若你已成雄鷹，便可自由飛翔，突破規則，甚至建立自己的規則。

平鋪式導航

當你的信息足夠扁平，可以嘗試平鋪式導航。這種導航方式很容易帶來高大上的視覺體驗，大程度的保證了頁面的簡潔性和內容的完整性，且一般都會結合滑動切換的手勢，操作起來也非常方便。PChouse是一個家居雜志的APP，雜志休閑隨意的特質，非常適合平鋪式導航，大限度的保持了圖片的完整性。（如下圖）

但缺點是用戶只能切換的相鄰頁面，很難跳轉到非相鄰的頁面，很容易迷失位置，因此平鋪式導航都會添加幾個小點來指示當前位置。如墨跡天氣中切換城市的操作就運用了平鋪式導航，優點是可以在一個頁面完整展示當前城市的情況，快速切換到其他城市。但如果你設置的城市比較多，就很難快速定位到某個城市，但所幸手勢操作切換方便，且正常情況下，用戶最多只會設置2-3個頁面，不會造成太大的負擔。

淘寶中的店鋪推薦也使用了平鋪式導航，推薦店鋪雖然有40個之多，但用數字表達出了明確位置的同時，也加入了手勢切換，增加了易用性和趣味性。

總結：

輪播式導航比較適用于足夠扁平化的內容和隨意瀏覽的閱讀模式

需要注意的是：無法跳轉至費相鄰頁面，如果入口間需要反復跳轉，則不適合這種模式

宮格式導航

這種導航模式非常常見，但是卻不常用。

常見是因為，無論你用的是Android還是iOS，每天一打開手機，宮格式導航就會對你說hello了（就是下圖啦）

每一個APP都是一個宮格，這些宮格聚集在中心頁面，用戶只能在中心頁面進入其中一個宮格，如果想要進入另一個宮格，必須要先回到中心頁面，再進入另一個宮格。每個宮格相互獨立，它們的信息間也沒有任何交集，無法跳轉互通。因為這種特質，宮格式導航被廣泛應用于各平臺系統的中心頁面，這就是為什么說他常見。

但是為什么不常用呢，大家可以翻一下手機里的APP，看看哪個APP的主導航用了宮格式導航？你可能只能找到一個最常用的，尤其是愛自拍的親們-美圖秀秀（如下圖）

經常使用美圖秀秀的人都會有一個共同的煩惱，例如我拍了一張圖片，我需要美圖一下，我的心理模型是這樣的：進入美圖秀秀-打開一張圖片-先祛斑祛痘、放大眼睛、瘦個臉-最后加上特效（自然/甜美可人/粉嫩系）-保存圖片。

但是美圖秀秀給我的實際模型卻是這樣的:進入美圖秀秀-打開一張圖片-進入人像美容-祛斑祛痘、放大眼睛、瘦個臉-保存圖片-再進入美化圖片-加個特效-再次保存。這樣做的結果是流程復雜，而且我多存了一張沒用的照片，還要到照片里進行刪除。

這就是宮格式導航的缺陷，信息互斥，無法相互通達，只能給用戶帶來了更多的操作步驟。

總價一下：

宮格式導航適合入口相互獨立互斥，且不需要交叉使用的信息歸類

一旦入口需要有所交集，必然導致更多的操作負累，這個時候只能根據產品特性做出權衡，如果不適合，建議果斷拒絕這種方式。

懸浮icon導航

懸浮icon導航，是將導航頁面分層，無論你到達APP的哪個頁面，懸浮icon永遠懸浮在上面，你依靠懸浮層隨時可以去想要去的地方，同時，為了讓懸浮icon不遮擋某個頁面的操作，通常懸浮的icon都可以在屏幕邊緣自由移動。

iOS系統就運用了這種導航模式-Assistive Touch, Assistive Touch是在iOS5出現之后搭載的新的輔助功能，知乎上很多人吐槽這個懸浮方塊非常礙事，還有很多人說這是因為home鍵質量不佳而且官方并沒有明確提出有效的解決方案，所以AssistiveTouch是曲線救國，此處應有笑聲…我最早的一部4S用了2年，摔碎屏2次，home鍵都依然堅挺，撇開home鍵不談，單說懸浮icon在大屏幕時代發揮的作用，當你單手持握手機，拇指在手機中部瀏覽，你想回到主屏幕，但是手指卻難以到達屏幕底部，懸浮方塊在這個時候就能為你提供快捷操作。

而且你可以在AssistiveTouch里自定義頂層菜單，我比較喜歡里面的屏幕快照功能，不用按住電源鍵和home鍵就能截屏的感覺棒棒噠！

Assistive Touch從iOS5一直活到iOS9，真不是一個雞肋的功能，關鍵看你怎么用。

在Android的MaterialDesign中，同樣提出了懸浮icon的設計概念。

盡管現在很難看到懸浮icon作為導航的設計，但我相信隨著大屏的發展，懸浮式icon一定會越來越廣泛的使用

總結：

懸浮式icon是一個非常便捷的操作入口，也適應大屏幕時代。

但需要注意的是

l懸浮式icon會遮擋某些頁面的操作，在設計的時候應該考慮進去，比如無論在那個頁面永遠為懸浮icon留有位置。

l在某些信息層級繁多且復雜的APP，讓用戶自主決定是否需要調出懸浮式icon，或者讓用戶自定義菜單會更加符合用戶的心理預期。

文章題目：手機網站設計：你可以在導航上多花點心思
文章URL：http://www.2m8n56k.cn/news/72627.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站制作、手機網站建設、網站設計等

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯