大家開始設(shè)計移動端界面的時候,面臨的第一個問題就是布局了,而影響整個網(wǎng)站設(shè)計布局的主要因素就是導(dǎo)航,這個不光關(guān)系著一個界面的結(jié)構(gòu),甚至跟整個app、wap的框架都有著千絲萬縷的關(guān)系。
接下來就介紹目前最常見的8種導(dǎo)航模式,按照各自的利弊合理的運(yùn)用在自己的設(shè)計當(dāng)中。
1.抽屜導(dǎo)航模式設(shè)計 ——適用于信息層級較多的界面
如果界面主要功能和內(nèi)容都在一個頁面里,只是一些低頻操作內(nèi)容和輔助功能,放在抽屜里。
【優(yōu)點】頁面看上去簡潔美觀
【缺點】現(xiàn)在的手機(jī)屏幕越來越大單手持握難以操作,隱藏在抽屜欄里的信息點擊率極低。
2. 標(biāo)簽式導(dǎo)航模式設(shè)計——常見、安全
一種最常見的移動端導(dǎo)航模式,也是最安全的,一般位于頁面底部或頂部。
【優(yōu)點】方便用戶在相關(guān)幾類信息中頻繁跳轉(zhuǎn)且不迷失方向,比較直觀。
【缺點】會占用一定的高度空間且由于屏幕限制導(dǎo)航一般不多于五類(現(xiàn)在已經(jīng)有可滑動標(biāo)簽導(dǎo)航模式)。
3. 列表式導(dǎo)航模式設(shè)計 ——可展示部分內(nèi)容信息
大多作為輔助導(dǎo)航來展示二級甚至更深層次的內(nèi)容。
【優(yōu)點】在導(dǎo)航中可展示部分內(nèi)容信息,結(jié)構(gòu)清晰,易于理解,能夠幫助用戶快速定位到對應(yīng)的頁面。
【缺點】效率極低,用戶需憑煩的來回操作,只有前幾項才容易被人記住。
4. 宮格式導(dǎo)航模式設(shè)計 ——伴隨圖形呈現(xiàn)
這種導(dǎo)航非常常見,每天一打開手機(jī)宮格式是就會對跟你打招呼,一般作為內(nèi)容列表的一種圖形化形式呈現(xiàn)。
【優(yōu)點】每個宮格式導(dǎo)航相互獨立。
【缺點】導(dǎo)航不能有所交集,否則導(dǎo)致操作負(fù)累,在界面中使用圖形呈現(xiàn)配上少量文字會有一定認(rèn)知障礙。
5. 懸浮icon導(dǎo)航模式設(shè)計 ——適用大屏
是將導(dǎo)航與頁面分層,無論你處于哪個頁面懸浮導(dǎo)航永遠(yuǎn)懸浮于頁面之上,適用于大屏的導(dǎo)航模式。
【優(yōu)點】可以在屏幕邊緣自由移動,用戶可在頁面自由跳轉(zhuǎn)不受導(dǎo)航限制。
【缺點】會遮擋頁面的某些信息,且用戶必須進(jìn)一步操作才能了解導(dǎo)航內(nèi)容,不直觀。
6. 平鋪式導(dǎo)航模式設(shè)計 ——簡潔、單一
當(dāng)你的信息足夠單一的時候,可采用該模式。
【優(yōu)點】保證頁面的完整與美觀,一般滑動切換操作簡單。
【缺點】只能切換相鄰頁面、容易迷失位置
7. 沉浸式導(dǎo)航模式設(shè)計 ——游戲、地圖
一般置身于頁面的場景中,應(yīng)用在游戲、地圖app居多。
【優(yōu)點】趣味、代入感極強(qiáng)
【缺點】受視覺畫面的限制,否則易迷失。
8. 組合導(dǎo)航模式設(shè)計——復(fù)雜的界面
顧名思義,就是以上7種模式的兩兩組合

總結(jié)出來的是目前常見的8種,隨著時間的發(fā)展設(shè)計師們也是不斷創(chuàng)造出新的,更適合用戶的網(wǎng)站導(dǎo)航模式。也希望大家做網(wǎng)站設(shè)計的時候不僅僅局限在這些模板當(dāng)中,適合才是最重要的。
大家開始設(shè)計移動端界面的時候,面臨的第一個問題就是布局了,而影響整個網(wǎng)站設(shè)計布局的主要因素就是導(dǎo)航,這個不光關(guān)系著一個界面的結(jié)構(gòu),甚至跟整個app、wap的框架都有著千絲萬縷的關(guān)系。
接下來就介紹目前最常見的8種導(dǎo)航模式,按照各自的利弊合理的運(yùn)用在自己的設(shè)計當(dāng)中。
1.抽屜導(dǎo)航模式設(shè)計 ——適用于信息層級較多的界面
如果界面主要功能和內(nèi)容都在一個頁面里,只是一些低頻操作內(nèi)容和輔助功能,放在抽屜里。
【優(yōu)點】頁面看上去簡潔美觀
【缺點】現(xiàn)在的手機(jī)屏幕越來越大單手持握難以操作,隱藏在抽屜欄里的信息點擊率極低。
2. 標(biāo)簽式導(dǎo)航模式設(shè)計——常見、安全
一種最常見的移動端導(dǎo)航模式,也是最安全的,一般位于頁面底部或頂部。
【優(yōu)點】方便用戶在相關(guān)幾類信息中頻繁跳轉(zhuǎn)且不迷失方向,比較直觀。
【缺點】會占用一定的高度空間且由于屏幕限制導(dǎo)航一般不多于五類(現(xiàn)在已經(jīng)有可滑動標(biāo)簽導(dǎo)航模式)。
3. 列表式導(dǎo)航模式設(shè)計 ——可展示部分內(nèi)容信息
大多作為輔助導(dǎo)航來展示二級甚至更深層次的內(nèi)容。
【優(yōu)點】在導(dǎo)航中可展示部分內(nèi)容信息,結(jié)構(gòu)清晰,易于理解,能夠幫助用戶快速定位到對應(yīng)的頁面。
【缺點】效率極低,用戶需憑煩的來回操作,只有前幾項才容易被人記住。
4. 宮格式導(dǎo)航模式設(shè)計 ——伴隨圖形呈現(xiàn)
這種導(dǎo)航非常常見,每天一打開手機(jī)宮格式是就會對跟你打招呼,一般作為內(nèi)容列表的一種圖形化形式呈現(xiàn)。
【優(yōu)點】每個宮格式導(dǎo)航相互獨立。
【缺點】導(dǎo)航不能有所交集,否則導(dǎo)致操作負(fù)累,在界面中使用圖形呈現(xiàn)配上少量文字會有一定認(rèn)知障礙。
5. 懸浮icon導(dǎo)航模式設(shè)計 ——適用大屏
是將導(dǎo)航與頁面分層,無論你處于哪個頁面懸浮導(dǎo)航永遠(yuǎn)懸浮于頁面之上,適用于大屏的導(dǎo)航模式。
【優(yōu)點】可以在屏幕邊緣自由移動,用戶可在頁面自由跳轉(zhuǎn)不受導(dǎo)航限制。
【缺點】會遮擋頁面的某些信息,且用戶必須進(jìn)一步操作才能了解導(dǎo)航內(nèi)容,不直觀。
6. 平鋪式導(dǎo)航模式設(shè)計 ——簡潔、單一
當(dāng)你的信息足夠單一的時候,可采用該模式。
【優(yōu)點】保證頁面的完整與美觀,一般滑動切換操作簡單。
【缺點】只能切換相鄰頁面、容易迷失位置
7. 沉浸式導(dǎo)航模式設(shè)計 ——游戲、地圖
一般置身于頁面的場景中,應(yīng)用在游戲、地圖app居多。
【優(yōu)點】趣味、代入感極強(qiáng)
【缺點】受視覺畫面的限制,否則易迷失。
8. 組合導(dǎo)航模式設(shè)計——復(fù)雜的界面
顧名思義,就是以上7種模式的兩兩組合

總結(jié)出來的是目前常見的8種,隨著時間的發(fā)展設(shè)計師們也是不斷創(chuàng)造出新的,更適合用戶的網(wǎng)站導(dǎo)航模式。也希望大家做網(wǎng)站設(shè)計的時候不僅僅局限在這些模板當(dāng)中,適合才是最重要的。