恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
动效与品牌设计原则(一)
0.0°
2014-11-13 原创文章 经验/观点 原作者: 原作者 举报 35315 149 61 5


一个新的设计风格的确立一定会提出他特有的设计原则。而如今设计原则越来越多的关注到了动效的定义。甚至在Android L的Material Design中直接将动效写入的设计原则中:Motion provides  meaning (动画表达含义)。这里我们就通过一些业界成熟案例来简单说明下动效是怎么在设计原则的基础上定义出来的。

 

 首先,我们看下iOS7上的案例。众所周知,iOS7相对于6设计更加的扁平,去掉了很多质感,保留一些微弱的质感,避免对内容的干扰。这一点遵循了iOS7最新的设计理念,内容优先(Defer to Content),透气(Provide Clarity)。基于内容优先和透气的原则,对之前繁复的UI进行减负,剔除多余元素,有主次的保留,并统一界面里的质感。

iOS的6到7,外界都评价为设计由拟物到扁平,其实并不准确。iOS7还在延续拟物的设计,从界面到动效上有主次的保留了拟物的元素。

 

 

时间设置控件可以很清楚的说明这个问题,新旧两版都是模拟波轮这个物体。只是新版为了更加突出内容,放弃了多余的质感,内容的呈现依然用波轮的方式表现。甚至在你波动波轮时会发现,已选状态上依然保留了玻璃的特性,在边缘会有一个折射效果。由此可以看出,iOS7的简洁还是保留了相当多的拟物细节的。

另一个细节是在开关控件的设计上,新版同样放弃了原有的光泽的材质,而使用了更加柔和的材质,让界面更加的主次分明。如果说之前的材质是金属或者硬塑料的话,那新的材质更加柔和,类似纯色的橡胶,更软,有韧性,可延展。由于材质发生了根本的变化,那么所显现的动态效果也将是不同的。

以上这些都是基于内容优先和透气来做的。iOS7还有一个设计原则是:有层次的表达(Use Depth to Communicate)。在ui界面上表现为前后层次的区分,通过纵深感表达内容之间的关系。

在动效方面,动画转场是对内容层次关系最好的诠释。通过模拟的纵深效果,让用户清晰的知道页面之间的从属关系。

 

 

 

虽然iOS6也有类似功能的动画效果,通过抽屉打开的形式表现层级不关系。但很显然,新版的效果与确定的设计原则更吻合。

 

参考: iOS Human Interface Guidelines

 

说完iOS,说说Android。材料设计(Material Design)是google发布的系统Android L里提出的设计观点。其核心设计原则是,材质的隐喻(Material is the metaphor)。

 

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

 

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

 

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

  1. 涟漪效果+区块变暗
  2. 涟漪效果+阴影变大
  3. 涟漪效果+内容闪白

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

 

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

  1. 区块变暗  > 内容下沉效果  > 按钮按下
  2. 阴影变大  > 区块浮动效果  > 被磁力或意念之类的抓起
  3. 内容闪白  > 闪光照射效果  > 拍照时的闪光灯

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

  1. wifi的选择菜单,点击结束后即关闭了;
  2. 卡片式的内容区块,选择后应该会展开更多内容;
  3. 相册照片,与拍照的闪光灯可以自然的联想到一块。

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

 

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

更新:2014-11-13

收藏

149人已收藏

阿里巴巴MUX

阿里巴巴集团-阿里妈妈事业部-用户体验中心

  • 14

    作品

  • 2439

    粉丝

  • 0

    关注

  • 响应式网页设计案例分享
  • 如何画好一套线性图标
  • 如何制造期望
  • 跟在线分享有关的那些事儿

    猜你喜欢

      2014-11-13 原创文章 经验/观点 原作者: 原作者 举报 35315 149 61 5

      动效与品牌设计原则(一)

      0.0°

      你确定要举报动效与品牌设计原则(一)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年11月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      61
      149
      5

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录