论UI扁平化设计体验感的实现——以Material Design为例.pdf

202设计源引68论UI扁平化设计体验感的实现以MaterialDesian为例王静静，程隆摘要：互联网行业的飞速发展推动了UI设计领域的不断进步。近年来，UI设计风格主流趋势逐渐由靠近真实的拟物化设计发展为如今的扁平化设计，随着大众审美的改变和对用户体验标准的提升，扁平化设计也在逐步拓展。在各种拓展中，MaterialDesign遵从了设计美学原则、视觉语言原则和功能表达原则，创造了全新的扁平化UI交互体验，这样的交互体验是如何实现的，值得深思。关键词：UI设计；扁平化设计；MaterialDesign用本文格式王静静，程隆.论UI扁平化设计体验感的实现：以MaterialDesign为例Ul.创意23(2):68-72.On the Realization of UI Flat Design ExperienceTakeMaterial Design as anExampleWANG Jingjing,CHENG LongAbstract:The rapid development of the internet industry has promoted continuous progress in the UI fielddesign.In recent years,the mainstream trend of UI design style has gradually developed from skeuomorphicdesign close to reality to todays flat design.With the change in public aesthetics and the improvement ofuser experience standards,flat design is also gradually expanding.In various expansions,Material Designfollows the principles of design aesthetics,visual language,and functional expression to create a new flat Uinteractive experience.How much the interactive experience is realized is worth pondering.KeyWords:UI design;flat design;Material Design进入2 1 世纪以来，科技的不断进步带动了互联网的发展，随着电子产品使用率的提高，人们对页面的需求开始有所不同，关注的重心逐渐由漂亮的装饰转到信息本身，在这样的意识下，拟物化UI界面过多的装饰便成了干扰信息1 。扁平化设计的表现与拟物化设计正相反，提取表达的关键信息，抛弃过于真实的立体化效果，用平面化、简洁化的设计思路保留关键信息并再次进行创作，整体上比原本的设计简洁了许多，视觉上更显时尚大方，功能上更注重交互体验和简洁高效。MaterialDesign（材料设计语言）是由Google（谷歌）推出的一款全新的设计语言，其将信息与装饰进行整合，使界面简洁的同时，具有立体感。MaterialDesign在设计时贯彻了三个理念：一是通过现实手段体现实体感，二是所有的设计必须经过深思熟虑，三是合理的动效设计(2 1 。扁平化设计风格的起源为使眼花缭乱的界面更贴合用户的使用习惯，UI设计的主流风格已从当初为降低学习成本而产生的偏现实风格的拟物化设计，逐渐转变为当下的扁平化设计。扁平化设计简化了页面的风格、图标和布局等为方便用户识别而产生的复杂的可视化图像符号，其本质是脱离因烦琐的外观而造成对功能、布局等一系列设计的疏忽。在拟物化设计中，外观的过度烦琐使页面的风格、布局等未能考虑用户的使用习惯，造成视觉效果、排版、交互上的华而不实。扁平化设计使视觉效果更加简洁，在注重对风格、布局等的设计时，应理性分析用户的使用习惯，突出功能在设计中的占比。尽管很难说清楚扁平化设计何时产生，但经过与其他设计风格的比对，发现其与几个国外艺术设计风格相类似。（一）现代主义设计风格现代主义设计风格产生于2 0 世纪20年代前后的欧洲新建筑运动，主张形式遵循功能，这是一场技术与精神思想上的改革运动。此时的设计师从为精英服务转向为大众服务，追求新的设计形式，反对过多的装饰，这场革命性运69动也陆续影响了环境设计、平面设计等其他艺术设计领域。包豪斯设计学院的成立使这场运动达到高潮，标志着现代主义设计风格的诞生，影响至今的“少即是多”概念也是由这一时期的建筑设计师路德维希密斯凡德罗（LudwigMiesVanderRohe）提出。如今，扁平化设计理念正是以现代主义提出的一系列概念为支撑。（二）国际主义设计风格国际主义设计风格又叫瑞士风格，诞生于2 0 世纪5 0 年代，其前身是以包豪斯为首的现代主义设计风格，主要以简约反装饰、功能与理性，以及讲究几何秩序为特征。在平面设计中，最突出的便是无衬线字体的发展应用，即将网格结构与无衬线字体相结合，使做出来的设计在视觉表达上层次分明，内容清晰明确。如今的扁平化设计同样采用了与国际主义设计风格相类似的设计手法，如简洁的界面、无衬线字体的应用等。此外，因功能性需求，扁平化设计也会注重可视化图像符号的使用。（三）极简主义设计风格极简主义设计始于瑞士，这一设计风格将设计带回它的核心，即抛弃不必要的元素，将功能化考虑到设计的方方面面，贯彻“少即是多”的设计理念。近几年在视觉传达设计方面，极简主义设计逐渐斩露头角，被运用在影视、媒体等领域。扁平化设计可以理解为极简主义设计在UI领域的延伸。二、扁平化设计的体验性原则早期的网络媒体为了方便不同年龄段用户使用，采用了拟物化设计，即模拟现实物品的造型和质感。随着时代发展，用户使用网络的频率也随之增加，之前拟物化设计带来的或过于烦琐、或过于精美的界面已不符合用户的使用习惯，于是，简洁易使用的扁平化设计风格出现在人们的视野中。（一）视觉语言原则1.形式简单明确形式服务功能是设计领域的经典理念，扁平化设计以这一理念为中心，保留简单、直观，并且对传递信息的主要元素加以设计，以实现信息清晰化和功能最大化，这是扁平化设计的关键步骤。若把这一步骤理解为去除高光、阴影等效果，可能过于偏激。以毕加索的作品公牛为例，毕加索将牛的身形特点予以概括、简化和提炼，逐步将一个具体的牛简化为最终的单线，这不只是单纯地去除多余元素，而是对牛本质特征的理解。在扁平化设计中，不只在页面装饰上要去除多余的装饰，对字体、排版等也有简化的方法，如使用无衬线字体可以优化页面信息的可阅读性；合理布局排版可以让用户直接、清晰地看到页面主要表达的内容等。以最简单的形式突出所要表达的内容是扁平化设计的基本原则。以GoogleMail图标为例，初期延续了红白信封的设计风格，将信封和字母“M”相结合，2 0 1 3版的GoogleMail图标将红白信封单独提炼出来作为图标符号呈现在用户面前，使视觉表现更加简单明确，2 0 2 0 版的GoogleMail图标设计巧妙地融合了Google的核心品牌色（蓝色、红色、黄色、绿色），使其在Google旗下的产品图标中更显一致。2.色彩干净简洁扁平化设计的色彩运用是为了突出所表达的功能。大多数情况下，设计师会选择饱和度高，且纯度高的亮色进行色彩碰撞，营造出强烈的视觉冲击力，这样的搭配无论背景或亮或暗，都可以做到凸显主体的作用。复古色系是扁平化设计的一种色系，这种色系会随着功能和产品定位的不同而在保持明亮的同时降低纯度，但在色彩搭配上柔和且不失整洁，无论搭配黑色字体还是白色字体都可以使页面整洁干净、内容清晰明确。3.质感简洁精炼质感简洁是扁平化设计的特色之一，在去除烦琐装饰之后，内容与装饰的比例更加合理，页面功能更加清晰的使用体验成为设计优先考量的目标。首先，在字体方面，往往会采用无衬线的标准字体，同时，通过大小、对比、排版等突出主要功能让设计更加时尚前卫。其他装饰虽会结合现实光影立体的表现，但扁平化设计的本质更偏向少量的特效装饰，从而为整体效果锦上添花。比如，在经常使用的底部添加微小的阴影，不只是单纯地为平面添上立体的空间感，更是突出其功能，从而有效引导用户使用。此外，还有很多增加质感的方法。比如，苹果手机界面的半透明毛玻璃风格，可使新页面在不脱离原本页面的情况下，既不切断与原本页面的联系，又可以清晰展示新页面的内容，通过明暗虚实的对比让主要信息更加突出。（二）功能表达原则扁平化设计的本质是让用户关注内容本身，而非形形色色的装饰，是为了功能操作的简单易用 3。扁平化设计是在融合功能与装饰的同时，突出功能的展示而产生的设计风格。因此，如何让功能表达清晰明确，让内容直观呈现是扁平化设计考虑的核心问题。1.信息直观有序信息时代，人们使用网络的需求从信息查询到娱乐休闲，页面展示的内容70随用户需求的增加而增加，但屏幕空间有限，这就需要将展示的内容进行排版设计，使主次分明。主要内容占比大一些，以便用户第一眼找到，同时，还需考虑其他功能的使用频率，进而在屏幕中合理安排，使用户一目了然。如今，人们使用手机的频率越来越高，但手机属于小屏幕设备，这便要求对信息进行分类排列，将内容按照功能分类整理，在页面上留下主要展示的功能或内容，利用层级将其他功能或内容进行折叠，以减少屏幕空间的占用率。2.层级扁平简洁多数情况下，单一页面并不能将所有的功能直接展示出来，这时就需要进行功能的折叠，分析功能的需求程度，将需要的功能留下，不需要的功能折叠至下一页面。但可折叠并非可以无限折叠，扁平化设计是注重功能性的设计，不只注重视觉设计，更注重界面信息的架构。以往拟物化设计的层级架构是金字塔式的“尖而深”，有着极强的纵深度，复杂的多层次菜单导致切换页面寻找信息的步骤极为烦琐，甚至可能出现迷航的现象。扁平化设计对层级架构进行的改良正是将以往“尖而深”转变为“广而扁”，体现信息横向维度，通过缩短层级，减少中间页，将更多的信息模块分类展示在同一界面中。界面的多样化模块和信息的透明化管理，使用户无须进行复杂的页面切换也可以找到想要的信息。这样的设计优化了用户的使用体验，操作简单快捷，使用时更加方便，还可以节省流量。三、基于用户体验的MaterialDesign拓展Material Design借鉴了以往的经典设计，并对现实世界物体的本质属性进行了提炼总结，在扁平化设计的基础上融合了拟物化设计，在原本平面的页面上保留了些许立体的阴影和动作营造的空间感，拓展了以往的扁平化设计风格。Material Design在了解人本性的基础上，抛弃了一切复杂且低效能的元素，仅保留能反映事物本质属性的元素，逐渐靠近人们最真实的天性，即喜欢简单 4（一）现实世界的隐喻MaterialDesign希望用户在屏幕中可以体验到与现实相似的物理属性，通过模拟物体光影、质感和动感等现实的物理属性，并进行合理的取舍改进设计，可以使用户的交互体验亲切自然，在对信息进行认知时更加易懂。1.纸与墨MaterialDesign的灵感源于现实中的纸与墨，将纸作为设计的基础，在纸的光影、质感、厚度和运动等基础上利用设计的创造力，重新赋予其拼贴变形、波纹纹理等属性，应用最多的便是页面的切换功能，模拟了纸张展开、折叠、移出等现实的物理动作，使用户在体验的基础上更容易理解功能的变换。原本拟物化过于真实的水波纹状态限制了设计师的想象，无法成功与数字屏幕结合，Google设计师将纸与墨相结合，模拟出触碰一点扩散至全局的效果，并将此效果应用在交互动画中，使动画看起来更加有创意的同时，也丰富了原先单调的交互体验。2.阴影与层级为使扁平化设计可以让用户体验到在同一平面不同层级的关系，MaterialDesign以阴影为设计，既强调表面模块边缘，又通过改变阴影的轻重来对页面信息赋予丰富的视觉层级。将页面的内容与背景分离开来，强调重要内容与次要内容的优先级，引导用户更加明确地使用功能。MaterialDesign在平面中创造了一个有深度的视觉感受，不同深度之间在视觉效果中展示的纵深感也不相同，从2 dp到2 4dp，每次数值增大，底部阴影都会随之产生不同程度的模糊和扩散，模拟真实世界的物体投影在平面上的阴影效果。层级中对阴影的应用更好地将页面信息进行了分离，从视觉体验感来说，可以清晰地对内容进行分类，方便用户浏览主要信息，并降低其他信息对主要信息的影响。（二）花视觉效果搭建体验逻辑MaterialDesign的视觉设计既有美感又有逻辑性，鲜艳活泼的色彩，紧密结合的图像与内容，简洁合乎比例的字体共同存在于这一设计中。1.色彩应用Material Design色彩的灵感源自现代的建筑、路标、运动场馆等各种现实元素，通过亮色与阴影的碰撞突出色彩的活力，大胆的对比增加了页面的丰富度，让单调的界面变得有活力。Google于2 0 1 4年创造了属于自己的色卡，此后便在这一色卡的基础上使用颜色。用色原则有三：一是提倡一种颜色为原色，一般为色卡中饱和度为5 0 0的颜色。二是选择一种强调色，用于状态栏等小区域，强调主色并增加色彩的丰富性。三是选用一个基色，一个与基色相近亮度以及饱和度的副色，和其他一个色彩鲜明的强调色和互补色进行强烈的色彩对比。2.字体优化文字是表达内容的最好媒介，在同一应用中出现多种样式的字体瞬间就会破坏整体性。因此，文字样式也是在设计Material Design时要注重的方面。有时一些字体会使用加入衬线的方法使其看起来美观，但这样会动摇装71饰性与可阅读性之间的平衡，过多的衬线字体会影响文章的阅读性，使人感觉眼花缭乱。因此，MaterialDesign采用无衬线的Roboto字体，并对其进行优化设计，使其可以适应页面布局，增加可阅读性的同时，也规范了文本字体的大小、缩放与排版，文本与背景的对比度为4.5:1（依明度计算），阅读的最佳比例为7:1，可以提升用户的阅读体验。一般情况下，字体过大或过小，对浏览信息都不利，过大的字体会使页面空间的使用效率降低，从而可能需要用户进行更多的交互才能浏览到自己想要了解的信息，过小的字体会使内容看不清，从而造成视觉疲劳，降低用户的使用感。前面的举例为一般情况，特殊情况如近视或老年人这样视觉本身有障碍的人群，便可通过系统设置将文字适度增大，以满足浏览需求，这样可能会改变原有的排版比例，但布局仍保持一致，以便用户浏览和理解信息。3.图标设计产品图标是品牌和产品的视觉表达，包括其服务和工具。一个优秀的图标可以直观地向用户展示品牌特色，一个形成整体系列风格的图标可以快速使用户了解品牌的产品特色并形成对这个品牌独有的品牌印象。Material Design图标的设计灵感源自现实世界中的纸张，每个图标都犹如现实世界的纸张经过折叠、裁剪、拼贴后合成的图形元素，并通过高光和阴影提升质感而形成。一个简洁、概括的图标，能带给用户更大的想象空间，当然它所携带的信息量也就更大了，功能也就被突出了 5 。图标风格会随产品定位及风格的不同而产生变化，但都会进行统一。图标统一会增加产品的整体性，统一的图标除了增加页面的美观度，还便于用户理解，使用户在初期使用时易于找到自己想要的功能，且在意识中建立图标与功能的联系。若风格不同便会让用户的理解产生分歧从而增加前期的学习成本，还可能导致用户难以理解，进而在使用时找不到相应的功能，产生不良的用户体验。4.文案与图片搭配文案与图片的相辅相成可以清晰地向用户传达内容和情感，MaterialDesign便将这点进一步应用到产品中，使产品内容更具吸引力。文案含有表达内容及内容中所包含的情感的作用，对文案的要求也需简洁精炼，省略介绍性的语句直接为用户呈现重要的内容。在MaterialDesign中，文案的使用有四个基本原则：一是使用“你”这一人称与用户进行交流，一般尽量避免使用“我”或诸如此类的称呼。二是MaterialDesign以英文为主，故而在众多时态句式中使用最为简单的现在进行时进行表达。三是直接显示重点内容，省略其他带有介绍性或形容性的语句，以方便用户浏览信息。四是在单独一个交互链中专注用户与产品的互动，取消只有内部人员或专业人士才会理解的专业用语及概念。图片含有装饰的作用，但图片的作用并不只有装饰，也可以帮助用户划分信息类别并进行引导。MaterialDesign在页面设计上使用与文本内容表达情感相符的图片更是引起用户情感上的共鸣，特别是一些含有感情色彩的图片。图片与文案交相呼应，使用户沉浸其中，形成一种感官体验，帮助用户理解表达的内容。同时，图片作为装饰与背景色彩的协调共融，可以使页面锦上添花。（三）动效设计动效设计也是Material Design的出彩之处，真实且与功能有联系的动效，便是其主打的设计。单一普通的动效虽无任何问题，但随着使用时间的增长，这种普通的动效会降低用户的使用兴趣。基于此，Material Design的动效设计增加了俏皮感，以激发用户的使用兴趣。1.有意义的动画在动效设计中，无论是图标的触碰还是页面的切换，都会使用响应式交互，当用户与应用交互时，页面或图标便会生成与其特性相符的动效，这样的小动画可以为用户体验增添精致感和俏皮感。每个图标的动画都与它们自身的视觉设计和操作反馈保持一致。比如，点击点赞图标，便会做出甩手伸出大拇指的动画效果；点击闹钟图标，便会做出闹钟响时震动的动画效果；点击铃铛图标，便会做出摇铃的动画效果。有趣的动画可以让用户产生交互欲望，交互时的体验感也会增加趣味性，增加用户使用的舒适感。2.真实且自然动效设计源自真实世界的物理变化，不止在运动元素上模拟真实的动感，更在运动速度上与现实相配合，使其更加自然，不会瞬间出现或消失，也不会突然开始或停止，更不会出现与物理现实方向和速度相反的动画，影响人们对运动规律的认知。针对以上问题，MaterialDesign观察生活中的各种物理现象并将其应用在动效设计中，在运动过程的细节上也使用了缓动的效果，针对不同的页面大小、图标移动距离等因素，缓动的状态也不同。缓动类型可能因平台而异，分为标准、强调、加速、减速缓动，不同的缓动给人的视觉观感也不同，恰当的缓动效果可以让用户体会交互的乐趣，提升操作及视觉舒适度，72如信息出现时便会使用先加后减的缓动效果模拟飞入的状态，信息消失时便会使用先减后加的缓动效果，模拟现实世界加速时产生的速度变化的物理属性，基于现实的效果可使用户在体验交互时更加有真实感。对速度的把控是动画效果中最精致的一点，这个速度不局限于运动的快慢，也包含持续时间的长短。页面转换及图标触发产生的过渡效果，无论过渡动画的风格如何，过渡时间不应过长，否则用户会产生过多等待的感觉，降低使用时的体验感。合适的持续时间和正确的缓动效果，会产生平滑且清晰的过渡，这便是MaterialDesign的出彩之处。（四）整体性和一致性过去Google旗下的产品风格不一，甚至在同一产品中同时产生三种不同的按钮，用户体验较差。在MaterialDesign诞生时就创建了统一的制作指南，统一了图标的使用，以及统一了同一产品不同页面中图标的大小比例，使用户即使在二级页面、三级页面，甚至更多层级的页面中依然可以感受到即使切换页面但从未离开过产品的整体性。日常生活中人们使用的电子设备类型多样，不只不同类型的设备屏幕比例不同，相同类型的设备屏幕比例也不相同，这就造成页面与屏幕的适配性降低，出现屏幕的两边有黑边或显示不全等情况。为优化各设备，使用户体验一致，MaterialDesign规划了一套页面内容排布比例，通过排列网格框架等方法将页面各内容比例和放置位置规范化，打造无论在何种尺寸的设备上进行浏览都可以在视觉上产生界面一致的视觉体验，使用户对产品的使用更加熟悉和舒适。四、UI设计由拟物化到扁平化的体验感提升（一）目的的转变最初的UI拟物化设计诞生于互联网刚起步的时候，大多数人对其了解不深，不论是对界面的认知还是使用都较为陌生，为使学习成本降低便使用了拟物化UI，根据功能对应现实中的物品，在屏幕中用写实的风格让用户更快速地学习，了解其作用。如今，基于用户对互联网有了一定的认识，现代UI设计师探寻更加轻便、美观的设计风格，保留了一些关键的信息识别符号，设计出了扁平化UI，使用户有了更加轻便、简洁、美观的使用体验。(二）体体验的转变拟物化UI具有写实性特点，不论颜色还是质感的塑造，都与现实相近，可以让没有使用基础的用户轻松与现实相结合，了解代表的功能从而方便学习和使用，但过于现实化会导致一个页面的众多物品在平面中堆叠，易使用户感到烦琐，同时，厚度塑造带来的多种层次的重量感也让用户感觉沉重。扁平化便是去除多余的烦琐，变为更加轻便简洁、更加规范化和人性化的排版，使页面每个区块的功能都更加清晰明了，贴近用户的使用习惯。用户可以轻松进行每一步的操作，尤其是运用在手机上，让人感觉仿佛拿起手机看到的是一张轻薄的纸而不是一块沉重的板砖。在设计的发展中，人们总跟随各种各样的现实背景进行创作，网络时代的UI设计从最初的杂乱无章，到拟物化创新，再到如今的扁平化，每一次的创新优化都是为了让用户的体验更加便捷，使用户可以轻松地浏览和使用所需功能。UI扁平化设计风格并非终点，从MaterialDesign的创新中可知，在扁平化设计中融合一下拟物化，在扁平的界面通过光影、色彩对比等手法营造轻微的空间感便是扁平化设计拓展的一大方向，这是基于平面向立体的突破，保持整洁统一的同时追求更丰富的效果，是一次创新的变革。即使过去的拟物化立体感和装饰的丰富程度胜于扁平化，但不得不承认，在用户体验轻便及注重功能性方面，这是失败的设计。尽管目前的设计还有许多不足，但未来发展的可能性，定会使扁平化设计的拓展更加丰富，更加符合用户体验。参考文献1王达.从拟物化与扁平化之争看GUI(图形用户界面）设计的发展趋势D沈阳：鲁迅美术学院,2 0 1 5:1 7.2吴政兴，朱晓菊.MaterialDesign的设计语言与动效设计探析.艺术与设计（理论）),2 0 1 8,2(5):7 0-7 2.3董甜甜.当代思潮背景下的扁平化设计研究 D.南京：东南大学,2 0 1 5:9.4徐晴晴.新设计语言MaterialDesign下的用户交互体验探究 D.天津：天津工业大学，2 0 1 5:2 3.5方心怡，扁平化设计风格下平面视觉元素的应用研究 D.苏州：苏州大学，2015:12.五、结语王静静，程隆山东艺术学院