iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 27
1
自我挑戰組

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

UI / UX 設計白皮書 / Material Design 導讀_Day27 Platform guidance 平台指導

昨天我們了解到 Platform guidance 平台指導,Android 系統的狀態欄、指紋及觸覺設計指南,在狀態欄內應顯示的圖示及功能,還有區塊的建議尺寸及高度,在指紋辨識上可用於可用於解鎖設備、登入及驗證購買,指紋驗證上保障了用戶的資料安全及操作的便利性。在觸覺的部分增強了介面與用戶之間的互動關係,提供了更多的回饋並藉由回饋向用戶傳達訊息。

今天我們進入到 Material Design 中 Platform guidance 平台指導平台指導**的第二天,今天會了解關於 Android 圖示、Android 在介面之間導覽和 Android 通知這三個部分,讓我們繼續看下去吧。


Platform guidance 平台指導

Android bars / Android 狀態欄
Android fingerprint / Android 指紋
Android haptics / Android 觸覺
Android iconss / Android 圖示
Android navigating between apps / Android 在介面之間導覽
Android notifications / Android 通知
Android permissions / Android 權限
Android settings / Android 設定
Android slices / Android 片段
Android split-screen / Android 子母畫面
Android swipe-to-refresh / Android 滑動刷新
Android text selection / Android 文字選擇工具欄
Android widget / Android 小工具
Cross-platform adaptation 跨平台適應

※ 請注意以下指南僅適用於 Android ※

Android iconss / Android 圖示

Android 圖示在所有裝置的主畫面螢幕上應用。以下準則提供了圖示如何使用獨特的視覺處理動畫和行為。

本圖片截取自 Material Design。

可以在 Google Play 商店下載圖示,Google Play 提供的圖示符合以下要求:

  • PNG 或向量格式的圖示
  • 沒有遮色片或前景及背景圖層、也沒有背景陰影
  • 所有圖層必須佔有圖示形狀的 50% 大小

遮色片要求包括:

  • 用於遮蓋平台上顯示的任何圖示的形狀
  • 可選擇使用外部陰影

所有應用程式圖示都使用了基礎關鍵形狀,保持一致的視覺比例。

如果對於 基礎關鍵形狀 還無法充分理解可以參考
UI / UX 設計白皮書 / Material Design 導讀_Day12 Iconography 影像學

本圖片截取自 Material Design - Keyline shapes。

圖示由前景和背景元素組成,每一層元素都可以獨立進行動態設定。

本圖片截取自 Material Design - icon Layers。
  1. 遮色片
  2. 最後的修飾圖層
  3. 前景(應用程式圖示)108 x 108dp,遮色片 72dp,透明度可調整
  4. 背景(圖示陰影)108 x 108dp,遮色片 72dp,不設定透明度

設計新圖示時,燈光和陰影效果應與介面上的其他圖示一致。顯示元件接觸陰影可以使圖示具有立體感跳脫背景顏色。

為了顯示深度感,對圖示邊緣進行了色調和陰影處理。

  • 在圖示頂端邊緣上色突顯頂端(左側、右側和底部邊緣未上色)
  • 在圖示底部邊緣上色突顯陰影(左側、右側和頂部邊緣未上色)

修飾圖層位於圖示的上方,可以設定漸層、材質、光影等等。

在不影響圖示排版的情況下,遮色片可以在圖示上層使用 72 x 72dp 的基礎關鍵形狀遮色片區域。遮色片形狀包括圓形、正方形、矩形、垂直矩形等形狀遮色片。

Android navigating between apps / Android 在介面之間導覽

應用程式可以直接從一個應用程式開啟到另一個應用程式,在常用的操作建立連貫的動作體驗。例如: 要拍攝照片時可以啟動 "相機" 的應用,拍完照片可以直接開啟相簿查看照片。

本圖片截取自 Material Design。

在 Android 應用程式活動項目包含畫面上的所有操作。當一個應用程式發出 ( 例如: 分享 ) 信號,希望另一個應用程式協助執行用戶操作的任務,用戶依據應用程式顯示的操作步驟完成一系列活動。

從主畫面啟動應用程式開始的一系列操作,包含用戶瀏覽相簿和查看照片的細節。如果用戶使用分享功能,則畫面底部會顯示擴展區塊,區塊中包含各種應用程式的分享功能,這些應用程式都已登入並且可以提供分享功能。

Android notifications / Android 通知

在您沒有使用應用程式時,藉由通知提供簡短、即時且相關的訊息。

通知的主要目的是通知用戶有關應用程式中的事件或訊息。下列兩種類型的通知是最容易受到注目的:

  • 來自其他用戶的訊息
  • 適時且內容豐富的通知提醒

通知區塊分析,通常通知會包含下列項目:

  • 標題
  • 內容區塊
  • 作用區域

如何吸引用戶注意到通知

  • 出現在狀態列的圖示中
  • 出現在鎖定螢幕上
  • 出現聲音或振動
  • 快速出現在當前螢幕上
  • 使裝置的 LED 燈閃爍

何時不使用通知

通知不應成為與用戶溝通的主要橋梁,通知頻繁的打擾用戶可能會引起反感。例如: 不要以通知的形式發送節日或生日問候,不要打斷用戶的操作請用戶評價。在下列的狀況時不顯示通知:

  • 在 Play 商店中嚴禁交叉宣傳應用程式,或在通知中廣告宣傳其他產品
  • 通知用戶從未開啟的應用程式
  • 鼓勵用戶開啟應用程式但沒有提供益處的消息,例如: 一段時間未見您
  • 要求對應用程式評價
  • 通知不需要用戶參與的操作,例如: 同步訊息
  • 通知應用程式無需用戶操作即可從錯誤狀態中恢復

本圖片截取自 Material Design。

前臺通知是當用戶沒有使用應用程式時在系統後臺執行的應用程式通知,後臺運行中的程式可能會消耗電池或網路數據,因此 Android 通過顯示必要的通知讓用戶瞭解這類型的服務。由於用戶無法關閉通知,如果用戶不希望通知執行,應提供用戶設定停止通知。例如: 在下載文件時, Android 的下載管理會執行前臺顯示通知,讓用戶知道正在進行下載,並提供取消下載的按鈕。

通知的目的是便於用戶瀏覽和使用通知的元件,常見通知包含內容、人物、動作:
通知中最重要的就是內容,次要的則是訊息(例如: 時間),訊息通知顯示的比例較小,與主要內容排列再一起。如果通知內容包括人物,則人物大頭貼會顯示在右側,與其他內容區分。
通過點擊指標圖示可以展開通知視窗觀看。操作文字標籤的通知顯示在單一的背景顏色和位置上。

本圖片截取自 Material Design - Header area。

標題區域包括

  1. 應用程式圖示:
    應用程式圖示是代表身分的小型標示,它在狀態欄中以單色顯示,如果應用發送多元的通知,可以使用反映內容類型的符號來替換應用的圖示。例如,Google 即時資訊使用雲形圖示來顯示天氣通知。
  2. 應用名稱:
    應用程式的名稱會自動顯示在通知中。
  3. 標頭文字(可選擇):
    當通知來自多個應用程式時才需要標題文字,例如: 擁有多個帳號的用戶名稱。
  4. 時間戳記(可選擇):
    預設狀態下不會顯示時間戳記,如果顯示通知的發出時間(例如: 未接來電的時間)很重要,可以選擇增加時間戳記。
  5. 展開指標圖示:
    如果可以展開通知視窗,則會出現展開指標圖示。

本圖片截取自 Material Design - Content area。

通知內容區域包括:

  1. 內容標題:簡短標題的通知
  2. 內容文字:訊息補充
  3. 大圖標(可選擇):以有意義的方式增加圖片強調通知,例如:帶有寄件人大頭貼的信件。

通知視窗區域展開後最多可在底部顯示三個操作項目。
在 Android N 版本及更高版本中,操作項目不會顯示圖示,讓區域可以顯示更多文字,但是早期版本的操作系統都會使用圖示,Android Wear 設備的通知指南建議提供一個圖示。

顯示通知時,通知會被增加到通知項目中,並根據裝置當前狀態及設定開關的變數顯示,用戶可以更改通知行為設定。通知還可能:

  • 在狀態欄中以圖示顯示,向用戶發出訊號,通知有東西要查看。
  • 發出聲音或振動
  • 顯示短消息於畫面中吸引用戶的注意

Android 中的通知項目通常按時間倒序顯示通知,其調整受以下因素影響:

  • 應用說明的通知優先級或重要性
  • 通知是否通過聲效或振動提醒用戶
  • 通知中包含人物以及是否加注重點標示
  • 通知是否代表正在進行的活動,例如: 正在進行的通話或音樂播放

從 Android O開始,Android 系統會通過增加強調或取消強調來更改通知項目頂端和底部的外觀,幫助用戶區分通知及辨別內容。通知項目向用戶顯示最即時的訊息。如果之前發送的通知不再具有關聯,可以自動將通知關閉,使用戶看不到它。

用戶通過下列方式與通知互動:

  1. 導覽到目的地
    用戶透過點擊前往通知內容,如果通知顯示在被鎖定的畫面上,用戶需要雙擊通知然後輸入 PIN、圖案或密碼,當用戶點擊通知時,應直接顯示與通知相關的畫面,提供用戶操作。例如:通知顯示輪到用戶玩遊戲,此時點擊通知將用戶直接帶入遊戲畫面。

  2. 觀看可擴展通知
    如果通知區塊出現可擴展視窗圖示,用戶可以點擊圖示或向下滑動將通知畫面展開閱讀內容。

  3. 關閉(如果系統允許)
    用戶可以透過向左或向右滑動關閉通知。後台正在進行的應用程式通知(例如:音樂播放)可能無法通過滑動關閉。

  4. 控制未來顯示的通知項目,顯示的操控元件取決於 Android 版本以及應用程式是否具有 "引導" 的通知(從 Android O 開始)。通知操控元件通過以下方式顯示:

  • 觸摸並按住通知
  • 向左或向右滑動通知,然後點擊設定操作項目

對於相同應用程式產生的多個通知,Android 提供彙總和組織的表示方法。

彙總:可以彙總所有種類的通知,而不顯示多個通知。例如:在畫面上顯示一個摘要通知,內容寫著 " 您以三個新訊息",用戶擴展通知後,顯示每個通知的片段。

分組:應用程式可以根據層次結構顯示多個通知:

  • 父層通知顯示子層通知的摘要
  • 如果用戶擴展父層通知視窗,將顯示所有子層通知
  • 子層通知可以擴展通知顯示全部內容

子層通知不會顯示重複標題訊息。例如:如果子層通知與其父層通知同時具有相同的應用程式圖示,子層通知的標題就不會顯示圖示。即時性的通知可以單獨顯示在分組通知之外。

不必離開當前畫面,即可通過展開父層通知視窗顯示子層更多訊息,在展開視窗時,通知最多可以提供三個操作項目,通知內容請不要重複顯示與通知行為相同的操作項目 ( 例如:查看通知 )。當通知為計時器時,可以在操作選項中加入 "暫停" 或是 "增加一分鐘" ,讓通知提升用戶體驗。

可以提供用戶在通知上輸入文字,例如:回復簡短訊息或是紀錄簡短筆記。若要進行較多內文的輸入,請開啟應用程式讓用戶可以使用更多的空間來查看及編輯問自。當通知正在傳遞訊息,請在用戶輸入文字後保留通知視窗,等到對話暫停後自動將通知關閉。

通知分為互動性或非互動性,互動通知提供了用戶必須在特定時間接收的內容才能執行以下操作:

  • 實現人與人之間的互動
  • 功能可以改善日常生活
  • 控制或解決臨時的裝置狀態

互動通知可以幫助用戶實現人與人之間的互動,例如:來電或來信、遊戲中輪到用戶時的通知。

也可以改善日常生活,例如:設定提醒或警報、行事曆事件提醒、提交訂單、航班處理。

控制在裝置上臨時出現的狀態,例如:步驟導覽、碼表執行、在後台執行的背景程式、音樂播放或是截圖。

若您的通知尚未被描述到,該通知屬於非互動通知。

非互動通知選擇關閉和選擇加入

非互動通知應該可以提供選擇,非互動通知可能不會吸引用戶的注意,通過下列兩種方式設定:

  • 選擇關閉:預設情況下用戶收到通知後可以選擇關閉通知,也可以通過關閉設定來停止接收通知。
  • 選擇加入:用戶在應用程式中打開設定即可收到選擇需要加入的通知。

除非您的通知同時滿足以下條件,否則請避免選擇關閉通知:

  • 通知提供了具體的價值
  • 通知與內容區塊有關(例如:現在位置,現在日期或時間,過去的歷史記錄或表達的興趣。)

提供選擇加入通知的方法較為保守,由用戶選擇接收這些通知,因此用戶很樂意看到通知,必須了解如何前往設定接收通知,可以告訴用戶設定的位置(例如:入門流程 或可取消 區塊

當您將應用程式升級到 Android O 時,需要定義通知項目-每個要發送的通知類型都需要一個項目開關,戶可以通過項目開關 Android O 中的應用通知,如果用戶不希望應用發出特定通知,則可以透過關閉單一選項,不需要關閉所有通知。

對每個通知項目分配重要性等級。從 Android O 開始,重要性等級控制每個項目的行為(取代優先級別)。重要性等級有以下限制:

  • 設定好的重要性等級將是通知的預設級別,用戶可以在 Android 設定中更改項目的重要性等級。
  • 設定重要性等級後將無法更改,只能降低重要性,前提是用戶未更改重要性等級。

項目重要性的設定需要考慮用戶的時間和注意力。當不重要的通知設定成緊急通知時,可能會產生不必要的警報通知。

  • 高重要性:通知會發出聲音並出現於螢幕上方,用戶必須立刻瀏覽或是採取行動,對於時間有嚴格的要求。例如:簡訊、警報、電話。
  • 預設重要性:出現一個音效,提供用戶自由選擇點選通知的時間,此類型的通知不會中斷用戶正在進行的操作。例如:交通警報、任務提醒。
  • 低重要性:此類型通知不會有音效,或是不符合重要等級要求的通知項目。例如:用戶已訂閱的內容、社交軟體邀請。
  • 最低重要性:此類型通知不會有音效和通知畫面,非即時性或是非必要的訊息通知。例如:附近的景點、天氣、促銷內容。

要定義通知項目,請了解要發送的所有通知,將這些通知依照共同點分組:

  • 一個主題可以簡短描述所通知,例如:"下載"。

由於項目中的通知遵循相同的重要性等級,因此從用戶的角度來看,通知應該具有彼此相似的重要性等級。

分組項目
您可以對通知項目進行分組,提供用戶更輕鬆的在 “ Android 設定 ” 中瀏覽項目列表。僅在以下情況下建立項目分組:

  • 有 10 個以上的通知項目
  • 您的應用程式支援多個使用者帳號(例如: 個人帳號和公司帳號),並允許用戶在各個帳號中使用相同的項目名稱和功能

將您的應用程式設定連結到 Android 項目設定,並保持應用程式中的設定與 Android 項目中的設定一致。如果您的應用程式提供用於不同類型通知的操控元件,將用戶導向相應的 Android 項目設定進行更改。

在 Android O 中,項目的預設重要性等級 前台服務 通知必須至少為低重要性,提供應用程式在狀態欄中顯示一個圖示。當用戶使用不太突出的最低重要性等級通知項目,將在低重要性觸發來自 Android 的額外通知,表示該應用程式正在使用電池。

對於尚未升級到 Android O 的應用程式,需要為每個單獨的通知分配優先等級,某些優先等級提供播放聲音的選項。藉由分配優先級,設定每個通知如何傳遞,優先級越高,中斷用戶的可能性就越多。例如:無論用戶在做什麼,最大和最高優先等級的通知都會在用戶的畫面中顯示。如有疑慮請選擇較低的優先級。

優先等級設定為 預設(或更高)的通知可以在傳遞通知時播放音效(使用您提供的聲音文件)。在以下情況通知使用聲音強調通知:

  • 可以幫助用戶了解時間,例如:打來的電話或即將召開的工作會議。
  • 可以幫助用戶在日常生活中的需求通知,例如:讓他們知道航班延誤。
  • 用戶設定通知時發出聲音(預設情況此選項為關閉狀態)。

無論您是否使用通知項目,都將分配每個通知最合適的預設類別。Android 使用下列項目來進行排名和過濾選擇。

  • CATEGORY_CALL 通話(語音或視訊)或類似的同步通訊請求
  • CATEGORY_MESSAGE 直接傳入訊息(SMS、即時消息等)
  • CATEGORY_EMAIL 大量非同步訊息(電子郵件)
  • CATEGORY_EVENT 日曆活動
  • CATEGORY_PROMO 促銷或廣告
  • CATEGORY_ALARM 鬧鐘或計時器
  • CATEGORY_PROGRESS 長期執行的後台操作的進度
  • CATEGORY_SOCIAL 社群網路或共享更新
  • CATEGORY_ERROR 後台操作或身份驗證狀態錯誤
  • CATEGORY_TRANSPORT 播放媒體的傳輸控制
  • CATEGORY_SYSTEM 系統或裝置狀態更新,保留供系統使用。
  • CATEGORY_SERVICE 正在執行後台服務的指示
  • CATEGORY_RECOMMENDATION 針對件事的具體即時建議。例如:新聞應用程式可能會推薦用戶感興趣的新聞故事。
  • CATEGORY_STATUS 有關裝置或區塊狀態的持續訊息

用戶可以選擇在螢幕鎖定時顯示通知,這些通知可能會隱藏應用程式判斷為敏感的任何內容。Android 會評估每個通知的可見性等級,提供可以安全顯示的內容。由於通知在螢幕鎖定上可以被任何人看見,因此用戶隱私是很重要的考量因素。對於每個通知可見性等級都設置為公開、私人或隱密的。公開通知在螢幕鎖定時可以被看見,而隱密的通知則被隱藏。

私人通知屬於中性可見等級,僅顯示基本訊息以及通知的應用程式的名稱及其圖示,除了標題和內容被隱藏之外,還可以選擇不透露個人訊息的文字通知,例如:2 項新消息。

Android 將通知標題內容截短到一行(即使視窗區域展開)。此時標題內容應該:

  • 少於 30 個字母
  • 包含最重要的訊息
  • 避免使用變數-除非變數包含數字或文字符號,或以文字開頭
  • 移除已經出現在標題中的應用程式名稱

通知內容文字應該:

  • 避免超過 40 個字母的限制
  • 不重複內容標題中的內容,顯示最重要的信息。

在 Android N 中,大圖示僅適用於可以增強通知內容的圖片,包括:

  • 來自其他人的訊息,例如:發布者的頭像圖片
  • 內容來源(來自不同的應用程式),例如:來自用戶訂閱的 YouTube 頻道的標誌
  • 關於通知的有意義的符號,例如:汽車行駛方向的箭頭符號

當顯示人物時大圖示以圓形表現(不適用於品牌標誌),在其他情況下為正方形。

Google 在 Android 應用程式中使用以下通知模組。為應用程式提供自訂模組。

標準模組:標準模組適用於大多數通知,使用簡潔的文字、大圖示(如果適用)和操作。

大文字模組:顯示較長內文時使用此模組。在擴展通知區塊時可以預覽更多文字。

大圖片模組:通知包含圖片時使用此模組。提供圖片的縮圖,用戶可以透過擴展通知區塊來觀看大圖。

進度模組:需要一些時間才能完成的用戶啟動操作,在執行時顯示進度條並且可以隨時取消。(不可取消的操作不一定會發出通知訊息。)

媒體模組:用戶可以控制正在播放的媒體。

  • 折疊視窗最多顯示三個操控動作,大圖示可以顯示相關圖片,例如:專輯封面。
  • 展開視窗最多顯示五個操控動作,如果沒有顯示圖片,則可以顯示六個操控動作。圖片中的顏色將自動設為通知背景和其他元件顏色。

訊息範本:用於即時通訊。可以選擇提供用戶直接在通知中回覆的功能。


今天我們了解到 Platform guidance 平台指導,Android 系統的圖示、介面導覽、通知,在圖示的章節中把圖示細分為四層元素,在每一層元素上依照準則去設計視覺效果及圖形遮色片。在介面導覽時用戶從一個應用程式因為任務而開啟另一個應用程式,在不同應用程式間建立連貫的操作體驗。通知簡短得傳達重要訊息,通過視覺顯示聲音或震動來通知用戶,透過通知類型分類用戶可以設定通知的開關及優先等級,在鎖定螢幕上顯示的通知需要注意到用戶的隱私,提供不同的樣式呈現,也可以再通知視窗中提供用戶常用的操作按鈕,提升用戶體驗。

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

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


上一篇
# UI / UX 設計白皮書 / Material Design 導讀_Day26 Platform guidance 平台指導
下一篇
UI / UX 設計白皮書 / Material Design 導讀_Day28 Platform guidance 平台指導
系列文
UI / UX 設計白皮書 - Material Design 導讀30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言