Material风格进阶



三种基本交互方式


我们接着讲Material Design中的交互方式。在Material Design交互方式中,谷歌设计了三种基本的交互方式。即:


表面响应


什么是表面响应呢?我们先看一个视频。


0.png


这就是表层响应,大家可以看到:


1.png


元素响应


那所谓的元素响应呢!元素响应有两个要点:如果是你有新的元素出现,那么新元素出现的方向应该是从用户点击的位置开始。好,我们看一下动画。


2.png


好,大家可以注意,当用户点击这个菜单的时候,那么展开元素的方向是从用户点击的这个位置展开。


3.png


那么,谷歌不推荐的方式是这样子的:即,当用户点击这个菜单的时候,这个动画与用户的交互无关,它从中间展开,就让用户会有一种困惑。


4.png


还有一点,当用户点击某个元素的时候应该是有浮动,让用户知道我选择到了这个元素,好,请看视频:


5.png


这就是用户点击到的一个效果,点击的时候可以注意到这个元素,它是浮动了一下。


6.png


镜像响应


镜像响应就是说当用户点击的时候应该有一个圆形的水印一样的东西产生一个交互,让用户知道点到哪里。好,还是看动画:


7.png


好,我们注意到,当用户点击这个菜单的时候,出现一个圆形的一个效果,这就是我们所说的景象响应。


8.png


9.png


这三种响应方式的实现,会在接下来给大家讲解。



转场动画


转场动画总的设计原则就是平滑,不要太突兀,而且是有顺序的,我们先看一段视频:


90.png


好,大家可以看到,从一个场景切换到另一个场景这个是很平滑的,就是有相同的元素移到第二个场景里面,同时去展开,这就是转场动画的一个特点。


91.png


那同样的,就在同一个界面切换到统一的界面的时候不要太突兀。好,我们先看一下:


92.png 

这段视频讲的是谷歌不推荐的做法,大家注意到,当用户点击到一个Item的时候,在第二个界面弹出来的时候,非常突兀的,突然出现在用户界面中这是谷歌不推荐的。


93.png


那么谷歌推荐的是有过渡效果的,大家可以看一下,这是一个有过度效果的动画,从一个界面进入到另一个界面,这是转场动画之一。


94.png


然后,谷歌也要求动画顺序性,好,我们先看一下:


95.png


96.png


大家注意到没有,这个动画的进来是有一个线性关系的,是从上到下,从左到右的。


97.png


那么谷歌不推荐的动画,大家可以看一下:


98.png


那,除了这个顺序之外呢,要求界面中的元素也是要有顺序的。然后我们看一下,这个是谷歌推荐的做法:


99.png


然后,不推荐的做法呢:


990.png



细节


最后一点呢,就是说要注意一个细节。什么细节呢?就是说从我们一个图标到另外一个图标的时候,希望是有一个平滑的一个效果,我们看一下这个动画就明白了:


991.png


992.png


993.png


好,注意到这个按钮,它是一个平滑过渡的一个过程。那同样的,这里从一个按钮切换到另外一个按钮的时候,它是希望是这么平滑过渡的,而不是突然的一个过程。


994.png


995.png


其实,对于我们来说,还有很多Material Design的东西是可以思考的,比如说:风格、布局,它的组件的组合等等。这里我就暂时不展开,在下节课中,我们将实现Material Design中的一些效果。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部