疯狂流行的动效，究竟是交互设计还是视觉交互设计

来源：蜘蛛抓取(WebSpider) 时间：2017-01-03 02:07 标签： 视觉交互设计
我们为什么需要动效设计？_心得技巧_
我们为什么需要动效设计？
来源：人气：165
　　最近越来越多的国内公司开始关注动效设计了，越来越多的团队意识到动效在产品用户体验中的重要性。但是为什么需要动效设计?需要什么样的动效?做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。　　随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的射鸡师们也开始投身动效设计领域。　　(文中部分案例为设计师个人作品，部分为线上产品，都是我非常非常欣赏的作品。如不慎冒犯请戳我替换掉)　　一、加强体验舒适度　　嗯，就是让用户更加爽更加爽的用你的产品。　　具体表现在：　　1.表现层级关系　　为了展现层与层的关系，是抽屉，是打开，还是平级切换等等，让用户知道这个界面和上一个、下一个的关系。这已经是非常最常见的运用了。　　2.与用户手势结合，更自然的动画表现　　当用户手势操作的时候，让界面的动态走向更符合手指的运动，从而让用户感觉到是自己控制了界面的动向，而不是机械化的跳转。　　City guide app 用手势可以向左向右扔卡片　　3.愉快的提示功能　　在某些需要提醒的时候能吸引用户的注意，但是又不会生硬，符合预期的出现。　　Action button feedback 出错提示　　City Guides 启动时提示用户可以左右滑动卡片　　4.额外增加界面的活力　　在用户预期之外增加的惊喜，可以是帅气的，可以是卖萌，可以有些物理属性，总之让用户感知到产品的生命力。　　readme.io 萌萌的输入框　　amazon Q弹的菜单　　tumblr 不喜欢我 心都碎了呢~　　5.吸引用户持久的注意力　　也是属于增加用户的惊喜感，在某些数据量较大的界面中添加一些动效，让用户保持注意力。　　Bubbles 以动态的形式展现数据点　　二、减弱不可避免的不适感　　虽然我们的产品，我们的交互，我们的设计，我们的工程狮都在努力把产品打造的更加优秀，更加完美，但是总有一些无法避免的问题、或者有可能会出现的bug、外界条件的不给力等因素，造成我们的产品体验下降。这些时候适当的增加一些动效可以弥补在出现这些情况时的不适体验。　　比如下面这些：　　1.让等待变得更愉快　　常出现在加载、刷新、发送等界面中，让等待变得可视化，甚至不再那么无聊。　　Download ogress 让下载不再枯燥　　App loader 有趣的loading动画　　gear-powered 拉了还想拉的下拉刷新　　2.失败界面的动效　　比如刷新失败、页面错误、未联网提示这些。　　download 就算失败了还是感觉萌萌哒~　　3.增加界面与界面衔接的延续感　　界面的跳转不可以避免，但是如果让本来分别独立的2个界面或者事件拥有了某种特定的联系，可以显得更加好玩，不再是生硬的跳转。　　iOS Animation Download 界面跳转时保留部分元素到下一个界面　　Filter Menu 保留需要的条目 移走不再用的　　Elevate　　三、不易被察觉的动效　　特意把这一类单独说一下，由于不容易被发现，普通用户通常会忽略它们的存在，但很多时候这些小细节让交互变得更加有趣。　　1.默默增加反馈感　　为用户的操作提供有趣的正反馈。　　Twitter 收藏的点击反馈　　2.去除用户不再需要的元素　　随着用户的操作，有的内容已经是用户不再关注的。这时候可以将他们隐藏起来。　　CityHour Calendar Animated Interaction　　Steller　　上面的例子大部分都是比较特色鲜明的，但是大多数实际情况中的优秀动效设计都会涉及到好几点同时都满足。总的来说动效还是为用户体验而服务的，动效设计师尤其要注意交互逻辑，才能让你的作品看起来不但动效帅气逼人而且真正发挥了实际的作用。　　最后要提醒的是，千万不要牺牲了用户宝贵的时间用来看你毫无目的的动效。　　文章总结了一些自己的想法，有不足之处希望各位可以指出~
优质网站模板网页设计教程子分类交互设计中的功能动效
译者纪：本片文中包含大量的动态页面（原网站是视频链接，本网站上传视频不能排序，故人工转为动图），加载较缓慢，请各位多点耐心，么么哒---一个好的交互设计师可以很容易的解释设计里面的决定背后的逻辑。这包含着信息架构，页面内容的层次结构，流程和所做的解释。迟早，动效将会应用到线框图原型中，这个时候，再去对设计做决定或者是解释，将会变的难一些。例如一些这样的理由：太狂拽酷炫了……太潮了……太鸡冻了……这将是设计失去其力度的领域（Reasons such as “It will be cool!” or “It’s trendy” or ”exciting” are exactly the areas where a design starts to lose its strength.）在我们的设计中，动效理应占到更多的比重。我们应该去定义动效，并且阐述他们的目的——像我们阐述一个设计中其他的元素一样。什么是功能动效？功能动效是微妙的动效，是我们嵌入在用户界面设计中的流程的一部分不像是迪斯尼出的动效（动画）或者是电脑游戏中的动效，我们这里讲的功能动效拥有一个清晰的、有逻辑性目的。这个目的为是我们想要传递的设计理念服务的。功能动效是我们UX（交互设计）工具库中的又一个工具。在一个完美的世界里，我们应该可以验证功能动效与清晰设定逻辑的目的。如果一个动效在我们的设计里面遵循我们设定的逻辑目的，那么它就是一个有效的功能动效，它存在在我们的设计中便是合理的。但是，如果它不与逻辑目标相符，那么它可能就是多余的，需要重新慎重考虑这个动效存在的意义。在过去的一年左右的时间里，做过各种各样的项目，我收集并整理了一系列九个逻辑目的。今天帮我验证功能动效。我已经意识到，通过查看一个被很好定义的动效，我可以很容易的把它们放入到这个系列点一个或者更多的组。也可以这样思考：当一个动效不符合一个功能性的目的，那么这个动效多存在可能会让用户觉得困惑或者恼怒。下面是我目前收集的这一系列的动效。我希望你会在你的设计中对你有所帮助。导向导向会阐明结构。在这组中，收集的是一些扮演导航角色的动效，它是网页信息结构的反映。这种动效是想要吸引用户对导向的注意，帮助用户理解页面布局刚果发生的变化：什么导致了这个变化，下次想要使用的时候怎么再次打开。一个典型的例子是：一个按钮，可以切换隐藏内容（如个人资料等）。当你点击它是，会出现一个隐藏的面板，当你合上面板，它缩小回操作按钮。第一次接触的时候，用户可能对马上要发生的事情（做了动作之后的回馈）猜的不那么准。隐藏面板尺寸不断变大的载入动效可以帮助用户更好的知道发生了什么，而不是觉得自己离开了页面或者内容突然消失了。这样用户就产生一种自在的掌控感。收回面的的动效可以帮助用户关联打开对应面板的按钮或者图标，这样他们就会知道下一次从哪里打开这个面板。逻辑目的：避免突然间的变化，让用户知道自己在哪。例如：下列两个动图：
相同的位置，新的功能一个众所周知的易用性准则：保持设计和站点内容的一致性。一个具有一致性的站点通常是可预见性的，因此，也是可以学习的。此规则也适用于按钮的操作。在某些情况下，我们必须要设计一个在一定条件下功能发生一定变化的按钮。我们这样做通常是因为空间受限，如手机等。因此，用户已经知道一个按钮的功能情况下，他还得学习另一个新功能。“保存”和“编辑”按钮是功能转化按钮的最常见的例子。但是这个又是最简单的，因为这两项操作是互斥的，他们具有相同的情景（context）。在其他的情况中，当两个功能之间不具备明显的联系，可用性的挑战就凸显出来了。功能动效这个时候就能发挥很好的作用。逻辑目的：强调动作按钮的功能变化。例如：下列两个动图：
放大缩小第三组的放大缩小看起来和第一组的导向有些相似。在这些动效里面，用户在列表里选择一个条目，然后就变成了这个条目的内容或细节（取代了列表视图），并且能够返回之前的条目列表。我们经常在图像库、卡片和条目选择中见到这样的动效。用户选择了一个条目，条目马上响应用户的选择，在屏幕上显示对应的细节内容。这里的困难是必须让用户继续感到掌控感，并且还在原来的流程中。功能动效在这时候往往是必不可少的。在研究这个组中的功能动效时，我注意到一种共同的模式，当下面条件被准确的实施时，会增强动效的功效：初始状态时条目的列表。每个项目被指定一个单独的视觉提示，例如一个主色调、一个符号、一个加粗标题或者是预览图像。当用户做出了一个选择，一个新的页面出现，所选择的条目的视觉提示的要素被突出出来。例如，整个页面的颜色可能延续了之前所选条目的主色调；或者，之前页面的符号被扩大并且定位到页面的标题；或一个条目的名字会变的更大，出现在页面的标题。一个较明显的关闭动作按钮出现在新的页面，如“取消”，“关闭”，“返回”或“x”。逻辑目的：把条目与详情页关联。例如：下列两个动图：
视觉提示视觉提示可以帮助用户更好的知道怎么去操作产品的界面。尤其是设计包含非常规对象或者单一的导航形式时，显得尤为重要。这种功能动效是很容易被察觉的。当我们打开了一个页面，突然触发一个快速的一次性动效，来演示如何操作产品中的功能。逻辑目的：可以展示非常规功能或者隐藏的事件。
突出这种动效可以吸引用户在内容太多的环境下的注意力。设计师通常是避免嘈杂的布局和太多的内容的，当内容太多时，屏幕中的各种颜色和内容均试图吸引用户的注意。一个解决的方式就是从界面上去掉些内容，但是这个方式在有的时候并不是那么给力。试图想一下一个新闻网站的负责人想要移除一些新闻和图片。另一个角度想一下。动效是可以自然而然的得到页面上的视觉焦点的。无论是文本内容还是静止的图片，都是无法与动效比拟的。我们可以利用功能动效的这一优点。记住，通过添加动效获取最高视觉焦点是对嘈杂界面的一个缓坡。在下面动效的例子当中，我们可以看到，在嘈杂的网页中把一个物品加入到购物车是不明显的。所以，这时候就需要动效。逻辑目的：抓住用户注意力，超越嘈杂的界面。例如下面一个动图。 未完待续翻译自：Functional Animation In UX Design译者：那啥那小啥啥去化斋译文地址：/p/8b62ed0c949c#
注：相关网站建设技巧阅读请移步到频道。
看过本文的人还看过
最新图文推荐
最新专栏文章
大家感兴趣的内容
网友热评的文章

我要回帖

更多关于 视觉交互设计 的文章

 

随机推荐