聽(tīng)覺(jué)可視化在交互設(shè)計(jì)中的應(yīng)用研究

[摘 要]以陜西師范大學(xué)長(zhǎng)安校區(qū)不高山的視聽(tīng)環(huán)境為主要依據(jù)，研究社交媒體大環(huán)境下視聽(tīng)交互間的關(guān)系架構(gòu)和展現(xiàn)形式。利用設(shè)計(jì)“五感“中的聽(tīng)覺(jué)部分對(duì)校園中本區(qū)域進(jìn)行分貝調(diào)研和分析，再結(jié)合該校各類人群對(duì)視聽(tīng)環(huán)境的需求，從而打造一款可以與當(dāng)時(shí)環(huán)境相匹配的聽(tīng)覺(jué)交互App，讓學(xué)生可以多方面對(duì)不高山周?chē)鷧^(qū)域進(jìn)行聽(tīng)覺(jué)可視化信息閱覽，進(jìn)而滿足越來(lái)越多人的登山需求，具有一定的科學(xué)性、便捷性、可行性。

[關(guān)鍵詞]設(shè)計(jì)“五感”；聽(tīng)覺(jué)可視化；交互設(shè)計(jì)

[中圖分類號(hào)]J50 [文獻(xiàn)標(biāo)識(shí)碼] A [文章編號(hào)] 2095-7556（2024）8-0031-03

本文文獻(xiàn)著錄格式：李東遙，王進(jìn)華.聽(tīng)覺(jué)可視化在交互設(shè)計(jì)中的應(yīng)用研究：以陜西師范大學(xué)長(zhǎng)安校區(qū)不高山為例[J].天工，2024（8）：31-33.

我們已邁入信息化時(shí)代，獲取信息的方式多樣，交互設(shè)計(jì)給我們提供了更加便捷的方式。近幾年，交互設(shè)計(jì)主要應(yīng)用于社交媒體和生活便捷性指南App，其中不乏許多系統(tǒng)不夠健全的服務(wù)設(shè)計(jì)，主要體現(xiàn)在可視化信息不完整及人性化操作設(shè)計(jì)有所欠缺，給使用者造成不必要的麻煩。另外，筆者在日常生活中所要用到的App有所空缺，需要對(duì)其進(jìn)行創(chuàng)新設(shè)計(jì)和相關(guān)調(diào)研。陜西師范大學(xué)長(zhǎng)安校區(qū)不高山休閑導(dǎo)視App有利于增強(qiáng)校園活動(dòng)的便捷性，滿足適用人群的需求，由此進(jìn)行大量的調(diào)研和實(shí)地考察。

一、聽(tīng)覺(jué)可視化應(yīng)用研究分析

第一個(gè)設(shè)計(jì)案例是來(lái)自哥本哈根交互設(shè)計(jì)學(xué)院Herin Haramoto的一個(gè)交互設(shè)計(jì)作品，Color Tone是一套服務(wù)型操作工具，供哥斯達(dá)黎加的失聰或聽(tīng)障人士體驗(yàn)聲音。它允許他們通過(guò)視覺(jué)和觸覺(jué)體驗(yàn)聲音來(lái)訪問(wèn)聲音及其包含的信息，適用于依靠聽(tīng)力來(lái)分享經(jīng)驗(yàn)和感受的人。有兩個(gè)主要組件，一個(gè)是便攜式設(shè)備，它允許人們通過(guò)以非聽(tīng)覺(jué)方式體驗(yàn)周?chē)穆曇魜?lái)了解聲音之間的差異，還有一個(gè)音樂(lè)（聽(tīng)覺(jué)、視覺(jué)和觸覺(jué)）制作工具，它允許人們使用不依賴聲音的顏色和觸覺(jué)，并與其他依賴聽(tīng)覺(jué)的人分享這種體驗(yàn)。整個(gè)設(shè)計(jì)不僅體現(xiàn)了對(duì)當(dāng)代殘疾人群的關(guān)心，更體現(xiàn)了人性化的服務(wù)方式，拉近了人與人之間的距離，具有一定的社會(huì)公益性。

二、聽(tīng)覺(jué)可視化應(yīng)用研究設(shè)計(jì)方法

在聽(tīng)覺(jué)可視化設(shè)計(jì)中有很多種表現(xiàn)方式，不同的表現(xiàn)形式可以使觀者產(chǎn)生不同的心理感受。從物理學(xué)角度來(lái)看，物體震動(dòng)產(chǎn)生波形，傳入耳朵，進(jìn)入大腦，通過(guò)聲音聯(lián)想相應(yīng)場(chǎng)景。不同的設(shè)計(jì)方式，大腦的聯(lián)想自然會(huì)有所不同。

（一）聽(tīng)覺(jué)可視化的表達(dá)方式

1.通過(guò)色彩進(jìn)行識(shí)別

聲音是一種對(duì)人體大腦的刺激，從而在大腦中形成聯(lián)覺(jué)反應(yīng)。而聯(lián)覺(jué)反應(yīng)中，色彩占據(jù)主要地位。目前對(duì)色彩的研究主要通過(guò)物理層面、生理層面和心理層面三個(gè)方面來(lái)進(jìn)行。在可視化設(shè)計(jì)中，不同顏色可以給觀者不同的心理感受。人們對(duì)顏色的心理反應(yīng)也是對(duì)客觀世界的主觀反映。色彩是對(duì)客觀事物的傳達(dá)，在界面設(shè)計(jì)中普遍用不同色彩來(lái)烘托產(chǎn)品的氛圍，使界面與人們的心理產(chǎn)生關(guān)聯(lián)，提升觀者的視覺(jué)體驗(yàn)。

2.通過(guò)信息圖表進(jìn)行識(shí)別

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

三、聽(tīng)見(jiàn)山App設(shè)計(jì)理念

（一）靈感來(lái)源

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

（二）設(shè)計(jì)思路

筆者旨在打造一款以不高山為重點(diǎn)考察對(duì)象的服務(wù)型App（聽(tīng)見(jiàn)山/hills visible），它主要以聲音可視化、時(shí)間地點(diǎn)、顏色覆蓋為元素，讓使用者為去不高山學(xué)習(xí)、散步等提前準(zhǔn)備。例如，想在安靜的環(huán)境下學(xué)習(xí)，App就會(huì)提前為使用者檢測(cè)區(qū)域內(nèi)的噪音情況，通過(guò)聲音可視化的方式直觀提供給使用者。App會(huì)以顏色的變化為使用者辨別當(dāng)時(shí)的環(huán)境音量，也會(huì)自動(dòng)為使用者辨別是人為因素還是自然因素，從而顯示人口密集度，讓使用者更便捷地了解不高山的狀況。此外，該App還有采風(fēng)功能，可以隨時(shí)進(jìn)行本區(qū)域內(nèi)的錄音功能，并以不同種類的波形讓使用者體驗(yàn)聲音可視化的樂(lè)趣。

四、聽(tīng)見(jiàn)山App設(shè)計(jì)實(shí)踐應(yīng)用

（一）標(biāo)志設(shè)計(jì)

在標(biāo)志設(shè)計(jì)中，為了達(dá)到簡(jiǎn)潔明了、顏色大方、視覺(jué)沖擊力強(qiáng)的效果，筆者在Logo的設(shè)計(jì)過(guò)程中經(jīng)過(guò)多番的考量與修改。為了讓Logo的設(shè)計(jì)思路具有邏輯性和科學(xué)性，筆者決定參考調(diào)研時(shí)的官方分貝噪音圖，通過(guò)在不高山的所見(jiàn)所聞，經(jīng)過(guò)移動(dòng)設(shè)備自帶的聲音檢測(cè)裝置進(jìn)行實(shí)地測(cè)量，將測(cè)量結(jié)果數(shù)值與分貝噪音圖標(biāo)進(jìn)行參考和比對(duì)，通過(guò)不同數(shù)值的大小與分貝顏色進(jìn)行搭配組合，形成不同區(qū)域的顏色劃分。除此之外，再?gòu)牡貓D中查詢不高山的地理位置進(jìn)行區(qū)域內(nèi)海拔高度分析，分析后發(fā)現(xiàn)不同海拔高度的地區(qū)，分貝值也有所不同。所以筆者對(duì)不高山進(jìn)行了等高線的科學(xué)劃分（見(jiàn)圖1），將不同高度的分貝顏色進(jìn)行組合。整個(gè)Logo的外形也是由一個(gè)抽象的“山”字組成（見(jiàn)圖2），整個(gè)過(guò)程具有一定的科學(xué)性、美觀性。

（二）設(shè)計(jì)元素提取

通過(guò)前期的調(diào)研分析，筆者認(rèn)識(shí)到打造一款服務(wù)型交互App具有一定的必要性。所以筆者通過(guò)對(duì)聲音的調(diào)研分析，并根據(jù)由香港環(huán)境署官方發(fā)布的分貝噪音可視圖進(jìn)行結(jié)合設(shè)計(jì)，想通過(guò)對(duì)不高山內(nèi)自然景象及其聲音的分貝特點(diǎn)，運(yùn)用科學(xué)儀器提取聲音波形進(jìn)行再設(shè)計(jì)。主要提取四種聲音：踩落葉聲、鳥(niǎo)叫聲、溪水聲、相機(jī)快門(mén)聲。根據(jù)四種聲音的特性進(jìn)行頭腦風(fēng)暴練習(xí)，聯(lián)想到視聽(tīng)覺(jué)巧克力的掰碎聲、水槍發(fā)射聲、水流聲、機(jī)械運(yùn)作聲，從而進(jìn)行四種聲音的可視化波形設(shè)計(jì)（見(jiàn)圖3），后期將各種波形運(yùn)用到App的界面和視圖當(dāng)中。

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

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

界面框架起到承上啟下的作用。筆者通過(guò)黑白灰的色彩形式對(duì)界面框架進(jìn)行分布布局，在每個(gè)點(diǎn)擊框以及交互流動(dòng)框進(jìn)行注釋，讓使用者一目了然地對(duì)該App界面有更詳細(xì)、深入的了解，后期的界面設(shè)計(jì)會(huì)依據(jù)界面框架進(jìn)行內(nèi)容信息填充以及色彩的搭配，讓整個(gè)頁(yè)面活靈活現(xiàn)，具有設(shè)計(jì)感和流動(dòng)感。

（四）交互界面設(shè)計(jì)

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

（五）效果展示

最終App的呈現(xiàn)效果將運(yùn)用在平板電腦上（見(jiàn)圖8），后期將會(huì)對(duì)移動(dòng)通信設(shè)備手機(jī)端進(jìn)行設(shè)計(jì)，界面的內(nèi)容信息和顏色不會(huì)有所改變，后期在不同的節(jié)日或者特殊時(shí)間段也會(huì)有主題活動(dòng)的介入以及界面主題色彩的不斷更新。

五、結(jié)束語(yǔ)

本文對(duì)不高山進(jìn)行了聽(tīng)覺(jué)可視化設(shè)計(jì)實(shí)踐，探討了校園App數(shù)字化設(shè)計(jì)創(chuàng)新應(yīng)用形式的可行性。數(shù)字化技術(shù)的發(fā)展對(duì)App開(kāi)發(fā)與傳播形成了顛覆性的改變。通過(guò)研究發(fā)現(xiàn)，基于聲音可視化技術(shù)，不僅豐富了App的設(shè)計(jì)內(nèi)涵，還創(chuàng)新了App數(shù)字化設(shè)計(jì)的形式，使校園App更具市場(chǎng)潛力，在增強(qiáng)傳播性的同時(shí)進(jìn)一步提升了設(shè)計(jì)感。

參考文獻(xiàn)：

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

[2]高玉嬌，覃京燕，陶晉.手機(jī)APP交互設(shè)計(jì)中動(dòng)態(tài)色彩的視知覺(jué)研究[J].包裝工程，2016，37（8）：134-137.

[3]張穎.交互界面設(shè)計(jì)中色彩對(duì)受眾的引導(dǎo)[J].工業(yè)設(shè)計(jì)，2021（2）：71-72.

[4]黃雅堃.基于可視化設(shè)計(jì)的信息圖表在報(bào)刊編輯中的應(yīng)用[J].中國(guó)出版，2015（1）：45-48.