设计艺术研究    Research on Design Art
123
插画艺术在UI设计中的应用
葛亚丽
（安徽科大国创云网科技有限公司研发中心，安徽 合肥 230088）
摘要：从某种意义上说艺术与设计互为本体，不同领域的设计都有一定的相通之处，是联系也是纽带，维系着艺术的本质，贯穿着设计的始终。在日常生活中，你会发现很多的设计作品中会包含着不同的艺术元素，室内设计与雕塑壁画、服装设计与图腾彩、视觉设计那就更加广泛了。艺术的很多地方都有共性，一旦把握好这些共性，就能够碰撞出不一样的火花。其中绘画艺术的题材和内涵最为丰富，形式万千，也是其他艺术类型无法取代的。因此，加强了绘画艺术在设计领域的作用，在UI设计中也得到有效应用。同时UI设计作为一个新兴工业的时代产物，是典型的“艺术”与“技术”结合的产物。因此独特的艺术审美是UI设计发展的重要保障，将绘画艺术与新兴的UI设计相结合必定是大势所向。
关键词：绘画艺术；设计领域；UI设计
一、何为UI设计？
UI是英文单词User Interface的简称，UI设计也被称为用户界面设计，是指对软件的人机交互、操作逻辑、界面美观的整体设计，是介于用户与硬件互动交流的媒介。UI设计作为人机沟通的桥梁，在传递信息的同时也决定了用户体验过程中的感受。
在物质生活水平飞跃发展的时代，人们更多的会去注重感官上的体验，这种体验进而上升到了用户界面的设计。实用、高效、便捷成为了界面设计的基本原则，在此原则之上提高用户界面的美观性、交互性成了每一个UI设计师不断探
索和努力发掘的方向。
二、插画艺术的起源
手绘插画有着漫长而悠久的历史，从远古时代的图腾壁画，到日本江户时代的浮世绘，再到科技时代下的数字绘画，这种古老而又多元的插画艺术得以继承和延续。 “宣物莫大于言，存形莫善于画”，在拥有古老历史的中国，古人对这一观点进行了诠释。于是乎插画就起到一种对文字的补充及说明的作用。据后人考证，先秦时期的《山海经》[1]以及晋代陶渊明的《流观山海图》书的内页都附有插图，说明在那个时期附有插画的书籍就已经出现。
（见图1）
图1 《山海经》内页插画
对于插画的传统概念，《现代汉语词典》中这样解释：“插在文字中间帮助说明的图画，包括科学性和艺术性的图画就是插画”[1]，概括性描述了插画在传统意义上就是作为文字辅助一样的存在。现如今插画却
被赋予了更多的内涵，它是插画创作者内心真实情感与绘画表现形式相结合的产物，使读
者认真品味插画作品时，能够感受到作者最真挚的情感。
受现代主义艺术浪潮影响，21世纪的欧美插画作品个性张扬，大胆讽刺。意大利插画家Marco Melgrati是这个时代比较有代表性的人物之一，他比较专注于概念插画，作品大多数多反映真实事件并表达特定的观点。作品质疑社交媒体在
作者简介：葛亚丽（1995-），女，安徽合肥人，UI设计师，学士，主要从事插画与UI设计研究。
艺术大观 Art Panorama
124
生活中的角或者展示其他社会问题，Marco Melgrati的作品往往是用简单风趣的绘画手法先博大家一笑，但笑过之后又会让我们对这些真实存在的社会问题产生更深的思考和共鸣。（见图2）不难看出，2
1世纪的欧美插画在强烈的视觉效果基础上，更多的体现了插画作者的情感和对社会现象的理解表达，能够与读者进行更深层次的交流，充分体现出了插画的互动性与艺术性。
三、插画与UI设计结合的优势
（一）吸引力和感染力
如果一个UI界面在设计的过程中能够很好的吸取借鉴手绘插画的技法和表现形式，就会起到渲染、营造氛围的作用。当一个页面有了故事情节，其趣味性会增加用户视觉上的愉悦。手绘插画能够生动形象的展示页面信息，用图形代替文字的方式给人比较直观的感受。受英国波普风格的影响，各路插画大神将生活中的热点信息及流行元素相结合，在趣味
性的基础上，增加了与用户的情感交流和共鸣。
图2  Marco Melgrati插画作品
（二）页面信息的载体
当手绘插画运用到UI界面中，能够体现出更广泛的信息，优秀的UI界面就是要将最主要的信息用比较直观的表现手法传递给用户，但是由于用户体的不同，人们的认知水平、教育背景、文化习惯等各方面
的因素会导致用户在页面信息认识的差异。文字符号表达虽然比较简洁方便，但并不能够准确的描述所表达的信息和场景。相反接近于实物的图形表达方式更具有识别性，能够用通俗易懂的方式传达页面信息。
（三）更高层次的情感追求
评价一个UI作品是否优秀的标准，不仅仅是其能够在功能的使用上满足用户的需求，还应该去更深入的了解用户在情感精神层面的需求，通过丰富的彩、流畅的线条、精细的刻画，从而触发用户在体验过程中的情感共鸣。UI设计中的原创插画风格，能够表现出个性的张扬与人性的回归，能够将设计师的主观情感代入设计作品中，满足了还增加了UI 界面的艺术性，提高了受众人的审美鉴赏能力。
四、插画在UI设计中视觉语言的运用
UI界面中的插画设计遵循插画所特有的视觉语言，让新的页面在丰富多样的同时摆脱了传统页面的枯燥和呆板。用插画艺术的形式赋予了UI界面更多的创意性与趣味性，增强了视觉上的冲击力和渲染力，让UI界面更加的有活力。在UI 领域很多的页面都出现了插画，越来越多的APP以及网页都在注重这方面的运用。如何更好的将UI设计的思维与插画设计的技法相结合，设计出有创意高质量的用户体验产品成为了UI设计师的必修课。基于目前UI界面所存在的插画风格种类，提取了几种比较典型的风格来进行探讨分析。（一）传统手绘风格插画界面
在众多的插画类型当中，传统手绘插画的视觉语言最为丰富，手绘会因为其创作的环境及介质，具有不可复制、独一无二的特性。在手绘方式上可以采用水墨、工笔、淡彩、素描、版画等，创作工具材料运用也很广泛，水彩、水粉、彩铅、粉、钢笔和铅笔等工具，在绘制过程中的每一笔都可能会因为笔触、彩融合的原因产生意想不到的视觉效果，每一笔都饱含着绘者当下的情感与思绪。（见图3）
手绘插画页面中令我印象比较深刻的是意大利珠宝品牌Giampiero Bodino 的首页，其设计理念来源于艺术与文化，作品中融合了雕塑、绘画、简约的几何美学元素，这些元素的融合赋予了每一件珠宝设计最高的境界。其整体的视觉语言采用了手绘素描插画的方式，素描流畅的线条将珠宝的细节刻画到了极致，尽管调比较单一，但是其特殊富有创意的视觉语言，足以说服用户将目光转移到页面当中去探索珠宝设计者的创作思维。这种将传统手绘方式与网页结合的“艺术作品”，让人过目不忘。（二）扁平风格插画界面
在近几年的发展过程中UI设计中的扁平化浪潮此起彼伏，随之而来的扁平风格插画也受到了设计者们的青睐。在对扁平化视觉设计语言的研究探索中发现，扁平化的视觉要素的目的在于如何更好的突出信息层级，因此简洁大方成了扁平化的代名词。而扁平风格的插画抛弃了以往复杂的视觉组织形式，用简单几何图形和清新明朗的彩来突出视觉层次。
目前很多系统在界面风格上也趋于扁平化风格，尽管这种风格在设计手法上强调简化、抽象、符号化，
但是扁平化的风格并不意味着简单，扁平插画也是如此。就像插画师Tom Whalen的作品，他创立的工作室所设计的大部分风格都是扁平风格的插画，无论从彩还是构图上都充满了想象力和设计感。绝大多数作品的设计灵感都来源于日常生活中，也会从以往比较经典的电影、音乐、动漫中提取设计元素。作品将现代时尚的科技感、与复古的文艺风拿捏的恰到好处，
设计艺术研究    Research on Design Art
125
几何元素之间恰如其缝的拼接、彩之间的对比融合让Tom Whalen的插画作品具有强烈的光影效果。通过对时代经典形
象的重塑，结合独特的视觉表现手法，让人们沉浸其中，重
温时代经典。
图3  珠宝品牌Giampiero Bodino 的首页
（三）立体插画界面
立体插画也被称作2.5d插画，用二维的设计手法来展现三维的视觉效果。这种类型的插画在APP和网页设计中也很常见，在视觉展示效果上也给人一种全新的感官体验。在实际项目中2.5d插画用途十分广泛，好比APP的引导页、banner等，以引导页为例，引导页在APP中一般是将主要的功能用图形的方式来展示给用户，使用户能够在短时间内读取页面信息，这时在设计插画时就可以根据文案内容对画面进行构思，用统一而鲜明的块讲元素构建成三维的立体视觉效果，使用户更加直观的理解页面信息。（见图4）
将立体插画与动效技术结合，更是别有一番趣味，目前来说使用3D动画的网站并不多见，如果能将优秀的立体插画加上动效运用在网页及APP中，不仅可以改善界面的用户体验，同时也能给用户带来惊喜。例如Johnny Slack、Future Living、Paper Planes这几个网页作品中就运用了这种3d动画的效果，这种立体动画所带来的透视感、空间感，能够与营造强烈的视觉冲击力，更好地传达页面信息。
网页界面设计中五、插画在UI领域的发展前景
UI设计的学科交叉的特性决定了领域内的“跨界”发展趋势，将艺术设计与信息技术的结合对UI设计领域发展起着积极促进的作用。在一直以来的人类历史文明进程中，艺术与科学技术相互关联。信息技术主要包含信息和技术这两大特性，同时又包含网络化、媒体化、数字化等多种特性，在新的时代背景下衍生出新的艺术形式；与此同时，艺术设计在实践的过程中建立新的美学关系及艺术语言，为信息技术打开了更广阔的视野。随插画艺术在UI设计中的广泛运用，之后的发展也会在现有的基础上运用的更加成熟，插画所具有的丰富的视觉语言和顽强的艺术生命力，使其在UI领域占据着有力的地位。一个UI界面需要借助插画艺术的不同风格、不同形式使页面能够准确无误的传递产品所要表达的信息，能够让产品与受众人达到情感上的共鸣、建立起很好的沟通桥梁，将插画艺术的存在运用到极致。所以在信息技术与艺术设计结合的时代，插画的魅力使其在UI设计中的发展不
可估量。
图4 口碑周年庆立体插画
参考文献：
[1]吕叔湘，丁声树.现代汉语词典[M].商务印刷馆,2012.
（责任编辑：董冉达）

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