昨天我們了解到 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 通訊 的章節，每天一點一點的逐個擊破，找出那些藏在細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！

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