基于蒙德里安风格的书城阅读APP界面交互设计研究

郗彩莲 陈明江 吴泽曼

关键词：书城APP 界面设计 蒙德里安风格 交互设计 用户体验

引言

古往今来，阅读是人类认识知识的窗口，是文化交流与传播的重要方式。互联网时代的到来，手机成为人类不可或缺的阅读工具。传统的纸质阅读已渐渐被数字化阅读方式所替代[1] 。通过手机的阅读方式极大地满足了人类随时随地进行阅读的需求，从而有效地提高了阅读效率。这个时候，阅读类APP应运而生。然而目前市场上阅读类APP其产品本身的缺点：如界面设计简单粗糙、交互体验不佳等问题导致了广大用户在试用期间产生的各种不满。文章在分析现有的阅读类APP界面与交互设计诸多缺点的基础上，提出了基于蒙德里安艺术风格的书城阅读APP的设计开发，可解决上述存在的问题，并提出新型阅读APP在视觉与交互方面的创新设计。

一、阅读类APP界面交互设计现状分析

阅读类APP作为用户“移动阅读”的主要媒介，已成为大部分手机用户的必备应用。在国内，一些互联网公司凭借品牌优势和活跃的用户群体进入移动阅读市场，研发出了不同类型的移动阅读平台[2] 。例如：网易蜗牛读书、QQ阅读、掌阅、百度阅读、微信读书、豆瓣网等都是市面上常见的阅读平台。它们的出现，推动了移动阅读市场的发展。然而由于阅读类APP数量众多，各开发商为了最大限度地抢夺用户资源，导致其将大量精力投入到市场运营方面，而忽略了APP产品本身的界面交互设计的合理性，久而久之，用户已习惯了千篇一律的界面和杂乱无章的交互设计，对阅读体验期望度不高。其产品在界面交互设计方面的问题，具体表现为设计风格同质化严重、界面的信息层级混乱、缺乏用户情感体验，问题研究由此展开。

（一）设计风格同质化严重。一款APP的界面设计主要用于将各种信息、视觉元素进行分组和排列，合理化地呈现给用户。在手机应用商城中可搜索到大量的阅读类APP，它们在内容和风格方面，相互借鉴、彼此模仿。当前大部分阅读类APP缺乏对用户行为上的洞察与理解，缺少自身独特的卖点，呈现“同质化”特征。将严重降低用户们对这些阅读类APP的品牌识别度。

（二）界面的信息层级混乱。界面中的“信息层级”指图片、文字信息集的秩序感，正确的视觉设计层级可以使用户迅速捕获图片文字间的相对重要性[3] 。界面的信息层级在阅读类APP 中起到了引导阅读顺序、体现APP品牌个性的作用。用户习惯于“任务式”的进行交互行为，当用户搜索相关书籍时，往往需要同时识别多个图形来进行信息定位。当前众多阅读类APP的界面信息层级主要以开发商主观感知为标准，进行随意混搭，使得用户体验不理想。如QQ阅读的各个模块信息缺少合理分类，无明显层级区分，导致用户寻找信息的时间成本增加。再如微信读书，当书架模块的书较多时，无自动分类，容易使用户产生视觉疲惫之感。

（三）缺乏用户情感体验。用户习惯通过视觉感官来获取信息，在生活中早已形成了固定的认知思维模式。无论是视觉还是交互行为，通过用户对阅读类APP的交互反馈，我们不难发现，用户的情感体现会影响阅读质量。然而当前大部分阅读类APP界面、图形等的色彩搭配杂乱，无法在用户阅读时，起到引导用户情感与情绪的作用，缺乏独特的阅读氛围营造。且忽视用户在阅读时的趣味性，APP内功能种类已成固定化，无新模块的添加，也没有动效、音效等的设计，无法满足用户多元化的阅读方式、还包括交流沟通、购买书籍等需求，忽视了用户在使用阅读APP期间的情感反馈。

二、蒙德里安风格在设计界的应用分析

20世纪几何抽象大师蒙德里安的风格，是以几何图形为基本元素，以表现抽象精神为目的，追求抽象化的艺术境界，具有独特的设计风格，多年来深受各大艺术大师的喜爱和追捧。最大的特点就是色彩使用红黄蓝三原色、构图使用直线以及直角等，它是极具个性、特色以及前卫的艺术风格[4] 。蒙德里安用其极度简洁的方式，前卫的构图理念，严谨的比例与固定的色彩将艺术脱离自然的外在形式，用抽象的形式表现出来，这种极富魅力的艺术思想，使其作品的影响力延续到现代艺术设计中。表现在室内设计、家具设计、服装设计等方面。

1965年，来自法国的服装设计师伊夫-圣-罗兰，以蒙德里安的作品《红、黄、蓝的构成》为创作灵感，创作了著名的蒙德里安裙，它们的色彩清新明快，外形简单、极富张力，在当时引起了极大轰动。另外，里特维德1917年设计的“红蓝椅”，用方形、长方形木条和木板进行组合，单纯明亮的色彩来强化结构，不加掩饰的纯粹色彩，是极简风的象征。近些年来，蒙德里安风格在室內空间设计方面也有着深远影响，相对于时尚和产品设计，可谓数不胜数，几何样式的设计让空间变得线条利落简单，极富特色，如图1。多年来，蒙德里安风格深受广大民众的喜爱，但其风格在UI界面设计领域却鲜有应用，这一领域是值得我们去探索的。

三、基于蒙德里安风格的书城阅读APP界面交互设计的创新之处

界面交互设计包括视觉方面的设计以及交互、动效、音效等方面的设计。《用户体验要素》一书中，Jesse James Garrett 将交互设计定义为用户体验的结构层，界面视觉设计定义为用户体验的表现层[5] 。一款受欢迎的阅读类APP，首先界面视觉设计要符合用户的审美，且对用户有足够的吸引力;其次，交互设计必须符合用户习惯，操作方便;再次，添加一些新功能，使APP更富有趣味性。书城APP是一款美观与实用并存，集购书、阅读、社交、导入TXT等功能为一体的综合性手机阅读APP。针对前面讲到的市面上大部分阅读类APP设计风格同质化严重、界面的信息层级混乱、缺乏用户情感体验的问题，分以下三个部分进行创新性的阐述。

（一）个性化的界面视觉元素设计，增加品牌识别度：针对市面上阅读类APP的视觉风格同质化这一问题，书城APP延续了蒙德里安的美学手法，将蒙德里安的绘画元素进行提取和拆分，并延伸为界面设计的形态。根据APP的功能性与需求，进行重组构建，注重氛围的营造，体现界面的秩序美。图形设计方面，采用蒙德里安风格的极简线条，结合纯粹的三原色与黑白，达到与同类阅读APP在视觉上较大的区别，且容易让用户印象深刻。点、线、面的交错，以三原色、黑白色为主的色彩搭配，减少渐变等复杂纹理，给人清爽的视觉体验。在按钮的设计方面，采用功能性的图形符号进行引导，增加APP的品牌识别度。

（二）清晰的层级分类，提升用户交互效率：用户在应用市场中选择阅读类APP时，美观与实用并存是其永恒不变的标准。针对市面上众多阅读类APP的信息层级混乱问题，避免一次性的任务信息层级，根据用户需求合理规划与设计、准确引导界面交互;运用蒙德里安艺术风格中的直线、直角布局，简洁、美观地将那个信息进行分类、整合。同时，呈现给用户的视觉元素需合理化，也要考虑用户“任务式”的操作习惯，界面的视觉画面还需注意主次與顺序的呈现，层级分明，突出视觉中心，从而达到舒适的交互体验，提高用户的交互效率，提升体验好感度。

（三）新模块的添加、动效结合音效，营造趣味性的交互体验：交互设计是对用户行为响应的设计[6] 。比如点击弹出下拉菜单，浏览过的部分会变色，提示用户无需重复进行无效操作等。虽然这些都是很细微的交互呈现方式，但却处处体现着用户交互体验的重要性。然而毫无惊喜的内容、枯燥的阅读界面，无论读什么内容的书籍，都是千篇一律的视觉感受，这样的交互体验无疑是失败的。APP的主界面、分界面之间，除了要确保它们之间切换的流畅性、触觉交互的合理性，还需要增加阅读体验的趣味性，让阅读不再索然无味。运用红黄蓝、黑白对用户情感的引导作用，针对不同功能、图形、书籍内容主题等进行分类应用。购书、社交、导入文案等功能的导入，与其他市面上已有的阅读APP相比，可以增加其可玩性和趣味性，不再只有单一的阅读功能，还可以听书、买书、交流，给予用户新的体验。

四、基于蒙德里安风格的书城阅读APP界面交互设计实践

由于阅读类APP的使用并没有固定的使用场景和时间限制。书城阅读APP也不例外，从场景来看，碎片化时间利用率较高，用户在使用该APP时，可能站在拥挤的地铁里、也可能躺在床上、还有可能在食堂排队打饭;从时间来看，白天与晚上的阅读需求也是截然不同的。因此，APP的界面视觉设计除了美观性，实用性也是需要考虑的重要因素。此项目是笔者主持并与团队一起开发的，在设计过程中，成功地将蒙德里安风格融入该APP的视觉元素中，并增加了许多阅读类APP没有的新功能模块，达到了预期的效果，为同类阅读类APP的设计与开发提供了有利经验。

（一）界面视觉设计：该阅读APP的界面视觉设计，将蒙德里安风格中红黄蓝的配色与几何极简风构图融入到设计中，巧妙地将UI界面的美观与实用性结合起来。让用户在交互过程中得到了视觉上和心理上的满足。

1.极简的图形与图像设计：图形也称图标，极简的设计风格，将会降低长时间阅读给用户带来的疲倦感，同时也是广受用户喜爱的风格。少即是多，就是我们通常所说的极简风格，该APP启动图标是在视觉方面最先反馈给用户的部分，所以其设计既要美观，也要需要符合书城阅读APP特性、便于识别。启动图标以极简风格进行设计，采用蓝色、淡蓝色、白色搭配，带给用户理性、清爽、时尚的视觉感受，扁平风的笔画组合成一个“书”字，下方是翻开的一本书的形状，体现了APP属性;在实用方面，可将图形放大或缩小放置在不同规格、环境中进行应用，如图2。导航栏图形的设计，需要用户在没有任何外界指引的情况下，也能高效地进行操作。因此，应该使用最适合的、最明确的、最简约的视觉元素作为标签栏图形的构成元素，将信息直截了当地传达给用户。运用蒙德里安艺术风格的几何图形进行组合，根据不同功能属性进行色彩搭配，简洁明快、易于识别。字体采用“微软雅黑”字体，粗细均匀、便于阅读与识别，如图3。

相关图像的绘制，采用了扁平风的插画，如起始页内容图案的设计，共分为四个页面，以介绍书城阅读APP的“海量图书”、“优质书圈”、“丰富功能”为主要画面内容的插画，最后一个为进入主界面的页面，让用户直观地了解该APP的产品特色。绘画用笔干净、简单，没有过多的装饰，居中构图的方式，虚实结合，富有层次感;一页一页地翻阅，到最后一页的时候，点击按钮“立即体验”直接可进入登录界面，如图4。

2.个性鲜明的色彩搭配：整体色彩搭配和谐而统一，不同模块根据信息的重要程度所占面积不同，所安排的位置也有着一定的区别。头像下的背景图，由于面积较大，考虑到用户的阅读舒适度，并没有使用容易引起视觉疲劳的红色，也没有使用过于刺眼的黄色，而使用了比较护眼的蓝色，且蓝色代表冷静、科技，符合阅读需求。色彩的明度、纯度方面的人性化、细节化设计，可以很好地引导用户的交互顺序。点击相应按钮，可准确找到相关功能，且其他部分界面会做降低明度处理，突出视觉主体，让用户明确自己所处位置，从而降低交互时间成本，告别“东奔西跑”，如图5。

色彩作为界面视觉设计的主要元素之一，对整个产品的基调和氛围营造有着重要的作用[7] 。采用蒙德里安这一独特风格，在这三个页面之间的风格有所区别的同时，也需要在设计风格的整体上达到统一，最大限度地体现该APP的品牌辨识度。比如：登录页是最常见的、也是最重要的页面之一，是每位用户必用的界面。各种登录方式和注册输入框的排版主次分明、比例适合。色彩方面不宜太刺眼、也不宜太亮，仍然使用蓝色。当需要注册时，点击右上方的注册按钮，即可进入注册页面，注册页面为黄色;若已有账号而忘记了密码，还可以点击忘记密码，进入找回密码页面，此页面运用富有警告、提醒作用的红色。注册和找回密码页面的左上角，设有返回按钮，点击可回到登录界面，实现页面之间的跳转。最终完成的书城APP 界面设计一部分视觉效果如图6、7、8，从产品的各个层面提升了用户体验。蒙德里安艺术风格最大限度地统一了不同页面模块的风格，给用户营造了不同的阅读气氛，有利于交互的引导，同时提高了用户的交互效率，让用户获得舒适的交互体验。

3. 清晰的界面层级设置：该APP共有五个主界面，每个主要界面内又由多个界面组成，要确保界面之间可以相互切换，需进行原型设计。为了提高层级秩序，每个主要界面最多只向下延伸三个切换界面，不做过多分界面，以免层级太多太长，否则用户容易忘记操作路径，而降低交互效率。无论哪种APP产品都需要遵循用户的操作行为习惯，在此基础上进行交互设计，在书城阅读APP中以高保真原型图进行全部UI界面设计中的交互设计操作。第一部分为引导页、起始页、登录页、注册页、修改密码页之间的交互设计，另一部分为书架界面的交互设计，连接两个部分交互的是登录按钮，而书架界面与社区界面、书城界面、购物车界面与用户中心页界面的交互以标签栏按钮进行切换，便于用户操作。

（二）新功能模块的交互设计：蒙德里安风格的视觉设计，是书城阅读APP提高辨识度的重要条件。而提高用户交互效率，营造趣味性交互体验是其不可忽视的最大优势[8] 。删减与用户任务无关的非功能性元素，只保留重要的信息，减轻用户的认知负荷。增加一些方便用户使用的功能模块：增加购书与社区页面。这两个页面是市面上已有的阅读类APP所没有的，属于新加的功能。购书页面，用户如果在阅读过程中遇到自己喜欢的书籍还可以进行购买，无需切换另外的购书APP再进行购买，快捷方便。购书页面中，由于很多书籍封面的色彩较杂乱，因此背景主色调采用白色，结账采用了黄色，删减书籍采用了蒙德里安主色调中的红色，用来警示用户是否确定删掉这本书。点击垃圾桶按钮，便可以删除相应的书籍，放在用户常用的右侧，面积比较大，适合手指操作。删除相应书籍后，会有渐隐的直观交互效果，如图9。当购书页面需要选择购买并付款的书籍时，点击相应黄色对勾，即可看到总结，并付款。另外，新增的社区页面，是用来供用户们在该平台进行交流的，增加了阅读APP的趣味性，可以发布动态、编辑书单、搜索好友、还可以找到自己的社区和热门的社区，书友们可以各抒己见，互相推荐喜欢看的书籍，还能看看其他阅读圈的热门话题等。当下拉列菜单出现时，页面其他部分会进行半透明暗调处理，突出主体，方便选择，如图10。

（三）动效与音效交互设计：该APP中的动效设计丰富、合理、便捷，对于用户来说，可以带来一定的阅读趣味性和舒适度。多处运用到了动效的交互设计，点击标签栏的图标进行页面切换时主要以过渡为主，为了用户在切换界面时不会感到迟缓故无多余动效。界面所涉及的所有动效，主要有在每个主要功能下界面切换时的动效与图标变换动效，直观、简约。以社区界面为例，點击右上角的功能键，将按钮旋转45°，变成关闭的按钮样式，且附加功能在右上角逐渐向左延伸，既增加了趣味性，又方便了用户找到相应功能。再以购书界面为例，在购物车页面点击右上角的管理按钮后，购物车内的书向左边移动，随之滑动出现的是每本书籍的删除按钮。点击删除按钮，被点击的书籍向左滑动消失，0.5秒之内颜色由深到浅渐变直到消失。底部书籍向上滑动，由模糊变清晰，这种类型的动效设计，可以让用户更容易找到所需功能、快捷操作。

在音效设计中，针对一些小说提供有声书的服务，还包括书籍内容的其他语音播放、语音提示音、动效的音效、背景音乐等都可以使用户读者感受到趣味性和丰富的阅读体验。语音播放可以使用户在阅读时解放双眼，让眼睛休息片刻，倾听书籍内容;阅读声音还可以根据不同的阅读内容与背景切换不同的人物角色设定，如著名艺术家、演员等的声音，让用户可以听到专业的、有趣的声音。除此之外，交互时的滑动、翻页、点击、删除等操作都会有不同的富有特色的音效来区分。除此之外，在阅读页面，会根据不同的书籍内容，播放相应的音乐，带用户进入书中的世界，营造不同的阅读氛围。总之，搭配合理、有趣化的音效设计，让“阅读”方式变得更加多元，让阅读更加有趣。

结语

近几年，各式各样手机APP的开发与使用，呈现出了迅猛增长的态势，这也从侧面反映出了APP市场竞争日益激烈，其发展前景十分广阔。随着 kindle（电子阅读器）、微信阅读、豆瓣阅读和掌阅iReader等品牌的阅读应用不断涌现，越来越多的同类型阅读APP纷纷上市。面对众多琳琅满目、同质化的阅读APP产品，企业在开发与设计时，个性化的凸显、美观与实用并存的界面交互设计是多么重要，对以上几方面的改善、以及新功能的创新，可以大大改善用户体验感。文章通过以蒙德里安艺术风格在书城阅读APP界面交互的个性化设计为例，验证了这个研究结论的可行性，不仅对该APP界面交互设计做了一定的探索，同时也为其他阅读类APP产品界面交互设计提供了一定的参考。本项目的阶段性研究成果“书城阅读APP”在2020年全国大学生“互联网+”创新大赛暨第七届“发现杯”全国大学生互联网软件设计大奖赛中获得了华南赛区二等奖的成绩，同时也为课题今后的深入研究奠定了一定的基础。