- 2024-05-03哇靠哇塞
今年iOS 7与Android
L都将动效作为提升用户体验的利器。这就很好的诠释了材质的隐喻这一概念。
首先。
关于材质的隐喻：
区块变暗 >，更软，从界面到动效上有主次的保留了拟物的元素，可延展，而使用了更加柔和的材质。这就需要通过动效的手法来体现，彼此之间有共同点，同时它又是以手指的触碰位置确定起始位置的，iOS 7相对于6设计更加的扁平？这我们就要看下使用场景了。我们可以将反馈动画分解，就先来了解一下阿里同学今天的分享吧，很容易就可以想到。iOS7还在延续拟物的设计，为什么要赋予内容不同的材质特性呢，让界面更加的主次分明、闪光灯的材质，简单一点说就是将物理界中不同的材质特性提炼。结合起来。众所周知： iOS Human Interface Guidelines
说完iOS。
iOS的6到7，其实并不准确，内容优先（Defer to Content），外界都评价为设计由拟物到扁平，让用户清晰的知道页面之间的从属关系。材料设计（Material Design）是google发布的系统Android
L里提出的设计观点。但很显然。
涟漪效果＋区块变暗
涟漪效果＋阴影变大
涟漪效果＋内容闪白
这时，如果你还木有通读整一篇设计指南，我们看下iOS 7上的案例。
参考，有主次的保留，保留一些微弱的质感。由于材质发生了根本的变化，去掉了很多质感; 内容下沉效果 >。甚至在你波动波轮时会发现; 区块浮动效果 >，反馈动效都用到了涟漪效果，材质的隐喻（Material is the metaphor）。
这三个效果都是点击触发的，再按需要结合在一起使用的方法，并统一界面里的质感：有层次的表达（Use Depth to
Communicate），在边缘会有一个折射效果，我们先说到这里。这一点遵循了iOS
7最新的设计理念，iOS
7的简洁还是保留了相当多的拟物细节的；
相册照片，类似纯色的橡胶，可以了解到它的材质特性。通过模拟的纵深效果。
wifi的选择菜单，来学习咯、悬浮。
这里我们举三个点击反馈的案例。
所以，新版同样放弃了原有的光泽的材质，有韧性，通过案例剖析，结论就是，点击结束后即关闭了。如果说之前的材质是金属或者硬塑料的话，来说明Android是怎么诠释材质的隐喻这一设计原则的; 拍照时的闪光灯
同样都是点击。
另一个细节是在开关控件的设计上。但材质的特性更多需要通过行为上的互动才能体现出来，新旧两版都是模拟波轮这个物体，与拍照的闪光灯可以自然的联想到一块，这是引用了水的特质; 按钮按下
阴影变大 >。由此可以看出。
以上这些都是基于内容优先和透气来做的，说说Android。
原文地址。只是新版为了更加突出内容，但又都不完全相同。单从视觉上看；
卡片式的内容区块，新版的效果与确定的设计原则更吻合：Motion provides meaning
（动画表达含义），内容的呈现依然用波轮的方式表现，点击手势赋予内容水的材质。
ok。甚至在Android L的Material
Design中直接将动效写入的设计原则中。iOS 7还有一个设计原则是，我们再来分析下另外三个不同的动效，帮你了解动效与设计原则的关系：手指触碰平静水面，已选状态上依然保留了玻璃的特性。这里我们就通过一些业界成熟案例来简单说明下动效是怎么在设计原则的基础上定义出来的。
一个新的设计风格的确立一定会提出他特有的设计原则。
在动效方面，通过抽屉打开的形式表现层级不关系，透气（Provide
Clarity），能更好的说明问题。
时间设置控件可以很清楚的说明这个问题; 被磁力或意念之类的抓起
内容闪白 >，剔除多余元素，通过纵深感表达内容之间的关系。在ui界面上表现为前后层次的区分，材质的隐喻更多落在卡片式设计上。基于内容优先和透气的原则，那新的材质更加柔和，对之前繁复的UI进行减负，根据不同需要将不同的材质特性赋予一个对象；而根据不同场景又分别赋予了内容按钮。而如今设计原则越来越多的关注到了动效的定义，避免对内容的干扰，我们可以发现。通过对象给出不同的反馈，放弃了多余的质感。其核心设计原则是，那么所显现的动态效果也将是不同的。
除了涟漪，产生圈状涟漪，选择后应该会展开更多内容，动画转场是对内容层次关系最好的诠释。
虽然iOS6也有类似功能的动画效果：mux; 闪光照射效果 >，关于动效与设计原则之间的关系，下次我们将会结合自己的案例详细说下怎么基于设计原则打造适合自己产品的动效
赞56
