03-產品策劃-導航設計

當我們確定了移動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等)。抽屜式導航在形式上一般位于當前界面的后方,通過左上角的按鈕或手勢滑動呼出。由于隱藏在屏幕在外,所以導航界面的空間較大,為可擴展性和個性化帶來了更多可能。由于導航默認是隱藏的,在選擇后需要有明確的提示來告知用戶的當前位置。

舉例:


左:知乎日報右:36Kr

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的信息架構和具體功能而定,最適合用戶的才是最好的!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,505評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,556評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,463評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,009評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,778評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,218評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,281評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,436評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,969評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,795評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,993評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,537評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,229評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,659評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,917評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,687評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,990評論 2 374

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,661評論 25 708
  • 導航是頁面結構和界面設計的重要一部分,它可以結構化產品內容和功能、突出核心功能、扁平化用戶任務路徑,下面舉一些案例...
    Mooooon_n閱讀 5,294評論 1 11
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,151評論 4 61
  • 今年我迷上了寫寫小文章,出于時間有限,文章并不多產,自己也不是寫作高手,每篇文章質量也沒有多高,但每一篇我都認真對...
    清心傾心閱讀 573評論 0 5
  • 夜色起。 風拂過草地,轉而向上。 天空染上草香。 流星匆匆劃過,妄想擺脫纏繞的時空,卻驚擾了沉入黑寂的現世。 險些...
    奶奶灰灰灰閱讀 257評論 3 0