今年下半年开始筹备的针对知鸟APP整理的动效规范1.0版本
知鸟是平安集团从传统培训到E-learning再到M-learning的实践结晶，旨在助力HR内训、企业经营和一线业务，从产品到内容再到服务实现一站式解决方案。
目前知鸟APP产品发展多年已从底层架构的诟病到整个框架与视觉的优化，逐渐焕发了新的生命。在UED设计部门的长期努力下，从中台到智门户，再到APP无论是交互还是视觉上都得到一定程度的改善，并沉淀了相关的UI视觉规范和品牌VI，但这些也都停留在静态层面，无交互过程的基础动态规则，于是工作中又出现了层出不穷的新问题。
由于知鸟体系的复杂，以及业务扩展的影响，很多功能模块的迭代都是碎片化和阶段性的进行，同一元素在不同地方虽然落地样式差不多，但却有不同的动态体验，比如A模块开发组用的是第三方组件库的开源动效，而B模块开发组调用的是native库，还有一部分C模块开发组由于负责的模块是很旧的框架，难于调整，于是就暂时缺失，当然也存在没有特别强调动效开发需求也懒的去做的情况，于是导致呈现的效果五花八门。
设计师与开发也没有一个统一沟通标准，虽然静态页面能较好实现，但是放在时间流上却与设计师的最初构想大相径庭。当设计师与开发对接完成后，也没有一个完善有效的协作平台去持续跟进，缺少内部统一的动效组件库。于是就产生了这样一种情况：设计师A与开发对接的时候是放大渐入，而设计师B在其它业务模块设计的时候沟通的却是移入，各自按照经验对接不同业务模块落地。
另外产品有分为安卓和ios两种系统，各自开发也都是参考原生系统规范，这样也导致同一产品在两个系统较多地方存在不一样的交互体验。但是考虑维护成本，两端大方向的体验最好是趋于一致的。
纵览整个知鸟产品本身的基础体验，基本的流程跳转都还有很多生硬不流畅的地方，更别说那些灵动细腻的细节体验。虽然是B端产品，但是层级表达的单一和混乱，以及缺失导致了整个产品体验不够友好，缺少愉悦感。
综上问题都急需一个行之有效的动效提升，而动效的提升需要从整体上去统筹，这就需要有一个内部涵盖了总原则和现有基础组件的标准去推进。
在做规范前，我们首先要明确规范的是什么形态以及相关范畴。针对目前的情况，我们需要搭建的是APP动效的基础体验。这里的基础体验严格来说就是交互的微动效，并非动画，很多地方其实是动画与动效的概念混淆的。严格来说两者是有区别的，动画可以独立于界面交互存在，应用场景有限，规范意义不大，它的表达不应受过多束缚，根据具体场景和诉求。
所以交互产生的动态组件是我们要重点梳理的，可以复用在不同地方，也可以依据现有规则去延展新的设计。我们不能编写代码组件库，但可以从交互和设计的角度去制定总的规则和基础参数。 然后基于该文档与开发协作逐渐形成知鸟内部的代码组件库。
然后我们审视了知鸟的整个移动端界面，将所有涉及到的动效组件拆解和归类，按照界面维度将它们分成界面内控件动效和界面间跳转动效两大类。规范不仅包括总的原则性和调性，还具体细化到每一个控件的详细参数，方便后续拆解组件和分批推进落地，严格把控基础体验。
1. 根据知鸟APP本身产品定位，制定总的原则和主调性，防止动效的泛滥；
2. 细化每一个基础组件的交互动作，按重要性形成优化清单，纳入版本backlog去迭代更新旧的页面；
3. 作为以后体验升级优化的基础和重要依据，最终让整个产品的体验提升一个维度；
4. 统一安卓和ios两端，保证大方向的体验一致，降低维护成本；
5. 进一步帮助完善UI规范，并推动生成知鸟内部的动效代码组件库；
6. 统一交互动态，进而提升设计师和开发的对接效率，降低输出工作量。
除了明确规范的形态以及相关范畴、目标，还需要明确该规范的目标用户群体，因为规范所有要解决的问题也都是围绕该目标群体展开的。
· 负责知鸟移动端ios/Android端的研发工作人员
· 参与移动端界面设计的所有设计师
首先根据产品属性和定位确认基本的交互动效原则，基于该原则奠定产品主调性，主调性确定好后，梳理出主要动效组件，并以界面维度将其分为界面内交互动效与界面间的交互动效两类。接下来就是动效规范内容的详细制定
作为企业级的B端应用，与C端产品相比，效率与信息认知的增强显得更为重要。基于知鸟产品属性和品牌定位，衍生了以下四点重要原则：
1、 真实自然
符合自然运动规律，保证视觉连贯，所以动作应合理添加曲线参数，让用户感知动作是真实自然的；
2、 高效流畅
企业级应用只鸟APP更要求高效的用户体验，尽量节省过度时间，过渡做到不卡不闪不跳；
3、 信息聚焦
应用内包含大量数据分析，以及不少知识付费系统等数字在其中起到关键信息作用的地方，聚焦信息动效是以交互、视觉之外手段引导用户视线，给予用户充分的理解，突出页面焦点信息；
4、 谨慎克制
谨慎添加任何动效，每一个动作都有它存在的意义和作用，避免夸张和无意义的创新。
基于以上原则，我们接下来就是确定产品的主调性。产品主调性包括了时间和速率。所有组件的运动数据都是基于此。
作为动效的灵魂，明确了4种在界面中常见的速率，它们分别是加速运动、减速运动、先加速后减速，匀速运动。
· 加速运动用于界面元素从屏幕区域内移出屏幕外，以及页面切换中的缩放消失；
· 减速运动用于界面元素从屏幕外移入，以及页面切换中的放大出现；
· 先加速后减速用于元素在屏幕内移动，如进度条、卡片以及随时准备呼出的面板等控件的动作，以及一些从属的动作；
· 匀速运动用于界面元素匀速改变某状态，如颜色、透明度，规范里表示淡入、淡出或渐入、渐出都表示一种匀速运动。
在组件的详细规范里均遵循以上速率。
伦敦城市学院经济学创立者Davina Bristow曾提出，眨眼是人体最快的潜意识动作，大多数人每分钟眨眼15次，眨眼平均持续100-150毫秒，因此我们将这个时间作为知鸟的可感知最低时间，低于100ms用户是很难感知的，可作为用户主动操作的反馈时间。然后再参考了目前市面上动效常用的PAL制式，最终选择了最常用和成熟的一秒25帧，一帧40ms，于是我们把知鸟基础动效时间定位120-200ms为最快时间，200-320ms为基本时间，320-480为较大时间……这里以40的倍率递增
动效的持续时间受元素大小、复杂度、目标和运行设备等因素影响，希望清晰捕捉变化需大于200ms，而保证效率需总时间不超过500ms，如果目标是迅速但又要感知则时间控制在100-200ms，结合PAL制式于是总结如下：
· 元素或页面出现（包括淡入、放大、移入页面）时间一般在200-400ms，
· 元素或页面消失（包括淡出、缩小、移出页面）时间一般在120-200ms，
· 元素在页面内移动时间一般在320-480ms
主调性定下来后就是落实到每一个颗粒组件。根据罗列的基础组件，重新梳理和统一了它的变化及参数，包括了变化属性的交互说明、持续时间和节奏以及根据当前生产上的问题去要规范的编排。组件的动效范围涵盖进出场、过度动效与加载动效。
其中触发包括了直接和间接触发，直接触发的反馈时间应低于100ms，间接触发的反馈时间不能超过2s，超过2s才需出现加载动效，超过5s无反馈结果应终止加载并给出加载失败的反馈。
触发动作类型包括tap与swipe两类，tap分单击、双击和长按，swipe分向左、向右、向下和向上滑动。
模态弹窗是一个伴随遮罩出现的容器，阻断了用户当前流程，要求用户进行操作或做出选择。线上两端进出场差异较多，比如勋章列表查看详情的窗口进出场拖沓，多余的旋转动作违背既定原则。
这里按照弹窗大小分为普通小型弹窗和超半屏弹窗，触发后由中心放大，时间分别为200ms和280ms，减速运动，蒙层直接淡入；触发后退场则与蒙层直接淡出消失，时间都为120ms。弹窗进出场动效可以添加联级动效，比如积分领取时的弹窗伴随翻转硬币的出场，但联级动效持续时间控制在480ms以内。
从页面下方出现的模态弹出框。目前线上在审视的过程中发现了不少问题，比如触发输入框后上拉活动面板与页面跳转两个动效同时被触发，层级混乱，触发评论图标控件也是。但是根据用户心智模型，输出框对于用户的操作目的在于“输入”，而评论控件对于用户的触发目的在于“浏览”，所以前者应该是聚焦评论输入的上拉活动面板，完成评论再跳转，而评论控件则是聚焦评论浏览，触发后跳转评论页，而不是输入面板与评论页跳转同时触发。
根据面板对于界面的长度分为普通短面板与超半屏面板，上拉面板在知鸟APP中包含输出面板、答题卡面板、操作面板等，触发后由底部进入页面，时间分别为200ms和320ms，减速运动，蒙层直接淡入；触发后退场移出底部，时间分别控制在120ms和200ms，先加速后减速，蒙层直接淡出。触发包含了单击和长按。
注意蒙层不要跟随面板移动，避免与跳转动效同时触发，应该有比较清晰的逻辑先后关系。
由用户触发后从上往下出现的模态弹出框，呈现一组与当前情境相关的两个以上的选项。同样与上拉活动面板分为普通较短的下拉面板与超半屏下拉面板，触发后向下移入，时间分别控制在200ms和320ms，减速运动，蒙层直接匀速淡入；收起时间分别为120ms和200ms，先加速后减速，蒙层直接匀速淡出。
线上两个系统的下拉活动面板的动作不统一，ios体验不够流畅，且安卓的蒙版跟随面板一起移动，动作太多分散了过多用户注意力，所以注意蒙版只作淡入淡出。触发一般是单击。
页面以及页面局部处于等待异步数据或正在渲染过程时，为缓解用户焦虑而出现的控件。安卓与苹果两个系统的刷新样式不统一，且使用较混乱，很多页面无论是否需要加载都出现加载刷新动画，甚至下拉刷新出现两种刷新同时出现的情况。
这里规范把加载刷新分为下拉刷新、页面及局部跳转刷新、上拉刷新三种。加载主动画为两个半圆围绕中心旋转，内圆顺时针，外圆逆时针，时间控制480ms/圈，匀速运动。触发后加载动画在对应区域中心放大渐入，时间在200ms，完成刷新后加载动画直接淡出，时间在120ms，同时为了强调内容的响应，刷新出的新内容由95%放大渐入，时间控制在320ms。
· 下拉刷新若无新内容则完成后移回原位，若有新内容则由95%放大渐入，
· 页面跳转刷新如果页面结构固定可以考虑占位图加载，
· 上拉刷新若无新内容刷新则无需加载动画。
注意加载超过1s才有反馈结果时才出现加载动画，否则无需出现，刷新样式要统一。
筛选导航是提供多个选项条件去多维度筛选寻找。线上比较大的问题一个是首页某些模块的筛选的反馈是直接跳转到新页面，筛选的意义是快速定位和缩短寻找时间，而这样增加了用户查找的路径深度，另一个问题是筛选的加载一些地方用的是下拉刷新，且与控状态样式重叠，这里应该参考刷新加载的动效组件。
筛选控件触发后，原内容直接淡出，时间控制在120ms；筛选后的新内容由95%放大渐入，时间在320ms，减速运动。如需加载请参考下载刷新控件中的页面局部刷新规则。筛选过程在一个页面内完成，不能跳转到新页面去作下一级筛选。
标签导航让用户在不同子任务、视图、模式之间切换，具有全局导航的作用。无论固定标签还是可划动标签，标签之前切换的方式应保持一致，但线上苹果端首页的标签筛选点击和划动模块两者动态体验不一致，安卓能保持一致。
交互方式是触发右侧标签或手势向左划动，新内容从右侧移入，原内容向左侧移出；触发左侧标签或手势向右划动，新内容从左侧移入，原内容向右侧移出。标签下划线触发后从原位置移动到目标标签位置，时间控制在320ms，先加速后减速；内容的移入移出时间在320ms，也是先加速后减速。
抽屉控件在知鸟APP当中主要用来做部分内页筛选功能的隐藏。根据控件左右位置触发后分别从左右两侧移入，时间控制在360ms，减速运动，蒙版直接淡入；退场则分别从右侧和左侧移出，时间控制在200ms，先加速后减速，蒙层直接淡出。一般用于可参与性不高的功能模块。
顶部固定导航指当手势上划内容后出现在页面顶部并固定的导航栏。触发后导航上的控件随导航条一同渐入，在划动一定距离后完成过渡进场（距离视实际情况而定）；退场则由手势往下划动内容触发固定导航，导航上的控件与导航条一同渐出，直指完全消失（下图左）。
如果页面与固定导航由关联元素，则该元素缩放移入导航条位置；关联动效触发后无中间停留态，自动与页面过渡到完成/初始状态：即拖动页面后元素移动超过一半距离松手后元素与页面内容自动完成过渡移动，导航自动完成出场，未超过一半距离则与内容返回初始状态，导航淡出初始状态。关联元素可以是文字，也可以是头像图标等元素。自动完成时间控制在320ms，先加速后减速。
目前线上可视化数据控件主要由以下几类：柱形比例图、仪表环形图、折线图以及饼图。为了凸显数据部分，这些控件进场都有强调的进场动作，时间控制在480ms，先加速后减速。
柱形比例图由起点直线移动至目标，仪表环形图由起点绕环形移动至目标，折线图，每个折现点移动至目标，饼图逆时绕中心点展开出现。目前线上很多地方无此动效，需要后续补充上。
出现在页面顶部、中间或底部的非模态控件。目前线上的问题是两端的动效差异化较大，比如安卓端的异常提示常出现在底部，而苹果的异常提示出现在中部，小视频刷新提示苹果是从上移入界面，而安卓是从触发点弹跳出，造成两端体验较大的混乱，且使用比较泛滥。同时有些Toast出现还伴随蒙版会给人造成强烈的模态的错觉，所以除了要规范它的动作属性，还要补充一些交互说明去限制它的使用。
整个APP的提示主要分为顶部Toast和中间Toast，少部分地方会用到底部Toast 。一般的页面异常、警告、失败或成功等操作反馈提示用中部Toast , 部分下拉刷新以及内联提示用顶部Toast。尽量少用Toast控件，如果可以的话用其他形式替代。
顶部、中间和底部Toast触发后分别从上端移入、页面中心放大和下端移入，时间控制在200ms，减速运动，停留2s后分别移出顶部、淡出消失和移出底部，时间控制在120ms，加速运动。（如下左图）
针对某一对象出现的具有从属关系的菜单，菜单有多个层级选项。应用当中用的比较少，只出现在了智能陪练和小视频当中。
触发后根据触点位置放大移入，时间控制在200ms，减速运动；退出直接淡出，时间控制在120ms。（如上有图）
这里规范的主要是知鸟APP我的收藏和小视频等模块中悬浮控件触发后的页面跳转，属于容器型控件。触发后页面由触点位置移至界面中心位置并同时放大铺满全屏，时间控制在400ms，减速运动，蒙版直接渐入，展开的内容在200ms时候由95%变大渐入，时间控制在200ms；退出则页面缩小移出容器触点，时间控制在200ms，加速运动，蒙版直接淡出。内容直接淡出，无需缩小，时间控制在120ms。
知鸟APP中有大量的卡片列表页面，一种非常典型的容器控件，卡片与触发后的页面有个从属关系，这个关系可以用页面动效去表述，而目前线上两端都是按普通的页面跳转动效去处理，且安卓页面的闪跳让人困惑前后之前的关系。卡片组件是企业相关推送的主要板式控件，所以为了让这次动效改善中有一个较为明显的感知，我们将卡片跳转制定为以下容器型动效。
卡片组件是企业相关推送的主要版式控件，用户有很高的使用频率，且目的性较强，所以为了让这次动效改善中有一个较为明显的感知，我们将卡片跳转制定为以下容器型动效。
触发卡片组件后页面由触点移至界面中心并同时放大铺满全屏，时间控制在400ms，减速运动，蒙板直接渐入，新内容在200ms时候由95%变大渐入，时间控制在200ms；退出则页面缩小回原触点位置，时间控制在200ms，先加速后减速，蒙版直接淡出，无需缩小，时间控制在120ms；
如果卡片与新页面内容有关联元素，则触发关联动效，由原卡片位置缩放移入新页面对应位置，时间控制在400ms，先加速后减速；返回时则缩放移回原页面位置，时间控制在200ms，也是先加速后减速（如右图）
注意联动元素移动不要使用动态模糊，尽量清晰可见，且是直线运动。
触发搜索控件后，控件作相应的目标缩放（如左图），如果偏离原始位置则还需要从触点移入目标位置（如右图），动作持续时间控制在400ms，由于聚焦点在搜索框，所以页面直接淡入，不作缩放等动作干扰用户注意力；
新内容在页面动作持续到200ms时渐入，时间控制在200ms；
退场则页面直接淡出，部件通过目标收缩或移动，返回上一级页面的位置，动作控制在200ms，先加速后减速，内容淡出时间控制在120ms。
触发控件后由触点移至界面中心并同时放大铺满全屏，时间控制在400ms，减速运动；返回则触发后缩小退回原触点位置大小，时间控制在200ms，先加速后减速。注意对称设计的动效要保证进出场的一致性。
底部tab导航是一种常见的非容器型控件，除了相互间切换的行为，还存在触发当前信息流较长的栏目应该有的交互反馈，这些在知鸟APP中都缺失的。所以除了要规范导航之间的切换，还要规范当前栏目的触发反馈规范。
触发底部图标控件相互间切换，内容直接淡出，时间控制在120ms，新页面内容由95%放大渐入，时间控制在300ms（如下左图）。如果触发当前栏目控件则刷新当前页内容，如果信息流较长超过首屏则返回顶部（可增加下拉刷新页面），返回顶部时间控制在120ms，加速运动（根据页面信息编排情况增加该交互反馈）
普通非容器类的页面切换都统一由右侧向左移入，时间控制在400ms，减速运动，蒙版直接渐入；退场则页面由左侧向右侧移出，时间控制在200ms，加速运动。目前两端是不一样的切换方式，需要统一调整。
针对知鸟本身动效的缺失与滥用，围绕目前版本问题梳理了线上颗粒性组件并提炼了一些共性形成了目前知鸟动效规范的1.0版本。接下来就是为了让设计到研发能对照着顺利且高效地执行下去。1.0规范规范搭建好后需要在全公司去推动并根据规范逐步调整，然后并让研发在开发端形成对立的样式代码库。
怎样去推动？我们将颗粒组件拆解后，根据优化重要性，使用频率，将交互动效形成一定优先级排序，并纳入对应的backlog版本中。于是就有了以下的动效优化清单。其中包括了一些交互说明和对应的产品的模块，以及目前落地的现状。
结语随着产品的迭代计划和品牌升级，我们也会继续准备动效规范2.0，继续完善交互规范，丰富颗粒组件，完善设计原则等。规范文档中还有很多不完整和准确的地方。
如果说1.0版本是带着问题去整理的动效颗粒，那2.0版本更多的是准备颗粒间的编排和共性的进一步提炼。
革命尚未成功，同志仍需努力！
在此纪念今年下半年的输出成果。
版权：高望妭整理发布。未经允许禁止转载和商用。如有侵权请联系我们。
高望妭
雇主
河北省|邯郸市
邯郸创新设计
掌握最新动态
