趣达 发表于 2015-11-17 17:10:07

交互动效原型制作,以及避免不必要的动效设计

想要制作一个ui交互设计原型,添加动画效果更能吸引用户眼球,提高用户使用价值。所以当今这个交互设计竞争激烈的时代,设计师们纷纷往ui交互设计的方向发展,但是在这个奋力追逐的时候,UI设计师往往设计出许多不必要的动效,不知不觉中已经妨碍了你作品的交互效果。
下面ui设计培训课程介绍一些设计师设计的一些不必要动效设计:桌面端和移动端都有无数的糟糕UI动画示例,其中之一,就是OS X的窗口切换到全屏模式的过渡动画。因为它来自因前沿的设计感著称的苹果公司,且是旗舰产品的主要特点,所以格外令人困惑。
一、常见UI动画有以下几个问题:1:不可设置(除非通过命令行修改)2:遮挡了界面的蒙层   3:缺少后台正在执行操作的指示4:动画缓慢   5:动画非必要·二、如何知道你的UI动效使人厌烦?(ui交互设计失败案例)
人们会在博客上写文抱怨。无数探讨如何加速或禁用动效的博文和论坛问题帖,都很有力地说明这个转场动效除了让用户烦恼,毫无作用,这是UI动效设计的一个大忌。

这个动画最烦人的一点,是在耗时间的网络请求完成后,这个动画才发生,导致增加用户额外的等待时间。
      
三、动画是否必要?检验ui交互设计效果的提问:这个动画提升了用户体验吗?

   
一个完整的ui设计模型,少不了ui交互设计动画效果。在ui原型当中添加动效技术,不仅仅只是为ui设计模型的完整性,更能够提高ui原型的交互效果。应用ui交互设计效果,动画效果是应用的锦上添花效果,比起死板的页面切换,动画过渡效果提高用户体验价值,实现交互性。我们以几个例子来说明一下如何应用axure里的动画效果。
幻灯片效果1. 自动轮播


2. 左右滑动我们还可以给动态面板添加左右滑动事件,这两个事件是动态面板特有的,这样可以模拟手指向左或向右滑动。
3. 指示器的动态效果在切换片子的时候,我们希望下方的指示器也能自动指示当前选中的片子,并且有动态的移动效果。这里为了处理方法通用,使用了一点小小的技巧,用一个变量来控制当前的索引,然后索引整除3,根据得出的余数移动指示器的位置。


自定义下拉弹出菜单
1)弹出菜单
我们使用了同一个按钮来控制弹出和隐藏,因此需要在事件上添加条件判断,判断的依据就是下拉菜单动态面板是否处于显示状态。


2)隐藏菜单如果我们不添加动画效果的话,菜单的显示和隐藏就太突然了,有了动画效果,体验效果会好很多。
3)TAB属性页面TAB的实现一般都是通过动态面板的方式,这里不说动态面板的用法,只说一下动态面板按钮上方的红色线是如何移动的。

给TAB的三个按钮添加事件,单击后,切换到指定状态,然后移动这个红色的线到当前点击的按钮位置。



4)下拉刷新

来自:学ui网更多的ui设计培训文章--创意图标的制作过程(案例:iOS7图标设计)每天都一点点交互设计培训,每天多一点点经验。找在线交互设计培训机构,就找趣达交互设计培训学院www.qduck.cn

伱若安好 发表于 2015-11-19 14:06:00

不早了 各位晚安~~~~

不萌不媚 发表于 2015-11-19 14:51:48

你这样的表现,就只配这几个字:窝囊废

safdsfdas 发表于 2015-11-19 16:14:42

呵呵,等着就等着....

萤火虫 发表于 2015-11-19 17:26:19

嘿嘿......哈哈......呵呵.....哟~呼

如雷贯耳 发表于 2015-11-19 17:54:16

呵呵 没事怎么有点被讽刺的味道啊

没有绿叶的红花 发表于 2015-11-19 18:40:38

警告啊

日积月累 发表于 2015-11-19 18:44:41

估计你是没见识过~` 呵呵

qsoul 发表于 2015-11-20 11:11:56

楼下的接上,好帖子还是要鼓励的

成都相亲交友 发表于 2015-11-20 11:14:18

呵呵 没事怎么有点被讽刺的味道啊
页: [1] 2 3
查看完整版本: 交互动效原型制作,以及避免不必要的动效设计