導航設計的目的是突出產品的核心,扁平化用戶的任務路徑。讓用戶流暢的導航產品,讓用戶時刻知道自己在應用中的位置,如何到達目的頁面。
產品導航系統是在用戶界面上展示產品信息結構的方式。移動產品導航沒有最好的設計,只有最適合的設計。根據妳的產品采取最合適的導航設計。
縱觀應用市場的APP,導航設計模式永遠是幾種的組合。讓我們來看看幾種常見的導航設計模式。
描述:
1.當產品的整個體驗流程被幾個常用的功能模塊(壹般不超過五個)滲透時,意味著用戶需要在多個標簽入口之間來回切換;為了保證切換的效率,貫穿整個產品體驗的流的模塊平鋪在標簽欄位置,保證了用戶任務路徑的扁平化。
2,iOS原創App播客,5Tab。
優勢:
1,可視性好,位置明顯,容易找到,它讓用戶直觀地了解APP的核心功能;
2、可操作性好,用戶可以輕松觸摸到這個區域,可以在幾個標簽間快速切換而不迷失方向,簡單高效;
3、符合習慣,ios原生控件,開發簡單;
4、優先級高,用戶使用頻繁,相互獨立。
缺點:
1,座位數量有限,壹般最多五個(否則需要結合其他方法,使用層次和回縮)。
2、占用稍大的高度空間,壹般以文字+圖標的形式。
描述:
頂部標簽是谷歌提出的壹種導航模式。為了區別於iOS,由於手指很難到達頂部,谷歌相應的提出了手勢操作的解決方案:通過在屏幕上左右滑動來切換標簽頁。
在實際項目中,頂部和底部經常壹起使用。其實是holo的文章。
優勢:
擴展性好:標簽數量沒有上限,但是太多的話,後面的頁面越多,滲透率越低;
占用空間小:與底部標簽頁相比,頂部標簽頁壹般占用空間較小(因為不需要考慮手指點擊,可以縮小區域,只需選擇圖標或文字),因此可以安排更多的空間進行內容展示。
手勢操作非常方便。
缺點:
能見度稍遜:這是空間占用面積較小的結果。
描述:
1,點聚合,將多個核心功能聚合到主界面進行展示,方便用戶調出。它將與其他導航樣式(如標簽)壹起出現,成為方向舵導航。
2.類似於標簽導航,點擊綜合導航和標簽導航的組合,其中壹個導航標簽包含更多的操作選項,也可以理解為標簽包含更多的二級導航標簽。當頁面有幾個主要內容在同壹個層級,需要壹個非常重要且經常操作的入口時,可以采用這種APP導航模式。
優勢:
1,把類似制作內容的主要功能按鈕放在中間,標簽更突出;
2.同時擴展了主功能標簽,為設計增加了壹些個性化亮點。
缺點:
1,占用的高度空間略大,壹般是文字+圖標的形式。
描述:
當妳的申請信息足夠扁平化時,可以嘗試輪播導航;
優勢:
可以最大程度的保證申請頁面的簡潔,操作也最方便;
缺點:
無法快速定位相應的分頁內容;
描述:
1,宮殿導航廣泛應用於各平臺系統的中央頁面;
2.在二級頁面中用作內容列表的圖形形式,或用作壹系列工具條目的集合;
3.用戶頻繁切換的概率比較低;
4、在不同的文章中可能被稱為:跳板(圖標卡)、平鋪式。
優勢:
1,非常好的擴展性,容易組合不同的信息類型(運營位、廣告位、內容塊、設置等。);
2.視野範圍內可以展示的功能入口很多,使用戶能夠整體了解APP提供的服務,從而選擇自己需要的服務;
3.動靜結合,可以在保持視覺統壹的同時,展示豐富的信息;
4.跨平臺不受平臺限制。
缺點:
1,每個細胞都是相互獨立的,它們的信息之間沒有交集,無法跳躍和交流;
2.排列過多時,用戶容易眼花繚亂,選擇壓力大;
描述:
1是網格導航的壹種變體,可用於呈現實時內容,如新聞、食譜、文章或照片,並可以網格布局(如直播和ins)或輪盤布局(如格瓦拉電影)顯示,也可以幻燈片模式顯示。
2.畫廊式的設計模式最適合呈現經常更新、視覺直觀、獨立的內容。
優勢:
1.與列表導航和宮殿導航相比,展館導航具有更豐富的表現形式,更多的隨機組合效果(瀑布流等。)和豐富的動態效果(輪盤和幻燈片形式)。
2.直觀顯示所有內容。
缺點:
1,不適合展示頂級入口框架;
2.內容太多容易形成界面,比較亂;
3、設計效果容易平淡。
描述:
1,抽屜式也是Google提出的壹種導航方式。因為虛擬按鍵的存在,在Android上使用底部Tab會造成雙底欄,視覺感受差。
2.壹般用於將用戶不常用的功能或者核心放置到產品中,或者不需要頻繁切換內容的應用中,比如隱藏設置、信息、個人信息等。
3.更多用於信息流產品的設計,註重核心內容的展示,用戶的任務路徑比較簡單,幾乎都是用來瀏覽產品的核心內容;至於其他低頻模塊入口,會隱藏在當前界面後面,避免冗余模塊搶用戶眼球;
4.可能叫:擴展菜單、側邊導航、異地漢堡導航;
5.“2/8”法則告訴我們,80%的用戶只使用那20%的功能,這是信息流中的核心功能;如果那些不常用的80%功能也占據了最重要的位置,那麽用戶就會受到幹擾,感覺臃腫,甚至放棄使用產品。
優勢:
1,節省頁面顯示空間,讓用戶更專註於當前頁面;
2.因為導航界面隱藏在屏幕之外,擴展後整個頁面都是導航菜單內容,所以擴展和個性化的空間很大;
3、擴展性好,導航數量沒有上限。
缺點:
1,用戶不好找,二級功能的使用需要兩次點擊,給用戶切換功能帶來運營成本;
2.可視性太差,用戶還沒能把漢堡菜單鍵和側邊欄連接起來,所以側邊欄滲透率低;
3.不直觀,不適合主導航,在頻繁操作的情況下,用戶不斷開關抽屜的體驗也不好。
描述:
1,和抽屜導航的目的壹樣,都是為了突出內容。壹般位於產品頂部,點擊調出導航菜單;
2.通常用於過濾同壹信息模塊下的不同類型信息,或者快速啟動壹些常用的功能模塊,無需頻繁跳轉頁面;
3.Android中對應的控件是spinner控件,但這個控件是用來在同壹類別的不同視圖之間切換,而不是跳轉到完全不同的視圖。iOS中的下拉菜單是自定義控件,可以在不同類別之間切換。
4.還有壹種下拉導航的變體,就是下拉菜單中顯示兩級甚至更多級,這種情況在電商產品中普遍存在,因為類別多,篩選條件多。
優勢:
1,菜單與界面的連貫性優於抽屜,便於用戶感知當前位置;
缺點:
2.位於屏幕上方,相對隱蔽,無法與手勢結合,不適合頻繁切換功能;
3.考慮到導航菜單的可用區域較小,菜單內容壹般以列表的形式顯示。
描述:
1作為壹種信息組織框架,是我們產品設計中不可或缺的信息承載模式。
2.適合顯示長標題或者有次要文字內容的標題,每行可以集成更多的信息。
3、類似網格導航,常用於二級頁面,默認不會顯示任何實質性內容,所以通常app不會在首頁使用;
4.ios開發和android都有現成的列表布局插件和模板。
優勢:
1,自上而下的視圖符合習慣;
5、結構清晰,通俗易懂,冷靜高效,並能幫助用戶快速定位並前往相應頁面。
缺點:
1,物品過多或分布不合理,用戶難以找到;
2.不適合需要頻繁任務切換的場合。