产品设计

    今日:83| 主题:15636
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[其他] 5个小技巧,用动效提升界面的用户体验就这么简单

[复制链接]
姐的霸气凸不出来 发表于 2016-10-2 05:52:35
241 7

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

5个小技巧,用动效提升界面的用户体验就这么简单-1 (小技巧,注意力,设计师,图片,用户)

  动效能讲述故事。和图片不同,动效能够呈现变化的过程,讲述一段简短而有趣的故事,能够同你进行对话:“嘿,你该看这个按钮了”或者“哦耶!你刚刚完成了一个操作!”不过,动效的目标并不是单纯的娱乐用户,而是帮助用户了解交互的效果和界面中发生的变化,让用户更为有效地使用你的APP。Zurb 有一句话很好的解释了这一点:
  “我们设计的不再仅仅只是静态的界面,实际上,我们所设计的是用户从界面获得内容的过程。”
  动效广泛运用于网页内容和背景当中,用来强化功能,提升美感:它会直接影响用户的行为,引导用户注意到特定的内容,呈现状态,帮助用户找到他们想要的内容,达成目标。想要借助动效提升用户体验,可以参考下面的指引来进行优化:
  加载过程不要让用户感到单调无聊

  如果你无法缩短加载和等待的过程,那么你应当尽量让用户在等待过程中感到愉悦,这个时候的动效基本只是在提醒用户后台正在加载。而几乎所有的网站和APP都会碰到这样的情况,而好的设计通常都是通过微妙而有趣的动效,让用户的注意力转移到动效本身上,而不是被无聊的情绪所左右。下面的的案例中,设计师让界面从基本的框架结构开始加载,明显地缩短了等待的主观体验。

5个小技巧,用动效提升界面的用户体验就这么简单-2 (小技巧,注意力,设计师,图片,用户)

  不要让状态改变过于生硬

  动效最重要的功能之一是强化过渡效果,所以,它需要让过程的起始和结束都要被明显的呈现出来。一个设计良好的过度动效应当合理地将用户的注意力引导到需要被关注的地方。
  Adrian Zumbrunnen 有个非常不错的案例,它展现了用户点击了链接之后,滚动动效是如何让用户明白变化过程的。对比下面硬生生的转变和加了动态效果之后的版本:
12345下一页
友荐云推荐




上一篇:绝对不能错过!2016 年最流行的8个UI设计趋势分析
下一篇:在交互设计中,需要注意的四个小tips
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

变形计 发表于 2016-10-2 09:10:19
突然觉得姐的霸气凸不出来说的很有道理,赞一个!
回复 支持 反对

使用道具 举报

拒绝游泳的鱼 发表于 2016-10-2 15:51:40
以后就跟姐的霸气凸不出来混了!
回复 支持 反对

使用道具 举报

jhlhjl 发表于 2016-10-21 13:45:05
前排,哇咔咔
回复 支持 反对

使用道具 举报

royzhong 发表于 2016-11-7 08:25:47
顶顶更健康!
回复 支持 反对

使用道具 举报

凝丝 发表于 2016-11-13 04:26:21
姐的霸气凸不出来的战斗力爆表!
回复 支持 反对

使用道具 举报

沦的岱码 发表于 2016-11-13 16:33:40
我也是醉了。
回复 支持 反对

使用道具 举报

彭朋 发表于 2016-11-17 21:07:54
我左青龙,右白虎,肩膀纹个米老鼠.
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表