之前html5模版網(wǎng)(m.suosuyi.cn)也很詳細分享了APP導(dǎo)航設(shè)計的方案和方法!今天特地組織一個關(guān)于APP導(dǎo)航設(shè)計的微專題來跟大家講講我們通常的設(shè)計手法。
1、4種常見的APP導(dǎo)航設(shè)計方式,讓我們的APP高大上
優(yōu)秀的APP導(dǎo)航設(shè)計,能夠合理地完美的展示產(chǎn)品的功能,并快速引導(dǎo)用戶使用APP產(chǎn)品功能。同時也增強了用戶的識別度。
第一個APP導(dǎo)航設(shè)計方案:列表式菜單
列表式菜單設(shè)計這個從網(wǎng)站到手機APP上都很常用的,遵循由上至下的閱讀習(xí)慣方式,所以使用起來用戶不會覺得困難。另外我們可以通過漂亮的配色、圖標組合來設(shè)計,使得菜單更多加美觀。
這種也是最容易設(shè)計的方式和APP布局。
第二個APP導(dǎo)航設(shè)計方案:矩陣、網(wǎng)格式菜單設(shè)計
網(wǎng)格式菜單就類似于metro UI的堆砌色塊,優(yōu)點簡約而不簡陋,導(dǎo)航清晰、明顯,并能提高效率。但設(shè)計時切記不分青紅皂白的去使用色彩哦,這可能會讓用戶不知所措和產(chǎn)生疲倦感。
第三個APP導(dǎo)航設(shè)計方案:底部菜單
底部菜單主要是列出應(yīng)用程序重要的功能。菜單個數(shù)不超過5個!
第四個APP導(dǎo)航設(shè)計方案:頂部菜單
頂部菜單和底部意義差不多,把菜單放在頂部,可以遵循上至下的閱讀習(xí)慣,不過我認為有個缺點就是不能單手操作。
第五個APP導(dǎo)航設(shè)計方案:擴展菜單
擴展式菜單設(shè)計現(xiàn)在連網(wǎng)站也很常用,當我們覺得菜單比較點用位置的時候,可以嘗試用這種方式來隱藏菜單,需要注意的是設(shè)計展開菜單按鈕大部設(shè)計在左或右上角這些顯示的位置。包括抽屜式菜單等。
第六個APP導(dǎo)航設(shè)計方案:引導(dǎo)頁菜單
類似于在APP手機端,只有上下箭頭或者是左右箭頭的這樣的引導(dǎo)菜單,通過這么簡單的操作按鈕,即可快速閱讀完所有的信息。使用與APP小型項目或者手機網(wǎng)站專題等。
我們一些APP導(dǎo)航設(shè)計總結(jié):
從上面6個菜單設(shè)計方案中可以看出都有自己的優(yōu)缺點,所以我們應(yīng)該選擇對你項目最為有效的方案,并能提高用戶體驗。同時我們也可以結(jié)合這幾種來設(shè)計我們自己的獨特的APP。讓app整體看起來高大上。
3種常見的APP導(dǎo)航設(shè)計方案優(yōu)劣勢分析
目前html5模版網(wǎng)(m.suosuyi.cn)官方群里很多新加入的APP設(shè)計師,很多都是第一次進行APP設(shè)計。但是很多老鳥都是潛水狀態(tài),不愿分享太多APP設(shè)計之道。