材料设计在UI界面中的体现.docx
《材料设计在UI界面中的体现.docx》由会员分享，可在线阅读，更多相关《材料设计在UI界面中的体现.docx（12页珍藏版）》请在冰豆网上搜索。
材料设计在UI界面中的体现
本科毕业论文（设计）
题目：
探析材料设计在 UI 界面中的体现
学生：
王梦琦学号：
201106010224
系别：
设计艺术系专业：
艺术设计
入学时间：
2011年9月13
指导教师：
王淼职称：
讲师
完成日期：
2015年5月12日
诚 信 承 诺
我谨在此承诺：
本人所写的毕业论文《探析材料设计在 UI 界面
中的体现》均系本人独立完成，没有抄袭行为，凡涉及其他作者的
观点和材料，均作了注释，若有不实，后果由本人承担。
承诺人（签名）：
年月日
2
探析材料设计在 UI 界面中的体现
姓名：
王梦琦学号：
201106010224指导老师：
王淼
摘要：
随着 UI 设计的不断发展，近期出现了一种新的界面设计方向，它就是材料设计。
论
文以材料设计在 UI 界面中的体现为题，分析了材料设计的艺术特征，认为材料设计不仅有
丰富的视觉空间，还有统一的视觉动效。
进而着重从界面风格、布局、图标、按钮四个方
面，探讨了材料设计在 UI 界面中的应用，为 UI 界面提供了新的设计思路，同时开拓了视
觉设计视野。
关键词：
材料设计、UI 界面、系统动效、界面风格
Theory of material design in the UI
Name:
WangMengqi Student Number:
201106010224
Advisor:
WangMiao
Abstract:
With the continuous development 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 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, interface style
3
引言
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 材料设计在界面按钮中的体现
结语
参考文献
4
引言
移动设备的崛起带来了用户界面设计的变革，材料设计是近期出现的一种
新的界面设计方向。
材料设计通过视觉空间和视觉动效来展现它的艺术魅力，
其中的色彩搭配使得界面看起来非常的大胆，充满色彩感，凸显内容。
微妙的
动画、阴影也使得用户与材料设计的互动更加有趣。
在 UI 界面中，材料设计的
界面风格和布局都有了很大的改变，在图标和按钮上也进行了改进，有很多令
人愉悦的小细节，给用户提供了一种新的体验模式。
材料设计不仅仅是一种视
觉风格的转变，而是一种设计语言和思维方式的演变，它将引领 UI 设计的潮流
趋势。
1.材料设计与 UI 界面
1.1材料设计
Google 今年推出了新的移动设计方向“Material Design”，我把它翻译成
“材料设计”。
“材料”是种隐喻，即空间的合理化及系统动效的统一。
2014 年,
扁平化设计是最流行的 UI 设计趋势，而它的“过于平”也引起了一番热论，但
材料设计在扁平化上作了微妙的渐变，层次感和动画，保留了意义上的有形世
界。
所以，我们可以形象的理解材料设计是“向拟物回跳一下的扁平化设计”，
但材料设计本身又是独立的。
材料设计的中心思想，便是把物理世界的体验带进屏幕。
将现实世界中纸
张的特性挪到电子屏幕里，在“纸”上呈现信息内容，给用户一种贴近真实的
体验，让整个界面看起来简洁、直观，让人眼前一亮。
当前，Android 7 的 WPS
就是基于材料设计的全新设计，业内专家表明:
材料设计或将成为将来ＵＩ界面
设计的趋向，这类设计理念让安卓界面在体验上更加新颖和简洁。
1.2UI 界面
UI 的意思就是用户界面，用一句话概括就是人和工具之间的界面。
在我们
生活中，界面同样体现在某一些方面，比如看电视的时候遥控器和屏幕就相当
于这个界面。
它不仅仅是由用户与界面两个部分组成，同时还包含着用户与界
面之间的交互关系。
JefRaskin 在《人本界面，交互式系统设计》一书中指出“就消费而言，
界面就是产品。
”在这里，界面包括产品外观和产品的交互行为。
一个美观而不
失实用的界面会给人带来轻松舒适的视觉享受，它会吸引用户去探索，去发现
有趣之处，拉近人与电子设备之间的距离，让用户乐于使用。
界面设计并不是
仅仅为了美观，他需要为用户而设计，需要考虑用户的使用环境与使用方式，
它是考虑用户主观情感的科学性的艺术设计。
5
2.材料设计的艺术特征
2.1丰富的视觉空间
2.1.1大胆的色彩对比
用户第一次看到一个 UI 界面时，会对色彩留
下最深刻的映象，因此色彩是 UI 界面设计中不可
缺少的视觉元素。
如图 1，材料设计崇尚多彩，但
它并不使用那种很艳丽的颜色，大多采用清新靓
丽的色彩，清爽的页面通常都离不开白色背景的
图 1
映衬。
同时将本来靓丽的色彩加入一点点的灰色，不但让图案变得生动起来，
又不会因为过于艳丽让人感觉到俗气。
在材料设计中，界面一般采用不同的色调来区分各个栏目的主题，而部分
细节的处理则喜欢用靓丽分明的色条或色块。
如图 2，工具栏大块区域采用了
蓝色为主色，而状态栏采用了比主色稍深的蓝色。
如图 3、图 4 用靓丽的色条
来强调标题，同时强调色可被用来当做按钮和控件或开关和滑块。
图 2图 3图 4
2.1.2鲜明的视觉层级
假如某篇文章的标题比内容概述更重要，标题就应该有更
多视觉主导力。
主导元素是所叙述故事的
起点，是用户接触设计的入口，能够将用
户注意力第一时间吸引到设计师希望用户
注意的地方。
为了最快的吸引用户注意，
可以通过对比、强调、和相对的视觉重量
图 5 图 6
建立主导地位元素。
如图 5,是材料设计在 Feedly 阅读器里的应用，图中的主
导元素是顶部的图片，占据了最大的面积，深色图片底下大面积白色区域与图
片形成对比，打造出鲜明的用户界面，吸引用户关注。
图片上的“Food”字样
可能是页面最重要的信息，清晰阐述此页面的主题。
在一个设计中，首先突出
主导元素，其次就应该强调焦点。
如图 6，此页面主导元素是人物图片，与周
6
围的字体形成本质对比，而它的焦点是图上加粗的黄色字体“GIRL”，旁边的
播放按钮也是焦点之一，从而构建出视觉层级、视觉意义以及视觉聚焦。
2.2统一的视觉动效
2.2.1卡片式渐变
在材料设计上，动效的理念有着相通的原理。
动效连接于整个应用的程序
流程，表达了设计的先后关系，尤其是关于产品的连续性来讲，用户根本没有
中断的感觉，在材料设计中，使用了渐变的方式让界面流畅、舒适。
UI 界面的
渐变是通过画面基本形象有序地、渐进地变动而形成如梦如幻的、似音乐旋律
般的视觉效果，这样使画面具有极强的观赏性和秩序感。
如图 7，在主页浏览
视图里包含一列卡片，当你点击一个卡片时，卡片将不再是一张卡片的大小，
而是将延展到全屏幕。
因此，“魔法纸片”是材料设计中最重要的信息载体。
纸片层叠、合并、分离，具有现实中的厚度、惯性和反馈，也具有液体的某些
特性，可以自由伸展变形。
如图 8，它同时运用了材料和动效，卡片就是所谓
的材料，当用户与其交互时，通过动效卡片延展来显示更多内容。
这样给用户
带来的视觉效果是连续的，告诉用户他们如何使用，如何让他们的操作影响到
界面。
图 7图 8
2.2.2交互性设计
动效的快速反馈，可以让用户感到信任和快乐。
当用户与应用交互时所反
馈的动效不仅要实现美感，符合物理逻辑，而且能够给用户带来乐趣。
反馈动
态效果的设计必须深思熟虑且具有针对性，而不能随性设计，反馈动效应温和，
不让用户分心，鼓励用户进一步探索应用。
材料设计具备快速反馈动态效果的特性，它让用户充满期待，触摸、语言、
键盘及鼠标是首要考虑的输入模式。
虽然 UI 元素是可见的，但是在物理上被限
制在了设备屏幕之内。
视觉线索和动态效果可以为用户和设备之间建立沟通的
桥梁提供线索，让用户确认自己的输入有用，继而引导用户操作。
动效的加入，
让用户与应用之间的沟通真实、有效，将应用带到了新的高度。
如图 9 和图
7
10，是材料设计应用于 Feedly 阅读器。
在 Feedly 阅读器中，最重要的转场是
打开文章和关闭文章。
过程当中，用户在文章
的列表和文章内容中切换。
如图 9，当用户点
击文章预览时，应用会出现点击涟漪效应来提
供即时反馈，然后整个效果会扩大充满整个文
章预览元素。
同样，当用户关闭文章时，这种
效果也会在顶栏中出现。
这是表面的反馈,涟
漪效应使用户知道他的操作有用，给予用户带
入感，让用户的注意力不分散，同时感受到小
图 9
趣味，继而引导用户进行下一步操作。
当用户在杂志视图中预览图片时，点击
图片后，文章会在转场过程中逐渐放大，内容会渐显过来，而图片会用渐隐来
过渡，它们会移动到相应的位置。
有时在预览图中没有出现在第一屏，然后在
转场时渐显文章的内容，缩略图也渐隐来过渡。
整个切换过程流畅、自然，不
会让用户感到突兀，提高了用户体验的整体美感。
如图 10，当用户点击了列表
中的文章预览区域时，模块将会向上升起，形成属于这篇文章的一个新的平面，
考虑到视觉上的连续性，这个新平面会被放大，它成为最主要的一个面，同时
文章的内容也渐渐显现出来。
整个移动过程有意义、有秩序，引导着用户的关
注力，将最要的信息内容传递给用户。
图 10
3.材料设计在 UI 界面中的应用
3.1材料设计在界面风格中的体现
8
视觉设计风格是指界面所具有的特有的气
质。
后现代主义这种风格在 UI 界面的设计中
占很大的比例，主要表现为波普风格和抽象风
格。
波普风格主要是以明朗亮眼的色彩、新奇
的搭配图案和强烈的色彩对比来刺激用户的注
意力。
而抽象风格会给用户带来很大的联想的
图 11
空间，通过点、线、色彩、面块、形体、构图来传达。
材料设计的界面风格总
的来说是“鲜明、形象、深思熟虑”的。
如图 11，页面运用了留白，移除了所
有可有可无的元素，搜索框吸引了用户全部的注意力，引导用户去搜索。
留白
是抽象风格中常见的一个运用手法，它们的存在并不是单独的，而是为了烘托
主体元素，它们和主体元素是相互依托的关系。
这样给用户一种简洁、明了、
清新的感觉。
而在颜色选择上材料设计的原则是“大胆、图形化、有意义”，提
倡一种主色，一种互补色，运用巧妙的色彩搭配、点、线、面块等使得整个界
面看起来非常大胆、充满色彩感，凸显内容。
如图 12，分别是具有波普风格的
图画和材料设计的界面风格，从色彩上看，主要以红、黄、蓝三原色为主，色
彩明快，色块层次分明，让人眼前一亮。
而白色的适当点缀，又平衡了空间的
色彩关系，给用户一种舒适的感觉。
从搭配的图案上看，单色与拼接图案的结
合，充满趣味，吸引用户眼球的同时，也治愈了用户的“审美疲劳”。
图 12
3.2材料设计在界面布局中的体现
界面设计中的布局就是在有限的空间里对屏幕中的元
素依据规律排列组合，而一个漂亮、易读的排版离不开基
本骨骼系统。
骨骼设计系统在界面排版中要遵循一些基本
原则，其中包括对齐原则、比例适度、留白、秩序美等。
从图 13 中可以看出，材料设计运用了“基线”对齐原则，
同时利用骨骼线把文字、图形、线条按照一定的比例整体
组合，使整个界面具有清晰明了的视觉秩序美，让用户得
图 13
9
以快速阅读信息，并有一种轻松、舒适的感觉。
同时，视觉流程在界面布局中
也尤为重要。
当我们浏览界面时，用户首先会快速粗略地浏览页面，大致形成
第一印象，接着视线就会从最吸引注意力的一点开始依次浏览，最后完成信息
的传递。
这就是视觉流程。
如图 14，用户第一眼会看到闹钟，接着视线会移到
右侧，右侧卡片利用线条的分割、视觉元素的排列，带动用户根据设计的引导
流程进行有效的视觉交互和信息传递。
在材料设计中，布局上注意文字以及图
片分量相当，在使用元素的同时注意元素在整个布局上面的呼应，在布局节奏
感的把握上，注重疏密搭配。
界面的编排是为了突出主要信息为目标，让用户
可以关注到重要的点，同时组织页面的设计元素，合理引导视觉。
如图 15，是
材料设计对页面的编排，它将构成要素进行了巧妙合理的安排，是整个界面具
有层次感和条理性。
其中恰如其分的采用余白，使文字更加突出，具有更强烈
的视觉感染力，使画面富有韵律。
图 14图 15
3.3材料设计在界面图标中的体现
图标是一种可视性很强的图像语言。
它相对于 UI 界面就好像公共系统中的
标志，虽然它只是界面中一个极小的点，却可以引导访问者最方便、快捷的方
式浏览和使用整个界面。
图标是具有标志意义
的视觉符号，所以在材料设计中需要着重考虑
图标的视觉感觉和视觉冲击力。
如图 16，图标
具有很强的视觉表现力，有丰富的色彩和简单
明了的几何图形组成，线条分明，和谐的明暗
关系使图标立体起来，富有韵律感。
同时色彩
图 16
艳丽的图形由白色来衬托美丽，整体简洁大方，但又不失活泼跳跃，提高了整
个“颜值”。
UI 界面图标主要分为入口功能和操作功能，导航性图标具有入口功能，它
是 UI 界面的方向标志，它能指引用户如何进入界面的不同区域，当你点击它时，
就会出现一个子页面。
如图 17。
而操作命令图标图标具有操作功能，它所指示
10
的内容是各种交互功能、步骤等，界面工具条中包括的小图标都属于操作命令，
它们可以帮助用户实现一些操作，引导用户去使用，如图 18。
操作功能的图标
在完成点击操作之后，通常会转为对应的另一种形态。
如“返回”与“菜单”，
“收藏”与“已收藏”的状态之间切换，这样的设计里，在两种状态之间切换
图标经常让用户感觉到生硬，而点击图标动画后用户会得到更佳强烈的反馈，
使用户感到有趣，并且让界面生动，活泼起来。
图 17图 18
3.4材料设计在界面按钮中的体现
按钮能够提示观众，引起用户注意，好的按钮设计可以将界面主题化、形
象化、生动化，引导更多是用户浏览页面、接受信息的传达。
按钮一般较小，
往往采用与背景对比较强烈的色彩以引起注意，同时与整个界面协调。
浮动按钮是材料设计中比较重要的一个体现，如图 18，浮动按钮通过圆形
元素与分割线、卡片、各种直线形成鲜明对比，并使用色彩设定中鲜艳的辅色，
给用户带来更具突破性的视觉效果。
浮动按钮的大小分为默认大小和迷你两种。
当需要和屏幕上的其余元素产生视觉上的延续性时，一般使用迷你版的浮动按
钮。
如图 19，Today 是一款日历应用程序，是材料设计应用于其中的一个应用，
美丽的悬浮响应按钮将日历和日程分开，灵动的同时又不失使用，色彩鲜艳的
按钮，与背景颜色互补，吸引用户的眼球并引导用户去使用它。
而且主题的颜
色可以更改，用户通过点击相应的浮动按钮根据自己的喜好更换背景的颜色，
使其保持新鲜感，满足个性化需求。
11
图 19
结语
随着 UI 设计的日益发展，设计的重点从仅仅关注平面的表现，转移到了人
与设计之间的交互。
材料设计是对于这种潮流的适应，它的出现让用户眼前一
跳。
有设计师表明材料或将成为引领 UI 设计新的流行趋势，会给用户带来更多
惊喜的东西。
参考文献
[1] 焦万鹏.新兴专业—“UI”设计初探[J]. 2007，8
（2）：
34-36.
[2] Windy.什么是交互设计[J]. 2004，（11）：
55-57.
[3] 舒畅.浅析 UI 设计中的图形语言[J].2009,（17）：
50-50.
[4] 聂璐.论网页界面设计中的人性化因素[D].湖南师范大学.2010.
[5] 李四达.交互设计的域与界.[J].装饰.第 201 期 2010.01.
[6] 孙娇、宗明明.网页设计中视觉流程筹划与应用.[J].2010,（7）:
169-171.
[7] 程璐.网站的导航标—网页界面图标的设计研究.[J].2009,
（2）:
182-182.
[8] 汪大伟.现代主义风格的 UI 设计之兴起.[J].现代装饰.2012（09）：
182-184.
[9] 张涛.图标认知因素分析及其应用研究.[D].2007 年
[10] 张军.网页设计课程中关于 UI 设计教学的探索机会.[ J ].2009，（4）：
84-
86
12
升级会员 