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

基于蒙德里安风格的书城阅读APP界面交互设计研究 郗彩莲 陈明江 吴泽曼关键词：书城APP 界面设计 蒙德里安风格 交互设计 用户体验引言古往今来，阅读是人类认识知识的窗口，是文化交流与传播的重要方式互联网时代的到来，成为人类不可或缺的阅读工具传统的纸质阅读已渐渐被数字化阅读方式所替代[1] 通过的阅读方式极大地满足了人类随时随地进行阅读的需求，从而有效地提高了阅读效率这个时候，阅读类APP应运而生然而目前市场上阅读类APP其产品本身的缺点：如界面设计简单粗糙、交互体验不佳等问题导致了广大用户在试用期间产生的各种不满文章在分析现有的阅读类APP界面与交互设计诸多缺点的基础上，提出了基于蒙德里安艺术风格的书城阅读APP的设计开发，可解决上述存在的问题，并提出新型阅读APP在视觉与交互方面的创新设计一、阅读类APP界面交互设计现状分析阅读类APP作为用户“移动阅读”的主要媒介，已成为大部分用户的必备应用在国内，一些互联网公司凭借品牌优势和活跃的用户群体进入移动阅读市场，研发出了不同类型的移动阅读平台[2] 例如：网易蜗牛读书、阅读、掌阅、百度阅读、读书、豆瓣网等都是市面上常见的阅读平台。

它们的出现，推动了移动阅读市场的发展然而由于阅读类APP数量众多，各开发商为了最大限度地抢夺用户资源，导致其将大量精力投入到市场运营方面，而忽略了APP产品本身的界面交互设计的合理性，久而久之，用户已习惯了千篇一律的界面和杂乱无章的交互设计，对阅读体验期望度不高其产品在界面交互设计方面的问题，具体表现为设计风格同质化严重、界面的信息层级混乱、缺乏用户情感体验，问题研究由此展开一）设计风格同质化严重一款APP的界面设计主要用于将各种信息、视觉元素进行分组和排列，合理化地呈现给用户在应用商城中可搜索到大量的阅读类APP，它们在内容和风格方面，相互借鉴、彼此模仿当前大部分阅读类APP缺乏对用户行为上的洞察与理解，缺少自身独特的卖点，呈现“同质化”特征将严重降低用户们对这些阅读类APP的品牌识别度二）界面的信息层级混乱界面中的“信息层级”指图片、文字信息集的秩序感，正确的视觉设计层级可以使用户迅速捕获图片文字间的相对重要性[3] 界面的信息层级在阅读类APP 中起到了引导阅读顺序、体现APP品牌个性的作用用户习惯于“任务式”的进行交互行为，当用户搜索相关书籍时，往往需要同时识别多个图形来进行信息定位。

当前众多阅读类APP的界面信息层级主要以开发商主观感知为标准，进行随意混搭，使得用户体验不理想如阅读的各个模块信息缺少合理分类，无明显层级区分，导致用户寻找信息的时间成本增加再如读书，当书架模块的书较多时，无自动分类，容易使用户产生视觉疲惫之感三）缺乏用户情感体验用户习惯通过视觉感官来获取信息，在生活中早已形成了固定的认知思维模式无论是视觉还是交互行为，通过用户对阅读类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的产品特色绘画用笔干净、简单，没有过多的装饰，居中构图的方式，虚实结合，富有层次感;一页一页地翻阅，到最后一页的时候，点击按钮“立即体验”直接可进入登录界面，如图42.个性鲜明的色彩搭配：整体色彩搭配和谐而统一，不同模块根据信息的重要程度所占面积不同，所安排的位置也有着一定的区别。

头像下的背景图，由于面积较大，考虑到用户的阅读舒适度，并没有使用容易引起视觉疲劳的红色，也没有使用过于刺眼的黄色，而使用了比较护眼的蓝色，且蓝色代表冷静、科技，符合阅读需求色彩的明度、纯度方面的人性化、细节化设计，可以很好地引导用户的交互顺序点击相应按钮，可准确找到相关功能，且其他部分界面会做降低明度处理，突出视觉主体，让用户明确自己所处位置，从而降低交互时间成本，告别“东奔西跑”，如图5色彩作为界面视觉设计的主要元素之一，对整个产品的基调和氛围营造有着重要的作用[7] 采用蒙德里安这一独特风格，在这三个页面之间的风格有所区别的同时，也需要在设计风格的整体上达到统一，最大限度地体现该APP的品牌辨识度比如：登录页是最常见的、也是最重要的页面之一，是每位用户必用的界面各种登录方式和注册输入框的排版主次分明、比例适合色彩方面不宜太刺眼、也不宜太亮，仍然使用蓝色当需要注册时，点击右上方的注册按钮，即可进入注册页面，注册页面为黄色;若已有账号而忘记了密码，还可以点击忘记密码，进入找回密码页面，此页面运用富有警告、提醒作用的红色注册和找回密码页面的左上角，设有返回按钮，点击可回到登录界面，实现页面之间的跳转。

最终完成的书城APP 界面设计一部分视觉效果如图6、7、8，从产品的各个层面提升了用户体验蒙德里安艺术风格最大限度地统一了不同页面模块的风格，给用户营造了不同的阅读气氛，有利于交互的引导，同时提高了用户的交互效率，让用户获得舒适的交互体验3. 清晰的界面层级设置：该APP共有五个主界面，每个主要界面内又由多个界面组成，要确保界面之。