美国Adobe公司 官方指定UI培训机构

UI设计 UE设计 平面设计 网页设计 淘宝美工 PS培训 学员作品 学员就业 合作企业 设计教程 UID简介 分级教学 关于我们

如何学习产品动效与品牌设计原则

UI交互设计高级教程

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

IT培训网数字艺术学院拥有众多业内专业实战讲师!名师面对面,巴拉拉……

0元试听 名师解惑

如何学习产品动效与品牌设计原则

UI交互设计高级教程2016-02-15
如何学习产品动效与品牌设计原则

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

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

如何学习产品动效与品牌设计原则 如何学习产品动效与品牌设计原则 如何学习产品动效与品牌设计原则

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

1. 涟漪效果+区块变暗

2. 涟漪效果+阴影变大

3. 涟漪效果+内容闪白

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

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

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

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

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

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

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

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

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

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

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