參考了四本書,結合自己的觀察和思考,總結出了以下幾種導航模式。
扁平式--標簽導航
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著,王軍鋒 郭偎 武艷芳 譯.人民郵電出版社.
《移動設計》傅小貞 、 胡甲超、 鄭元攏 著.電子工業出版社.
《方寸指間》無線工坊 著.電子工業出版社.