企业及高校合作：010-59833514 ‬咨询电话：400-810-1418 服务与监督电话：400-810-1418转接2
北京
b

北京

g

广州

h

杭州

s

上海

w

武汉

火星网校
课程导航
元宇宙设计
虚幻引擎视效表现大师班 虚幻引擎交互开发工程师班
游戏设计
原画概念设计大师班 游戏UI设计师班 3D模型大师班 游戏动作设计师班 游戏特效大师班 VR视效与交互大师班
剪辑包装
影视剪辑包装广告大师班 影视剪辑大师班
影视后期
影视原画与模型渲染大师班 3D角色动画大师班 影视特效与合成大师班
游戏程序
Unity3D游戏开发工程师班 虚幻引擎交互开发工程师班
U I 设计
AI+UX设计大师班
商业插画
商业插画高级设计师班 艺术设计基础班
IT 学院
WEB前端+全栈工程师班 人工智能+Python开发工程师班
室内设计
室内设计表现大师班 室内高级设计师班 室内高级设计研修班 BIM全科班 VR建筑与室内表现设计师班
当前位置：首页 >教程首页 > U I 设计 > AI+UX设计大师班 >国外干货：如何利用动画效果来提升用户体验？

国外干货：如何利用动画效果来提升用户体验？

发布时间：2018-11-17 19:57:24

动画效果会讲故事，但不是冗长和完整的故事，而是简单的故事，比如“嗨，你现在该看这里了”或者“哇，你的操作完全正确。”然而，动效的目的不是为了愉悦用户，而是为了帮助理解操作会有什么进展亦或是提高用户使用APP的效率。这一点我们可以在Zurb的陈述里证实。

我们不仅仅只是设计图形界面，我们设计的是用户与他们的屏幕如何互动。或许动画效果应用在广范围的背景来构建美学与功能的统一：动效能够影响用户行为，沟通状态，引导用户的注意力以及帮助用户看到自己动作的反馈。这里有一些例子说明你可以在界面的什么地方增加动画效果来提升用户体验。

加载不能太无聊

你应该尝试让等待变得愉悦，如果你不能缩减等待时间的话。动效可以代替烦人的转啊转啊转（这基本上只是提醒用户他们正在等待），几乎任何网页或者应用都可以利用屏幕框架和巧妙的动画来维持用户的兴趣。

在页面完全加载完之前用屏幕框架递增的方式完成

状态切换不能太生硬

动画效果可以让过渡更加显著，所以当用户开始和结束，动画效果要能展示到底发生了什么。好的过渡设计会让用户清楚的明白自己的注意力应该往什么地方放。

Adrian Zumbrunnen举了一个关于当用户点击链接的时候，滚动动画是如何帮助用户保持所在的环境的好例子。只要比较静止的那一瞬间的变化就能明白切换的感觉就像硬切一样：

突然，不自然地就改变了，这样的界面切换对用户来说是非常不舒服的

有动画效果动作时：

动效给画面带来生气

解释元素之间的关系

动画可以提升用户直接操作的感觉。

举个例子，一个菜单按钮平滑过度变成播放控制，再变回来。这个效果会告知用户这个按钮的功能，当用户不太明白这个交互的作用时候。播放按钮转变正暂停表明这两个动作是有关系的，当其他元素出现的时候它们是不存在的。

这个例子里，动画用来引导眼镜去看屏幕的中心也就是音乐控件的位置。

另外一个例子，当按下浮动按钮的时候，加号就会变成一支笔，这说明笔是最主要的创作方式。一个小小的细节也能显示出接下来会发生什么，让用户明白不同情况下标识的含义之间的不同。


错误的操作必须有鲜明的反馈

动画可以加强用户习惯的的操作。

举个例子，表上登记的项目可以极大的增强一些动画。如果正确的数据允许登录，一个简单的“点头”的动画可以解释这一点。而水平的抖动可以用来表示未输入或者输入错误，当用户注意到动画的时候他们立刻就能明白这个动作的含义是什么。

图中展现的是最基本的抖动形式

利用反馈来展现动作完成

动画可以帮助用户明白他们操作之后的结果。根据“别说，展现出来”的原则，你可以用动画反馈展示出到底完成了什么。

下面的例子中，当用户点击“付款”，一个简单的旋转加载出现在APP支付成功的情况下，对号标志动画让用户觉得很轻松的付了款并且用户会感谢这些重要的细节。


总结

当动效使用的非常成熟了时候，它是非常有用的，这对与时间安排以及考虑一个动画是否是有效的是非常重要的。我们需要从开始就接受动画效果，并且考虑这对于我们设计来说是否自然，因为设计不仅仅只是视觉的展示。就像乔布斯曾经说过一样：
设计不只是看起来及摸起来像什么，设计是如何运作。

上一篇 2011年网页设计趋势全面分析

下一篇 实用干货！5个专门写给UI设计师的创意训练方法

返回列表
学员作品赏析
  • 2101期学员李思庭作品

    2101期学员李思庭作品

  • 2104期学员林雪茹作品

    2104期学员林雪茹作品

  • 2107期学员赵凌作品

    2107期学员赵凌作品

  • 2107期学员赵燃作品

    2107期学员赵燃作品

  • 2106期学员徐正浩作品

    2106期学员徐正浩作品

  • 2106期学员弓莉作品

    2106期学员弓莉作品

  • 2105期学员白羽新作品

    2105期学员白羽新作品

  • 2107期学员王佳蕊作品

    2107期学员王佳蕊作品

热门课程

专业讲师指导 快速摆脱技能困惑

相关文章

多种教程 总有一个适合自己

专业问题咨询

你担心的问题，火星帮你解答

火星资讯

链接合作QQ : 1336151628
室内设计 游戏培训 ui设计培训 影视特效培训 插画培训 原画培训 动画培训 平面设计培训 建筑设计 动漫培训 火星问答 web前端培训 技校 学技术 中专 动漫绘画教程 通用培训
关于火星
关于我们 人才合作 建议和意见
内容分类
频道专区 热门标签
火星优势
师资团队 教学模式 课程研发 学员成果 图书出版 资质认证
帮助中心
专业选择 考察学校 学习方式 如何就业 如何退费
联系我们
课程咨询：400-810-1418 人力资源：010-59833585 总机电话：010-59833333 监督电话：400-810-1418转接2 就业部：010-59833202 企业及高校合作：010-59833514 市场合作：010-59833359
©2021, www.hxsd.com 北京火星时代网络技术有限公司 电信与信息服务业务经营许可证070738号 京ICP备09083002号-6  京ICP证061064号  京公网安备11010502025474
获取验证码

×

确定