论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以阴影为设计，既强调表面模块边缘，又通过改变阴影的轻重来对页面信息赋予丰富的视觉层级。将页面的内容与背景分离开来，强调重要内容与次要内容的优先级，引导用户更加明确地使用功能。Ma