Material Design学习笔记— —第一趴

吧啦吧啦一点题外话

        说实话,我个人比较喜欢读那种故事性比较强的文章或书籍,对于那种通篇泛泛大道理、满满鸡汤文的书籍好像坚持不了多久,有一种即使明白很多道理却依然过不好这一生的枯燥感,哈哈哈,这里必须来一个尴尬又不失礼貌的围笑。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 设计规范刚学习了一部分,就感觉受益匪浅,对动效充满了兴趣,好好消化后更重要的是在实践中运用,希望自己以后在设计中能够善用这件学习工具,不断完善和创新。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,026评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,655评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,726评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,204评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,558评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,731评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,944评论 2 314
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,698评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,438评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,633评论 2 247
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,125评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,444评论 3 255
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,137评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,103评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,888评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,772评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,669评论 2 271

推荐阅读更多精彩内容