iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 6
1
自我挑戰組

UI / UX 設計白皮書 - Material Design 導讀系列 第 6

UI / UX 設計白皮書 / Material Design 導讀_Day06 Navigation 導覽列

在 Layout (排版) 的單元,我們了解到 Material Design 不止適用單一的螢幕尺寸,也是可以用於各種裝置的設計指南,不同的用戶在不同的情境使用不同的裝置,各裝置有不同的像素解析度,了解各裝置解析度特性,開始制定響應式網格與斷點,在響應式設計下所有裝置元件保有統一性,在元件區塊間規劃區塊間距,也在不同斷點下設計不同的排版樣式,在條列式項目或表格上調整適當的密度,有大方向的區塊規劃,接下來我們要朝著畫面內的元件設計指南邁進,今天我們將繼續完成 Navigation 導覽列章節,讓我們趕快開始吧。


Navigation 導覽列

Understanding navigation 了解導覽列
Navigation transitions 導覽轉換動畫
Search 搜索

導覽列是提供使用者在應用程式主題內切換畫面的選單按鈕,使用者可以透過不同的點擊互動前往目標區塊或功能區塊。導覽列有三種動作形態:

  • 橫向導覽列: 提供使用者在應用程式規劃的主題中切換。
  • 前進導覽列: 提供使用者進入主題項目後的次要主題間切換,前進到下一個畫面的行為可以點選畫面中的容器(例如:內容區塊、列表或圖片)、按鈕、連結或是通過搜尋前往。
  • 返回導覽: 提供使用者返回前一個畫面的功能,也可以依照使用者點選的過程返回,或是點擊畫面上的層次結構前往頁面。

Understanding navigation 了解導覽列

本圖片截取自 Material Design。

橫向導覽列提供使用者在應用程式規劃的主題中切換,前往不同的目標和功能,橫向導覽列呈現的方式可以是畫面最上方的導覽列或是側拉式選單,或是在手機畫面最下方的導覽列,在選取主題後也可以點選畫面上的分頁標籤再進入次要分類畫面。

在 Material Components 有介紹關於

前進導覽列提供使用者進入主題項目後的次要主題間切換,從大主題切換到次要主題(例如: 在進入服裝商商店的APP,選大主題女裝再點選衣服類型的次要主題),或是我們常見的有步驟的問卷流程,依照步驟前往下一個畫面,或是切換到任何一個畫面主題。前進導覽列在設計中經常會使用區塊容器,例如: 內容區塊、列表或圖片、按鈕、連結或是通過搜尋前往。

返回導覽提供使用者返回前一個畫面的功能,可以一直點選返回導覽直到回到應用程式的主畫面,Android 和 Web 應用程式使用 Material Up 操作,而 iOS 應用程式使用 iOS 導覽列中的返回按鈕。

在一個頁面有非常多內容時,需要設計回到最頂端的按鈕,可以加快訊息的轉換幫助用戶快速執行下一步動作。在設計上清楚顯示使用者所在主題位置,來幫助使用者選擇前往需要的主題畫面,如果是無法返回上一頁(例如: 完成金流結帳畫面)則需要提供清楚的提示告知用戶。

Navigation transitions 導覽轉換動畫

當我們在畫面切換時,會觸發畫面轉場動畫,使用畫面移動來指示元件間的相關性(例如: 畫面中的小型購物車,在點選後會放大到全螢幕)。在結構上分為 :

  • 分層轉換 (主題及次要主題間的轉換)
  • 同層轉換 (不同主題間的轉換)

本圖片截取自 Material Design。

在轉換頁面時產生動畫可以吸引焦點 (互動動畫的主要目的),轉場動畫可以使用在同主題畫面間 (例如: 相冊中的照片、個人資料的各個部分或流程中的步驟),在同主題間轉換也可以加強彼此的相關性。

在最高層級的導覽列切換畫面中,用戶可能會切換到不同的主題畫面,由於主題間的關聯性比較小,建議轉場動畫使用比較自然的淡入淡出的轉場效果,減少主題差異的突兀感。

Search 搜索

提供搜索功能可以讓使用者快速找到應用程式內容。將想要查詢的項目輸入搜索框並在搜索時提供歷史搜索建議、提供相關搜索字詞、支援語音搜索功能。

本圖片截取自 Material Design。

當應用程式主要功能是為使用者提供搜索服務時,需要提供輸入文字的搜索框,當使用者開始輸入文字時,提供可以選取的歷史搜索建議在輸入框下方,使用者也可以自行輸入或從相關搜索字詞選取,送出搜尋後將結果顯示在搜索框下方,此時若用戶點選返回上一層,此時需清除搜索欄內文字及搜索建議,再次提供使用者輸入搜索文字。

當搜索服務不是當下的主要功能時,可以把搜尋區塊縮小成 Icon 顯示,當使用者需要使用搜索功能時,點選 Icon 顯示搜索框,在完成搜索後,使用者輸入的文字保持可見,點選下方的查詢結果即可前往。


今天我們了解到 Navigation 導覽列擺放的位子以及在不同頁面間導覽列的功能,在畫面切換間使用轉換動畫能加強關聯性減少突兀感,在用戶輸入搜尋字詞時提供相關的歷史搜索,可以幫助用戶快速的選取曾經搜尋過的項目,也可以提供使用者輸入到一半的單字建議,這些功能減少了使用者在應用程式裡迷路的可能性(找不到功能)。

明天讓我們繼續完成 Color 顏色 章節,每天一點一點的逐個擊破,找出那些藏在細節中的魔鬼,不要讓大魔王有機會可以捉弄我們,迎向更美好的介面設計吧(握拳)!

如果您喜歡這篇文章或是這篇文章有幫助到您,歡迎按讚鼓勵,我們明天見囉~


上一篇
UI / UX 設計白皮書 / Material Design 導讀_Day05 Layout 排版
下一篇
UI / UX 設計白皮書 / Material Design 導讀_Day07 Color 顏色
系列文
UI / UX 設計白皮書 - Material Design 導讀30

尚未有邦友留言

立即登入留言