移動應用導航設計模式總結

參考了四本書,結合自己的觀察和思考,總結出了以下幾種導航模式。


扁平式--標簽導航

1.特點:

?目前iOS系統中使用頻率最高的導航形式,也是"iOS主推的導航模式"。

?標簽可以讓用戶直觀、快速地了解當前應用的主要功能,且僅僅通過一次點擊便可以在頁面間進行靈活地切換。

?由于標簽欄一般情況下是始終位于屏幕底部的,且會通過標簽的選中狀態告知用戶當前所處的頁面,因此用戶不易迷失。但是,這也使得每個頁面的下方都會被占據一定的空間(因此可以考慮在需要時暫時隱藏標簽欄)。

?標簽不能超過5個。因為屏幕空間有限,過多的標簽會壓縮彼此的空間從而使得用戶的點擊容易出錯。并且,過多的標簽會讓用戶不容易記住并快速理解當前應用的結構,從而失去了標簽式導航的優點。因此,如果應用的功能繁多、結構復雜不穩定,則最好考慮其他導航。

2.適用情境:

?"入口選項不多,且用戶需要在選項間頻繁切換來執行多任務"

?"在用戶選擇功能、信息甚至心理狀態("我不知道要吃什么,幫我選個餐館吧")時,標簽欄式切換選擇操作模態?的理想方案"

?標簽欄很適合和層級式導航搭配使用,這也是當前多數app使用的導航模式。

3.設計要點:

?"根據應用的功能類型和信息類型進行標簽分類",這樣才可以保證讓導航為內容服務;

?標簽的擺放需要考慮重要性、邏輯關系、屏幕的點擊區域等(一般情況下,最右邊的標簽最不容易被點擊,因此一般在此放置類似于個人信息等優先級不高的功能的標簽);

?"每個標簽對應的頁面都可以(且應該)有自己獨特的界面風格,還有自己特定的內容和功能",這樣的目的是"適應當前的功能和需求"。

4.設計細節

?在iOS中通常位于屏幕底部(Android中唱見于頂部);

?"使用徽標低調地傳達信息";

?"如果某個標簽所代表的部分功能在當前情境下不可用了,相比移除這個標簽,更好的做法是顯示一個禁用的標簽。"

?標簽欄的圖標一定是可以清晰地表達信息且易于用戶理解的,否則最好使用圖標加簡短的說明文字以防止用戶產生疑惑;

?標簽的選中狀態一般有以下兩種:只有標簽變為選中狀態或者標簽和其所在區域都呈現選中狀態。

5.設計延伸

將核心功能擺放在標簽欄的中央。中間的標簽可以是一個單獨的功能也可以是多個子功能融合在一個功能按鈕里。這樣不僅可以使核心功能更加突出,還可以使標簽欄更有趣。

層級式導航(樹形結構)

層級式導航尤其要注意信息層級的深度,因為用戶往往只能通過一條路徑找到目標信息,過深的層級可能會使用戶喪失尋找的欲望。

列表導航

1.特點:

?列表導航使用的層級的信息分類方式對用戶來說容易理解且熟悉(PC端常用)

?容易進行自定義和擴展,方便添加新功能

?可以承載包括文字、圖片等大量內容

2.適用情境:

?當導航的分類項目較多時,列表導航比標簽式導航更適合

?"適合展示層次分明的等級結構"

?"列表式導航容易擴展和分組,常用于設置、消息和承載大數據量信息的界面"

3.設計要點:

?根據優先級、邏輯關系等控制列表的分類和排列

?"由于列表的左右寬度較大,可以結合圖標、標題說明貨消息數字提示等"

?擴展式列表:當信息的層級較多時,可以考慮使用擴展式列表對子級信息進行展開和隱藏,用戶可以在當前頁面進行進一步地信息瀏覽,從而不會打斷用戶的當前任務。

桌面式/跳板式/輻射式

1.特點:

?本質上都是層級結構,只是不同的表現方式。因為分類項目之間都是互斥的,需要通過不斷點擊來進入下一層級再按照原先路徑逐層返回。

?結構清晰,每個格子位置固定,因此可以方便用戶通過方位記憶進行快速定位

?用戶必須返回首頁來切換功能,增加了操作步驟

2.適用情境:

?"適合內容豐富的導航入口,且入口之間都是并列的項目"

?"不適合在多任務中使用"

?"不適合在交叉類別中使用"

?"特別適合工具性界面"

?可考慮作為子導航,對內容進行分類時使用

3.設計要點:

呈現方式:圖標或圖片(必要時結合文字說明,尤其在使用圖片時)

布局方式:常見的是四宮格、六宮格、九宮格等,不需要拘泥于這種形式。使用圖片時要注意防止頁面的混亂。

延伸設計--圖示/陳列館式

1.特點:

?使用變化的而不是固定的圖片同時配以說明文字來作為導航入口,一般在次級導航中使用。

?"根據頁面內容的變化,可以及時地更新圖片,適合以圖片為主的內容。"經常變化的圖片使界面更有趣,更富吸引力。

2.設計要點:

"需要配置固定的欄目或標題,防止不斷更新的圖片讓用戶找不到相應的入口。"

抽屜式

1.特點:

?"追求核心內容的突出,弱化導航界面"

?由于是隱藏在屏幕之外,所以

?"導航界面空間較大,為可擴展性和個性化帶來了更多可能"。

?也可能讓用戶容易"迷路",因此需要告訴用戶當前所處的位置(一般在頁面另一側顯示原頁面從而起到暗示的作用)。

2.適用情境:

?適用于一些突出內容的"信息流產品"

?更適用于扁平化的信息架構

3.設計要點:

?"一般位于當前界面的后方,通過左上角的按鈕或手勢滑動呼出。"

?"對于性能較差的手機,可以使用點擊圖標的方式來做設計的降級處理。"

?該導航的呼出按鈕一般表示為三條平行線或帶有三條平行線的圖標

菜單式

1.特點:

?"以突出內容為主的導航方式"

?"與界面的連貫性較好,展開和收起菜單對當前界面沒有影響"

?與抽屜式菜單相比其可擴展性和個性化程度相對較低

2.適用情境:

?適用于一些突出內容的"信息流產品"

?"由于導航菜單位于屏幕頂部,難以結合手勢,所以不適合需要頻繁切換的功能"

?常用此導航對當前界面內容進行分類瀏覽

3.設計要點:

?"一般位于產品頂部,通過點擊呼出"

?呈現的方式通常為列表+模態視圖,"導航菜單位于界面上層,用戶可點擊導航以外的區域來收起菜單"

抽屜式導航vs菜單式導航

共同點:

?將層級框架中的分類內容進行隱藏

?適合需要弱化導航界面、突出內容的應用

?不適合承載需要頻繁切換的功能

不同點:

?抽屜式導航頁面空間較大,可承載更多內容;菜單式導航所能承載的內容則相對較少,因此要更為精簡。

?"抽屜式導航可以很好地兼容各種分類方式,而不影響應用的界面效果";菜單式導航則往往更適合以精煉的列表形式展現。

?抽屜式導航在結合手勢的情況下要比菜單式導航更容易呼出,尤其對于大屏手機,左上角和中央的最上方都不是容易點擊的地方。

?菜單式導航與界面連貫性更好,因此可能對用戶當前任務造成的影響更小。

分段選項卡

1.特點:

?"對主導航內容的再次分類"

?與主導航相結合可以讓用戶明確自己的當前位置

?不需要在頁面間進行跳轉找到目標信息,一般在當前頁面就可以完成

2.適用情境:

內容復雜,需要層級分類以幫助用戶快速找到目標信息時,分段選項卡是一個可以考慮的分類工具

3.設計要點:

?"位于界面頂部,視覺上會突出當前所在位置",從而保證用戶不會迷路

?"一般位于導航欄下方",這樣可以通過位置關系暗示出其與主導航之間的邏輯關系

?若使用iOS提供的分段控件,則選項卡數量要少于等于5個,因為要考慮用戶是否能夠準確點擊

?若有更多選項卡數量的需要,則可以選擇"結合手勢滑動界面"的控件形式

?各個選項卡代表的應該是"緊密相關又相互排斥"的選項中


平鋪式(走馬燈/輪盤)

1.特點:

?"用戶通過左右手勢滑動來聚焦到當前內容"

?操作方便(手勢)

?節省空間

?用戶不能選擇跳過,必須逐次瀏覽,因此不適合層級信息

2.適用情境:

?"一般適合于圖片或整塊內容的并列展示",適合扁平化的信息而不是層級信息

?"適用于整體性比較強的內容"且"內容之間是并列關系"

?產品有需要用戶注意的內容時,可選擇此展示方式且讓內容主動定時切換,從而可以有效地吸引用戶的注意力(人們容易被動態的事物所吸引)

?當頁面空間有限時,可以考慮將此作為一種解決方法,因為它可以隱藏部分同一層級的信息但同時又能暗示用戶更多信息的存在從而不會產生遺漏

?橫向的瀏覽方式適合與縱向的瀏覽方式(如:列表)進行結合,可以有效地節省空間/組織信息,同時還能讓用戶保持注意且在一定程度上防止用戶操作疲勞。

?"無法立即跳到非相鄰頁面,不適合較多頁面的加載"

?"對這種導航不熟悉的用戶,可能會忽略后面的內容"

3.設計要點:

?"一般來說,走馬燈的內容數量不能太多,控制在5~7個以內,以避免用戶操作疲勞"

?"提供視覺暗示,例如顯示下一張的部分內容,或添加分頁指示器(頁碼控件),讓用戶瀏覽頁面時保持清晰的方向感和對數量的認知。"

?可選擇的呈現方式:

頁面輪盤--一般包括頁碼控件且自動切換,動態呈現;

圖片輪盤--一般通過顯示下一張的部分內容來暗示用戶主動滑動瀏覽,靜態呈現。


參考書籍:

《觸動人心-設計優秀的iPhone應用》「美」Josh Clark著,包季真 譯 .電子工業出版社.

《移動應用UI設計模式》「美」Theresa Neil著,王軍鋒 郭偎 武艷芳 譯.人民郵電出版社.

《移動設計》傅小貞 、 胡甲超、 鄭元攏 著.電子工業出版社.

《方寸指間》無線工坊 著.電子工業出版社.

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

推薦閱讀更多精彩內容