0 Comments

MATERIAL DESIGN改版实战!搞定APP重设计的五个关键

发布于:2014-12-12  |   作者:广州网站建设  |   已聚集:人围观

三、界面切换等场合,要关注动画质量

Material Design强调现实生活中积累的交互预期向数字空间的移植,于是设计指导一方面要求动画的形式必须具备现实中的运动的关键特征,同时也要求在界面转换时,如同现实空间那样,伴随动画动作的发生。

切换动画应如现实那样,具备这些关键特征:
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

1. 有质量和惯性

上下方向运动时,运动受重力的影响,并不是匀速运动,而是类似向上抛物和下落,进而——2.进入和离开视野是对速度应该是最高速度,案例如下:

20141211md0

官方指导中还特意给出了不符合这一规律的动画案例,作为对比,这种与自然状况不吻合的运动会额外牵引我们不必要的注意力,增加用户的认知负担,坏案例如下,进入画面后加速,离开前减速:

20141211md7

一脉相承的,考虑降低用户认知负担,官方指导还要求所有的界面切换都应该有承接前后界面的、相关的、有意义的动画作为过渡。

比如列表中点击一个项目后的展开,屏幕不应突然切换,相关内容滑入屏幕,会是一个更好的做法,如果支持手势操作,用户反方向滑动屏幕能够直接回到列表,就更加酸爽了!

Teambition智能日程表中「今天」中的事件:

20141211md3

四、让信息呈现一致,顺应用户预期

应用图标和功能图标呈现应该一致与清晰,包括:

应用图标方面

1. 应用图标上的元素不超过两层的层叠

2. 应用图标上引入z轴分布时,每层不要超过1dp厚(160dpi屏幕上的1像素),仿佛是纸叠出来的,可以引入阴影加强层次关系

3. 平视,不透视,不扭曲(这是在打MS全线产品的脸啊)
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

20141211md4

功能图标上

1. 线条简明,线条末端不要圆角修饰,不要出现太细的线条,

2. 基本元素一致(都能拆解成正方形、圆等基础图形的层叠包络)

3. 简单对称,有高度关联的行动

20141211md14

除此之外,官方指导直接给出了一大批符合各种应用场景的系统功能图标。如果说整个应用生态是一门语言,各种有意义的图标应该就是其中的单词了,出现一本词典其实对统一沟通规则很有帮助。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

20141211md16

Teambition的全线产品,一面把参与者、截止日期,修改等概念全部转向了标准化的图标。一面全面革新了应用图标,以全新的面貌出现。

20141211md5

五、扁平风格的点缀,带出亮点

按钮新效果

新指导下,尽管按钮扁平,但是对聚焦和触摸高度敏感,会有各种涟漪扩散状的效果。

1. 即使按下后0.5秒之内界面就会切换,但这个效果对于减缓等待的心理时间,对操作结果反馈用户有很大的帮助

2. 相比以前的按钮凸起落下的反馈,这样更直观

3. 大部分工作5.0系统可以完成,没有更好的理由时不要覆盖它既可
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

20141211md18

会心一笑的小细节

官方指导花了一节来鼓励开发者往应用内加入令人会心一笑的小细节(delightful details),会根据当前界面状态变化的图标,比如点赞数字酷炫的无缝转变,比如播放器中 播放 与 停止 标识的无缝切换。

20141211md10

我们也埋入了不少这样的小彩蛋等大家发掘。 比如「今天」当中,返回顶部按钮,随着你往前回溯或者往后展望日程,都会想指南针一样指向今天的事件应该在的位置,一定距离之后就平滑转动,变了传统的“返回顶部”按钮。

20141211md6

你看到这句话了?
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

帮个忙!优设哥说微信公众号关注达20万有年终奖  →  youshege  ╭( ・ㅂ・)و

标签:
飞机