情感設計視域下的音樂類手機軟件信息可視化界面分析

趙昀萌　孫悅

摘? 要：以情感化設計理論以及信息可視化理論為基礎，結合實際案例，從信息結構以及信息內容兩方面論述了信息可視化在音樂類手機軟件的界面設計中的應用，并分別從本能層面、行為層面、反思層面三個角度，分析音樂類手機軟件信息可視化界面中的情感化表達。通過對于現有音樂類手機軟件的信息可視化界面進行分析，總結出在音樂類手機軟件中幾類情感化設計的方法，在信息可視化界面中的應用方法和原則能夠為設計師提供參考和思路，以帶給用戶更豐富、貼心的情感體驗。

關鍵詞：情感化設計；信息可視化；界面設計；音樂軟件

隨著經濟的發展，人們的物質生活水平不斷提高，人們的需求變得復雜、多樣，越來越多的人開始注重對于自身情感需求的滿足，情感化設計成為了設計師們關注的重要領域之一。唐納德·諾曼曾提出可將情感化設計分為三個層面，即本能層、行為層和反思層[1]。各行各業的設計師都應當在設計時充分考量情感化設計的三個層次，采用相應設計手法為用戶帶來理想的情感體驗。

音樂能夠讓聽眾體驗到豐富的情感，當人們打開音樂類手機軟件，很多時候是在尋求一種情感體驗。如何在設計中融入情感元素，加強與受眾之間的情感聯系，實現以人為本的人性化傳播，如何豐富受眾情感體驗，提升受眾的認同感，成為數字新媒體發展中面臨的現實問題[2]。因此，除了音樂本身，音樂類手機軟件的信息可視化界面在設計中也應當充分考慮用戶的情感需求，將情感化設計的理念運用在界面設計之中。

在史前文明時期，人類便已經創造了第一種信息圖形——洞穴壁畫[3]。人類創作信息圖形的歷史已經超過千年。在當今這個大數據技術盛行以及信息爆炸的時代，信息可視化更是被應用在了各行各業，并且在橫向及縱向上都有了更加深入的發展。在界面設計領域，信息可視化設計可以幫助設計師將復雜、紛亂的信息通過信息圖形、信息圖表等形式呈現給用戶，讓用戶以更加簡單、清晰的方式了解界面中的信息。好的信息可視化設計可以進一步提升界面的可用性與美感，并且帶給用戶更好的使用體驗。

一、信息可視化在音樂類APP中的應用分析

（一）音樂類APP中的信息結構可視化

在界面設計領域，設計師首先需要對于信息進行篩選和梳理，通過對信息結構的可視化設計聯結界面設計中各個信息，歸類后的信息按照一定的結構被呈現出來，使界面中的信息關系清晰明了，增加界面的可用性。現存主流音樂類手機軟件的功能早已不局限于簡單的搜索音樂、聆聽音樂，而是增加了許多符合當下用戶喜好的內容，例如短視頻、社交、購物、游戲等。這些復雜的信息需要通過信息可視化，以一個合理而清晰的信息結構被表達出來。信息可視化設計的流程，是一個理性思維與感性思維共同作用的過程，由信息模型建構、信息設計表達兩個環節組成[4]。構建信息結構模型能夠幫助設計師將這些信息進行篩選與分類，明確信息層級關系，為信息結構的可視化設計服務。

以目前市場主流音樂手機軟件網易云音樂為例。該手機軟件的信息結構模型可以分組式結構模型的形式呈現（如圖1），模型包含對于此款手機軟件的信息結構以及圖形、圖標、界面排版等元素的初步構想。此款手機軟件的第一層級包括發現、視頻、我的、賬號和云村，其它信息在經過篩選之后，以一定的邏輯被分別歸類至上述五個層級之中，方便用戶尋找所需使用功能。

（二）音樂類APP中的信息內容可視化

除了對于信息結構的可視化，信息可視化在音樂類手機軟件界面設計中的應用還體現在對于信息內容的可視化上。信息內容將結合圖片、文字、圖表等元素被可視化，形成一個個信息可視化界面，讓信息以更加人性化的方式呈現在用戶面前。在信息可視化界面設計中，首要任務是確定界面設計的風格類型，風格類型包括色彩、圖形、版式以及文字等要素的確定[5]。在確定風格類型之后，信息內容將在一定的風格范圍內通過信息可視化的方法被表達。

版面設計要符合用戶的讀取習慣。人的視線習慣是從上到下、從左到右，且水平運動快于垂直運動[6]。因而在進行版面的布局時，要盡可能考慮到用戶的視線習慣。

在信息可視化界面設計中，色彩能夠幫助信息內容的可視化表達，合理而獨具美感的色彩設計能夠讓信息內容更富有層次，也能夠讓可視化的形式更加符合信息內容。色彩也不一定是一成不變的，在信息可視化的界面之中，色彩可以根據不同的時間、不同的信息內容、不同的用戶等，提供更加豐富的使用體驗。

在進行信息內容的可視化設計之中，圖形元素的加入能夠幫助用戶更加快速且清晰地理解信息內容。好的圖形設計能夠使信息內容以更加符合用戶審美的方式被可視化。

二、音樂類APP信息可視化界面的情感化設計分析

信息可視化界面帶給用戶的情感體驗與其信息結構的可視化設計以及其信息內容的可視化設計密切相關。用戶界面作為用戶與APP交流的重要媒介，在傳達信息、交流情感、營造氛圍等方面起著舉足輕重的作用[7]。音樂類手機軟件在這些方面作出了許多努力，以獨特而具有創新性的可視化界面為用戶帶來新奇而溫暖的情感體驗。

（一）本能層面的情感化設計分析

在本能層面，物理特征——視覺、觸覺和聽覺——處于支配地位。信息可視化界面在本能層面的情感化設計主要體現在信息通過排版、顏色、圖形等要素進行視覺化的表達后，直接作用于用戶感官，帶給用戶情感體驗。無論是信息結構還是信息內容，都需要以一定的視覺形式呈現在用戶面前，視覺形式影響著用戶對于信息的第一感覺，富有張力的視覺形式能夠帶給用戶深刻的情感體驗。因此在信息可視化界面之中，本能層面的情感化設計主要體現在信息可視化的視覺形式上，而色彩、圖形、版式則是影響用戶情感體驗的重要因素，通過分析目前市場上熱門的幾款音樂類手機軟件，可總結出幾種在這類手機軟件界面的信息可視化表達中常見的情感化設計手法。

1.富有層次的顏色設計。顏色對于信息可視化界面的形式美有著不可忽視的作用，顏色能夠從視覺出發為用戶帶來強烈的情感體驗。色彩使信息界面更加吸引用戶，可以使用戶在讀取信息或者控制信息的過程更多地獲取信息[8]。彩色信息相對于黑白信息來說更容易激發用戶的情感，顏色不止是視覺可視化界面中重要的裝飾性元素，也能夠讓信息結構和信息內容更具層次感。音樂類手機軟件的界面通常會結合圖標、音樂訊息圖片、音樂封面、音樂人照片等元素讓整個界面顏色豐富而富有層次，給用戶休閑歡快的情感體驗。

2.活潑的版式設計。音樂類手機軟件在版式設計上通常會采用比較活潑的視覺形式，比如結合多種圖形對信息進行排版，盡量使用圖形而不是文字來表達信息；或在羅列信息圖形時，使用堆疊的視覺效果而不是采用單一排版手法。對比網易新聞、新浪財經和網易云音樂手機軟件的首頁，與新聞類手機軟件或財經類手機軟件所要帶給用戶的嚴肅感不同，音樂類手機軟件帶給用戶的情感體驗是更加輕松愉悅的。活潑的版式設計能夠讓用戶在打開手機軟件的第一時間感受到在聽音樂的休閑時刻應該體驗到的放松與愉快（如圖2）。

3.豐富的圖形設計。在音樂類手機軟件中，文字信息被大幅度減少，界面中會盡量使用圖形設計來對信息進行可視化。從本能層面來看，圖形設計更能夠吸引用戶的注意力，并讓用戶更有耐心了解其所承載的信息。在以娛樂、休閑功能為主的音樂類手機軟件之中，圖形設計更符合用戶打開手機軟件時追求休息、放松的心態，為用戶帶來他們期待的情感體驗。

（二）行為層面的情感化設計分析

在行為層面的設計中，功能是首要的。對于音樂手機軟件的信息可視化界面來說，功能在于如何利用版式、圖形、文字等元素讓用戶有效且輕松地獲得信息、理解信息。

1.在顏色設計方面，通過利用顏色的明度、色相、飽和度三要素的變化，信息結構能夠被更加清晰的表達，信息內容也能根據層級關系進行區分。音樂類手機軟件常常利用顏色設計強化重點信息，幫助用戶抓住視覺中的重點，并淡化其他非重點的視覺元素，讓用戶能夠第一時間在信息繁多的界面中搜尋到所需信息，降低用戶的學習成本，達到休閑娛樂的使用目的。

2.如前文所言，版式設計首先應當符合用戶的閱讀習慣，遵循用戶的生理以及心理特點。音樂類手機軟件版式設計十分活潑，但都按照一定的視覺順序設計界面排版，能夠讓用戶更容易理解界面中的信息結構，并優先了解最具重要性的信息內容。

3.在音樂類手機軟件中，圖形設計一般都契合信息內容，圖形是信息的載體，它最重要的意義在于讓用戶更快速、輕松地了解信息內容。因此，從行為層面來看，圖形設計不能夠喧賓奪主，為提升形式美而犧牲了功能性的圖形設計在信息可視化界面中是不可取的。

（三）反思層面的情感化設計分析

情感化設計中的反思層面在于設計能夠引起用戶的聯想，喚起用戶的回憶，激發用戶的情感。反思層面的設計作為意識、情緒、認知的最高水平，更加傾向于強調以用戶為中心[9]。在音樂類手機軟件的信息可視化界面之中，常見的反思層面設計包括如下三點。

1.采用與音樂情緒相符的顏色設計。基于過去的經驗與文化，顏色對于用戶來說會有象征含義，不同的顏色能夠激發不同的情緒。音樂類軟件大多會以一個主色為中心，界面中各個元素在顏色上都會配合主色進行設計。但在音樂播放或歌單列表等界面，界面的整體色彩則是以音樂的封面顏色為中心。音樂的封面是經由音樂發布方精心設計過的，其配色大多與音樂所傳達的情緒相關聯，在音樂播放界面中，手機軟件會提取所播放音樂的封面主色，并使其填充播放界面中空白的部分，當用戶播放音樂時，界面的主色便會配合音樂帶給用戶相應的情感體驗。圖3為QQ音樂的播放界面，在播放王菲的《暗涌》時，手機軟件會提取音樂封面中的紫色，并使其成為播放界面的主色，聆聽音樂的用戶結合這樣的視覺背景，更能夠體驗到與音樂相符的悲傷情感。圖4為網易云音樂的播放界面，在播放火箭少女101的《卡路里》時，手機軟件會提取音樂封面中的橙色，并使其成為播放界面的主色，用戶結合這樣的視覺背景更能夠體驗到與音樂相符的歡快之情。

2.采用擬物化的圖形設計。以擬物為代表的設計風格曾是移動終端界面設計的重要風格和主要的設計理念之一[10]。但隨著信息時代的到來，這種風格漸漸被取代了。總體來說，音樂類手機軟件在界面設計上依然維持著扁平化的設計風格，但在其信息可視化界面中常常會出現一些具有擬物化風格特征的圖形設計，這些圖形設計與其承載的信息有密切的聯系，當用戶理解其所在的視覺語言體系，就會體悟到圖形的象征意義，并被激發出相應的情感。觀看者通過對形式的意義的理解而體驗相應的情感，這是最高層次的情感激發與體驗[11]。圖5為網易云音樂、酷狗音樂和酷我音樂的播放界面。以網易云音樂為例，在其播放界面中，用戶能夠看到一個類似于黑膠唱片機的圖形，而音樂封面則被印在一個類似于黑膠唱片的圖形上隨音樂旋轉。對于黑膠唱機有一定了解的用戶便會由此圖形產生相應的聯想，閃現與黑膠唱機相關的回憶，可能是一部與黑膠唱機有關的電影或是在黑膠唱機店里度過的難忘午后等，并由這些聯想與回憶激發出相應的情感，可能是懷念的、古典的、寧靜的等。能夠被黑膠唱機所象征的文化內涵打動的用戶會在打開網易云音樂聆聽音樂的瞬間獲得由這種擬物化的圖形設計帶來的奇妙情感體驗。擬物化的圖形設計能夠模擬現實，巧妙運用隱喻，建立情感橋梁[12]。

3.采用趣味性的動態效果設計。動態的圖形設計更能夠抓住用戶的眼球，提高用戶對于某一信息的關注度。在進行軟件產品交互界面設計的時候，加入適當的動畫效果，能明顯提高產品的友好性[13]。音樂類手機軟件經常采用具有動態效果的圖形設計，這些動態效果一方面能夠通過動態的視覺語言更有效的傳遞信息，另一方面也增加了用戶與軟件交互過程中的趣味性。這些動態效果并不是毫無依據的，而是與圖形所承載的信息有一定關聯性的，這種關聯性能夠讓用戶在觸發動態效果后產生合理的聯想并達到情感共鳴。當用戶觸發了這些動態效果時，配合視覺效果同時產生的可能還有音效與震動，如此一來用戶將從視、聽、觸三個方面獲得信息，讓信息的可視化過程變得趣味化，甚至游戲化了。如圖6所示，在使用網易云音樂手機軟件時，當用戶點擊了心動模式的按鈕，界面中便會出現一小段心跳的動畫，讓用戶聯想到心動的感覺，以理解心動模式的功能含義，除此之外這種動態效果也能夠讓用戶獲得更豐富的審美體驗以及更加有趣的使用體驗。如圖7所示，蝦米音樂菜單欄下方的波浪線也采用了趣味性的動態效果設計，當用戶點擊菜單欄時，波浪線會出現類似于心電圖的動畫效果。網易云音樂手機軟件中的鯨魚音效模式也有許多動態效果設計，能夠在播放音樂時呈現與音樂節奏相符的圖形動效，有的像水紋，有的像火焰，配合流動的音樂，帶給了用戶與眾不同的情感體驗。

三、結語

產品要緊緊以用戶和創新體驗為中心，這樣才可能形成值得期待的高品質、高附加值產品[14]。手機軟件越來越頻繁地出現在用戶的生活中，占據著用戶的生活。智能手機APP界面設計從單一關注產品功能特性上升到服務用戶的高度[15]。在這個情感體驗越來越受到用戶重視的時代，不止是音樂類手機軟件，其它類別的手機軟件在進行界面設計時也應當充分考慮用戶的情感體驗，重視情感化設計在界面設計中的重要性。本文將情感化設計的三個層次理論與信息可視化理論相結合，分析了音樂類手機軟件在進行信息可視化界面設計時所用到的情感化設計方法。希望能夠讓更多的企業和設計師理解界面為用戶帶來的情感體驗，重視情感體驗的價值，也希望本文提到的情感化設計在音樂類軟件界面中的應用方法和原則能夠為設計師提供參考和思路，以帶給用戶更豐富、更貼心的情感體驗。

參考文獻：

[1]諾曼. 設計心理學 3 情感化設計[M].何笑梅，歐秋杏，譯.北京：中信出版社，2015：47-70.

[2]韓玉婷.貓眼電影APP的情感化設計[J].傳媒，2016（19）：46-48.

[3]王凱.信息可視化設計（漢英對照）[M].沈陽：遼寧科學技術出版社，2013：6.

[4]張毅，王立峰，孫蕾.信息可視化設計[M].重慶：重慶大學出版社，2017：42-74.

[5]陳志瑩，劉美杰，陳潔.運動類APP界面設計的風格探析[J].藝術與設計（理論），2017（9）：96-98.

[6]龍娟娟，閆北歌.基于無意視盲的運動類APP界面設計研究[J].包裝工程，2017（24）：142-148.

[7]徐延章.情感傳播：APP交互藝術設計的方向[J].青年記者，2016（26）：89-90.

[8]馬廣韜，劉濤.信息可視化中視覺載體界面設計[J].沈陽建筑大學學報（自然科學版），2013（3）：566-570.

[9]王馨，王峰.反思層面的兒童教育類App情感化設計研究[J].裝飾，2018（7）：95-97.

[10]林嘉怡.大數據時代移動終端界面設計創新趨勢研究[J].包裝工程，2017（2）：239-242.

[11]柳沙.設計心理學（升級版）[M].上海：上海人民美術出版社，2016：140-144.

[12]孫辛欣，靳文奎.移動應用中的情感交互設計研究[J].包裝工程，2014（14）：51-54.

[13]曹淮，姚向陽，吳磊，吳學敏.界面設計中的交互動畫應用研究[J].包裝工程，2009（10）：184-186.

[14]倪瀚，李文嘉，鄭勝，楊繼棟，任梅.無意識設計與科技產品創新體驗研究[J].包裝工程，2014（8）：35-38.

[15]劉秀珍，丁建朋.智能手機APP界面設計的啟示性研究[J].包裝工程，2017（22）：135-140.：

作者簡介：趙昀萌，廣東工業大學藝術與設計學院設計學專業碩士研究生。

通訊作者：孫悅，廣東工業大學藝術與設計學院博士。

編輯：宋國棟