iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
1
自我挑戰組

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

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

  • 分享至 

  • twitterImage
  •  

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

今天我們進入到 Material Design 中 Communication 通訊的最後一天,今天會了解快速入門、離線狀態及寫作,讓我們繼續看下去吧。


Communication 通訊

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

Onboarding 快速入門

快速入門是一種虛擬的開箱體驗,可幫助用戶開始使用應用程式。快速入門流程可以幫助用戶快速熟悉應用程式,從啟動到操作特定目標的過程一一給予用戶引導,在設計快速入門時要考慮前後步驟的關聯性。只對新用戶顯示快速入門,不要對既有客戶顯示。

列舉快速入門可以為用戶提供的三種狀態協助:

  • 當用戶已經安裝應用程式,就不會想再看到推銷訊息,這時快速入門可以歡迎用戶並提供其他服務。
  • 用戶可能會希望不閱讀說明直接開始操作,這時快速入門應該設計可以隱藏或是開啟的按鈕,或是在未來需要時可以提供幫助。
  • 用戶在尚未熟悉應用程式準備開始學習時,快速入門可以設計在 7 天內的達標任務,這項動作可以增加用戶參與感及保留度。

快速入門有三種模式: 自訂選項、快速開始、最佳用戶效益。

  • 自訂選項: 提供用戶自訂選項,選擇體驗。
  • 快速開始: 直接在應用程式中啟動。
  • 最佳用戶效益模組: 顯示輪播畫面或簡短的動畫,突出顯示應用程式的功能優點。

使用通用及識別度高的 UI 樣式及簡易的步驟來設計最適合用戶的快速入門。並判斷快速入門在什麼時候使用、什麼時候不該使用及前述兩種方式組合使用。

本圖片截取自 Material Design。

自訂選項提供用戶通過一系列的簡短選擇來自訂快速入門選項進行體驗。這種體驗可以教育用戶,用戶可以依照需求操控即將顯示的畫面。為用戶提供的選擇會影響您的快速入門是否成功。選擇應該: 有意義並且具有顯著影響、提供新訊息、內容簡短。

在快速入門中詢問用戶希望通過應用程式得到的通知,將對用戶體驗產生有意義的影響。不要在快速入門中包含對用戶沒有影響的選擇,可以在一段時間後詢問用戶是否要更新通知選項,但這不會影響用戶的體驗。

在正常操作中不會提到用戶想要設定的內容,此時詢問用戶的偏好會顯得重要並且有價值。這些選擇在正常使用應用程式時會變得明顯,並且不會改變首次執行的體驗。

在同一個畫面提供的選擇,或使用步驟性提供互動連接,選項最多不要超過十個。請考慮快速入門過程中如何與用戶的首次體驗保持關聯性。快速入門結束後應顯示應用程式主要畫面上,用戶根據剛剛學到的內容輕鬆的進行操作。

消費性應用程式可能會詢問用戶感興趣的內容,提供用戶選擇主題或是 "自訂" 興趣主題,應用程式依照結果提供相關的主題。常見提供用戶選擇的設計樣式包括: 開關清單、網格視圖、清單。

當用戶直接開始操作介面,而未顯示任何快速入門(登入和設定除外),及為快速開始。快速開始使用戶能夠快速進入應用程式的核心功能,通常優先處理第一個關鍵操作,還可以提供一種可選的方式來了解更多訊息或尋求幫助。

此時應該多鼓勵用戶互動 ( 提供使用戶入門選項 ),而不是讓用戶待在空白畫面上。如果首次體驗應用程式的時間即將結束時 ( 快速入門完成 90% 時 ),用戶仍不清楚如何操作應用程式,可以提供學習如何使用應用程式的教學。

在用戶開始操作前 7 天,選擇參與度最近密的操作,或是引入核心功能提供用戶未嘗試過的操作的提示。

最佳用戶效益快速入門模組包含一個簡短的自動輪播畫面或動畫提要,突出顯示使用應用程式的主要效益。最佳用戶效益快速入門模組應展示三項主要效益。這些效益應在重要時刻將應用定位為相關且個性化,而不是給出說明或描述功能。請考慮:

  • 應用程式解決的問題
  • 應用程式可帶來的主要效益
  • 該應用程式的 "牙刷功能"(每天使用一次或兩次的功能)

每兩到三秒鐘自動輪播三個插圖並顯示分頁按鈕,提供用戶前進到下一個步驟或畫面,如果用戶觸摸輪播畫面,應停止自動輪播的功能。在整個輪播中顯示 "開始使用" 按鈕開始播放輪播,直到用戶點擊 "開始使用" 動作為止。

最佳用戶效益快速入門模組也可以提供動畫或影片教學,在畫面中顯示 "開始教學" 按鈕,不需要提供分頁按鈕。

如果用戶第一次使用應用程式,先顯示可以為用戶帶來的效益,在後續操作設計快速入門連結首次體驗。快速入門後看到的介面應該使用戶可以輕鬆的學到內容並進行操作。

在整個體驗過程中使用一致的視覺效果: 人物、環境、風格、樣式、按鈕顏色,為按鈕和圓圈創建畫面的來統一故事。將視覺效果簡化為傳達概念所需的基本要素。

最佳用戶效益的設計應與文字相輔相成,如果通過文字能更精準的表達想法,請使用文字而不是圖片,確保背景和文字顏色保持最小對比度,確認寬高比為 1:1 的插圖適用所有平台螢幕,實現輔助功能。

可穿戴設備和桌上型電腦的快速入門體驗使用不同的互動排版方式。在手機、平板、電腦上設定不同的行高及對齊方式,滿足不同裝置的顯示及排版。

手機、平板和電腦

本圖片截取自 Material Design - Onboarding Specs。

手機、平板

本圖片截取自 Material Design - Onboarding Specs。

電腦

本圖片截取自 Material Design - Onboarding Specs。

Offline states 離線狀態

離線狀態允許用戶無需開啟網路即可與應用程式互動。當用戶網路緩慢、斷斷續續或完全沒有網路時,調整功能或應用程式的行為。網路受限時顯示可用內容,而不是完全不顯示何內容。使用 UI 設計來說明離線功能如何運作並傳達預期目的。

本圖片截取自 Material Design。

如果您的應用程式具有離線狀態下可用的功能,而某些功能則不可用,應顯示當前狀態為離線還是連線狀態,要表現目前操作處於離線狀態,請顯示 offline pin icon 離線圖標 文字標籤為 "offline ( 離線 ) "。例如: 可以從離線狀態管理離線文件。

如果功能無法離線使用,請使用 雲端關閉圖示。此圖示僅在離線狀態時顯示。建議與 "offline" 一起顯示。應用程式會標示何時為離線狀態,並提供有關離線時可以做什麼的提示。或是在具有連線時提供下載功能,提供未來網路離線時使用。

為用戶提供一個管理離線設定的地方,請使用離線圖釘圖示加上 offline areas 文字。

離線功能提供用戶可以造訪以前下載的文件,例如: 影片和網站。要離線使用它們,用戶必須在具有網路連接時將文件下載到設備上。在可以下載的項目加上下載圖示和 " download ( 下載 ) " 並加上文件大小,幫助用戶了解檔案大小。

下載文件後,通過顯示離線圖標來表明它可以離線使用。


左圖為下載圖示,右圖為離線可用圖示。

要顯示下載的項目可以離線使用,請顯示將下載圖示轉換為離線圖標的動畫。並提供 進度指標 了解下載進度。

在裝置空間不足時,為了獲得更多空間用戶可以刪除設備上的文件。您的應用程式應允許用戶刪除所有已下載的文件,在下載文件區域中顯示提可以刪除的圖示。

Writing 寫作

文字可以被任何地方的任何人理解,不論文化或是語言。文字應清晰、準確和簡潔,可以增加介面可用性並建立信任。此篇內容 Material 提供很多 寫作例句,在設計上碰到不知道怎麼表現時可以參考。

方便用戶導覽和發現,請在用戶視覺範圍內用簡短的方式呈現文字,在一般視覺範圍內用戶只能關注有限數量的文字。在編寫文字時使用簡單、直接的語言,專注於目前功能編寫少數幾個關鍵概念的說明,使內容易於理解。

本圖片截取自 Material Design。

在介面中您需要使用第一人稱(我,我或我的用戶)或第二人稱(您或您的用戶)來稱呼用戶,在使用稱呼時取決於哪種情況最適合且最清楚。避免合併第一人稱和第二人稱使用,造成用戶混淆。

建議在以下情況下使用稱呼形式:

  • 第一人稱 "我" 或 "我的":在某些情況下,這種形式的稱呼強調用戶對內容或動作的擁有權。
  • 第二人稱 "您" 或 "您的":這種對話風格在大多數情況下都適用;就像界面直接與用戶說話一樣。

文字傳達基本細節,用戶可以專注於自己的目標。例如: 傳達當前狀態或操作項目不可缺少的細節。( 有時介面可能不包含任何文字。)

使用在所有閱讀等級上都能清晰易懂的常用詞彙,避免使用專用術語或名稱,在 UI 功能中以一致的方式使用詞彙。

使用現在時間來描述產品行為,避免使用將來的時間來描述產品。( 例如: 撰寫訊息發送,而不是撰寫訊息已經發送 )。當您需要描述過去或將來的時間來撰寫時,請使用簡單的動詞形式。

在編寫時需要撰寫數字的複數才使用文字與數字的混合 ( 例如: 輸入兩個 3 ),否則請使用數字 1, 2, 3 而不是一、二、三。

為了幫助使用者快速閱讀文字,請避免在不必要的地方使用標點符號。請勿在標籤、按鈕文字、列表項目符號與提示視窗標題的文字使用句點。標點符號通常使用在一段文字或是一段句子後面包含連結時使用。在標籤上方不使用冒號。

當一段短文描述一個目標以及實現目標需要採取的行動時,請從該目標開始撰寫描述。

在用戶的第一次操作時,不需要描述每個細節。而是當用戶瀏覽功能並需要更多訊息提示時,此時顯示有關功能的更多詳細信息。

標籤指示操控元件或元素的功能,它們出現在操控元件本身或附近,例如: 按鈕或開關上的文字。要引用 UI 操控元件或元素,請標示標籤文字,不要撰寫操控元件或元素的類型,避免用戶混淆。

以下組件具有特定的寫作指南


今天我們了解到快速入門流程可以幫助用戶快速熟悉應用程式,從啟動到操作特定目標的過程一一給予用戶引導。離線狀態允許用戶無需開啟網路即可與應用程式互動。介面中的文字應清晰、準確和簡潔,可以增加介面可用性並建立信任,錯誤的撰寫方式容易造成用戶混淆。

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

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


上一篇
UI / UX 設計白皮書 / Material Design 導讀_Day19 Communication 通訊
下一篇
UI / UX 設計白皮書 / Material Design 導讀_Day21 Machine learning 機器學習
系列文
UI / UX 設計白皮書 - Material Design 導讀30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言