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

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

平鋪式導(dǎo)航

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

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

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

總結(jié)：

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

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

宮格式導(dǎo)航

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

常見(jiàn)是因?yàn)椋瑹o(wú)論你用的是Android還是iOS，每天一打開(kāi)手機(jī)，宮格式導(dǎo)航就會(huì)對(duì)你說(shuō)hello了（就是下圖啦）

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

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

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

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

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

總價(jià)一下：

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

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

懸浮icon導(dǎo)航

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

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

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

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

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

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

總結(jié)：

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

但需要注意的是

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

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

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

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

廣告

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