POST TIME:2018-12-03 21:29
文章總結了APP種常見的幾類導航欄及特點,希望給大家帶來些啟發。
1 一級導航/主導航1.1 標簽式導航標簽式導航又叫Tab式導航,是目前移動端市場上最為廣泛的導航設計。標簽導航通常分為底部,頂部,頂、底混合使用這三種模式。
1.1.1 底部導航
采用文字加圖標的方式展現。一般有3~5個標簽,適合在相關的幾類信息中間頻繁的切換使用。這類信息優先級較高、用戶使用頻繁,相互之間彼此獨立,通過標簽式導航的引導,用戶可以迅速的實現頁面之間的切換且不會迷失標的目的,簡單而高效。它的缺點是會占用必然高度的空間,如果用戶是小屏幕手機,則視覺體驗不太好。
下圖應用別離為微信、Facebook:
1.1.2頂部導航
當內容分類比較多,用戶對差別內容的打開率相差不是很大,需要快速切換/調出的時候,經常會采用頂部導航設計模式,常見于工具類APP中,如Wave Analytics、滴滴打車:
1.1.3 頂部、底部雙Tab導航
標簽式導航除了設在頂部和底部,別的有些內容比較多的產品會采用頂部、底部混合使用標簽式導航,如簡書、網易云閱讀:
1.2 抽屜式導航抽屜導航指的是一些功能菜單按鈕隱藏在當前頁面后,點擊入口或側滑即可像拉抽屜一樣拉出菜單。這種導航設計比較適合于那么不需要頻繁切換的次要功能,例如對設置、關于、會員、皮膚設置等功能的隱藏。下圖別離是Wave Analytics、Gadgets News、My Rolls和Perisfind:
抽屜式導航的優點在于節省頁面展示空間,使主頁面更加簡潔美不雅觀,讓用戶將更多的注意力聚焦到當前頁面。
缺點在于次功能入口比較隱蔽,用戶不容易發現;使用次功能需要二次點擊,增加用戶使用成本。
1.3 桌面式導航桌面式導航類似于操作系統或啟動控制面板,其特色是主頁由多個按鈕組成。均衡布局時,按鈕通常大小一致,以3*3、2*3、2*2和1*2等形式排布于桌面。點擊按鈕時,跳轉至其他內部子系統/子模塊。
如圖,Strides和Finance采用了基于圓形按鈕的均衡布局:
而360和日語五十音圖則采用了基于圓角矩形按鈕的均衡布局:
注:當圓角矩形弧度越來越小,甚至消失不見成為正方形的時候,往往用方形格子隔開各個按鈕,使得視覺效果最好,這種模式見于下一節的“宮格式導航”中。
市面上還存在著一些極少數應用,它們內部生態繁雜,提供(本身的或者來自第三方辦事)眼花繚亂、不勝枚舉的辦事項目,有些辦事項目單獨拎出來,做成一款應用,都可以匹敵一家小型互聯網公司,甚至是中型互聯網公司,但是出于業務整合、平臺搭建、體系構建、辦事扁平化,它們會被塞到一個“殼子”里,形成“超級辦事平臺類”APP,好比阿里系的支付寶和千牛工作臺:
支付寶首頁的辦事項目,可以在“全部”頁面中進行個性化配置;千牛工作臺首頁的三方辦事,可以在“設置”頁面中進行個性化配置。兩個APP都支持用戶按照本身實際需求和使用頻度,優化辦事項目的顯示挨次,進行入口優化。
這種“超級辦事平臺類”APP,目前我僅在阿里系的產品中看到過,其特點是:
高頻/超高頻使用,用戶粘性極高,應用處于市場壟斷地位,幾乎無可替代產品(生態龐大帶來的優勢);應用辦事種類多且扁平化(使得并列式的桌面布局模式成為必選項);可以當做企業移動后臺來使用(支付寶的辦事包孕衣食住行,可認為是企業個人),我稱之為“行走的ERP”;商業氛圍濃厚。最佳實踐:菜單無主次之分,每個菜單所占空間大小一致。菜單有主次之分,主要的占空間較大,其余的占空間較小。在使用桌面式導航布局時,要充分考慮到給客戶提供個性化和定制化功能。
1.4 宮格式導航