iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
1
自我挑戰組

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

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

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

今天讓我們繼續完成 Sound 聲音 的章節中的聲音屬性、聲音編排在文末還可以獲得免費的聲音資源,讓我們繼續看下去吧。


Sound 聲音

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

聲音屬性可以通過多種方式進行調整以創造特定的效果,也可以對聲音進行編排,表達層次結構關係並提升產品體驗。

Sound attributes 聲音屬性

本圖片截取自 Material Design。

聲音具有可以調整的特徵,可以把聲音調整視為一個 3D 畫面同時具有 X, Y, Z 軸線,畫面上 x 軸描繪一個特性(例如時間),y 軸描繪另一個特性(例如幅度)。表現特徵的技術稱為聲音可視化。也可以使用單軸繪製特性圖。

上方兩種為雙軸繪製特性圖,下方則為單軸繪製特性圖。

這些規則描述如何根據時間、頻率(聲音的高音或低音)或音色(聲音的特徵)來可視化聲音。將聲音表示為頻率的一種方法是在y 軸上顯示振幅,在 x 軸上顯示頻率。頻率顯示了音高。

要將聲音表示為音色的方法,可以在 y 軸上顯示振幅,在 x 軸上顯示音色屬性。音色在許多方面都可以用視覺表示,可以選擇顯示方式。

聲音的音色描述品質和特徵(不考慮音高或音量)。

可以根據用戶體驗進行設定的音色亮度(高頻聲音的數質): 明亮的聲音具有相當多的高頻成分使聲音更大。柔和的高頻成分較少,使其聲音微小而安靜,尤其是在嘈雜的環境中聲音更顯得柔和。每種聲音類型都適合不同的環境。高頻的音色富有趣味。柔和的音色會變得沉重和莊重。選擇產品的音色時,請考慮使用者以及每種聲音的播放環境。

在介面權重較低的元件使用低頻音調,對重要的通知使用明亮的音色。聲音越明亮,讓用戶在忙碌的環境中也可以聽到通知。

音調最能傳達個性、情緒和狀態變化,沒有音調的聲音可以傳達互動轉場並傳達觸覺回饋。音調指兩種類型聲音:
音調類型: 更具有旋律性音樂,包含主題和合聲。
非音調類型(非合聲類型): 類似於日常聲音和聲響,不同於傳統音樂作品。

一段具有旋律的音調,是有節奏的連續音調,簡單而簡潔的旋律可以在 UI 界面中以最低干擾的狀態重複。當一個重複狀態可以使用具有識別性的旋律,以快速有效的方式傳達簡單的情感和信息提示。較高的音調通常表示開始、開放、積極或保證。較低的音調通常表示結束或關閉。重複的音調通常表示等待、思考、或尚無進展。

沒有音調的聲音適用於非旋律的狀態,提供觸覺回饋、動態或擬態感。當互動狀態與真實世界的聲音重疊時(例如: 用相機拍照的快門聲),則使用模擬音效。其他非旋律的聲音包括畫面解鎖的滑音、選擇選項的敲擊聲。

在聲音設計中,動力學是指音量或響亮度的變化,無論是細微的或是宏亮得聲音,音量變化使聲音感覺自然逼真,動態變化可以凸顯聲音中令人感興趣的時刻,通過音樂敘事進展。沒有變化的聲音聽起來簡單平淡。

聲音的包絡線是指聲音振幅隨時間的變化。包絡線包含許多技術元件,最基本是聲音的上升(發起)和下降(衰退),上升指的是聲音的初始速度在達到最大振幅之前,達到最大震幅後隨之而來的是下降(直到振幅為零),衰減越大,聲音會越長且越慢。

特效聲音中分為殘響 ( Reverberation ) 和延遲,是可以增加空間感和深度感的效果,聲音的殘響和延遲越多,相對乾燥的聲音就越濕潤。為避免聲音效果在聲音中顯得過於突顯,需要謹慎使用特效聲音。殘響效果可具有更多的存在感,會產生在真實環境中聽到聲音的效果。應有目的的使用延遲特效,延遲使用聲音的迴音與原音混合來產生裝飾效果。

Sound choreography 聲音編排

編排產品中播放的聲音時,運用聲音來構成元件權重,針對不同聲音類型設定不同等級,相同類型的聲音應屬於同一個等級。等級較高的聲音傳達品牌或產品重要提示,在使用步驟中,聲音應該具有相關的屬性(例如音色,旋律或包絡線)。

等級 聲音 聲音類型
1 品牌聲音 具有記憶性
2 英雄聲音 慶祝的時刻
3 警報通知 鈴聲和警報通知
4 主要提示聲 主要提示聲
5 次要提示聲 功能性聲音

本圖片截取自 Material Design。

調號 ( key signature ) 是音調的定義特徵。它們有助於在互動狀態建立和諧關係。播放的聲音應使用相同或互補的調號。

通過主題表達聲音關係,展現狀態之間的互動,開啟和關閉的聲音關聯常使用相反的音調。

重複的互動狀態聲音(例如: 打字、滑動區塊、滾動或導覽列相關的聲音)模仿現實世界中聲音的變化,從這些微小的聲音變化得到回饋。滑掉區塊元件時每一個動作都具有聲音回饋,每次點擊區塊元件發出些微不同的聲音。

混音是將不同的音源組合成一個音頻的藝術。它涉及到調整每種聲音的音量、頻率、空間位置等,混音可以創建豐富、具有凝聚性的聲音。

在介面環境中的聲音應與增強使用者體驗的音效保持平衡關係,宴特定時刻隔離、遮蓋、混合和和平衡這些聲音的處理,可以使聲音正確的吸引使用者的注意力,藉此傳達聲音的含義。例如: 在播放音樂時出現通知時系統會發出通知聲,此時聲音優先權會從音樂中移開,直到通知被清除。

混音的細微差異取決於設計的整體體驗。在確定聲音應如何運用時,請考慮其他設備聲音,當程式執行和系統聲音都可能同時發生多種音效。例如: 當用戶聽音樂時,系統傳入通知的聲音。

針對用戶環境的聲音做改善,音效設計師可以通過使用設備和實際環境測試聲音來試聽聲音。通過聆聽真實條件下的聲音(使用軟體、硬體、環境噪聲、聲學和環境的其他因素),調整聲音在更真實的條件下播放。

還可以使用以下過程來更改聲音的屬性(例如: 音色),合成、重新編排、旋律變化、均衡和其他變化。

  • 均衡 Equalization(EQ)是一種增強或降低特定頻率的效果。針對進行播放的設備調整使聲音平均變化。

  • 根據不同的聲音等級,用一致的音量等級播放,例如: 來自通話的聲音可能比來自互動回饋的聲音大。

  • 通過硬體測量音量時,請考慮 "感知音量"(以 A 加權分貝或 dB(A)衡量),而不是完全依賴硬體測量。

  • 音量控制應反應在用戶聽到聲音的方式,而不是機器上的聲音。音量增加應使用刻度(而不是線性)音量增加。

tags: 有關音量的更多信息,請參考 Google 音頻音量指南執行的操作。

音效檔案播放可能會根據產品的硬體和軟體而變化,減少檔案的大小 ( 可能會因此降低音質 ),壓縮檔案時應注意音效是否出現雜音、失真或雜散頻率。

  • 使用不同檔案格式 ( mp3或ogg ) 將檔案大小壓縮到最小
  • 降低位元深度和採樣率
  • 在檔案的開頭及結尾剪輯掉有靜音的部分

音效的最終格式取決於系統等級限制。嘗試選擇系統支援的最佳(最無損)格式,尤其是按鍵聲音。

tags: 有關支援的檔案格式的更多訊息,請參考 Android 開發人員支援媒體文件資料

Sound resources 聲音資源

Material 提供下列可以使用於產品上的免費聲音資源 For Free~

本圖片截取自 Material Design。
  • 警報通知
  • 英雄聲音
  • 系統音效
  • 輔助系統音效

手刀下載 :+1: CC0 聲音資源吧~

tags: 下載這些文件,即表示您同意 Google服務條款。的Google隱私權政策 介紹如何在此服務中處理數據。

今天我們了解到聲音可以具有不同的屬性及特徵,運用不同的編排可以使用在各種元件狀態及情境事件上,在應用程式的層次中依序建立聲音回饋,藉此讓使用者得到更多回饋,提升使用者體驗。

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

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


上一篇
UI / UX 設計白皮書 / Material Design 導讀_Day10 Sound 聲音
下一篇
UI / UX 設計白皮書 / Material Design 導讀_Day12 Iconography 影像學
系列文
UI / UX 設計白皮書 - Material Design 導讀30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言