在 Layout (排版) 的單元，我們了解到 Material Design 不止適用單一的螢幕尺寸，也是可以用於各種裝置的設計指南，不同的用戶在不同的情境使用不同的裝置，各裝置有不同的像素解析度，了解各裝置解析度特性，開始制定響應式網格與斷點，在響應式設計下所有裝置元件保有統一性，在元件區塊間規劃區塊間距，也在不同斷點下設計不同的排版樣式，在條列式項目或表格上調整適當的密度，有大方向的區塊規劃，接下來我們要朝著畫面內的元件設計指南邁進，今天我們將繼續完成 Navigation 導覽列章節，讓我們趕快開始吧。
Understanding navigation 了解導覽列
Navigation transitions 導覽轉換動畫
Search 搜索
導覽列是提供使用者在應用程式主題內切換畫面的選單按鈕，使用者可以透過不同的點擊互動前往目標區塊或功能區塊。導覽列有三種動作形態:
橫向導覽列提供使用者在應用程式規劃的主題中切換，前往不同的目標和功能，橫向導覽列呈現的方式可以是畫面最上方的導覽列或是側拉式選單，或是在手機畫面最下方的導覽列，在選取主題後也可以點選畫面上的分頁標籤再進入次要分類畫面。
在 Material Components 有介紹關於
前進導覽列提供使用者進入主題項目後的次要主題間切換，從大主題切換到次要主題(例如: 在進入服裝商商店的APP，選大主題女裝再點選衣服類型的次要主題)，或是我們常見的有步驟的問卷流程，依照步驟前往下一個畫面，或是切換到任何一個畫面主題。前進導覽列在設計中經常會使用區塊容器，例如: 內容區塊、列表或圖片、按鈕、連結或是通過搜尋前往。
返回導覽提供使用者返回前一個畫面的功能，可以一直點選返回導覽直到回到應用程式的主畫面，Android 和 Web 應用程式使用 Material Up 操作，而 iOS 應用程式使用 iOS 導覽列中的返回按鈕。
在一個頁面有非常多內容時，需要設計回到最頂端的按鈕，可以加快訊息的轉換幫助用戶快速執行下一步動作。在設計上清楚顯示使用者所在主題位置，來幫助使用者選擇前往需要的主題畫面，如果是無法返回上一頁(例如: 完成金流結帳畫面)則需要提供清楚的提示告知用戶。
當我們在畫面切換時，會觸發畫面轉場動畫，使用畫面移動來指示元件間的相關性(例如: 畫面中的小型購物車，在點選後會放大到全螢幕)。在結構上分為 :
在轉換頁面時產生動畫可以吸引焦點 (互動動畫的主要目的)，轉場動畫可以使用在同主題畫面間 (例如: 相冊中的照片、個人資料的各個部分或流程中的步驟)，在同主題間轉換也可以加強彼此的相關性。
在最高層級的導覽列切換畫面中，用戶可能會切換到不同的主題畫面，由於主題間的關聯性比較小，建議轉場動畫使用比較自然的淡入淡出的轉場效果，減少主題差異的突兀感。
提供搜索功能可以讓使用者快速找到應用程式內容。將想要查詢的項目輸入搜索框並在搜索時提供歷史搜索建議、提供相關搜索字詞、支援語音搜索功能。
當應用程式主要功能是為使用者提供搜索服務時，需要提供輸入文字的搜索框，當使用者開始輸入文字時，提供可以選取的歷史搜索建議在輸入框下方，使用者也可以自行輸入或從相關搜索字詞選取，送出搜尋後將結果顯示在搜索框下方，此時若用戶點選返回上一層，此時需清除搜索欄內文字及搜索建議，再次提供使用者輸入搜索文字。
當搜索服務不是當下的主要功能時，可以把搜尋區塊縮小成 Icon 顯示，當使用者需要使用搜索功能時，點選 Icon 顯示搜索框，在完成搜索後，使用者輸入的文字保持可見，點選下方的查詢結果即可前往。
今天我們了解到 Navigation 導覽列擺放的位子以及在不同頁面間導覽列的功能，在畫面切換間使用轉換動畫能加強關聯性減少突兀感，在用戶輸入搜尋字詞時提供相關的歷史搜索，可以幫助用戶快速的選取曾經搜尋過的項目，也可以提供使用者輸入到一半的單字建議，這些功能減少了使用者在應用程式裡迷路的可能性(找不到功能)。
明天讓我們繼續完成 Color 顏色 章節，每天一點一點的逐個擊破，找出那些藏在細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！
如果您喜歡這篇文章或是這篇文章有幫助到您，歡迎按讚鼓勵，我們明天見囉~
iThome鐵人賽
看影片追技術