手機網(wǎng)站設(shè)計：你可以在導(dǎo)航上多花點心思

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

平鋪式導(dǎo)航

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

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

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

總結(jié)：

輪播式導(dǎo)航比較適用于足夠扁平化的內(nèi)容和隨意瀏覽的閱讀模式

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

宮格式導(dǎo)航

這種導(dǎo)航模式非常常見，但是卻不常用。

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

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

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

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

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

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

總價一下：

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

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

懸浮icon導(dǎo)航

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

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

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

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

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

盡管現(xiàn)在很難看到懸浮icon作為導(dǎo)航的設(shè)計，但我相信隨著大屏的發(fā)展，懸浮式icon一定會越來越廣泛的使用

總結(jié)：

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

但需要注意的是

l懸浮式icon會遮擋某些頁面的操作，在設(shè)計的時候應(yīng)該考慮進(jìn)去，比如無論在那個頁面永遠(yuǎn)為懸浮icon留有位置。

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

文章題目：手機網(wǎng)站設(shè)計：你可以在導(dǎo)航上多花點心思
文章URL：http://www.bm7419.com/news/72627.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有網(wǎng)站制作、手機網(wǎng)站建設(shè)、網(wǎng)站設(shè)計等

廣告

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