iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 18
1
自我挑戰組

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

UI / UX 設計白皮書 / Material Design 導讀_Day18 Communication 通訊

昨天我們了解到 Interaction 相互作用使用各種手勢可以對不同元件產生互動,透過不同手勢類型可以執行不同的任務指令,並依照應用程式預設好的狀態與產品進行互動,互動式組件同時也呼應了使用者的手勢給予狀態回饋,元件狀態根據重要性來強調視覺外觀或動畫效果,強調需要受到注目的元件狀態,讓用戶能順暢的完成目標動作。

今天我們進入到 Material Design 中 Communication 通訊的章節,由於內容涵蓋的範圍較多較廣,我們會分成三天來介紹,今天會先了解關於確認與承認、資料格式和數據可視化這三個部分,讓我們繼續看下去吧。


Communication 通訊

Confirmation & acknowledgement 確認與承認
Data formats 資料格式
Data visualization 數據可視化
Empty states 空白狀態
Help & feedback 幫助與反饋
Imagery 意象
Launch screen 啟動畫面
Onboarding 快速入門
Offline states 離線狀態
Writing 寫作

Confirmation & acknowledgement 確認與承認

在採取行動之前先進行確認與承認的步驟,減少用戶對於已採取或將要採取的不確定性動作。除此之外還可以防止用戶犯錯,要注意的是並非所有動作都需要確認與承認。

動作類型

  • 確認操作會要求用戶驗證他們是否要繼續執行操作。
  • 確認動作會提供執行狀態說明,使用戶知道他們選擇的動作是否完成。

本圖片截取自 Material Design。

當操作介面請求用戶確認時,它會詢問用戶是否要繼續執行操作,詢問的內容顯示與操作有關的警告或重要信息。如果執行的結果是可以恢復或是忽略的步驟就不需要確認。例如: 當用戶選取畫面中的圖片,則無需進一步確認。

需要與用戶確認時最好使用彈跳視窗進行確認,提供用戶可採取的操作 ( 確認執行或取消退出 ) 並通知結果。在背景執行的系統操作可以使用短消息顯示在畫面中通知用戶,短消息顯示的時間很短,也可以在短消息上放置取消操作的選項,如果短消息具有操作選項則會一直保留到用戶執行其他操作 ( 例如: 滾動畫面 ) 後才消失。

確認可以通過各種組件來傳遞。選擇確認組件的標準包括:

  • 緊急程度
  • 包含修正問題的方法
  • 螢幕上的持續時間(暫時、可消除的,或兩者皆有)

短暫的提示確認組件將在出現後的幾秒鐘內自行退出畫面。通過操作關閉確認組件的動作來關閉可以拒絕的確認組件。

使用通知來傳達在背景執行的訊息,通知用戶特定的狀態更改。
使用短消息提供有關操作的簡短回饋。
當介面內容必須連接網路,而沒有網路的狀態下無法載入或同步時,請使用空白狀態,這時也可以顯示重新載入的連結,幫助用戶完成任務。使用戶能夠與應用程式的其他部分進行更多互動。

Data formats 資料格式

數據格式描述了不同類型的數字和語言數據。

本圖片截取自 Material Design。

日期和時間 ( 點選連結可以觀看 Material 範例 ) 可以通過以下方式編排:

  • 當日時間可以使用大寫的 AM 或 PM,不使用句點(或小寫的 am / pm,如果適用於區域設定)。
  • 當時間為24小時制,開頭則不顯示 AM/PM。
  • 當日期顯示年、月、日 ( 如果是當年則不顯示年 )。
  • 大概時間表示方式為四捨五入到最大與最近的日期或時間。
  • 絕對時間請顯示特定日期或時間。

要顯示日期或時間範圍,請在日期或時間範圍之間顯示一個破折號(無空格)。例如:1月6日-2月2日 8:00 AM–12:30 PM,書寫月份時請增加空格或刪除破折號。

  • 要顯示年份範圍請根據年度對日期進行編排,在開始和結束時均顯示年份,如果兩個日期都包含年度,只在日期尾端顯示年份。
  • 要顯示上午或下午時間,如果兩個時間的 AM / PM 相同,則在範圍末端使用單個 AM 或 PM。

由於時區在不同地區之間會有所不同,因此時區的使用應清楚標示。

  • 單位數小時,刪除前 0 個位數的小時。
  • 單一時區指單個時區時間,請使用兩個字母的時區。取下 S(對於標準)或 D(對於日光標準時間)。
  • 組合時區,為全國性指定日期時,請使用 Standard 或 Daylight 縮寫(例如: EDT)避免混淆。美國的某些州(例如: 亞利桑那州)不使用夏令時間。

根據內容顯示日期或時間,或同時顯示日期和時間。

  • 包括未來一天或日期的時間。
  • 當提到過去的時間時,請同時顯示日期和時間
  • 對於遙遠的過去,請忽略時間。
  • 當指的是星期幾時,請顯示縮寫的日期,並用逗號分隔。
  • 持續時間以 H:MM:SS 格式顯示錄音的持續時間,例如: 音樂或影片。如果不適用上述格式,則忽略小時或秒數。在相同的內文使用相同的格式。

當空間有限時,請使用縮寫。

  • 月份可以縮寫或顯示數字。
  • 美國日期格式為月/日/年,但其他國家/地區則使用日/月/年。
  • 使用每天的首字字母縮寫星期幾。
  • 一週中的縮寫天可能與時間結合在一起。
  • 您可以使用縮寫的數字單位 ":00",刪除時間戳記、圖形上的項目、持續時間等等。

通常在對話中顯示日期和時間訊息,可以幫助用戶了解時間。例如: 明天下午提醒。

  • 指 "昨天" 或 "明天"
  • 如果該日期在下一週,則包括星期幾(例如: 星期二)

數據編輯判斷是指如何判斷數字並遮蓋敏感數據。當遇到敏感數據則使用部分隱藏[ ••• ] 的方式顯示,他們隱藏了部分信用卡卡號或身分證字號。可以在字體和介面平台使用此格式:

在一串編號或數字中間使用三個 [ ••• ],或是改用萬國碼字串。

  • 在三個 ••• 符號前方放置兩個空格
  • 在每一個 • 之間和最後一個之後添加一個小空間

信用卡號或是簽證號碼使用四個 [ •••• ] ,或是改用萬國碼字串進行編輯。

在一串文字後方加上文字省略符號 [ ••• ] 表示未顯示的字母、單詞或未顯示的文字。或是僅顯示少部份名稱或電子郵件地址。

Data visualization 數據可視化

以圖形形式描述密集和復雜的訊息,將數據轉換為視覺化圖形,可以幫助用戶快速的探索及觀看數據,簡化數據有利於比較或是陳述故事,供用戶做出決策。數據可視化表示不同類型和大小的數據:從幾個數據點到大型多元數據集。先考慮數據的準確性、清晰度和完整性,同時預期用戶對數據深度、複雜性和形式的需求,用清楚的方式呈現信息,在視覺上需要適應不同設備尺寸。

本圖片截取自 Material Design。

時間類型的圖表顯示一段時間內的數據,例如: 趨勢或多個類型比較。常見的使用方式包括:股價表現、健康統計、年表。

本圖片截取自 Material Design - Change over time charts。

時間變化圖表包括:

  1. 折線圖
  2. 條狀圖
  3. 疊層條狀圖
  4. 蠟燭圖 ( 又稱陰陽線圖 )
  5. 面積圖
  6. 時間線
  7. 地形圖
  8. 瀑布圖

類別比較圖用來比較多種不同類別之間的數據。常見範例: 各國收入、熱門場地時間、團隊分配。

本圖片截取自 Material Design - Category comparison charts。

類別比較圖包括:

  1. 條狀圖
  2. 分組條狀圖
  3. 泡泡圖
  4. 折線圖
  5. 平行坐標圖
  6. 子彈圖

排名圖顯示項目在項目列表中的位置。常見範例: 選舉結果、績效統計。

本圖片截取自 Material Design - Ranking charts。

排名圖包括:

  1. 項目條狀圖
  2. 項目柱狀圖
  3. 平行坐標圖

部分整體關係圖顯示了零件元素的加總。常見範例: 產品類別合併收入、預算案。

本圖片截取自 Material Design - Part-to-whole charts。

部分整體關係圖表包括:

  1. 疊層條狀圖
  2. 餅圖圖
  3. 甜甜圈圖
  4. 堆疊面積圖
  5. 樹狀圖
  6. 烈日圖表 ( 又稱朝陽圖 )

相關圖顯示兩個或多個數據之間的相關性。常見範例: 收入和預期壽命。

本圖片截取自 Material Design - Correlation charts。

相關圖包括:

  1. 散佈圖
  2. 泡泡圖
  3. 柱狀圖折線圖
  4. 熱力圖

分佈圖顯示每個數值在數據中出現的頻率。常見範例: 人口分佈、收入分配。

本圖片截取自 Material Design - Distribution charts。

分佈圖包括:

  1. 柱狀圖
  2. 箱形圖
  3. 小提琴圖
  4. 密度圖

流程圖顯示數據在多個狀態之間的移動。常見範例: 資金轉帳、投票數和選舉結果。

本圖片截取自 Material Design - Flow charts。

流程圖包括:

  1. 桑基圖 ( 又稱能流圖 )
  2. 甘特圖
  3. 和弦圖
  4. 網絡圖

關係圖顯示了多個項目間的相互關聯。常見範例: 社交平台、字表。

本圖片截取自 Material Design - Relationship charts。

排名圖包括:

  1. 網絡圖
  2. 文氏圖
  3. 和弦圖
  4. 烈日圖表 ( 又稱朝陽 )

根據數據的描述在多種類型的圖表中選擇適合的圖表。

可以使用時間數列圖來表示隨時間的變化,時間數列圖是按時間順序表示數據的圖表。隨時間變化表示的圖表包括:折線圖,條狀圖和面積圖。

  • 折線圖可以表達少量數據的差異。
  • 條狀圖可以表達更大的數據變化,部分數據與整體數據的比較和排名關聯。
  • 面積圖總結數據之間的關係,各個數據如何與整體的關聯。

條狀圖和圓餅圖均可用於顯示比例,比例表示與總數相比的數值。

  • 條狀圖使用共同的基準線表示條狀長度內的數據。
  • 圓餅圖使用圓內的圓弧或角度表示部分數據。

在顯示時間變化上條狀圖、折線圖和堆疊面積圖比圓餅圖效果更好。
條狀圖、折線圖和堆疊面積圖有相同的基準線,在比較條狀長度差異時可以更加容易分析。

面積圖分為堆疊面積圖重疊面積圖

  • 堆疊面積圖顯示了多個時間序列(在同一時間段內)彼此堆疊
  • 重疊面積圖顯示了多個時間序列(在同一時間段內)彼此重疊

不建議將重疊的面積圖用於兩個以上的時間序列,因為這樣做會使數據雜亂無法區分。使用堆積面積圖在同一個時間內比較多個數值(水平軸表示時間)。

數據可視化使用自訂樣式和形狀,讓數據一目了然、易於理解,適合用戶需求和內文。圖表可以自訂內容:

  • 圖形元素
  • 樣式
  • 影像學
  • 軸線和項目
  • 圖例和註釋

視覺編碼是將數據轉換為視覺形式的過程。唯一的圖形屬性可以應用於定量數據(例如: 溫度、價格或速度)和定性數據(例如: 類別、風味或表達方式)。可以將多種視覺處理應用於多個數據。例如: 條狀顏色可以表示類別,而條裝的長度可以表示數值。

這些屬性包括:

  • 形狀
  • 顏色
  • 尺寸
  • 區塊
  • 體積
  • 長度
  • 角度
  • 位置
  • 方向
  • 密度

形狀以多種方式顯示定性數據,可以輕鬆比較範圍內或其他類別的數據。形狀設計需注意可測量形狀和圖表精準度等。

圖表可以表現不同等級的精確數據。顯示的數據應使用適合與用戶互動的形狀表示(根據觸摸目標的大小和相關的承受能力)。主要在表達主旨或趨勢的數據可以使用細節較少的形狀。

顏色通過四種方式區分圖表數據:

  • 區分類別: 用顏色定義不同區域類別。
  • 代表數量: 用顏色區分數值。
  • 突出特定數據: 在需要突出的數值上使用高對比及強調的顏色。
  • 表達意義: 配合提他視覺提示 ( 例如: 圖示 ) 增強圖表顏色含意。

提供看不到色差的用戶使用時,您可以使用其他方法來強調數據,例如: 高對比度的陰影、形狀或紋路。將文字項目應用於數據有助於說明含義,同時消除了對圖片範例的需求。想要了解更多顏色對比可以點擊查看。

圖表中的線段可以表達有關數據的數值,例如: 層次結構、突出顯示和比較。可以使用不同的方式來設計線段,例如: 使用虛線或各種不透明度,請勿使用不同的顏色顯示同一個數據的週期變化。
可應用元素包括:

  • 註解
  • 預測原理
  • 比較工具
  • 信心區間
  • 異常現象

文字可用於標記不同的圖表元素,包括:

  • 圖表標題
  • 數據項目
  • 軸項目
  • 說明

圖表中最重要得文字通常是圖表標題,其中軸項目和圖例說明屬於最低層級結構。藉由標題的字型尺寸可以表達內容的重要層級,應謹慎使用尺寸比例並使用少量的尺寸及字體樣式。

圖示可以表示圖表中不同類型的數據,並可以提高圖表的整體識別性。圖示可以用於:

  • 分類數據: 區分組或類別
  • 控制元件和操作: 篩選器、縮放、存檔和下載
  • 狀態: 錯誤、無數據、完成狀態和警告

在圖表中放置圖示時,建議使用通用的圖示,尤其是在表示動作或狀態時,例如:存檔、下載、完成、錯誤和警告。

具有項目的軸線(或多個軸)顯示數據的比例和範圍。例如: 折線圖沿水平和垂直標記的軸線顯示一系列數值。也可以不顯示軸線讓條狀圖的數值成為畫面焦點,不顯示軸線適合用在項目簡單的圖表。

條狀圖應從基準線為零開始。若不從基準開始顯示數值可能會導致錯誤的數據認知。數值標籤反映圖表中最重要的數據項目。根據需要在介面中以一致的方式使用數值標籤來表現數值等級,要注意軸項目不應妨礙用戶閱讀圖表。

文字項目應水平放置在圖表上以便於閱讀。文字項目不應旋轉或堆疊會使它們難以閱讀。

圖例和註釋描述了圖表信息。註釋應顯示數值、數據異常數值和所有值得注意的內容。在桌上型電腦建議將圖例放在圖表下方。在手持設備上將圖例放在圖表上方,讓圖例和註釋在互動保持可見。

圖表元素可以直接在簡單圖表中標記。對於密集的圖表可以在圖例中顯示標籤。在可穿戴設備(或其他小螢幕)上顯示的圖表應為手持或桌機圖表的簡化版本,標註圖表中關鍵數值或提供軸線數值標籤,讓使用者能判斷相對數值。

圖表提供了互動模式,使用者可以控制顯示的數據。這些模式讓使用者可以專注於圖表的特定數值或範圍。下列的互動模式、樣式和效果(例如: 觸覺回饋)可以提高用戶對圖表數據的了解:

  • 逐步公開: 依照需求逐步提供圖表細節路徑。
  • 直接操作: 減少用戶在畫面中執行的動作,提供用戶直接對介面元件進行操作,例如: 縮放和水平移動,分頁和數據控制元件。
  • 改變視角: 使同一種設計能夠適用不同用戶和數據類型,例如: 數據控制元件和動畫。

使用逐步公開顯示圖表詳細信息,用戶可以根據需求查看特定的數據。在桌機上鼠標停留狀態可以顯示更多詳細數據。在手持裝置上觸摸並按住手勢會在圖表上方顯示數據。

縮放和水平移動是常見的圖表互動方式,它們影響用戶研究數據和瀏覽圖表介面的密集程度。平移動作通常與縮放動作配對。

縮放會改變畫面遠近顯示 UI。設備類型設定如何執行縮放,如果縮放不是主要操作,可以通過單擊和拖動(在桌機上)或雙擊(在手持裝置上)來實現。

  • 在桌機上,通過單擊和拖動或滾動來進行縮放
  • 在手持裝置上,使用捏合放進行縮放

平移提供用戶瀏覽擴展到畫面外的內容,依照圖表樣式來設計提供用戶平移的方向建議。例如: 用戶水平移動可以查看本月的運動成效,垂直移動可以查看過往運動成效。在手持裝置上,平移通常是通過手勢(例如單指滑動)來實現的。

在手持裝置上,分頁是一種常見的模式,允許用戶通過向右或向左滑動來查看上一個或下一個圖表。

可以使用切換操控元件、選項區塊和下拉式選單來切換或更改觀看中數據圖表。這些操控元件還可以顯示指標,用戶可以調整操控元件。

動畫可以增強數據之間的關係以及用戶與數據互動方式。有目地性(而非裝飾性地)使用動畫來表達不同狀態和空間之間的關係。動畫應具有邏輯性、平穩性和響應性,而不會阻礙用戶執行。

當產品尚無數據時,空的畫面和圖表可以顯示與主題數據相關的內容。在適當的地方,可以顯示角色動畫來提供趣味和鼓勵。

儀表板的用途應反映在畫面排版、樣式和互動模式中。無論是表現文件還是深入探索數據的工具,可以在儀表板的 UI 中顯示數據圖表,多個簡易的圖表可以傳達一個故事,而不是顯示一個複雜的圖表需要讓用戶去研究。

儀表板應優先處理最重要的信息(使用排版),或是顯示一個焦點,根據層次結構(使用顏色、位置、大小和權重)對訊息進行排序

本圖片截取自 Material Design - Dashboard design。

根據數據訊息進行優先層級排序,並考慮下列問題:

  1. 需要注意的問題
  2. 發生問題的時間
  3. 發生問題的位置
  4. 受到問題影響的其他變數

分析儀表板使用戶能夠瀏覽多組數據並發現趨勢。這些儀表板包括複雜的圖表,可用於發現數據見解。例如:

  • 突顯隨著時間變化的趨勢
  • 回答 "為什麼" 和 "假設" 問題
  • 預測
  • 創造深入的報告

Analytics(分析)訊息中心範例:

  • 追蹤廣告活動的效果
  • 追蹤產品生命週期中-銷售和收入
  • 顯示一段時間內的城市人口趨勢
  • 依照時間追蹤氣候數據

操作儀表板目的在於回答一組預定問題。它們用於完成與監督有關的任務。這類型的儀表板用簡單的圖表排列來表現當前訊息。範例包括:

  • 依據目標追蹤當前進度
  • 隨時追蹤系統性能

操作儀表板範例:

  • 追蹤通話活動,例如: 通話量、等待時間、通話時長或通話類型
  • 監控雲端運算上執行的應用程式狀況。
  • 顯示股市表現
  • 監看賽車上的自動測量記錄

呈現儀表板提供有關主題的精選縮圖。這些儀表板通常包含一些小圖表或數據片段,在上方動態標題說明每個圖表中提供的趨勢和見解。

範例包括:

  • 提供關鍵績效指標的概述
  • 創造高級執行摘要

呈現儀表板範例:

  • 提供投資賬戶業績預覽
  • 提供產品銷售和市場分配數據的摘要

今天我們了解到 Communication 通訊可以使用不同方式的通知,提供用戶確認與承認,減少用戶對於已採取或將要採取動作的不確定性。除此之外還可以防止用戶犯錯。在畫面顯示的日期時間也有各種不同的格式建議,在顯示敏感數據時隱藏部分訊息,保戶用戶的重要資料。將數據轉換為視覺化圖形,可以幫助用戶快速的探索及觀看數據,簡化數據有利於比較或是陳述故事,每個圖表提供不同的趨勢和見解。考慮數據的準確性、清晰度和完整性,同時預期用戶對數據深度、複雜性和形式的需求,用清楚的方式呈現信息,在視覺上需要適應不同設備尺寸。

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

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


上一篇
UI / UX 設計白皮書 / Material Design 導讀_Day17 Interaction 相互作用
下一篇
UI / UX 設計白皮書 / Material Design 導讀_Day19 Communication 通訊
系列文
UI / UX 設計白皮書 - Material Design 導讀30

尚未有邦友留言

立即登入留言