當我們確定了移動APP的設計需求和APP產品設計流程之后,開始著手設計APP界面UI或是APP原型圖啦。這個時候我們都要面臨的第一個問題就是如何將信息以最優的方式組合起來?
都說好的導航是產品成功的一半,良好的APP導航設計模式決策對整個app的核心體驗起到關鍵作用。
本文總結了目前通用且流行的模式,并分析了這些模式適用的場景和優劣勢,希望幫助產品同學更快的作出較合理的信息組織決策。
下面來詳細解析下9種移動APP導航設計模式:
一、Tab導航
又稱為“標簽式導航”,分上、下兩種。
標簽式導航是IOS主推的導航模式,位于屏幕的底部,在安卓上常見于頂部。這種布局方式能讓用戶直觀地了解到app的核心功能。同時,使用上能在幾個標簽間快速的跳轉。標簽分類可以根據邏輯和重要性控制在5個以內,通過視覺表現用戶的當前位置,頁面之間的切換快速又不容易迷失,簡單高效。
標簽式導航,也經常融合一些個性化設計。例如,在標簽欄的中間位置融合Logo或產品最核心的功能,豐富了標簽欄的樣式。
舉例:
1.適用場景
①上面的tab導航,一般適用于對當前頁面的分類查看,或者改變當前視圖。可以滑動,所以數量可多可少;
②下面的tab導航,一般是用來展示App的核心功能,可以迅速切換,適合用于需要頻繁切換的功能。受限于屏幕寬度,數量一般控制在5個以內,4個為最佳,(以4個舉例)其中第2、3個最好操作。當有更多操作的時候,可以將最后一項設置為“更多”,來將一些次要功能進行隱藏。
2.優勢
①讓用戶快速了解app的核心功能,且切換頁面方便,簡單高效,用戶不易“迷路”
②所有入口都可以看見,容易尋找
3.劣勢
①占據一定屏幕高度,如果是下方tab,瀏覽時會阻擋內容
②可展示功能數量少,最多只有5個
4.注意項
這種模式不適合太過復雜和不穩定的結構。
二、抽屜式導航
抽屜式導航追求核心內容的突出,弱化導航界面,常見于一些信息流產品(知乎、path、facebook等)。抽屜式導航在形式上一般位于當前界面的后方,通過左上角的按鈕或手勢滑動呼出。由于隱藏在屏幕在外,所以導航界面的空間較大,為可擴展性和個性化帶來了更多可能。由于導航默認是隱藏的,在選擇后需要有明確的提示來告知用戶的當前位置。
舉例:
1.適用場景
將并不是太常用或者切換不頻繁的功能隱藏在主界面之后,對于那些需要經常在不同導航間切換或者核心功能有一堆入口的app不適用。
在整體上:適用于功能較多,需求層級較多的軟件。
在功能上:同類弱需求的組合排列。
2.優勢
①導航界面隱藏在主界面之后,有助于用戶集中注意力,營造沉浸式體驗
②可容納多個條目,可擴展性強
3.劣勢
①用戶不容易發現,使用戶認知成本增加
②用戶容易“迷路”
4.注意項
隱藏的導航內容,需要更好的方式調出(如手勢)。
三、宮格導航
這種宮格導航是將主要入口全部聚合在主頁面中,每個宮格相互獨立,它們的信息間也沒有任何交集,無法跳轉互通。因為這種特質,宮格式導航被廣泛應用于各平臺系統的中心頁面。這樣的組織方式無法讓用戶在第一時間看到內容,選擇壓力較大,除了常見app如支付寶和美圖秀秀,其他的app采用這種導航的應用已經越來越少,往往用在二級頁作為內容列表的一種圖形化形式呈現,或是作為一系列工具入口的聚合。
舉例:
1.優點
功能入口直觀,且功能模塊多。
2.劣勢
①功能多、雜,無重點突出。
②各個入口之間的跳轉不夠靈活。如果某個功能的層級路徑較深時,用戶不能快速跳轉到自己忽然想要完成的任務頁面。
3.適用范圍
①在整體上:適用于功能模塊多的平臺性軟件。
②在功能上:較多重要功能,以展示列的形式顯示功能。
四、列表式導航
典型網易、知乎,較常用導航模式。列表式導航作為信息組織框架,是我們在產品設計中必不可少的一個信息承載模式。列表導航與宮格導航類似,常用于二級頁面,不會默認展示任何實質內容,所以通常app不會在首頁使用它。這種導航結構清晰,易于用戶理解,能夠幫助用戶快速的定位去到對應的頁面。
1.優點
①層次清晰,展示內容多,展示內容性軟件。
②一次性可加載展現的內容條數較多。
2.劣勢
①需注重編排
②內容過多時,無法突出重點
③靈活性不高
3.適用范圍
①在整體上:適用于資訊類軟件。
②在功能上:常用于2級頁面,對各種內容的展示,需保證清晰、明了。
五、舵式導航
也稱“點聚式”導航,點聚式導航最早來自于應用path,它將用戶最頻繁使用的多個核心功能點匯聚在主界面中顯示,方便用戶隨時呼出使用,它不同于傳統標簽欄那樣占據界面最下方一欄,而是通過一個點的方式匯聚這些功能的入口。標簽更加突出醒目,同時該主功能標簽做了功能擴展,也因此給設計增加了一些個性化的亮點。由于點聚式導航所占用的空間較小,所以它常出現在一些主要流程界面中,作為全局導航使用。
舉例:
1.適用場景
適用于非常重要且用戶操作頻繁適用的功能點,將這些功能點匯聚,放在底部tab的中間或者右邊(根據app的具體功能確定)
2.優勢
突出的表現入口,能夠吸引用戶注意力,使得頻繁使用的入口容易被用戶接觸到
3.劣勢
入口數量有限、可擴展性差
六、輪播導航
典型Iphone天氣、花田,較常用導航模式。
1.適用場景
常用于查看圖片類,適用于功能單一、統一的工具型軟件,適用于隨意看看。
2.優勢
(1)操作方便,只需手指左右滑動即可
(2)內容突出展示,增加了曝光率
3.劣勢
只能查看相鄰卡片展示的內容,并不能跳躍性地進行選擇,不能展示多頁,只能順序查看。
七、組合導航
當用戶需要聚焦內容,同時又需要一些快捷入口能夠連接到某些頁面時,就可以采用組合導航。
1.適用場景
當前很多app都使用了組合式導航。當一種導航方式已經不能滿足app的復雜功能時,組合導航就能很好的安排信息的排列方式,以最優的方式來引導用戶使用app
2.優勢
可以根據app的功能需要,進行多種導航方式的組合,來達到最優的信息展現
3.劣勢
app變得厚重,入口數量較多時,用戶容易眼花繚亂,給用戶造成心理壓力。
八、瀑布式
典型花瓣、壁紙10000+,較少用導航模式。
1.優點
瀏覽式查看、目的性不強。
2.局限性
布局需設計,會造成視覺疲勞。
3.適用場景
圖片、壁紙軟件,偏向信息展示
①在整體上:適用于信息展示,偏向于圖片而非文字類,瀏覽性質強。
②在功能上:同類內容的展示,用于隨意看看,與輪播式導航類似,但是展示內容更多。
九、陳列式
典型貓眼、大眾點評,較常用導航模式。
1.優點
直觀、方便,內容陳列。
2.適用范圍
①在整體上:適用電影、書籍等陳列展示。
②在功能上:相同內容的展示,現基本都是用于展示電影內容
小結:
不同的導航方式都有各自的優缺點,導航方式的選擇要依據自己app的信息架構和具體功能而定,最適合用戶的才是最好的!