《材料设计在UI界面中的体现.doc》由会员分享，可在线阅读，更多相关《材料设计在UI界面中的体现.doc（12页珍藏版）》请在金锄头文库上搜索。
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 developm
3、ent 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, in
5、terface 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用靓丽的条来强调标题，同时强调可被用来当做按钮和控件或开关和滑块。43 22.1.2 鲜明的视觉层级56假如某篇文章的标题比内容概述更重要，标题就应该有更多视觉主导力。主导元素
10、是所叙述故事的起点，是用户接触设计的入口，能够将用户注意力第一时间吸引到设计师希望用户注意的地方。为了最快的吸引用户注意，可以通过对比、强调、和相对的视觉重量建立主导地位元素。如5,是材料设计在Feedly阅读器里的应用，中的主导元素是顶部的片，占据了最大的面积，深片底下大面积白区域与片形成对比，打造出鲜明的用户界面，吸引用户关注。片上的“Food”字样可能是页面最重要的信息，清晰阐述此页面的主题。在一个设计中，首先突出主导元素，其次就应该强调焦点。如6，此页面主导元素是人物片，与周围的字体形成本质对比，而它的焦点是上加粗的黄字体“GIRL”， 旁边的播放按钮也是焦点之一，从而构建出视觉层级、
11、视觉意义以及视觉聚焦。2.2 统一的视觉动效2.2.1 卡片式渐变在材料设计上，动效的理念有着相通的原理。动效连接于整个应用的程序流程，表达了设计的先后关系，尤其是关于产品的连续性来讲，用户根本没有中断的感觉，在材料设计中，使用了渐变的方式让界面流畅、舒适。UI界面的渐变是通过画面基本形象有序地、渐进地变动而形成如梦如幻的、似音乐旋律般的视觉效果，这样使画面具有极强的观赏性和秩序感。如7，在主页浏览视里包含一列卡片，当你点击一个卡片时，卡片将不再是一张卡片的大小，而是将延展到全屏幕。因此，“魔法纸片” 是材料设计中最重要的信息载体。纸片层叠、合并、分离，具有现实中的厚度、惯性和反馈，也具有液体
12、的某些特性，可以自由伸展变形。如8，它同时运用了材料和动效，卡片就是所谓的材料，当用户与其交互时，通过动效卡片延展来显示更多内容。这样给用户带来的视觉效果是连续的，告诉用户他们如何使用，如何让他们的操作影响到界面。782.2.2 交互性设计动效的快速反馈，可以让用户感到信任和快乐。当用户与应用交互时所反馈的动效不仅要实现美感，符合物理逻辑，而且能够给用户带来乐趣。反馈动态效果的设计必须深思熟虑且具有针对性，而不能随性设计，反馈动效应温和，不让用户分心，鼓励用户进一步探索应用。材料设计具备快速反馈动态效果的特性，它让用户充满期待，触摸、语言、键盘及鼠标是首要考虑的输入模式。虽然UI元素是可见的，
13、但是在物理上被限制在了设备屏幕之内。视觉线索和动态效果可以为用户和设备之间建立沟通的桥梁提供线索，让用户确认自己的输入有用，继而引导用户操作。动效的加入，让用户与应用之间的沟通真实、有效，将应用带到了新的高度。如9和10，是材料设计应用于Feedly阅读器。在Feedly阅读器中，最重要的转场是打开文章和关闭文章。过程当中，用户在文章的列表和文章内容中切换。如9，当用户点击文章预览时，应用会出现点击涟漪效应来提供即时反馈，然后整个效果会扩大充满整个文章预览元素。同样，当用户关闭文章时，这种效果也会在顶栏中出现。这是表面的反馈,涟漪效应使用户知道他的操作有用，给予用户带入感，让用户的注意力不分散
14、，同时感受到小趣味，继而引导用户进行下一步操作。当用户在9杂志视中预览片时，点击片后，文章会在转场过程中逐渐放大，内容会渐显过来，而片会用渐隐来过渡，它们会移动到相应的位置。有时在预览中没有出现在第一屏，然后在转场时渐显文章的内容，缩略也渐隐来过渡。整个切换过程流畅、自然，不会让用户感到突兀，提高了用户体验的整体美感。如10，当用户点击了列表中的文章预览区域时，模块将会向上升起，形成属于这篇文章的一个新的平面，考虑到视觉上的连续性，这个新平面会被放大，它成为最主要的一个面，同时文章的内容也渐渐显现出来。整个移动过程有意义、有秩序，引导着用户的关注力，将最要的信息内容传递给用户。103. 材料设计在UI界面中的应用3.1 材料设计在界面风格中的体现11视觉设计风格是指界面所具有的特有的气质。后现代主义这种风格在UI界面的设计中占很大的比例，主要表现为波普风格和抽象风格。波普风格主要是以明朗亮眼的彩、新奇的搭配案和强烈的彩对比来刺激用户的注意力。而抽象风格会给用户带来很大的联想的空间，通过点、线、彩、面块、11形体、构来传达。材料设计的界面风格总的来说是“鲜明、形象、深思熟虑”的。如11，页面运用了留白，移除了所有可有可无的元素，搜索框吸引了用户全部的注意力，引导用户去搜索。留白是抽象风格中常见的一个运用手法，它们的存在并不是单独的，而是为了烘托主体元素，
