情感设计视域下的音乐类手机软件信息可视化界面分析

赵昀萌　孙悦

摘  要：以情感化设计理论以及信息可视化理论为基础，结合实际案例，从信息结构以及信息内容两方面论述了信息可视化在音乐类手机软件的界面设计中的应用，并分别从本能层面、行为层面、反思层面三个角度，分析音乐类手机软件信息可视化界面中的情感化表达。通过对于现有音乐类手机软件的信息可视化界面进行分析，总结出在音乐类手机软件中几类情感化设计的方法，在信息可视化界面中的应用方法和原则能够为设计师提供参考和思路，以带给用户更丰富、贴心的情感体验。

关键词：情感化设计；信息可视化；界面设计；音樂软件

随着经济的发展，人们的物质生活水平不断提高，人们的需求变得复杂、多样，越来越多的人开始注重对于自身情感需求的满足，情感化设计成为了设计师们关注的重要领域之一。唐纳德·诺曼曾提出可将情感化设计分为三个层面，即本能层、行为层和反思层[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.：

作者简介：赵昀萌，广东工业大学艺术与设计学院设计学专业硕士研究生。

通讯作者：孙悦，广东工业大学艺术与设计学院博士。

编辑：宋国栋