材料设计在UI界面中的体现

1、本科毕业论文（设计）题 目：探析材料设计在UI界面中的体现 学 生： 王梦琦 学号： 201106010224 系 别： 设计艺术系 专业： 艺术设计 入学时间： 2011 年 9 月 13 指导教师： 王淼 职称： 讲师 完成日期： 2015 年 5 月 12 日诚 信 承 诺我谨在此承诺：本人所写的毕业论文探析材料设计在UI界面中的体现均系本人独立完成，没有抄袭行为，凡涉及其他作者的观点和材料，均作了注释，若有不实，后果由本人承担。 承诺人（签名）： 年 月 日探析材料设计在UI界面中的体现姓名：王梦琦 学号：201106010224 指导老师：王淼摘要：随着UI设计的不断发展，近期出现了

2、一种新的界面设计方向，它就是材料设计。论文以材料设计在UI界面中的体现为题，分析了材料设计的艺术特征，认为材料设计不仅有丰富的视觉空间，还有统一的视觉动效。进而着重从界面风格、布局、图标、按钮四个方面，探讨了材料设计在UI界面中的应用，为UI界面提供了新的设计思路，同时开拓了视觉设计视野。关键词：材料设计、UI界面、系统动效、界面风格Theory of material design in the UI Name:WangMengqi Student Number:201106010224Advisor:WangMiaoAbstract: With the continuous develop

3、ment of UI design, recently there is a new interface design direction, it is the material design. Thesis topic, reflected in the UI interface design are analyzed the art features of material design, think material design not only has the rich visual space, and unified visual effect. And emphatically

4、 from the interface style, layout, ICONS, buttons, four aspects, this paper discusses the application of material design in the UI interface, for UI interface provides a new design idea, develop the visual design view at the same time.Key word: Material design, UI interface, system dynamic effect, i

5、nterface style目 录引言1.材料设计与UI界面1.1材料设计的含义1.2 UI界面的含义2材料设计的艺术特征2.1丰富的视觉空间2.1.1大胆的色彩对比2.1.2鲜明的视觉层级2.2统一的视觉动效2.2.1卡片式渐变2.2.2交互性设计3.材料设计在UI界面中的应用3.1材料设计在界面风格中的体现3.2材料设计在界面布局中的体现3.3材料设计在界面图标中的体现3.4材料设计在界面按钮中的体现结语参考文献引 言移动设备的崛起带来了用户界面设计的变革，材料设计是近期出现的一种新的界面设计方向。材料设计通过视觉空间和视觉动效来展现它的艺术魅力，其中的色彩搭配使得界面看起来非常的大胆，充

6、满色彩感，凸显内容。微妙的动画、阴影也使得用户与材料设计的互动更加有趣。在UI界面中，材料设计的界面风格和布局都有了很大的改变，在图标和按钮上也进行了改进，有很多令人愉悦的小细节，给用户提供了一种新的体验模式。材料设计不仅仅是一种视觉风格的转变，而是一种设计语言和思维方式的演变，它将引领UI设计的潮流趋势。1. 材料设计与UI界面1.1 材料设计Google今年推出了新的移动设计方向“MaterialDesign”，我把它翻译成“材料设计”。“材料”是种隐喻，即空间的合理化及系统动效的统一。2014年, 扁平化设计是最流行的UI设计趋势，而它的“过于平”也引起了一番热论，但材料设计在扁平化上作

7、了微妙的渐变，层次感和动画，保留了意义上的有形世界。所以，我们可以形象的理解材料设计是“向拟物回跳一下的扁平化设计”，但材料设计本身又是独立的。材料设计的中心思想，便是把物理世界的体验带进屏幕。将现实世界中纸张的特性挪到电子屏幕里，在“纸”上呈现信息内容，给用户一种贴近真实的体验，让整个界面看起来简洁、直观，让人眼前一亮。当前，Android 7的WPS就是基于材料设计的全新设计，业内专家表明:材料设计或将成为将来界面设计的趋向，这类设计理念让安卓界面在体验上更加新颖和简洁。1.2 UI界面UI的意思就是用户界面，用一句话概括就是人和工具之间的界面。在我们生活中，界面同样体现在某一些方面，比如

8、看电视的时候遥控器和屏幕就相当于这个界面。它不仅仅是由用户与界面两个部分组成，同时还包含着用户与界面之间的交互关系。JefRaskin在人本界面，交互式系统设计一书中指出“就消费而言，界面就是产品。”在这里，界面包括产品外观和产品的交互行为。一个美观而不失实用的界面会给人带来轻松舒适的视觉享受，它会吸引用户去探索，去发现有趣之处，拉近人与电子设备之间的距离，让用户乐于使用。界面设计并不是仅仅为了美观，他需要为用户而设计，需要考虑用户的使用环境与使用方式，它是考虑用户主观情感的科学性的艺术设计。2. 材料设计的艺术特征2.1 丰富的视觉空间2.1.1 大胆的色彩对比图 1用户第一次看到一个UI界

9、面时，会对色彩留下最深刻的映象，因此色彩是UI界面设计中不可缺少的视觉元素。如图1，材料设计崇尚多彩，但它并不使用那种很艳丽的颜色，大多采用清新靓丽的色彩，清爽的页面通常都离不开白色背景的映衬。同时将本来靓丽的色彩加入一点点的灰色，不但让图案变得生动起来，又不会因为过于艳丽让人感觉到俗气。在材料设计中，界面一般采用不同的色调来区分各个栏目的主题，而部分细节的处理则喜欢用靓丽分明的色条或色块。如图2，工具栏大块区域采用了蓝色为主色，而状态栏采用了比主色稍深的蓝色。如图3、图4用靓丽的色条来强调标题，同时强调色可被用来当做按钮和控件或开关和滑块。图4图3图 22.1.2 鲜明的视觉层级图5图6假如

10、某篇文章的标题比内容概述更重要，标题就应该有更多视觉主导力。主导元素是所叙述故事的起点，是用户接触设计的入口，能够将用户注意力第一时间吸引到设计师希望用户注意的地方。为了最快的吸引用户注意，可以通过对比、强调、和相对的视觉重量建立主导地位元素。如图5,是材料设计在Feedly阅读器里的应用，图中的主导元素是顶部的图片，占据了最大的面积，深色图片底下大面积白色区域与图片形成对比，打造出鲜明的用户界面，吸引用户关注。图片上的“Food”字样可能是页面最重要的信息，清晰阐述此页面的主题。在一个设计中，首先突出主导元素，其次就应该强调焦点。如图6，此页面主导元素是人物图片，与周围的字体形成本质对比，而

11、它的焦点是图上加粗的黄色字体“GIRL”， 旁边的播放按钮也是焦点之一，从而构建出视觉层级、视觉意义以及视觉聚焦。2.2 统一的视觉动效2.2.1 卡片式渐变在材料设计上，动效的理念有着相通的原理。动效连接于整个应用的程序流程，表达了设计的先后关系，尤其是关于产品的连续性来讲，用户根本没有中断的感觉，在材料设计中，使用了渐变的方式让界面流畅、舒适。UI界面的渐变是通过画面基本形象有序地、渐进地变动而形成如梦如幻的、似音乐旋律般的视觉效果，这样使画面具有极强的观赏性和秩序感。如图7，在主页浏览视图里包含一列卡片，当你点击一个卡片时，卡片将不再是一张卡片的大小，而是将延展到全屏幕。因此，“魔法纸片

12、” 是材料设计中最重要的信息载体。纸片层叠、合并、分离，具有现实中的厚度、惯性和反馈，也具有液体的某些特性，可以自由伸展变形。如图8，它同时运用了材料和动效，卡片就是所谓的材料，当用户与其交互时，通过动效卡片延展来显示更多内容。这样给用户带来的视觉效果是连续的，告诉用户他们如何使用，如何让他们的操作影响到界面。图7图82.2.2 交互性设计动效的快速反馈，可以让用户感到信任和快乐。当用户与应用交互时所反馈的动效不仅要实现美感，符合物理逻辑，而且能够给用户带来乐趣。反馈动态效果的设计必须深思熟虑且具有针对性，而不能随性设计，反馈动效应温和，不让用户分心，鼓励用户进一步探索应用。材料设计具备快速反

13、馈动态效果的特性，它让用户充满期待，触摸、语言、键盘及鼠标是首要考虑的输入模式。虽然UI元素是可见的，但是在物理上被限制在了设备屏幕之内。视觉线索和动态效果可以为用户和设备之间建立沟通的桥梁提供线索，让用户确认自己的输入有用，继而引导用户操作。动效的加入，让用户与应用之间的沟通真实、有效，将应用带到了新的高度。如图9和图10，是材料设计应用于Feedly阅读器。在Feedly阅读器中，最重要的转场是打开文章和关闭文章。过程当中，用户在文章的列表和文章内容中切换。如图9，当用户点击文章预览时，应用会出现点击涟漪效应来提供即时反馈，然后整个效果会扩大充满整个文章预览元素。同样，当用户关闭文章时，这

14、种效果也会在顶栏中出现。这是表面的反馈,涟漪效应使用户知道他的操作有用，给予用户带入感，让用户的注意力不分散，同时感受到小趣味，继而引导用户进行下一步操作。当用户在图9杂志视图中预览图片时，点击图片后，文章会在转场过程中逐渐放大，内容会渐显过来，而图片会用渐隐来过渡，它们会移动到相应的位置。有时在预览图中没有出现在第一屏，然后在转场时渐显文章的内容，缩略图也渐隐来过渡。整个切换过程流畅、自然，不会让用户感到突兀，提高了用户体验的整体美感。如图10，当用户点击了列表中的文章预览区域时，模块将会向上升起，形成属于这篇文章的一个新的平面，考虑到视觉上的连续性，这个新平面会被放大，它成为最主要的一个面

15、，同时文章的内容也渐渐显现出来。整个移动过程有意义、有秩序，引导着用户的关注力，将最要的信息内容传递给用户。图103. 材料设计在UI界面中的应用3.1 材料设计在界面风格中的体现图11视觉设计风格是指界面所具有的特有的气质。后现代主义这种风格在UI界面的设计中占很大的比例，主要表现为波普风格和抽象风格。波普风格主要是以明朗亮眼的色彩、新奇的搭配图案和强烈的色彩对比来刺激用户的注意力。而抽象风格会给用户带来很大的联想的空间，通过点、线、色彩、面块、图11形体、构图来传达。材料设计的界面风格总的来说是“鲜明、形象、深思熟虑”的。如图11，页面运用了留白，移除了所有可有可无的元素，搜索框吸引了用户

16、全部的注意力，引导用户去搜索。留白是抽象风格中常见的一个运用手法，它们的存在并不是单独的，而是为了烘托主体元素，它们和主体元素是相互依托的关系。这样给用户一种简洁、明了、清新的感觉。而在颜色选择上材料设计的原则是“大胆、图形化、有意义”，提倡一种主色，一种互补色，运用巧妙的色彩搭配、点、线、面块等使得整个界面看起来非常大胆、充满色彩感，凸显内容。如图12，分别是具有波普风格的图画和材料设计的界面风格，从色彩上看，主要以红、黄、蓝三原色为主，色彩明快，色块层次分明，让人眼前一亮。而白色的适当点缀，又平衡了空间的色彩关系，给用户一种舒适的感觉。从搭配的图案上看，单色与拼接图案的结合，充满趣味，吸引

17、用户眼球的同时，也治愈了用户的“审美疲劳”。图123.2 材料设计在界面布局中的体现图13界面设计中的布局就是在有限的空间里对屏幕中的元素依据规律排列组合，而一个漂亮、易读的排版离不开基本骨骼系统。骨骼设计系统在界面排版中要遵循一些基本原则，其中包括对齐原则、比例适度、留白、秩序美等。从图13中可以看出，材料设计运用了“基线”对齐原则，同时利用骨骼线把文字、图形、线条按照一定的比例整体组合，使整个界面具有清晰明了的视觉秩序美，让用户得以快速阅读信息，并有一种轻松、舒适的感觉。同时，视觉流程在界面布局中也尤为重要。当我们浏览界面时，用户首先会快速粗略地浏览页面，大致形成第一印象，接着视线就会从最

18、吸引注意力的一点开始依次浏览，最后完成信息的传递。这就是视觉流程。如图14，用户第一眼会看到闹钟，接着视线会移到右侧，右侧卡片利用线条的分割、视觉元素的排列，带动用户根据设计的引导流程进行有效的视觉交互和信息传递。在材料设计中，布局上注意文字以及图片分量相当，在使用元素的同时注意元素在整个布局上面的呼应，在布局节奏感的把握上，注重疏密搭配。界面的编排是为了突出主要信息为目标，让用户可以关注到重要的点，同时组织页面的设计元素，合理引导视觉。如图15，是材料设计对页面的编排，它将构成要素进行了巧妙合理的安排，是整个界面具有层次感和条理性。其中恰如其分的采用余白，使文字更加突出，具有更强烈的视觉感染

19、力，使画面富有韵律。图15图143.3 材料设计在界面图标中的体现图16图标是一种可视性很强的图像语言。它相对于UI界面就好像公共系统中的标志，虽然它只是界面中一个极小的点，却可以引导访问者最方便、快捷的方式浏览和使用整个界面。图标是具有标志意义的视觉符号，所以在材料设计中需要着重考虑图标的视觉感觉和视觉冲击力。如图16，图标具有很强的视觉表现力，有丰富的色彩和简单明了的几何图形组成，线条分明，和谐的明暗关系使图标立体起来，富有韵律感。同时色彩艳丽的图形由白色来衬托美丽，整体简洁大方，但又不失活泼跳跃，提高了整个“颜值”。UI界面图标主要分为入口功能和操作功能，导航性图标具有入口功能，它是UI

20、界面的方向标志，它能指引用户如何进入界面的不同区域，当你点击它时，就会出现一个子页面。如图17。而操作命令图标图标具有操作功能，它所指示的内容是各种交互功能、步骤等，界面工具条中包括的小图标都属于操作命令，它们可以帮助用户实现一些操作，引导用户去使用，如图18。操作功能的图标在完成点击操作之后，通常会转为对应的另一种形态。如“返回”与“菜单”，“收藏”与“已收藏”的状态之间切换，这样的设计里，在两种状态之间切换图标经常让用户感觉到生硬，而点击图标动画后用户会得到更佳强烈的反馈，使用户感到有趣，并且让界面生动，活泼起来。图18图173.4 材料设计在界面按钮中的体现按钮能够提示观众，引起用户注意，好的按钮设计可以将界面主题化、形象化、生动化，引导更多是用户浏览页面、接受信息的传达。按钮一般较小，往往采用与背景对比较强烈的色彩以引起注意，同时与整个界面协调。浮动按钮是材料设计中比较重要的一个体现，如图18，浮动按钮通过圆形元素与分割线、卡片、各种直线形成鲜明对比，并使用色彩设定中鲜艳的辅色，给用户带来更具突破性的视觉效果。浮动按钮的大小分为默认大小和迷你两种。