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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
那些界面动画设计需要瞭解的事情
0.0°
2014-07-16 原创文章 经验/观点 原作者: 原作者 举报 39495 195 68 16

    细节决定成败,今天来谈谈动画在用户体验上扮演哪些重要的角色。随着装置效能的提升,越来越多的应用程式开始加入动画到应用里,利用动画的效果,透过各种各式各样的动画,事情更容易理解、焦虑的心情减少了、枯燥的状态变的有意思了

    本文章会先从动画的任务开始,瞭解动画如何应用在介面设计上,接着会从卡通瞭解如何设计更真实自然的动画,最后会提出一些使用动画要注意的事项。

    动画的任务

    动画能够帮助使用者瞭解物体的状态,及状态之间的因果关系,如果使用的恰当,动画能够大幅度的减少使用者在状态认知的负担,并建立正确的心智模型(Metal Model)。
    以下,我们将介绍动画的所带来的帮助:

    一、解释状态之间的变化

    使用者的操作通常會造成介面狀態的改變,利用動畫可以清楚的讓使用者瞭解介面狀態改變的因果關係。例如在電腦上,使用者點擊縮小視窗的按鈕,系統會利用動畫將視窗縮小到工具欄上,使用者點擊應用程式,視窗會使用同樣的動畫顯示被縮小的是窗。

    二、吸引使用者的注意力

    在一些时后,我们需要必须吸引使用者的目光,告诉他一件事情发生了或者期望使用者做些事情,在这时候我们可以利用一些适当的动画,让使用者能够轻易的注意到。

    假设我们正在一个安静的乡村街道上,突然间出现了一辆跑车呼啸而过,这时候大家的目光肯定会被吸引过去,一样的,当使用者在一个静止状态的页面中,突然有个会动的物体出现,使用者的注意力就会放在这上面。



    三、告诉使用者应该做什么

    使用者常常打开一个应用程式后,就不晓得接下来该作什么事情,特别是在初次使用或者极限状态发生的时候,在这些情况下,除了使用文字与清楚的颜色提示使用者外,使用动画更能引导使用者进行操作。
    在 Flipboard 应用中,刚启动的页面会在画面右测,纸张会不时的翻起,提示你可以向左翻阅。
    在 Path 应用中,在第一次使用时,右方的导航列也会不时的滑动,提醒使用者这边有个抽屉能够滑开来。

    四、操作反馈

    使用者正在与介面进行互动,他们可能点击、滑过、拖拉,适时的提供及时的反馈让使用者清楚的得到回馈,让操作的过程更清楚更简单。

    五、减少使用者的焦虑

    当系统需要载入资料时,提供有趣的载入动画,吸引使用者的目光,会让等待产生的焦虑减少许多。

    六、突显显重要的功能

    利用动画效果,可以清楚的提示使用者重要的功能在哪里,并吸引他们去碰触这些功能,如80/20法则,除了透过对比的方式凸显重要的元素外,利用动画可能会是个不错的方式。

    七、帮助使用者建立心智模型

    应用程式常都是由多个页面组成,产品的设计者与开发者当然很清楚的知道每个页面之间的关系,可是使用者不了解。使用动画,可以更直觉的了解每个页面之间的关系,从而帮助使用者建立应用程式的心智模型。


    八、手势的引导

    手势操作带来非常便利的操作体验,然而手势操作却不像按钮一样显而易见,使用者没办法很容易的知道哪些介面可以使用什么手势。动画是解决这个问题的好方法,我们可让介面像是纸张一样浮起来,让介面看起来可以移动。又或者可以利用手势提示的方式,提示使用者可以滑动。

    九、状态提示

    动画要符合真实性

    物体不会凭空出现

    在现实中,所有实体从来不会凭空出现,操作介面上应该避免物体突然出现在画面上的情况。

    预先动作

    就好像跳远前需要助跑一样,在动画开始之前,使用一个预先动作,让整个动画显的自然且顺畅。约翰・拉赛尔(John Lasseter)曾说过,"没有先兆的动画会显的突然、僵硬与不自然"。

    移动具有加速度

    使用加速度而不是固定速率,真实的物体不会在开始就有一定的速度,肯定需要一段加速阶段,动画设计上特别需要注意这点。

    需要注意哪些事情

    • 避免使用不重要的动画
    • 用动画把使用者的注意力引导到重要且不容易被发现的地方上
    • 通过适当的动画,让使用者者理解介面的变化
    • 利用适当的动画,帮助使用者者建立心智模型

    相关阅读

    Google Material Design 中也提到了非常多的动画设计上的细节,值得我们细细品尝研究。 [http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-visual-continuity]
    设计之下 - 搜寻新闻客户端的用户体验设计
    行动设计之钥
    亲爱的介面

更新:2014-07-16

收藏

195人已收藏

奧革士

奥革设计创办人,也是一位产品设计顾问

  • 8

    作品

  • 369

    粉丝

  • 94

    关注

  • 让 Eagle 帮你更有效的整理圖片素材與靈感
  • 让 Eagle 帮你更优雅管理图片素材
  • 浅谈界面的空白状态设计(Empty State Design)
  • 浅谈对话框设计

    猜你喜欢

      2014-07-16 原创文章 经验/观点 原作者: 原作者 举报 39495 195 68 16

      那些界面动画设计需要瞭解的事情

      0.0°

      你确定要举报那些界面动画设计需要瞭解的事情

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2014年07月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      68
      195
      16

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

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

      登录

      手机号

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

      登录
      第三方账号登录