美文网首页
Material Design学习笔记— —第一趴

Material Design学习笔记— —第一趴

作者: xuexilo | 来源:发表于2017-07-24 09:15 被阅读0次

吧啦吧啦一点题外话

        说实话,我个人比较喜欢读那种故事性比较强的文章或书籍,对于那种通篇泛泛大道理、满满鸡汤文的书籍好像坚持不了多久,有一种即使明白很多道理却依然过不好这一生的枯燥感,哈哈哈,这里必须来一个尴尬又不失礼貌的围笑。Material Design是一篇内容丰富且专业性极强的设计文档,背后有深思熟虑的设计指南作为坚实支撑,在学习的时候需要不断思考,会遇上看不懂的时候,难免有些烦躁,我认为这是一份需要反复咀嚼消化的文章,在看完MD前面的内容后,对于动画的部分印象比较深刻,先简单谈谈自己的理解。

终于进入正题

        以前自己理解的动画,作用就是将界面信息的展示方式变得多样、活泼,并没有考虑很多场景元素,比如触控点的变化,以触控点为原点展开新元素、点击元素产生变化前的激活状态等等。Material Design 构建了系统化的动效,有意义的动效。如何形成这个系统化的动效我们需要理解几部分的内容:

一、材质

Material  Design 中,最重要的信息载体就是神奇纸片。纸片材料拥有变化的长宽尺寸(以dp为计)和均匀的厚度(总是1dp厚),可以层叠、合并、分离,拥有现实中的惯性和反馈。

材料具备以下的特性:
● 材料会形成阴影,阴影描述材料元件之间的相对高度

● 材料可以伸缩、改变形状

● 材料变形时能够自适应内容,比如材料元件缩小时,内容大小不变,而是隐藏超出部分

● 多个材料元件不能同时占用相同的空间点

● 一片材料可以分裂成多张,几片材料能合在一起组成一片材料

● 材料可以在任何位置凭空出现或消失

● 材料可以沿各个轴移动,Z轴的运动一般都是用户与材料交互而产生的

同时,材料有些效果是禁止的:

● 一项操作不能同时出发两片材料的反馈

● 层叠的材料,海拔高度不能相同

● 材料不能互相穿透

● 材料不能弯折

● 材料不能透视,必须平行于屏幕

二、空间

具备 x,y 和 z 轴的 3D 空间

        引入了z轴的概念,z轴垂直于屏幕,用来表现元素的层叠关系。所有的元素的厚度都是1dp,每个元素都有默认的海拔高度,海拔越高,元素离界面底层越远,投影越重。对元素进行操作,它的海拔高度会升高,操作结束后,落回默认海拔高度,同一种元素,同样的操作,升高的高度是一样的。不同高度的元素决定了在进行交互操作时,元素的移动路径和变化方式。

三、动画

        在学习材质和空间后,再去认真思考一下动画,感觉不像之前自己想的那么无据可依,天马行空了。Material  Design 中,动画优雅,能够表达元素以及界面之间的关系,具备功能上的作用,而不只是活泼界面那么简单,可能没有人们想象中的革新,但提倡更加顺滑、渐进式的动画,逐渐的引导用户,而不是通过骤然的变化来引人注目。

a. 真实动作

        物理世界中物体拥有质量,所以只有当施加给它们力量的时候才会移动,因此物体没法在瞬间开始或者结束动作。动画突然开始或者停止,或者在运动时突兀的变化方向,都会使用户感到意外和不和谐的干扰。

迅速的加速和平滑的减速会感到自然和愉快

        线性动作会感到机械,在结束和开始的时候生硬的速度变化意味着物体突然开始运动或停止,这是不贴合现实的。动画要贴近真实世界,要先考虑它在现实世界中的运动规律。

b. 水波反馈

        接收到输入事件,如点击屏幕,系统会立即在交互的触点上绘制出一个可视化的图形让用户感知到:如在点击屏幕时、使用麦克风时,或者键盘输入时,会出现类似于墨水扩散那样的视觉效果形状。

        触控涟漪是这种触摸效果的核心视觉机制。在进行触摸事件时,设备能清晰而及时地让用户感知触摸按钮和语音输入时的变化。

触控涟漪

        每个元素本身也能做出交互响应,物体可以在触控或点击的时候浮起来,以表示该元素正处于激活状态。用户可以通过点击、拖动来生成、改变元素或者直接对元素进行处理。

        当用户操作生成一个新元素时,元素的动画应该基于触控点展开,通过视觉效果将元素与触控点联系起来。

c. 转场效果

        不同页面的首先要考虑的是视觉连贯性,在两个视觉效果不同的页面之间的转场应该平滑、轻快,更重要的是使用户感觉清晰而非困惑。对于转场后的新入元素需最快最清晰的被用户识别;转场后与当前场景不相关的元素应当以恰当的方式被移除;利用从转场开始到结束都没有发生变化的通用元素在不同场景转化间建立视觉联系,可以是细微至单个图标,也可以是显著到占据屏幕的图片展示。避免瞬间切屏(hard cut),瞬间切屏过于突兀,并且会导致用户很难理解这个转场。

        通过过渡动画,表达界面之间的空间与层级关系,并且跨见面传递信息。多个相似元素,其整个移动过程都要有意义、有秩序,避免冲突的动作和重叠的运动路径,起到引导视觉焦点作用的元素。

一致路径移动

d. 细节动画

        动画最基本的使用场景是过度效果,但通过图标的变化和一些细节,也能达到令人愉悦的效果。例如一个菜单图标变成一个箭头或者是播放控制按钮,这种服务间的无缝切换不仅仅能让用户感知,更是让完美的细节和精湛的设计充满你的作品。


结束第一趴

        Material Design 设计规范刚学习了一部分,就感觉受益匪浅,对动效充满了兴趣,好好消化后更重要的是在实践中运用,希望自己以后在设计中能够善用这件学习工具,不断完善和创新。

相关文章

  • Material Design学习笔记— —第一趴

    吧啦吧啦一点题外话 说实话,我个人比较喜欢读那种故事性比较强的文章或书籍,对于那种通篇泛泛大道理、满满鸡汤文的书...

  • 收藏的文章

    MATERIAL DESIGN的学习笔记 App数据分析精品教程

  • 小笔记

    全面彻底搞定MATERIAL DESIGN的学习笔记 http://www.uisdc.com/comprehen...

  • Android ActionBar和ToolBar的使用

    参考 1、android中的ActionBar和ToolBar2、『Material Design入门学习笔记』主...

  • 技术点 - 收藏集 - 掘金

    Material Design 兼容性控件学习 - 掘金简述 Material Design从Android 5....

  • Material Design学习笔记

    感谢极客学院团队的翻译,这边仅以自己的理解来归纳一下知识点。 原文链接:概述 - Material Design ...

  • material design 学习笔记

    原文地址(我看到的):http://www.uisdc.com/comprehensive-material-de...

  • Material Design学习笔记

    Material Design核心思想 就是把物理世界的体验带到屏幕,去掉现实中的杂质和随机性,保留其最原始纯净的...

  • ToolBar学习笔记

    《第二行代码》学习笔记--ToolBar 一、简介ToolBar,是Material Design控件,在5.0之...

  • material design(未完成)

    记录material design组件的学习笔记 快速查找:WIN+Fstyle:主题样式:Widget.Mate...

网友评论

      本文标题:Material Design学习笔记— —第一趴

      本文链接:https://www.haomeiwen.com/subject/fohrhxtx.html