優秀的APP導航設計,能夠合理地完美的展示產品的功能,并快速引導用戶使用APP產品功能。同時也增強了用戶的識別度。
之前,html5模版網(m.suosuyi.cn)跟大家分享過《3種常見的APP導航設計方案優劣勢分析》,如果對APP導航設計不夠了解和清楚的APP設計小伙伴們,可以認真閱讀回味下!
而今天老譚跟大家再來聊聊如何去為我們的APP項目選擇合適的APP導航設計,是一個很關鍵的一步!因為優秀的APP導航設計,會讓用戶輕松到達目的地而又不會干擾和困惑用戶的選擇。你們說是不是呢?
APP設計師需要綜合產品經理,前端交互等需求和建議。
1、經典導航設計Tabber
Tabber是蘋果ios可以自動生成一種導航控件,開發起來方便。所以這種經典的底部導航欄受到絕大數app設計師的青睞。這種設計符合手機端用戶單手操作的習慣,包括新版微信,淘寶,支付寶,百度手機等都采用的這一方式。這個APP導航方式占大多數。
一般為四個導航按鈕最為普遍,最方便操作的是第二和第三個按。受制于屏幕寬度的限制,通常采用Tabber導航設計方式,欄目的個數是有限的,不能超過5個。4個為最佳選擇。過多的話明顯不利于用戶的切換。從界面布局來看,也降低體驗友好度。
突出Tabbar上展示的那些核心功能的按鈕,方便用戶快捷操作。
但是,目前也有部分APP在tabber的基礎上,衍生出了一種交互比較好的彈出導航菜單。
這種方式應該說應用了web端的元素和使用方式,相當于有了二級菜單。呵呵,很不錯的嘗試。如果導航菜單很多,除了下面我們說到的抽屜式APP導航設計以外,這種彈出式的導航菜單何嘗不是一種選擇。
2、抽屜式滑動導航
上面我們說到了Tabbar并不是完美,它并不適用于過多的切換項。所以,抽屜式滑動導航很好的解決了這個問題!當然2者也是可以互補使用。之前,html5模版網(m.suosuyi.cn)也提到過《APP設計中用戶體驗比較好的“跳轉”效果匯總》
抽屜式導航通過縱向排列切換項解決了這一問題。不過這也意味著它不能和主體內容同時出現在屏幕上。
在大部分的APP導航設計當中,通過點擊屏幕左上角(或者是右上角,如淘寶的APP)的按鈕點擊切換項,有些也可以通過向右滑動手指來完成,不需要點擊上門的按鈕。算是一個簡單的APP滑動動畫。
抽屜式滑動導航也分為2種導航布局,
第一種:列表形式如下圖。
第二種:圖標卡片式布局(ios7側邊導航設計)
3、APP導航界面之磁貼設計
磁貼——是一種全新設計語言的元素。類似于win8 metro風格布局。?
在這個觸摸屏流行的年代,基本的點擊、選中、拖動等操作各種系統都一樣。所以,磁貼設計的方式在win系統上面很常見,但是也有很多APP才有了這樣導航,比如微信網站很多模板就是。如下面的干凈綠色的APP應用程序導航菜單設計。
4、webAPP上面的 滑動菜單跟移動web菜單。簡稱“超級菜單式”
移動設備上的超級菜單式導航與網站所用的超級菜單導航類似,它在一個較大的覆蓋面板上分組顯示已定義好格式的菜單選項。
這樣的app導航菜單在webAPP上面很常見,如163的新聞客戶端,百度siteAPP等
這種酷炫滑動菜單是用戶通過在內容頁面左右滑動手指即可在不同的類別之間進行切換。
優點:這種方式的在APP用戶體驗改進了很多,尤其在連續切換時其操作方式的連續性比較強,主體頁面的過渡也更加平滑,會產生更加流暢的體驗。
缺點:一次滑動只能切換到相鄰的類別,要想直接切換到對應類別可以點擊上方的類別列表,不過由于類別過多,有時候可能需要滑動一下類別列表才能完成操作。
不過總體而言,如果需要在具有相似屬性類別之間進行較頻繁切換時,這種設計方式很值得參考。
還有一些導航菜單,直奔主題。對所有相關欄目展示全屏滑動切換。比如優酷視頻網站的APP。