24小时课程咨询热线
13481013014

UID简介 UI设计 UED 平面设计 网页设计 淘宝美工 PS培训 学员作品 学员就业 合作企业 设计教程 免费试听 更多课程

交互设计终极指南

  • 课程级别:
  • 课程数量:
  • 课程评分:
  • 课程简介:
  • 中级技能
  • 更新至第9套教程
  • 免费在线分享美工必备小技巧,快速学习美工技巧,全面掌握干货技能,从美工菜鸟变身达人。

达内数字艺术学院拥有众多业内权威实战讲师!名师面对面,巴拉拉……

预约试听 名师答疑

如何做好产品动效系列:动效与品牌设计原则(一)

交互设计终极指南2016-02-15

关于材质的隐喻,简单一点说就是将物理界中不同的材质特性提炼,再按需要结合在一起使用的方法。单从视觉上看,材质的隐喻更多落在卡片式设计上。但材质的特性更多需要通过行为上的互动才能体现出来。通过对象给出不同的反馈,可以了解到它的材质特性。这就需要通过动效的手法来体现。

这里我们举三个点击反馈的案例,来说明Android是怎么诠释材质的隐喻这一设计原则的。

这三个效果都是点击触发的,彼此之间有共同点,但又都不完全相同。我们可以将反馈动画分解,能更好的说明问题。

1. 涟漪效果+区块变暗

2. 涟漪效果+阴影变大

3. 涟漪效果+内容闪白

这时,我们可以发现,反馈动效都用到了涟漪效果,同时它又是以手指的触碰位置确定起始位置的。结合起来,很容易就可以想到,这是引用了水的特质:手指触碰平静水面,产生圈状涟漪。

除了涟漪,我们再来分析下另外三个不同的动效:

1. 区块变暗 > 内容下沉效果 > 按钮按下

2. 阴影变大 > 区块浮动效果 > 被磁力或意念之类的抓起

3. 内容闪白 > 闪光照射效果 > 拍照时的闪光灯

同样都是点击,为什么要赋予内容不同的材质特性呢?这我们就要看下使用场景了。

1. wifi的选择菜单,点击结束后即关闭了;

2. 卡片式的内容区块,选择后应该会展开更多内容;

3. 相册照片,与拍照的闪光灯可以自然的联想到一块。

所以,结论就是,点击手势赋予内容水的材质;而根据不同场景又分别赋予了内容按钮、悬浮、闪光灯的材质。这就很好的诠释了材质的隐喻这一概念,根据不同需要将不同的材质特性赋予一个对象。

ok,关于动效与设计原则之间的关系,我们先说到这里,下次我们将会结合自己的案例详细说下怎么基于设计原则打造适合自己产品的动效。