iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 19
1
自我挑戰組

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

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

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

今天我們進入到 Material Design 中 Communication 通訊的第二天,今天會了解空白狀態、幫助與反饋、意象和啟動畫面章節,讓我們繼續看下去吧。


Communication 通訊

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

Empty states 空白狀態

當無法顯示項目的內容時畫面呈現空白狀態,空白狀態可以顯示各種內容。例如: 沒有列表項目的列表框架或是找不到結果的搜索。這些狀態並不常出現,但還是需要預先設計這些狀況的畫面,避免狀況發生。

本圖片截取自 Material Design。

最基本的空白狀態由圖片和文字標語組成,空白標語不能進行互動,點擊也不會產生回饋,應避免顯示緊急或混亂的圖片。

使用以下圖片表現:

  • 具有中性或幽默的語氣
  • 與您的品牌形象一致

包含以下文字:

  • 提供有用的訊息
  • 與您的品牌形象一致
  • 傳達畫面內容,不顯示可操作的內容

為了幫助不熟悉應用程式或介面區塊的用戶,可以使用應用程式入門內容替代原本空白的畫面。入門內容提供用戶可以立即開始操作,使用戶更容易了解應用程式提供的內容。( 例如: 書城平台可向用戶提供一些免費的熱門書籍,讓用戶立即開始探索平台。)

Material 在入門內容提供下列建議

  • 入門內容最適合用於存儲內容(例如: 書或音樂)或創造模組化內容(例如: 便利貼或文件檔案)的應用程式。
  • 使用具有吸引力並展示主題功能的內容。
  • 使用戶能夠刪除和替換入門內容。
  • 請提供個性化的內容。

如果無法通過圖片和標語輕鬆傳達目的,請考慮顯示應用程式教育內容。教育性內容可幫助用戶了解如何運用內容執行的操作。( 例如: 在影音平台中用戶尚未購買影音,因此在畫面中可以顯示前往購買影音的相關圖片、文字、按鈕。)

Material 在教育性內容提供下列建議:

  • 可以取消或跳過教育性內容。
  • 保持簡短。
  • 使內容與產品保持相關性。教育性內容不應該是使用整個應用程式的地方。

當搜尋結果與用戶查詢的項目沒有完全相同的答案時,可以顯示與用戶查詢相關的項目來顯示的搜尋結果,通過顯示這些結果使用戶找到他們想要的東西。

Help & feedback 幫助與反饋

幫助內容提供了用戶應用的常見問題和疑慮的答案。用戶可以透過評論、回報錯誤以及提出尚未解答的問題。

幫助內容應易於查找,可以放置於畫面中的各個位置。幫助內容通常顯示在導覽列或溢出菜单中的 "幫助" 或 "回報錯誤" 項目下。除上述區域外,也可以在導覽項目、應用列表或應用欄位中都可以輕鬆找到幫助內容。

本圖片截取自 Material Design。
  • 如果您的操作流程很複雜且具有導覽項目,則在導覽項目和溢出菜单中都放置前往 "幫助" 的連結。
  • 如果您的操作流程很複雜且沒有導覽項目,請在溢出菜单中放置前往 "幫助" 的連結。
  • 如果您的操作流程並不復雜,只需將 "幫助" 放在導覽列或溢出菜单中。

"幫助" 應該是導覽項目中的最後一項,其上方是 "回報錯誤" 。當 "登出" 出現在導覽項目中,它應該是列表中的最後一項。

沒有導覽項目時,應在溢出菜單中放置 "幫助" 和 "回饋" (或 "回報錯誤" )。

要為緊急問題提供幫助,例如: 付款和退款,請在應用欄中放置一個 "幫助" 圖示。電腦應用程式可能還會放置一個 "幫助" 圖示,因為電腦應用程式中有更多的畫面空間可以擺放。

幫助畫面可以包含一個 "回報錯誤" 按鈕,提供用戶報告問題或發送評論。
在用戶較少使用的內容( 例如: "關於" 、 "隱私" 、 "服務條款" )可以放在溢出菜單中。

幫助: 要指示幫助內容,請使用幫助圖示。(請勿使用圖示變體,例如: 帶有對話框輪廓的圖示。)

發送回饋: 要指示用戶可以在何處回報錯誤,請使用 Material Design 圖示進行回饋。( 請勿使用圖示變體,例如: 聊天或錯誤圖示。 )

幫助工具提示: 當簡短描述可以提示相關內容時,可以顯示文字幫助工具提示。幫助圖示提供有關鼠標停留、按下或單擊的文字幫助。要指示可用的幫助工具提示,請使用 Material Design 外框形式幫助圖示。( 請勿使用圖示變體,例如: 帶有對話框輪廓的圖示。)

使用加粗的標題、列表、表格和段落留白讓內文呈現上具有格式化展現的效果,使內容清晰易讀;引用需要選擇的元件(例如: 按鈕或連結)在引用它們時加粗元件名稱。

  • 提供關鍵訊息: 將解釋內容簡短,不要給出與用法無關的細節。
  • 使用簡單的語言: 盡可能避免在幫助內容中使用技術術語。
  • 顯示圖片: 提供步驟說明,請顯示相關圖片或圖示來說明用戶需要做什麼。

Imagery 意象

圖片可以增強用戶體驗,又可以表達品牌的視覺語言。圖片有助於傳達清晰的訊息並講述故事,說明難以用文字表達的複雜訊息,並向用戶展示如何執行操作。

本圖片截取自 Material Design。

選擇圖片來傳達您的訊息並反映產品風格。

攝影照片和插圖都可以包含在同一產品中,照片可以更好的代表特定概念,而插圖有助於描述抽象概念。無論是使用照片或是插圖都應具有反映您產品的視覺、照片和插圖共享相同的功能、樣式和用意相互關聯。

在圖片中有一個代表性的焦點,可以是單一實體或任何事物,焦點會影響如何裁剪不同大小的圖像。以一種讓人注目且難忘的方式傳達概念。

在不同的裝置平台顯示不同大小和類型的圖片,應適當調整圖像大小。解析度是圖片加載速度的最重要因素。為了保持網路連結的速度,請盡可能降低解析度避免載入圖片時需要等待,讓用戶保持快速又順暢的產品體驗。再調降解析度時,需注意圖片解析度不足的時候會出現模糊或是不清晰的現象。

為了確保易用性,提供視覺障礙的用戶使用螢幕閱讀器,在圖片設置替代文字(或標題)。如果沒有替代文字,螢幕閱讀器用戶只會聽到 "圖片" 一詞,而沒有任何視覺細節。

圖片在應用程式的各種用途:

  • 通過圖片讓使用者在應用程式中感受身歷其境的故事。
  • 也可以透過步驟圖片教學提供說明,讓用戶逐步執行一系列的步驟。
  • 當用戶首次使用應用程式時,區塊中的圖像可以幫助用戶確認內容用途。
  • 共同風格的圖片可以幫助用戶快速瀏覽做出決定。
  • 在體驗過程中遇到困難或沮喪的點時 ( 例如: 錯誤畫面 ),可以使用圖片來取悅可用戶,協助用戶繼續使用應用程式。
  • 圖片可以幫助用戶了解內文的含義,保持區塊間的關聯性。
  • 橫幅廣告可以吸引注意力,提供相關訊息或是增強品牌形象。

縮圖是小型圖像,代表狹窄空間中的訊息。通常是提供不同主題內容的點擊目標,出現在區塊或列表等組件中用不同形狀呈現,以多種比例的縮圖來表現差異性藉此突出焦點區塊,並在縮圖上方放置文字或動作類元素,提供更多資訊。

縮圖用於:

  • 提供更多訊息
  • 提供其他主題的的內容
  • 協助預覽

訊息圖片可以幫助用戶理解內容,可以使用圖示傳達狀態、圖表顯示數值,傳達文字的意思及實體內容,訊息圖片只占用的空間很小,因此不需要成為介面上的重點。

Launch screen 啟動畫面

啟動畫面是用戶開啟您的應用程式時的畫面,啟動畫面可以減少用戶開啟應用程式的等待感受,也可以藉由啟動畫面帶給用戶愉快得體驗,而不是在啟動畫面顯示空白畫面。若應用程式已經在執行狀態,則不需要顯示啟動畫面,直接回到用戶操作停止時的畫面即可。

本圖片截取自 Material Design。

啟動畫面的類型:

  • 介面佔位區塊在開啟應用程式或切換畫面時顯示單色區塊預覽,提示應用程式正在執行載入,也可以預覽主題畫面的排版區塊。
  • 啟動畫面顯示品牌時,提供了短暫的品牌曝光。

對於短時間內執行完成載入畫面的用程式,或是不需要使用品牌形象推廣的產品介面,介面佔位區塊會快速顯示從啟動畫面到操作頁面的轉換,介面佔位區塊轉換的速度非常快速。

在應用程式啟動時,狀態列、應用列表及底部工作列表不顯示內容,直到動畫完成才顯示內容,避免用戶對於尚未開啟完成的介面執行操作而發生錯誤。在啟動過程中可以顯示具有細微動畫的介面佔位區塊,介面佔位區塊應顯示區塊內容的位置,避免位置發生意外變化導致用戶需要重新搜尋目標區塊。

在啟動畫面顯示品牌標誌或其他可以提高品牌記憶的元素,應避免在啟動畫面使用文字顯示(品牌標誌和標語除外),避免誤導用戶以為可以開始執行操作。


今天我們了解到當應用程式無法顯示項目的內容時,畫面呈現空白狀態,這時畫面可以顯示內容來告訴用戶當前狀態,或是提供其他方案讓用戶選擇。在任何時候請提供用戶幫助,幫助內容應易於查找,可以放置於畫面中的各個位置,提供用戶應用中的常見問題和疑慮的答案,用戶可以透過評論、回報錯誤以及提出尚未解答的問題。圖片可以增強用戶體驗,又可以表達品牌的視覺語言。圖片有助於傳達清晰的訊息並講述故事,並向用戶展示如何執行操作。啟動畫面可以減少用戶開啟應用程式的等待感受,也可以藉由啟動畫面帶給用戶愉快得體驗或是增強品牌形象。

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

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


上一篇
UI / UX 設計白皮書 / Material Design 導讀_Day18 Communication 通訊
下一篇
UI / UX 設計白皮書 / Material Design 導讀_Day20 Communication 通訊
系列文
UI / UX 設計白皮書 - Material Design 導讀30

尚未有邦友留言

立即登入留言