Material Design 基礎 - 導航

1. 說明

導航允許用戶在應用程序中移動涩嚣。

1.1. 導航類型

導航是在應用程序的屏幕之間移動以完成任務的行為。它是通過幾種方式實現(xiàn)的:專用導航組件劈狐、將導航行為嵌入內容以及平臺功能。

1.2. 航行方向

根據應用程序的信息架構,用戶可以向以下三個導航方向之一移動:

  • Lateral navigation指的是在同一層級的屏幕之間移動屡律。應用程序的主要導航組件應提供對其層次結構頂層所有目的地的訪問。

  • Forward navigation指的是在連續(xù)層次降淮、流程中的步驟或應用程序之間的屏幕之間移動超埋。正向導航將導航行為嵌入容器(如卡片、列表或圖像)佳鳖、按鈕霍殴、鏈接或使用搜索。

  • Reverse navigation指的是按時間順序(在一個應用程序內或跨不同應用程序)或層次結構(在一個應用程序內)向后移動屏幕系吩。平臺約定決定了應用程序中反向導航的確切行為来庭。

1.3. 側邊導航(Lateral navigation)

Lateral navigation是指在同一層級的屏幕之間移動。它可以訪問不同的應用目的地和功能穿挨,或在一組相關項目之間旋轉月弛。

1.4. Destinations and hierarchy

應用程序的主要導航組件應提供對其層次結構頂層所有目的地的訪問。具有兩個或多個頂級目的地的應用程序可以通過導航抽屜科盛、底部導航欄或選項卡提供Lateral navigation帽衙。

Component Use for # destinations Devices
Navigation drawer Top-level destinations 5+ Mobile, Tablet, Desktop
Bottom navigation bar Top-level destinations 3-5 Mobile
Tabs Any level of hierarchy 2+ Mobile, Tablet, Desktop
  • 導航抽屜適用于五個或五個以上的頂級目的地,可以跨設備大小使用贞绵,以獲得一致的導航體驗厉萝。

  • 底部導航欄提供了對移動設備上3-5個頂級目的地的訪問。它們在屏幕上的位置、可見性和持久性允許在目的地之間快速旋轉谴垫。

  • TAB可用于應用程序層次結構的任何級別章母,以跨屏幕大小顯示兩個或多個對等數(shù)據集。

  • 當tabs與頂級導航組件(如導航抽屜)配對使用時弹渔,tabs可以在應用的層次結構中啟用額外的橫向導航胳施。

1.5. 前向導航(Forward navigation)

前向導航指的是在屏幕之間完成任務的三種移動方式之一:
在應用程序的層次結構中向下,以訪問更深層次的內容肢专,從父屏幕(層次結構的較高級別)到子屏幕(層次結構的較低級別)
順序地通過一個流舞肆,或一系列有序的屏幕,如結賬過程
直接從應用程序中的一個屏幕到任何其他屏幕博杖,例如從主屏幕到應用程序層次結構中的深層屏幕

1.5.1. 實現(xiàn)前向導航

Lateral navigation使用專用的導航組件椿胯,而正向導航通常通過各種組件嵌入到屏幕內容中。
前向導航可通過以下方式實現(xiàn):
內容容器剃根,如卡片哩盲、列表或圖像列表
前進到另一個屏幕的按鈕
在一個或多個屏幕上進行應用內搜索
內容中的鏈接

1.6. 反向導航(Reverse navigation)

反向導航指屏幕之間的向后移動。它可以按用戶最近的屏幕歷史記錄的時間順序移動狈醉,或向上移動應用程序的層次結構廉油。

1.6.1. 逆時間導航(Reverse chronological navigation)

逆時間導航是指在用戶最近查看的屏幕歷史記錄中按相反順序導航。它可以在一個應用程序內的屏幕之間或多個應用程序之間移動苗傅。例如抒线,web瀏覽器上的“后退”按鈕是一種逆時間導航的形式。
這種類型的導航通常由操作系統(tǒng)或平臺提供渣慕。各個平臺定義了它的行為方式以及用戶如何訪問該功能嘶炭。

1.6.2. 向上導航(Upward navigation)

向上導航允許用戶在單個應用的層次結構中向上導航一個級別,直到到達應用的主屏幕或頂級屏幕逊桦。例如眨猎,頂部應用欄中的向上箭頭是向上反向導航的一種形式。

應為應用中的所有子屏幕實現(xiàn)向上導航强经,并遵循平臺指南睡陪。Android 和 Web 應用應使用“Material Up”操作,而 iOS 應用應使用 iOS 導航欄中的后退按鈕匿情。

1.6.3. 考慮

應用的設計和功能應考慮應用目標平臺中的兩種反向導航兰迫。要優(yōu)化用戶反向導航時的體驗, 請執(zhí)行以下操作:

  • 將用戶返回到其先前的屏幕位置和狀態(tài)(如垂直滾動位置)码秉,以加快信息調用和任務恢復逮矛。
  • 如果屏幕的先前狀態(tài)不再可用鸡号,例如转砖,出于隱私目的清除了表單中的信息,則提供清晰的消息。
  • 在層次結構中府蔗,清楚地指示子屏幕與其上方屏幕的關系晋控。例如,如果用戶直接移動到應用中的子屏幕姓赤,他們應該能夠識別他們可以向上導航到的父屏幕赡译。

2. 導航過渡

當用戶在屏幕之間移動(如從主屏幕移動到詳細信息屏幕)時,會發(fā)生導航過渡不铆。

2.1. 關于導航過渡

2.1.1. 導航和運動

導航過渡使用運動在應用中的兩個屏幕之間引導用戶蝌焚。它們通過表達應用的層次結構來幫助用戶定位自己,使用移動來指示元素之間的相互關系誓斥。

例如只洒,當元素展開以填充整個屏幕時,展開行為表示新屏幕是子元素劳坑。它從中展開的屏幕是其父元素毕谴。

2.1.2. 層次結構

層次轉換將用戶在應用程序的層次結構中向上或向下移動一級,而對等轉換將用戶移動到同級(層次相同的屏幕)之間距芬。

2.1.2.1. 層次轉換

層次過渡反映用戶在應用中向上或向下移動一個級別涝开。彼此相鄰級別的屏幕彼此具有父級和子級關系,其中父級位于比其子級更高的層次結構級別框仔。

2.1.2.2. 父子轉換

在父屏幕中舀武,嵌入的子元素在觸摸時抬起,并使用容器轉換過渡模式就地展開存和。該運動既將焦點吸引到子屏幕(這是交互的目的地)奕剃,又加強了父屏幕和子屏幕之間的關系。

2.1.2.3. 同級轉換

Peer transitions 發(fā)生在同一層級的屏幕之間捐腿。
同級轉換發(fā)生在共享父級的對等方之間纵朋,而頂級對等方轉換僅用于在主要目的地之間切換。

2.1.2.4. Sibling transitions

共享同一父級的屏幕(如相冊中的照片茄袖、個人資料的各個部分或流程中的步驟)協(xié)同移動操软,以加強它們之間的關系。對等屏幕從一側滑入宪祥,而其同級屏幕則從相反的方向移出屏幕聂薪。

2.1.3. 頂層過渡

在應用的頂層,目標通常分為主要任務(并且任務之間可能彼此不相關)蝗羊。這些屏幕使用淡入淡出過渡模式就地過渡藏澳。

3. 搜索

搜索允許用戶快速查找應用內容。

3.1. 用法

搜索允許用戶在應用中快速查找內容耀找∠栌疲基本搜索使用戶能夠將查詢輸入到搜索文本字段中以查看相關結果业崖。

可以擴展搜索查詢輸入法,以包括歷史建議蓄愁、查詢自動完成和語音輸入双炕。

3.2. 持久搜索

當搜索是應用的主要焦點時,請使用持久搜索撮抓。搜索文本字段顯示在搜索欄內妇斤,隨時可以接收焦點。

3.2.1. 持久搜索用法

當用戶聚焦在搜索輸入框時丹拯,搜索體驗將擴展以填充整個屏幕站超。(可選)歷史搜索建議可以顯示在文本字段下方。
用戶可以鍵入查詢或從建議中進行選擇乖酬。按返回后顷编,將提交搜索。
搜索結果顯示在搜索欄下方剑刑。
若要從搜索框中釋放焦點并關閉搜索建議媳纬,用戶點擊向上箭頭。

3.3. 可擴展搜索

當搜索不是應用的主要焦點時施掏,請使用展開搜索钮惠。可擴展搜索在工具欄中顯示搜索圖標七芭,而不是打開的搜索文本框素挽。

3.3.1. 可擴展搜索用法

用戶點擊搜索圖標(在工具欄中)以將其轉換為重點搜索欄。
當用戶鍵入時狸驳,歷史搜索建議可以顯示在搜索欄下方预明。
輸入查詢或選擇建議后,按 Return 鍵將提交搜索耙箍。
結果顯示在搜索欄下方撰糠,并在搜索欄下方滾動。

顯示結果時辩昆,搜索文本字段仍然可見阅酪,但不在焦點中。點擊向上箭頭可從搜索中釋放焦點汁针,關閉建議和屏幕鍵盤术辐,并將工具欄返回到其原始狀態(tài)。

4. Material Design 系列文章

最新更新以及更多Material Design相關文章請訪問 鵬叔的技術博客空間-Material Design

5. 參考文檔

Understanding navigation
Navigation transitions
Search

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末施无,一起剝皮案震驚了整個濱河市辉词,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌猾骡,老刑警劉巖瑞躺,帶你破解...
    沈念sama閱讀 212,222評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件隧魄,死亡現(xiàn)場離奇詭異,居然都是意外死亡隘蝎,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,455評論 3 385
  • 文/潘曉璐 我一進店門襟企,熙熙樓的掌柜王于貴愁眉苦臉地迎上來嘱么,“玉大人,你說我怎么就攤上這事顽悼÷瘢” “怎么了?”我有些...
    開封第一講書人閱讀 157,720評論 0 348
  • 文/不壞的土叔 我叫張陵蔚龙,是天一觀的道長冰评。 經常有香客問我,道長木羹,這世上最難降的妖魔是什么甲雅? 我笑而不...
    開封第一講書人閱讀 56,568評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮坑填,結果婚禮上抛人,老公的妹妹穿的比我還像新娘。我一直安慰自己脐瑰,他們只是感情好妖枚,可當我...
    茶點故事閱讀 65,696評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著苍在,像睡著了一般绝页。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上寂恬,一...
    開封第一講書人閱讀 49,879評論 1 290
  • 那天续誉,我揣著相機與錄音,去河邊找鬼初肉。 笑死屈芜,一個胖子當著我的面吹牛,可吹牛的內容都是我干的朴译。 我是一名探鬼主播井佑,決...
    沈念sama閱讀 39,028評論 3 409
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼眠寿!你這毒婦竟也來了躬翁?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,773評論 0 268
  • 序言:老撾萬榮一對情侶失蹤盯拱,失蹤者是張志新(化名)和其女友劉穎盒发,沒想到半個月后例嘱,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 44,220評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡宁舰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,550評論 2 327
  • 正文 我和宋清朗相戀三年拼卵,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蛮艰。...
    茶點故事閱讀 38,697評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡腋腮,死狀恐怖,靈堂內的尸體忽然破棺而出壤蚜,到底是詐尸還是另有隱情即寡,我是刑警寧澤,帶...
    沈念sama閱讀 34,360評論 4 332
  • 正文 年R本政府宣布袜刷,位于F島的核電站聪富,受9級特大地震影響,放射性物質發(fā)生泄漏著蟹。R本人自食惡果不足惜墩蔓,卻給世界環(huán)境...
    茶點故事閱讀 40,002評論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望萧豆。 院中可真熱鬧钢拧,春花似錦、人聲如沸炕横。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,782評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽份殿。三九已至膜钓,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間卿嘲,已是汗流浹背颂斜。 一陣腳步聲響...
    開封第一講書人閱讀 32,010評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留拾枣,地道東北人沃疮。 一個月前我還...
    沈念sama閱讀 46,433評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像梅肤,于是被迫代替她去往敵國和親司蔬。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,587評論 2 350

推薦閱讀更多精彩內容