今天就与大家探讨一些，在一款音乐应用中的交互动效，在设计落地中的思考与革新。

 

 

前言

这半年中从一名UI设计师转型UX设计师，打破了一些固有的边界，开拓了对业务的了解角度，我想这也许就是行业中设计师的发展形态。由于跟踪的流程加长，对于输出的想法也更加细密，哪怕是很小的一些点，也能以小见大，得到收获。

 

以前作为一名UI设计师对于业务的话语权很轻，在整个业务流程中的作用甚至多半时候是一个“缓冲带”的角色，现在作为一名UX设计师会更接近业务，同产品讨论，同研发探讨。

我们设计输出还是要服务用户，不是一味的追求标新立异，当然美是最基础的准则，应该从底层思考，让自己的设计更加立住脚跟。

 

以前在做动效设计逻辑会用很多“干扰因素”，致使落地的方向以及还原度都有较大的偏差，现在从立项，到设计输出，以及最后的落地环节都可以紧密参与，这样不仅能出于对业务目的更深度的了解，同时在与上下游的设计沟通中，输出会更具信服力，理解研发的呈现逻辑，更加主动的输出优质的设计。

 

本文所有设计样式源于一款名为resso的音乐应用，想体验的同学可以科学上网下载体验，不过不下载也没关系，这里分享的知识都是相通的。随着这款应用日活突破千万，里面的交互动效就会思考和深究的更多。那么今天就与大家探讨一些，在一款音乐应用中的交互动效，在设计落地中的思考与革新。

 

知其所以然

设计师是属于创造性的职业，整个职业生涯会分为三个阶段：第一是技术层面，第二是艺术层面，第三是心术。一切好的产品都是具有人性的，我们不去拿一些飞机稿去研究它的炫酷性，而是由浅层常规的交互动效，去探索这其中的奥秘，知其然知其所以然，这才是对于知识真诚的态度。

 

业务中思考

对于界面中的交互动效大家已经接触很多，对于制作，很多设计师也有了一些基础的了解，我们能看到的也有很多关于聊动效的文章和作品，但是在实际的工作中，这些知识如何能有效应用，在推进落地中，如何与研发沟通，以及在落地遇到困难时，又是怎样出解决方案，作为一名动效设计师都是不可避免的需要去深究。

 

 

页面横滑回退——用户角度思考

大家对于一些应用的右滑回退操作已习以为常，但是究其深度可并没有表面上那么简单。

做这样一个功能的目的也很简单，智能应用下，用户对简洁的操作愈加渴望，说白了，就是怎么操作方便怎么来。

 

 

首先做这样一个功能，在一个界面中，用户的触发区域怎么定义，以我们常用的应用为例，微信、支付宝采用的是边缘可触发，图例001A位置区域，抖音、百度则采用的是页面任意区域触发，图例001B位置区域。

 

为什么会有两种触发机制？如果页面中带有多重操作入口，边缘可触发精准了用户的操作。任意区域触发便捷了操作，让用户操作更加自由。这两种没有绝对的好与坏，针对产品的属性定位而去对应配置。

 

 

第二点就是在实际的开发中，观察到安卓和iOS的区别，我们不妨拿出身边的手机打开任意一个应用去观察。在横滑回退操作中，上一层级页面与下级层级页面的关系。

 

 

如图例002中，当B页面回退的同时A页面是出于静态的还是在同步移动的。其实我们可以去定义，iOS系统中是默认的错层位移效果，然而安卓默认是不会移动的，就需要单独增加，成本就会影响上线周期，所以对于这样的双端不一致，我们是可以理解与容纳的，这也就呈现出上线后，双端差异的原因。

 

 

如图例002中，当B页面回退的同时A页面是出于静态的还是在同步移动的。其实我们可以去定义，iOS系统中是默认的错层位移效果，然而安卓默认是不会移动的，就需要单独增加，成本就会影响上线周期，所以对于这样的双端不一致，我们是可以理解与容纳的，这也就呈现出上线后，双端差异的原因。

 

 

应用全局搜索——多端实现差异

现在市场上成熟的应用基本都会有一套自己的搜索组件系统，为了方便用户在应用能快速精准的查找结果。但是搜索的组成并不是一个简单的搜索框这么简单，当点击搜索后，交互动效是如何指引用户的，这里牵扯到搜索页面中相关搜索模块，以及调用系统键盘。

 

 

这里的交互动效设计中，为了让用户能够注意到相关搜索模块的内容，我们做了一个与键盘同时升起的效果。

 

但是安卓和iOS对唤起键盘的可控程度不一，因为安卓的键盘升起和降落的速度时间不可控，所以针对这种情况的处理，在安卓上去掉内容部分跟随键盘升起降落的动画，保留iOS的内容随键盘降落的动画。

 

 

无论是安卓还是iOS，系统自带的应用都能很好的处理此类的问题，有一些应用安卓上为了减少内容入场与键盘升起的错落感，采用的是横滑的样式入场。

 

 

在初始设计中我们忽略了安卓键盘唤起的问题，所以在设计落地中无法有效的推进，最后我们去除了搜索内容跟随键盘的动作，让用户的注意力集中在头部搜索输入和键盘上，同时由于搜索内容的动效去除，也解决了低端机上无法满足搜索内容在行使动效中有效描绘的问题。

 

 

用户评论外显——综合比较最优选

随着应用的用户量上升，每一款应用都会在社交社区模块发力，为了让用户在这里能够找到更多志同道合的人，所谓的拥有归属感，这也是对于用户增量以及用户留存的手段。

 

最初的交互动效设计为了让此部分更能引起用户的关注，放大了此板块的状态转换，评论词条的更替样式采用了向上轮换的效果，并且将词条移动的同时进行了缩放，图例中004，行成一种空间滚动的感觉。

 

 

 

 

当然这种效果如果在一个静止的页面中出现，无疑是非常吸引用户的，然而忽略掉了一点在这样的一个页面中，处于动态展示的并不止这一处，图例中005A处与B处，这样的展示，会对页面中其他的动态展示造成了一定的影响，所以，为了有所取舍，分出主次，这个模块进行了降级效果处理，让评论此条原位置渐隐渐显已经完全满足需求，这也正是不是为了动效而动，而是适宜有效的进行展示。

 

 

 

 

也正是出于同样的逻辑下，图例中005B处也是可以容纳另外一个功能的区域，为了达到这样的目的，又重新梳理了交互动效的互斥逻辑以及替换逻辑，避免在同一位置下两种功能展示的互斥。

 

 

 

博客关注——极致的思考

博客关注这里的交互场景相对来说是比较小的，为了满足不同场景下用户对博客的关注，我们还是尽其所细，考虑多种角度。辅助用户理解信息，帮助引导用户完成必要的操作，更好的表达操作结果。

 

博客关注这里的交互场景相对来说是比较小的，为了满足不同场景下用户对博客的关注，我们还是尽其所细，考虑多种角度。将关注的可能性放到最大化，并强调关注的关联性。

 

起初的设计是在关注后，从一侧出现小封面再掉入到podcast icon中，但是关联性并没有达到预期的效果。

 

 

 

于是设计了第二种，直接将封面进行位移缩放，似乎好了一些，但是这个路径非常不自然，直来直去的。而且当封面上滑的时候，由于头部遮挡了一部分封面，这也导致此部分的交互动效无法运行。

 

 

在此基础上又进行了一次优化，仔细剖析了一下，将整个过程进行了拆解，首先为了封面完全露出时行动的路径更加清晰，做了一个响应设计，当界面向上滑动，封面进行缩小，缩小到一定的比例，进行吸顶效果。同时优化了行动路径行程一个抛物线的效果。

 

 

 

 

大家可能比较好奇此类的抛物线如何与研发进行沟通，其实这里就涉及到我们中学的数学知识，需要运用到四个锚点进行计算，四个锚点分别是：起始点、落点，两个操作杆的端点。同时这是一个变化的过程，给到初始封面时的曲线参数，最终缩放后的曲线参数，研发同学就可以计算出整个过程中的曲线。（图例非真实数据，此处只作为展示示意）

 

 

minibar——有效推进落地

minibar是音乐应用中比较常用的功能模块了，方便用户在不同场景下快速唤起播放器，minibar与播放器之间建立关联性是非常有必要性的。经过调研，我们对市场上已有的音乐应用进行了分析，得出的结论minibar与播放器建立强关联性的比弱关联性的要易用很多。

 

封面作为关联的重要因素，无疑是设计中最主要处理的模块。

 

交互动效不仅考虑用户的使用场景、功能性，还需要考虑整体流程的持续时长、曲线的运用，从而达到合理的呈现效果。

 

由于特殊的页面结构，为了达到整个页面缩放的目的，安卓必须在最上层加一个遮罩层达到效果，这个问题在iOS上却是一个比较容易解决的问题。

 

在最初的设计中希望封面收起后会有一个停顿的动作，在进行掉落，之所以这样思考是为了让动效看起来更有节奏，用户可以看到专辑封面的变化。

 

同时整个流程的运动路径也是直来直去的。

 

 

 

也正是出于这样的最初设计，点播的效果也采用了其中的一部分动作进行落地。

 

 

但是这个方案还是被推翻了，首先来说，用户之所以进行收起这个动作，是希望体验流畅，便捷，而且目的也很明确，这样的动作无疑是冗余，且对用户的干扰起到了较大的影响。

 

于是在此基础上进行了优化动作，让封面收起再掉落的动作简化为直接收起，同时运动路径也优化为自然的曲线，前面我们已经提到运动路径为曲线是如何落地，继续延续这种思路进行落实。

 

 

安卓的遮罩层无法像iOS这样完美的处理，所以只优化了运动步骤和运动曲线，由于整个流程时间非常有限，所以造成的差异也在可控范围内。

 

基于这样的改动，点播的动作也相应的简化了很多。

 

 

 

听歌识曲——多角度提前思考

听歌识曲是作为一款音乐应用中比较有特色的功能，增加探索发现音乐的场景，这种场景强调沉浸式体验，所以在页面布局和呈现上更加注重细节的处理。

 

整个动效都是向内收的样式，包括中心icon，呈现出的都是收音的效果。暂停状态圆形周围的线条形成呼吸感的效果，类似水纹涟漪，形成跃跃欲试的感觉。

 

 

在识别和暂停的转换过程中，采用圆形遮罩进行转场，能够达到元素的关联。

 

 

同时我们也考虑到识别结果的出现与前面识别动效结合的转场效果，始终传达着一种自然柔和的感觉。

 

 

在界面中大面积的渐变色转换的过程中，两个相邻的颜色过渡是可以做到自然转换的，渐变的颜色如何做到自然。图例中第一个渐变到第二个，四个锚点颜色，若A与C是相邻色转换可以达到自然的效果，但是A与D是相邻色，或者A与C非相邻色，那么这样的颜色过渡就会不自然，而且在一些机型上还会出现割裂条纹的纹理。

 

 

 

为了解决这种问题，将一个渐变色理解为一个图层，将一个图层叠加到另一个图层上，再进行透明度的变化，就可以决绝这样类似的问题了。

 

 

结语

交互动效设计是产品设计与用户认知反复磨合，长期积累、沉淀而来。整理总结这些知识资产可以帮助我们在未来工作中不盲目的使用动效和互动。使“动效设计模式”能成为指导提升产品用户体验，稳定输出模式化、规范化动效及互动方式的白皮书。以上我们分析了很多场景的交互动效，设计中的细节思考，如何有效的落地，一款应用中的交互动效是其必不可少的组成部分。相信和大家聊了这么多，会对交互动效有了很多不同角度的认识，也能有效的将这些化为自己的知识应用于实际的工作中。

 

声明：文章涉及页面和页面呈现内容与实际上线有偏差，均以上线样式为准。页面版权归属公司，这里只做学习交流使用，不得将页面内容用于其他用途。本文章未经允许不得随意转载至其他平台。

 

作者：古月设计
链接：https://www.zcool.com.cn/article/ZMTMwNTY2NA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。