聽覺可視化在交互設計中的應用研究

[摘 要]以陜西師范大學長安校區不高山的視聽環境為主要依據，研究社交媒體大環境下視聽交互間的關系架構和展現形式。利用設計“五感“中的聽覺部分對校園中本區域進行分貝調研和分析，再結合該校各類人群對視聽環境的需求，從而打造一款可以與當時環境相匹配的聽覺交互App，讓學生可以多方面對不高山周圍區域進行聽覺可視化信息閱覽，進而滿足越來越多人的登山需求，具有一定的科學性、便捷性、可行性。

[關鍵詞]設計“五感”；聽覺可視化；交互設計

[中圖分類號]J50 [文獻標識碼] A [文章編號] 2095-7556（2024）8-0031-03

本文文獻著錄格式：李東遙，王進華.聽覺可視化在交互設計中的應用研究：以陜西師范大學長安校區不高山為例[J].天工，2024（8）：31-33.

我們已邁入信息化時代，獲取信息的方式多樣，交互設計給我們提供了更加便捷的方式。近幾年，交互設計主要應用于社交媒體和生活便捷性指南App，其中不乏許多系統不夠健全的服務設計，主要體現在可視化信息不完整及人性化操作設計有所欠缺，給使用者造成不必要的麻煩。另外，筆者在日常生活中所要用到的App有所空缺，需要對其進行創新設計和相關調研。陜西師范大學長安校區不高山休閑導視App有利于增強校園活動的便捷性，滿足適用人群的需求，由此進行大量的調研和實地考察。

一、聽覺可視化應用研究分析

第一個設計案例是來自哥本哈根交互設計學院Herin Haramoto的一個交互設計作品，Color Tone是一套服務型操作工具，供哥斯達黎加的失聰或聽障人士體驗聲音。它允許他們通過視覺和觸覺體驗聲音來訪問聲音及其包含的信息，適用于依靠聽力來分享經驗和感受的人。有兩個主要組件，一個是便攜式設備，它允許人們通過以非聽覺方式體驗周圍的聲音來了解聲音之間的差異，還有一個音樂（聽覺、視覺和觸覺）制作工具，它允許人們使用不依賴聲音的顏色和觸覺，并與其他依賴聽覺的人分享這種體驗。整個設計不僅體現了對當代殘疾人群的關心，更體現了人性化的服務方式，拉近了人與人之間的距離，具有一定的社會公益性。

二、聽覺可視化應用研究設計方法

在聽覺可視化設計中有很多種表現方式，不同的表現形式可以使觀者產生不同的心理感受。從物理學角度來看，物體震動產生波形，傳入耳朵，進入大腦，通過聲音聯想相應場景。不同的設計方式，大腦的聯想自然會有所不同。

（一）聽覺可視化的表達方式

1.通過色彩進行識別

聲音是一種對人體大腦的刺激，從而在大腦中形成聯覺反應。而聯覺反應中，色彩占據主要地位。目前對色彩的研究主要通過物理層面、生理層面和心理層面三個方面來進行。在可視化設計中，不同顏色可以給觀者不同的心理感受。人們對顏色的心理反應也是對客觀世界的主觀反映。色彩是對客觀事物的傳達，在界面設計中普遍用不同色彩來烘托產品的氛圍，使界面與人們的心理產生關聯，提升觀者的視覺體驗。

2.通過信息圖表進行識別

信息圖表在可視化設計中占據主要地位。不同的信息圖表給人的直觀感受也不同。信息圖表的基礎是數據，如文本、統計數據、抽象概念等。數據的可視化加工主要指對這些數據進行歸類、統計和分析，依靠可視化技術以易受、生動、高效的可視化圖形闡釋意義。信息圖表不只是反映單一維度的數據，當多種維度的數據被收集整理后，便能形成信息之間的相互關系與發展趨勢。其主要包括：數字的形象化呈現（如柱狀圖、餅圖、各種立體圖形）、多種數據的對比（如量的關系、比例關系、層次關系）、數據在時間坐標中的變化（如展現事物動態變化過程）、數據在空間坐標上的對比（如地圖）等。

三、聽見山App設計理念

（一）靈感來源

隨著時代的發展，交互設計經常出現在我們的日常生活中，包括我們熟知的美團、美圖秀秀、小紅書等App，它們都是通過界面UI設計的方式展現在我們面前。陜西師范大學不高山作為休閑娛樂的好去處被人們所青睞。在前期調研中，筆者了解到在不同時間段，人流量有所不同。所以為了滿足不同人群的需求，筆者致力于打造一款完整的服務型App，以幫助不同人群，滿足他們的活動需求。

（二）設計思路

筆者旨在打造一款以不高山為重點考察對象的服務型App（聽見山/hills visible），它主要以聲音可視化、時間地點、顏色覆蓋為元素，讓使用者為去不高山學習、散步等提前準備。例如，想在安靜的環境下學習，App就會提前為使用者檢測區域內的噪音情況，通過聲音可視化的方式直觀提供給使用者。App會以顏色的變化為使用者辨別當時的環境音量，也會自動為使用者辨別是人為因素還是自然因素，從而顯示人口密集度，讓使用者更便捷地了解不高山的狀況。此外，該App還有采風功能，可以隨時進行本區域內的錄音功能，并以不同種類的波形讓使用者體驗聲音可視化的樂趣。

四、聽見山App設計實踐應用

（一）標志設計

在標志設計中，為了達到簡潔明了、顏色大方、視覺沖擊力強的效果，筆者在Logo的設計過程中經過多番的考量與修改。為了讓Logo的設計思路具有邏輯性和科學性，筆者決定參考調研時的官方分貝噪音圖，通過在不高山的所見所聞，經過移動設備自帶的聲音檢測裝置進行實地測量，將測量結果數值與分貝噪音圖標進行參考和比對，通過不同數值的大小與分貝顏色進行搭配組合，形成不同區域的顏色劃分。除此之外，再從地圖中查詢不高山的地理位置進行區域內海拔高度分析，分析后發現不同海拔高度的地區，分貝值也有所不同。所以筆者對不高山進行了等高線的科學劃分（見圖1），將不同高度的分貝顏色進行組合。整個Logo的外形也是由一個抽象的“山”字組成（見圖2），整個過程具有一定的科學性、美觀性。

（二）設計元素提取

通過前期的調研分析，筆者認識到打造一款服務型交互App具有一定的必要性。所以筆者通過對聲音的調研分析，并根據由香港環境署官方發布的分貝噪音可視圖進行結合設計，想通過對不高山內自然景象及其聲音的分貝特點，運用科學儀器提取聲音波形進行再設計。主要提取四種聲音：踩落葉聲、鳥叫聲、溪水聲、相機快門聲。根據四種聲音的特性進行頭腦風暴練習，聯想到視聽覺巧克力的掰碎聲、水槍發射聲、水流聲、機械運作聲，從而進行四種聲音的可視化波形設計（見圖3），后期將各種波形運用到App的界面和視圖當中。

（三）交互流程圖及界面框架

在進行界面內容設計前還需要有一個完整的邏輯思維流程圖（見圖4），這樣既能整理前期的信息，又能為后期的界面流程帶來便捷。交互流程圖主要由三部分構成，分別是視圖部分、統計圖表部分、錄音功能部分。其中視圖部分包括五個主要信息點擊框：（1）地點可以準確判斷個人的具體位置，方便后期進行活動信息實時導航；（2）地圖可以準確判斷地理位置，包括方向信息、地形特征以及海拔高度等；（3）線路可以準確判斷線路信息，具體指明道路前進方向信息以及目的地的導航信息；（4）距離可以準確判斷長短距離，以國際單位m計算；（5）波形可以顯示各種波形特征，具有可識別性和設計性。統計圖表分為四個部分：（1）搜索框可以搜索任何地點信息和活動信息；（2）信息可以通過信息圖表進行準確分析和展示；（3）活動包括時間、地點、日期、方式；（4）分享包括圖片、便利貼、喜愛、信息。這些都具備一定的社交功能，可以隨時隨地進行瀏覽查閱。錄音部分主要包含錄音、時間段以及小四項（音強、音長、音高和音質），這里的錄音功能與筆者平時移動設備的錄音功能有所不同，區別在于它可以通過錄入的聲音對聲音進行波形自動識別提取，形成波形特征，產生聽覺可視化的效果。

界面框架起到承上啟下的作用。筆者通過黑白灰的色彩形式對界面框架進行分布布局，在每個點擊框以及交互流動框進行注釋，讓使用者一目了然地對該App界面有更詳細、深入的了解，后期的界面設計會依據界面框架進行內容信息填充以及色彩的搭配，讓整個頁面活靈活現，具有設計感和流動感。

（四）交互界面設計

交互界面設計中，筆者采用手繪的方式，將不高山的內部景象繪制出來，整體以錯位型的三個疊加頁面進行布局，使封面具有層次感。登錄界面（見圖5）主要是左右展開結構，包含學生的學號、密碼以及密碼找回、幫助和新用戶注冊功能。統計圖表界面（見圖6）主要負責收集各類信息。例如，人口聚集狀態、朋友圈，以及便利貼、留言私信、被點贊、被收藏、圖片等，主題顏色以綠色為主。視圖界面以地圖、地點圖片、分貝顏色以及建議為主，系統可以根據聲音分貝大小對該地進行視覺化顏色分析，并直接給出地圖中的顏色劃分區域。統計圖表二級界面以聲音的可視化為基礎，對人數進行準確統計，顯示男女比例、活動比例以及活動場所比例，以月為單位進行數量統計。視圖中的第二部分以活動建議為主，系統會根據使用者對不同活動的選擇，進行相應的數據和聲音視覺化分析，根據選擇活動的數據高低對使用者進行歸納分析，是否適合這個時間段進行此項活動，以及對活動點對點距離的展現和分貝監測覆蓋。錄音功能界面（見圖7）以消費者錄音為主，系統會根據使用者錄音的內容進行自動分析和視覺化展現，包括聲音的四項要素，并對錄音內容進行不同種類的波形設計，讓使用者對聲音產生濃厚興趣。

（五）效果展示

最終App的呈現效果將運用在平板電腦上（見圖8），后期將會對移動通信設備手機端進行設計，界面的內容信息和顏色不會有所改變，后期在不同的節日或者特殊時間段也會有主題活動的介入以及界面主題色彩的不斷更新。

五、結束語

本文對不高山進行了聽覺可視化設計實踐，探討了校園App數字化設計創新應用形式的可行性。數字化技術的發展對App開發與傳播形成了顛覆性的改變。通過研究發現，基于聲音可視化技術，不僅豐富了App的設計內涵，還創新了App數字化設計的形式，使校園App更具市場潛力，在增強傳播性的同時進一步提升了設計感。

參考文獻：

[1]王佳祺. 聲音情感信息的沉浸式可視化研究[D].北京：北京印刷學院，2022.

[2]高玉嬌，覃京燕，陶晉.手機APP交互設計中動態色彩的視知覺研究[J].包裝工程，2016，37（8）：134-137.

[3]張穎.交互界面設計中色彩對受眾的引導[J].工業設計，2021（2）：71-72.

[4]黃雅堃.基于可視化設計的信息圖表在報刊編輯中的應用[J].中國出版，2015（1）：45-48.