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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
“看不见”的动画效果
0.0°
2015-03-10 自译外文 教程 原作者: Steven Fabre 举报 5229 41 15 1

化动画效果于无形,是动画效果的最高境界。

动效UI无疑已成大势所趋。但很多设计师对动画效果本身过于关注,反而忽视了UI设计的核心是完善细节和功能以取悦用户。2013年,Pasquale D’Silva接受《Web Directions South》访谈,对此有个很不错的建议。建议如下:

 

动效越不易察觉越好

别让用户能明显地意识到“这是个动画效果呀”。

 

这正是我们Campaign Monitor's邮箱的幕后团队铭记并践行的原则:加动画的目的是提高性能,润物细无声地给予用户恰到好处的反馈体验。

 

做了一年邮箱,我切实体会了做网页动画(区别于原生应用)的纷繁复杂,远不止是调速,定距,塑形或者设置平滑值。同一个动画效果在不同的设备和浏览器显示得不一样,有的甚至就不能正常显示。我们不得不创造更好的用户体验环境以迎合平台间的差异性。举例来说,苹果为27英寸的iMac设计了许多漂亮又实用的交互动画,但最终都没有投入生产,就是考虑到部分用户会无法忍受这些动效在其他设备上变得生涩卡顿。

 

动画效果和交互原型在概念和设计阶段的方案五花八门,但只有最实用和最高性能的才能投入生产。我们这些人的工作就是筛选出哪个最实用,进一步改进直至无可挑剔。一切的一切都是为了改善用户体验。以下展示了筛选历程:

 

如何出现下拉界面

用户点击“下拉”按钮,界面以按钮为起点淡入。那么显然这个界面链接自这个按钮。

 

如何折叠工具条 

向下折叠其它栏目,就可以展示本栏目相关标题和内容了。在指针经过时给予轻微的延迟效果,同时让该区域的UI标志颜色淡化,这能很直观地告诉用户这块“图”可操作。

 

按钮呈现的状态

等待总令人抓狂。用户等待接收邮件文档时,我们可以做个恰如其分动画效果表示后台是在忙活着的。当然它实质上不能改变收件所花的时间,但确实能让等待不那么难熬。

 

添加或复制界面

用户要添加或复制某界面时,一个新的空间迅速从画面中央淡入视野。非常直观。

 

删除界面

当你的邮箱里有太多相似或近乎重复的内容,这个动画效果就要派上用场了。向上滑动要删的内容的界面,它就可以消失了。

 

   

界面控制器

用户的鼠标悬停在界面上时,该界面就会显示一些控制器。这些控制器从这个界面产生,用户很容易明白对其的操作是对这个界面的改动。

 

我知道这些动效还有改进空间——内行一眼就可以看出。但为迁就某些设备,我们不能把动画效果做得太过精致。这很遗憾。不过我们落实了“以人为本”的理念,这点无可挑剔。

        

当下动画效果掺和进了越来越多的领域——聊天、写作、交互设计——但这并不意味着你也要给啥都加上动效。像我前面说的,我们团队如果真做到完美,上文的那些动画效果,你用邮箱的时候压根就没发现。

 

化动画效果于无形,是动画效果的最高境界。

 

 

                                                                                                   翻译:耿欣睿(上海大学)     编辑:叶志远(东北林业大学)

更新:2015-03-10

下载
收藏

41人已收藏

大眼萌奥利奥

生命不死,快门不止

  • 13

    作品

  • 197

    粉丝

  • 14

    关注

  • 日历图标
  • 相机图标
  • 天气控件
  • 48张图了解48种主义
相关标签
界面设计

    猜你喜欢

      2015-03-10 自译外文 教程 原作者: Steven Fabre 举报 5229 41 15 1

      “看不见”的动画效果

      0.0°

      你确定要举报“看不见”的动画效果

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2015年03月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      15
      41
      1

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

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

      登录

      手机号

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

      登录
      第三方账号登录