扁平风插画在手机APP 界面设计中的应用研究
侯菲菲
（枣庄学院传媒学院，山东枣庄　277160）
［摘　要］扁平风插画丰富了手机APP 界面设计的艺术形式，它在手机APP 界面设计中有着重要的应用价值。将扁平化风格融入到界面设计中，利用其简约的设计风格，整合界面中的主要信息，增强界面信息的性能和浏览网页的用户体验。扁平化风格是目前手机APP 界面设计中流行的一种设计方法，本文将重点从扁平风插画在手机APP 这一新兴电子媒介中的应用方面进行探究。
［关键词］扁平风；插画；手机APP ；界面设计  ①
［中图分类号］J5
［文献标识码］A
［文章编号］1004-7077（2021）03-0136-05
  近年来，随着移动互联网行业的快速发展，产业格局日益改善，智能移动设备市场规模同步提升，手机APP 发展的市场占有率越来越高，
竞争也越来越激烈，各具特的应用程序层出不穷，已成为大众喜闻乐见的产业。现在的手机APP 用户界面设计中，优秀的插画元素应用，尤其是扁平化风格，因其造型简洁、彩明快的特点，是对手机界面设计的最佳阐释，也是吸引用户最重要的因素。如何塑造出独具特的APP ，在市场竞争中取得优势，需设计出创意新颖、表现独特、易于媒介传播的优秀插画形象，这是手机APP 界面设计发展的首要解决问题。
插画艺术作为一种视觉语言，在传递信息方面最为直观，其多层次的彩表达和多元化的叙事内涵让观者在畅享美的历程的基础上，产生抚慰性的情感共鸣。特别是扁平风插画所具有的亲切感和文化价值是其他艺术形式所不具备的，表达方式更加几何化、概括化，在构图上、配上、表现形式上更加灵活，因而越来越多的被用来传达信息。此外，扁平风插画能够与新时代的网络媒体完美契合，成为一种个性化的符号，实现快速传播。因此，无论是从传播表现还是从艺术效果的角度来看，扁平风插画非常适合于挖掘和提升用户界面体验的商业价值，从而促进用户界面设计的进一步发展。
一、扁平风插画解析
（一）扁平风插画的概念
扁平风插画是凸显抽象、极简和符号化的一种插画创作方式，从字面释义角度可分为两个方面：其一为扁平风。扁平风是当下流行的极简主义设计风格之一，以消除冗余、厚重和繁杂的装饰效果为核心要义。
具体表现是去除事物的结构、透视、纹理等元素，用偏几何化的图形和明快的彩来塑造外部轮廓，从而画出“扁平”的感觉。其二为插画。插画源自拉丁文“illustraio ”，意为照亮，在中国俗称为插图，是书刊文字间加插的图画，用以增加刊物的趣味性，使文字内容更生动、更具象，在突出主题思想的同时增强艺术感染力。现代扁平风插画相比于传统插画，它的使用范围广泛地涉及到各种新的商业领域，如产品包装、手机网页、游戏设计、影视多媒体等。插画作为视觉传达的表现主义形式，它不仅承担着对具体的文字内容辅助解释的作用，而且凭借其创意、造型、彩等各方面的优势，成为一种独立的
·
631·2021年5月枣庄学院学报
May.2021第38卷　第3期
JOURNAL OF ZAOZHUANG UNIVERSITY
Vol.38NO.3
①［收稿日期］2021-03-02
［作者简介］侯菲菲（1991-），女，山东枣庄人，枣庄学院传媒学院教师，主要从事动画设计的教学与研究。
艺术审美形式。
（二）扁平风插画的特点
1.图形简洁
扁平风插画中的图形造型偏向几何化、简洁化，对事物的外形进行概括和提炼，可以直接用圆形、矩形、三角形等规则图形直接画出或者稍加调整画出的造型，保证图形间的边缘更加规整，并可以突出事物的主要特征，能够使用户简单明了地理解设计作品。
2.彩明快
在扁平风插画中，除了图形设计，彩搭配是传递信息最关键的要素，也是吸引用户的直接原因。由于扁平化风格在手机APP界面设计中的大量运用，已成为一种商业竞争的元素，插画师们在进行彩搭配时，会选择纯度和明度较高的要素来烘托简洁的图形，增强彩间的整体感、块面感、对比感。目前流行的商业插画彩搭配是同相或者同相中增加一点点的跳以及相似的运用，画面使用同相颜，使画面和谐统一、安静沉稳；画面使用相似，使画风一致同时轻松活泼、灵动跳跃。app登录界面
3.注重质感
扁平风插画为了增强手机APP用户界面设计的吸引性，会在扁平的基础上丰富画面效果，块的内部会增加肌理、渐变、图案叠加等各种细节，给人自然和谐之感。虽然与我们所说的图形简洁化相违背，但是经过实践证明，适当的增加一些细节会使画面更加的生动，图形整体不失扁平的视觉感受，反而更具耐看性。
二、APP界面设计解析
（一）APP界面设计的概念
界面设计是基于用户交互体验基础上创设的信息媒介，通过对用户体验的视觉思维研究，使APP界面设计不仅具有独特个性及品味，同时为用户带来自由、舒适的视觉体验。用户界面（User Interface，简称UI），是指对软件的操作逻辑、界面美感和人机交互的整体设计，是用户和系统信息交换的介质载体，包含人机交互与图形用户界面。这里将重点分析视觉设计方面。
APP（全称Application）一般是指下载安装在智能手机上的软件，主要用于完善手机原有系统的功能性不足，使手机使用更加趋于个性化和定制化。比如我们经常使用到的、微博、抖音、淘宝等，这些软件对于日常的学习和生活等各个领域有着全面的影响，衣食住行等问题都可以通过智能手机等移动设备的应用程序得以解决，比使用电脑网页查询要更加方便与快捷，为人们的生活带来了极大的便利。
（二）手机APP界面设计的特点
1.视觉美感的体现
手机APP在使用过程中首先是对受众的视觉传导，扁平化的界面图形会给用户更直观的视觉感受。譬如，环形构图柔和、有序，环形线条规则、图形鲜明完整，再辅以插画的鲜活治愈风格，给人以温馨之感。据不完全统计，截至2019年6月，国内手机网民占整体网民比例已达到99%，人均周上网时间长达30.8小时。长时间的浏览页面，容易产生视觉疲劳，这就需要界面设计的方式更具多样化，使图形、彩和文字能够合理搭配，从而使界面布局更加的美观，具有良好的视觉导向作用。此外，扁平风插画与其他的几何图形和创意图案相比，能够快速吸引用户的目光，因为扁平化风格本身的装饰性作用，会让平淡的手机界面增加彩，增加界面的视觉吸引力，迎合用户对APP 的需求。
2.信息量的有效传达
传达信息是插画的基本功能，设计师多采取图文相辅的信息传达方式增加信息传达的精准度和有效性，帮助用户更好的接受和理解，从而引起用户的共鸣和认同。通过简洁的线条和交错的彩，扁平风插画将信息精简提炼后，以图像这一最具感染力的方式传达给受众，从而减少因语言障碍带来的困扰，进一步激发用户进行想象、联想，使传达的文本内容更加生动，更加符合用户的实际生活经验。以符合受众需求为目的，APP界面设计更加注重实际操作中用户的认知习惯，扁平化插画的介入，在传递大容量信息的同时，在设计上为用户带来视觉愉悦性和情感共鸣性的双重体验，破除了传统界面设计的中规中矩，更具设计内涵和灵动感。
·
731
·
侯菲菲：扁平风插画在手机APP界面设计中的应用研究
互联网时期读图时代的到来，带动了插画艺术的二次辉煌。依托抖音、快手等新兴载体，插画融合音乐元素和特效技术，衍生出更加多元化、更具感染力的艺术表现形式，将商品信息浓缩于插画界面设计中，从而在商业营销中全方位多层次展示推介产品。例如，“淘宝”在双11期间闪屏的应用，用那种明快的彩和具有冲击力的文字搭配，来突出优惠力度的吸引力，这种插画的运用，能在短短的几秒钟内，向用户传达具有足够吸引力的促销信息，为促销活动带来更多的流量。
3.界面的趣味性表达
趣味性通过事物及其表现方法和充满吸引受众的幽默风趣和文化特质，能够使人感到精神愉悦，起到锦上添花的作用。那些实用又感性、充满趣味性的艺术界面设计，能够实现个性化需求，带来愉悦的用户体验，拉近与用户的距离。扁平风插画元素的加入，能够以轻松愉快的方式传达复杂的信息。添加插画可以帮助用户平衡界面并舒缓心情，吸引用户的注意力，使APP各个方面更易于理解。在界面设计中，
插画扮演着商品“推销员”的角，以其独有的亲和力、趣味性和感染力与用户进行信息交流，通过无声的沟通方式传达幽默诙谐的界面信息，极大地改变了用户与APP界面之间的冰冷体验感，营造了“用户—界面—商品”的闭环式互动氛围。
三、用户界面设计中的扁平风插画的应用
（一）首页插画的应用
界面首页是手机APP页面中的“颜值担当”，APP首页往往对受众产生先入为主的影响，这种直观印象极大影响了APP的后续使用。一幅充满创意、夺人眼球的首页插画让人们得到感性认知的同时，能够最大限度地激发受众的好奇心和求知欲，提升界面设计的“印象分值”。在首页界面设计中采用了能够吸引用户的最佳扁平风插画，在最短时间内给用户以视觉冲击力，能够更加直观地展示APP的整体风格和中心主题。插画内容与对应主题存在关联性，会根据文字的主题进行设定，彩也很符合文字表达的场景，使得整个手机界面设计更加优美和谐。精心设计的插画往往比文字更具有视觉冲击力，能够有更强的感染力。
在首界面的设计中，呈现的信息选择以卡片化的模式显示内容直截了当，能够快速接收关键信息。尤其是图标在首页的应用，在APP 界面设计中，用户首先看到的往往是页面上的图标。前期调研发现，大多数用户喜欢简单抽象的几何图形，图形在展示丰富的信息方面比文字更具优势，也更容易让用户识别与
理解。如图1所示，启动酷我音乐之后，在首界面的中心呈现一个几何化的黄盒子，打开的盒子上面有两个蓝的音乐符号，音符彩的纯度明显高于盒子，功能方面清晰地指向音乐。首页插图极强的辨识性让受众印象深刻，插画创作的功能性隐喻，通过音符这一关联图形提取，让用户能够迅速清晰地了解到APP的功能性和
指代性，产生更好的互动效果。
图1　酷我音乐
（二）新手教程和新用户引导流程的应用
通常当新用户首次安装打开手机APP应用软件的时候，为了降低用户互动过程中可能存在的摩擦，用户界面会呈现一系列的引导说明页。它的作用就是希望用户在未使用软件之前便能够在最短的时间内，了解到APP应用程序的主要功能、操作方法和特点，能够快速上手，开始体验应用程序。但是用户在实际的使用过程中，会存在一个普遍现象，在浏览引导页的教程信息时，会直接点击跳过引导页，忽视所提
供信息的帮助性与有效性，从而导致在使用过程中的操作问题。由于界面乏味单调的首因效应影响，使用户在体验过程中产生了倦怠。因此在APP引导页的设计中，运用文案与扁平风插画组合的设计形式是一个很好的选择，是吸引用户的重要原则，能够在有限的页面中将信息元素清楚且有效地传达。将扁平风插画作
·
831
·
枣庄学院学报2021年第3期
为主导元素贯穿于用户教程，在很大程度上破除了界面引导方式的同质化问题，精心设计的插画比文字更具视觉冲击力和情绪感染力，传达的氛围感更加浓厚，更能体现APP设计者的匠心独运和对用户的人文关怀。
人的记忆具有不平衡性，美国心理学家米勒（Miller）研究发现，人的短时记忆容量十分有限，广度大概为7±2的词汇组块，只有大约
15耀20秒的保存时间。因此在手机APP的界面设计中，引导页面的信息文案字数不宜过多，突出主要信息，一般控制在9个字以内，避免用户遗忘、出现记忆偏差。
在引导页设计中，视觉中心是吸引用户的重点核心。它以强烈的形象或文字占据界面的某一部分，形成视觉焦点。扁平风插画作为具有视觉魅力和情感共鸣的元素之一，其活泼生动的表现形式能够人为创造界面的视觉中心，激发用户对APP的关注度。如图2所示豆瓣软件，在卡片化内容的界面设计中，添加笑脸扁平化图形和“遇见你真美好”的情感文案元素，让用户在交互体验的过程中感受到心灵的慰藉。简洁明快的白背景和几何化的清新块体现在登录界面，登录账号和密码的位置一目了然，增强了新用户注册、登录的舒适度。精致的扁平化设计风格，使界面所有元素之间有清晰的层次和布局，极大地减少了用户学习新交互方式的时间成本，从而获得更加优越的用户体验。
图2　豆瓣
  （三）空白页的应用
空白页，顾名思义就是空白的页面。空白界面是UI设计中极易被忽视的细节，但重要性极高，好的空白页设计不仅能给初次使用APP 的用户起到指引的作用，还能诠释各种异常状态、提升转化率和用户活跃度。在手机APP使用过程中，出现空白页主要有两大原因：数据缺失+网络异常，这犹如给情绪高涨的用户泼上一盆冷水，极易造成情感落差和情绪失落等负面情绪。在这种情况下，优秀的空白页设计能在
空数据或者意外情况下改变“简单归因”思想，提高产品的存留率。空白页就像一粒缓冲剂，当页面没有内容或出现网络异常时，需要界面设计挽留用户并指导用户解决问题，这就要求空白页兼具教育用户、取悦用户、引导用户的功能性。空白页设计需要达成的第一效益：告知用户界面出现问题。这就要求文案设计在简洁、易懂的同时具备趣味性。以网络异常为例，相较于“网络异常”这种平铺直叙的表达，“网页君搭乘404航班去追寻诗和远方了”的文案设计更加俏皮可爱，带给用户轻松舒适的使用体验，无形中消解了负面情绪，在会心一笑中检查网络设置。
空白页设计的典型性场景主要包括：数据加载中、网络异常、页面内容缺失。空白界面的品牌性、幽默性和人文性能够使APP更有特
·
931
·
侯菲菲：扁平风插画在手机APP界面设计中的应用研究
，更具质感，从而更好地提升用户体验，达到取悦用户的效果。如图3所示，在Digg数据加载页面中，设计了环保袋和各种食物为主体的形象，环保袋恰似一个数据箱，其食物是各种数据，以食物自上
向下进入环保袋的动态循环扁平风插画为主题表达了信息正在努力加载，信息向用户奔进的视觉感受，能够有耐心地等待加载的过程，甚至有忍不住截屏分享插画的冲动；如图4所示，在闪电购网络异常的设计中，当用户遇到这个棘手的状况时，往往伴随着焦躁情绪的产生，然而此时看到空白页品牌形象的趣味插画，画面中显示电视机信号中断，小狗表情凝重，一派可爱富有趣味性氛围的表达形式的时候，可以立刻缓解用户不安的情绪，而且插画下面的文案提示，“搞不定网络看看小贴士”引导用户解决问题，是一个愉悦的惊喜；如图5所示，在页面内容的缺失设计中，腾讯动漫引入了生动鲜活的鹅娘形象，鹅娘是可爱的卡通人物，通过对卡通人物的形象延展，通过塑造卡通人物惊讶的表情来诠释空白页中的内容缺失，以轻松幽默的方式向用户传递信息，引导用户去填补空白。
图3　Digg        图4闪电购          图5腾信动漫 
  所以，空白页的设计是非常必要的，它的意义在于给用户以解释说明，并引导用户行为，减轻认知负担。空白页是设计师发挥创意的最佳表现形式，插画富有情感的表达方式有效缓解了用户看到空白页的焦虑，是帮助用户赶走枯燥的利器，使原本单调乏味的空白页给人以生动有趣、耳目一新之感，让用户更加有动力去执行之后的操作，不失为一款好的手机APP产品。
四、结语
形式服务于功能，“大道至简”是20世纪极简主义运动的著名口号，对现代设计影响深远。随着科技的日
新月异，扁平风插画在手机
APP界面设计中的应用将日趋成熟，实现“形式上的优美婉约”与“技术上的精确简介”完美结合。在手机界面设计的可行范围内，设计师也将探索扁平风插画在界面设计中应用的新的可能性和更适宜有效的插画形式。
参考文献
［1］黄雨馨.插画在手机APP界面设计中的应用［D］.南京：东南大学，2018.
［2］周吉.商业插画在APP用户界面设计中的应用研究［D］.杭州：浙江农林大学，2018.
［3］邓洁文.扁平风插画在旅游类APP界面设计中的应用研究———以《悠游》APP为例［D］.杭州：浙江理工大学，2018.
［责任编辑：吕　艳］·
041
·
枣庄学院学报2021年第3期

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。