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