浅尝交互有感-首页分类交互复盘Recommand
4年前Publish
去年10月份做的一个项目复盘,加了一些各家对于APP动效的看法和自己的拙见,现在发出来。

丨前言:

  交互动效的首要目标应是支持和增强用户在状态间的转化。因为动效存在负面作用,合理的使用它变尤为重要。Cooper提出动效需要谨慎的使用。过度的使用动效不仅让人困惑和反感,而且让人生理上不舒服


  现在越来越多手机应用和web应用都开始注重动效的设计,恰到好处的动效可以给用户带来愉悦的交互体验,是应用颜值担当的一大重要部分。但动效的错误使用也容易起到干扰用户的副作用。

不久前参与了返还购APP分类栏交互的项目。虽然这对于整个APP来说只是微小的一部分,但我在这个项目的跟进过程中受益良多。在这里整理了项目文件,分享一下这个项目提出到落地的过程,也算是对自己近期工作的总结和后期工作的提醒。


丨项目简介:

  这个改动主要是考虑到这几个点:

  不过以上这些都不重要,只是交代下一背景,对接下来要说的动效影响不大。


丨设计工具:

这个项目主要用了这三个软件来完成:Photoshop、Axure和After effects,三个软件使用的比重都挺大的。这里我要说明一下,这个效果其实用Principle应该是最快出效果的,无奈我没有Mac机子可以用,于是我想这么个简单的效果就用Axure做好了。Axure优点是可操作性比较强(还不容易宕机),After effects虽然做东西比较不废时间而且好控制效果,但是只能导出视频格式,所以这回优先考虑用Axure。不过最后还是用了After effects,这里我在后面会说明。

 


丨项目过程


一:简易版demo

  按照需求做出这个交互以后我也觉得很唐突,文字分类栏小时和icon分类栏的出现都没有一点提示,不像是两种分类栏之间的状态切换,反而像上滑到一定程度会突然出现一个新的模块。这种类型的竞品也不多,很少APP会对分类栏进行变化。于是只好和产品一起探索,一点点完善需求,寻找合适的交互方案。

 

二:思想碰撞与需求完善

在与产品进行了几轮头脑风暴的过程中产生了很多种想法,选取有代表性的几张放出来(前方动图高能预警):

  1. 用渐变显示的动画效果替代了之前直接弹出的动效果,使得这个交互没有唐突的感觉,增加了对用户的友好度;

  2. 因为觉得搜索框在分类栏转变后依然显得很独立,于是对搜索框也进行了变化的处理。这样一来头部一块更像一个整体,同时也弱化了搜索框的存在,让信息流的浏览变得更纯粹;

  3. 在弱化搜索框的基础上进行了推进,在信息流上移的过程中直接取消了搜索框,目的是让用户能中心地浏览商品,也提高了商品在这个页面的曝光数量。于此同时分类栏右边的ico也加上了搜索的功能,点击之后能直接跳转到搜索&分类页面;

  4. 想法和前一个方案是一样的,在上滑的过程中隐藏了搜索框。这个交互动作是:原来的分类栏和搜索框会随着用户上移的手势慢慢渐隐,同时渐显新的分类栏。这样的交互动作不显得唐突,能让用户更容易接受分类的变化。


  因为一开始需求不是很明确,需求方也不是很确定自己需要的是什么样的效果,只能是打着灯笼一步步走。在这个出方案的过程中,也不断地分析同类产品和有相似交互的产品,结合自身产品的定位最终重新理清了对这个页面和交互动作的需求:1.简化头部,去掉搜索框,在原搜索框的位置加上“今日促销”的标题;2.分类栏变化的时候需要告知用户元素间的切换,让用户便于接受新的分类栏;3.分类栏样式需要特别突出,和信息流或者头部标题明显分开(这个设计方案参考了淘宝天猫等主流电商产品的做法)。



三:最终设计稿

  考虑到需求对动效的要求,可能会有一些元素状态会变化,我决定不继续用Axure做了,After effects对于有小动画的交互表现来说明显比较合适。在原来方案的基础上加了一些小细节,比如分类栏选中状态的下划线在切换时会先扩张成一个圆角矩形再变成一个方块、icon出现的动画不仅有透明度变化还有大小变化。

丨总结

  作为一个本科动画毕业的设计师,我对动效还是有些感情的,工作外的时间也会看看动效制作教程,学学软件技巧或者试图学一些大神的设计思路。但在项目中用到动效设计的机会确实少之又少,平时练习时会想做一些花里胡哨的动效,然而到了实际项目才发现确实不合适,这也是缺少项目经验的后果。于是查阅了这方面的资料,正好趁着这个项目刚完成给自己补了一节课,也算是纠正自己对于这块区域的错误认知。

动效是存在副作用的,用得恰当的话会使产品更出色,如果用得不好不仅让人困惑和反感,而且让人生理上不舒服,影响用户体验。交互动效的首要目标应是支持和增强用户在状态间的转化,使用动效存在下列目的(交互领域前沿设计师Dan Saffer):

  1.吸引用户注意力在指定区域。

  2.表现对象和用户操作间的关系。

  3.维持多窗口或多状态的上下文关系。

  4.提供持续性事件的认知感。

  5.创造虚拟空间引导用户在状态和功能间转化。

  6.创造沉浸感和趣味性。

   在我们对于动效制作有天马行空的想法的时候,还是有一些事项需要注意的,这些甚至可以用来评判一个动效的好坏。Dan Saffer对于动效还提到这么一句话:“如果你做一件事可以不用动效,那尽量避免。”这点我们可以从现在占市场份额很大的微信或微博客户端中看得出来。并且,动效应符合它本身传达的意思,。比如用户上下滑动屏幕,窗口内容就该上下变换,而不是左右变换。仅仅为了达到炫酷引人耳目的目的而作动效是不可取的,交互动效需要尽可能解释其本身含义。在此,设计师Amin Al Hazwani和Tobias Bernard提出4点让动效具有意义的注意事项:

  1.概念转换:不要独立的设计界面布局和动效。设计它们的时候思考它们之间的联系,如何它们之间转化更自然,符合内容的语义。

  2.解释关系:每个元素都有其意义,状态,位置等属性。尝试用动效反应这些属性间的关系。比如点击一个按钮,如果会触发一个面板。更好的效果是让面板从按钮处出现且渐入,而不是让面板直接渐入。

  3.唯一性:不要让一个相同概念的元素在画面中同时出现在2个地方。这会让用户对理解该元素的意义产生困惑。比如点击小图显示大图,小图在大图显示的过程中依然出现在用户视野内。

  4.空间一致性:动效在空间上需要符合实际性。当一个元素从左侧离开视线后,潜意识里你会预判它回来的方向也是从左侧。

 

虽然只是做了一个小动作的交互,但是管中窥豹,在项目的推进过程中我也逐渐意识到自己对于动效应用的不足:

1. 不应该为了想做动效而特地加上动效;

2. 动效的存在应是向用户清楚地交代界面发生的变化,告知用户元素间发生的变化;

3. 动效的发生到结束应控制在合理的时间范围,时间太短用户无法明确感知动效的发生,时间太长反而影响用户浏览页面的效率;

4. 最后,动效应贴近正常的物理规律,如元素的大小变化、位置移动或者渐隐渐现,生硬的动画只会影响产品的友好度。

真正把理论运用到实际中时总能发现自己对于一个知识点的遗漏,看过几位前沿设计师对于动效运用方面的总结也明白纸上得来终觉浅。在此做一份工作记录,算是给自己一个提醒,也望诸君共勉之。


原文链接:http://www.uisdc.com/motion-bring-apps-to-life http://www.uisdc.com/3-key-uses-for-animation
19
Statement: all the content and comments made by netizens in ZCOOL only represent themselves, and do not reflect any opinions and opinions of ZCOOL.
Report
Share
Collect
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
All Comments0
厦门 | 学生
收录收藏夹
更多收录此文章的收藏夹