iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
1
自我挑戰組

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

UI / UX 設計白皮書 / Material Design 導讀_Day10 Sound 聲音

  • 分享至 

  • twitterImage
  •  

昨天我們了解到 Typography 文字排版樣式等級,也了解每個字母都存在著許多學問,需要注意文字段落包含的字數、字體間距、行距,都與易讀性及可讀性有著密不可分的關係,在不同國家使用的語言外觀上有著許多差異,需要進行微調來保持畫面的一致性。

今天我們進入到 Material Design 中 Sound 聲音的章節,由於內容涵蓋的範圍較廣,我們會分成兩天來介紹 Sound 聲音,今天會先了解關於聲音和將聲音運用到 UI 兩個部分,讓我們繼續看下去吧。


Sound 聲音

About sound 關於聲音
Applying sound to UI 將聲音運用到 UI
Sound attributes 聲音屬性
Sound choreography 聲音編排
Sound resources 聲音資源

About sound 關於聲音

人有五官可以接收各種不同的資訊,聽覺、視覺、觸覺、嗅覺、味覺,在介面設計上我們可以利用聲音傳達訊息增進用戶的體驗,聲音也可以營造一種舒適與安全的感受,聲音可以幫助記憶品牌如同企業標語般的存在,聲音表現產品的個性和美感也藉由聲音傳達回饋,聲音的選擇應使用直覺且易於理解的,在必要時我們才使用聲音傳達。

本圖片截取自 Material Design。

UI 中使用的聲音應該像一個協調良好的和聲樂團,給人舒適的聽覺感受,同一個系統狀態彼此之間在介面中都使用相同的聲音,也可以使用不同類型的聲音來創造特定的效果與辨別系統狀態,在 UI 介面中可以同時使用一種或是多種聲音,我們常見的介面設計中會出現三種聲音分別為 : 音效、音樂、語音,雖然音樂和語音是產品背景音效的一部分,但是我們重點關注的地方在如何增進用戶的體驗。

大多數的介面設計都可以在視覺處理上完成,其他部分可以使用聲音來強化訊息的傳達,表達情感教育用戶互動,建立與用戶聯繫的另一種方式。聲音在設計上可用於 :

  • 將元件與特定聲音連結再一起
  • 聲音可以表達情感與品牌個性
  • 在互動元件與聲音串聯來傳達層次結構
  • 提供用戶使用上的回饋

在 UI 上講故事可以使用音樂來表達心情,當圖像與動作配對時,音樂可以提升整體的敘述和感受,音樂可以產生情感共鳴、也可以在重要時刻出現,一段音樂也可以講故事,甚至幫產品打廣告,例如: 下圖可以使用於影音型的訂閱 UI 在訂閱滿周年時出現的畫面與音效。

在聲音和音樂無法達實現的地方,我們可以使用口頭語言將語音和文字轉語音來傳達信息,提供對話服務或是增強個性語氣,達成交流複雜的訊息。

Applying sound to UI 將聲音運用到 UI

在關鍵時刻使用聲音可以表達功能狀態及增強互動,通過將動作或狀態更改的同時播放音效,聲音提供了更多互動的回饋讓聲音帶有意義,可以為用戶增加體驗感受。這些聲音稱為 earcons 聽覺介面,聲音可以表示訊息、動作、事件也能同時表達產品的情感與個性。

本圖片截取自 Material Design。

在世界上存在著各種不同的聲音,聽覺介面在不同的情境下播放模擬真實世界的聲音,稱之為 skeuomorphic 擬真音效,可以讓使用者有身歷其境的感受,也可以創造聲音來表達抽象概念,抽象的聲音可以使用輕鬆得音調,傳達互動完成的訊息。

在傳達情緒狀態時可使用裝飾性的聲音,來增強表達力或趣味性並保留情緒共鳴的時刻,僅用於強化產品主題和獨特狀態的瞬間,在設計上必須盡量少使用裝飾性聲音,減少用戶對聲音的疲勞感。

在許多情況下不建議使用音效,太多的音效會降低用戶的注意力和舒適度。在 UI 設計上使用少許的音效可以獲得焦點與關注,在聽覺介面中安靜的狀態與適當應用聲音是同等重要的,如果一直發出聲音就像一隻蚊子嗡嗡嗡一直在用戶周圍飛舞,最後難逃被宰殺的命運阿。

在任何情況下聲音都應該提升視覺體驗,而不是創造太多的聲音干擾使用者的注意力,不適合使用聲音情況有: 使用者經常執行的動作、關閉鈴聲通知的用戶或是較為隱私需要謹慎處理的用戶畫面。

在重要時刻響起如英雄降臨般的聲音,能夠喚起情感或表達喜慶的產品和品牌形象,常出現於互動狀態上可以表達成功、成就、回報感受,例如: 使用英雄聲音來慶祝用戶完成所有任務。英雄聲音還可以運用在慶祝用戶採取重大行動、歡迎新用戶使用應用程式、確認產品用途的關鍵時刻。

通知音效是引起用戶注意的重要方式,在聽覺介面比其他聲音更頻繁的出現,提供強調互動狀態的聲音識別,通知音效在設計時要注意使用者與裝置的距離,在可變範圍與嘈雜環境仍然可以聽見通知音效,通知音效播放時間通常比英雄聲音短,因應多次播放的元件狀態來達成通知的任務,音效本身可以隨著節奏、音調和頻率變化而改變,藉此吸引聽覺的注意力。在設定上建議允許用戶設置個性化提醒音效,提供從基礎音效到非常豐富的裝飾性音效。

常見的通知音效用於彈出式通知、鈴聲、鬧鐘和計時器,使用明亮的音色和充滿活力的成分來引起注意或傳達緊急信息。

除了在操作系統或設備時產生的系統聲音,也可以在系統互動上添加聲音,提供使用者良好的回饋,例如: 點選導覽列、資料輸入、確認用戶的直接行為 ( 開啟或關閉、選擇或取消 ),系統聲音也是頻繁出現的音效之一而且在整個體驗過程中它們都是重複的,系統聲音需要保持簡單和低調。(不要讓使用者感到反感或多餘)。

輔助的音效在 UI 上播放的頻率較低,以功能為導向,告知用戶狀態更改或指示不頻繁的操作。例如: 刷新畫面和無法點選的按鈕,通過微小聲音提醒用戶。

環境聲音屬於裝飾性的音效,在傳達產品的個性或品牌時表達情感。需要增強體驗時可以將環境聲音放置在任何位置例如: 啟動歡迎體驗的步驟和主要畫面播放背景音效,用於傳達畫面位置與表達情感調和,環境聲音提供氣氛,而不會分散用戶執行介面的注意力,在不同狀態時透過改變音樂音調來表現,環境聲音可以由音樂、環境音或其他可以產生氣氛的聲音。


今天我們了解到 Sound 聲音可以分為音效、音樂、語音三種,將這些聲音帶入 UI 可以適時提供使用者訊息或狀態回饋,不同聲音可以傳達不同的情境與感受,英雄般的聲音帶給人歡愉的感受、通知的音效吸引注意力、系統聲音提供更多回饋,環境聲音可以更融入氣氛。在關鍵時刻使用聲音可以表達功能狀態及增強互動,聲音提供了更多互動的回饋讓聲音帶有意義,可以為用戶增加體驗感受。

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

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


上一篇
UI / UX 設計白皮書 / Material Design 導讀_Day09 Typography 文字排版
下一篇
UI / UX 設計白皮書 / Material Design 導讀_Day11 Sound 聲音
系列文
UI / UX 設計白皮書 - Material Design 導讀30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言