案例1
产品背景：
此功能运用在卖家工作台后台场景里。因卖家工作台里的功能很多，用户需要把常用的功能添加至主页左边栏快捷入口中，方便进入后台后直接操作。快捷入口中的功能最多为15条，多出的功能需移出快捷入口。
操作行为：
1）用户点击“功能地图”图标，则会出现全部功能列表。 2）用户直接点击某项功能的文字，则会进入该功能的内页。而用户鼠标悬停在某个功能（如“投诉管理”）上面时，该功能右侧则会出现空心的“钉”图标。 3）点击空心的“钉”图标，则“投诉管理”功能被添加进左侧的“快捷入口”栏目里面，同时空心的“钉”图标变成实心的“钉”图标（代表该功能已经加入“快捷入口”）。 4）点击任何功能右侧的实心“钉”图标，则该功能将从“快捷入口”列表中被移除。同时实心的“钉”图标将消失。
产品问题：
我们在测试时发现，新用户在未经过说明的情况下，根本无法理解“钉”图标的用意。因为点击了“钉”图标后，左侧“快捷入口”栏的功能只是瞬间被增加了一条，不仔细盯着左边看根本不知道页面上发生了什么。当左侧“快捷入口”中功能很多的时候，瞬间移除一条也不知道是到底移除了哪一条。最关键是用户根本就不知道左侧“快捷入口”中的功能和“功能地图”中的功能是产生联动的。
关键切入点：
为了说清楚“钉”图标的用意，一般产品可以放一页新手引导。然而在设计产品中，如果能用交互自然解决的问题，就尽量不要再做一个新手引导页。毕竟，产品的目标是简单易上手，而不是使用之前还要看说明书。
信息模块多，关联度不明朗，这属于结构问题。我们运用“斗转星移”法，点击空心的“钉”图标时，“钉”图标左边的功能文字便作为关键联动元素，引导用户视线，从“功能地图”中飞进了“快捷入口”中，让“功能地图”模块与“快捷入口”模块联动起来。同时空心的“钉”图标以注水的形式，缓缓填充成实心“钉”图标，速率与功能文字飞入的速率保持一致，暗含此功能已被“钉”住，即加入“快捷入口”。
同理，点击实心“钉”图标，相对应的功能便会飞出“快捷入口”模块，暗指该功能已被移除。
实现价值：
降低用户理解成本，提高产品操作效率。
案例2
产品问题：
B类Offerdetail改版，B类商品详情页较C类更加复杂。在旧版中，顶部Tab栏可切换商品、详情、参谋，分销和拿样功能放在商品页的次屏。新版Offerdetail加入了订货功能，并把分销和拿样功能一起放到了首屏。这样在首屏，便把商品拆为现货、订货、分销、拿样四个Tab。
滑到页面二屏，一级Tab商品、详情、参谋便浮现出来，二级Tab现货、订货、分销、拿样置于一级Tab下方。这样页面上就出现了操作比较恶心的双Tab。且双Tab一直置于顶部，占用页面高度，影响浏览页面。
双Tab在移动端是非常影响用户操作的。为避免这种情况，我们想到，既然现货、订货、分销、拿样都是属于商品选项的，在滑动到二屏的时候，是否可以把现货、订货、分销、拿样统一收拢到顶部一级Tab的商品选项里面。
这样问题来了，首屏是现货、订货、分销、拿样，滑动到二屏时，Tab突然变成了现货、详情、参谋，用户如何才能知道订货、分销、拿样功能去哪了呢？
关键切入点：
为此我们尝试了两种方案。此处演示demo为展示清楚，在关键变换处做了停顿，实际用户浏览时为流畅动效，用户手指滑到哪里，动效就变动到哪里。
方案1、直接切换，用户若滑动页面较快，Tab切换感知不明显。
方案2、运用“斗转星移”法，在用户滑动页面至二屏时，将现货、订货、分销、拿样作为关键联动元素，整体收拢至顶部Tab栏，并最后出现下拉小三角，告诉用户，原先的四个类目已经统一被收拢到一个类目中。这个收拢的动作虽然在动效表现层上，动静大了些，但是对新版本功能传递，避免用户误操作有良好的效果。
最后我们在现货、订货、分销、拿样文字上部加入了图标，增加用户对新功能Tab的感知，让一级Tab与二级Tab差异更加显性化。
实现价值：
帮助产品强化新功能认知，帮助用户理清两个层级间的关系，避免用户误操作误下单。
案例3
产品问题：
为促进货品下单转化率，收藏夹中的全部货品增加了降价货品和促销货品分类。然而B类用户很忙，进入收藏夹时并不会每次打开全部货品分类栏。若每次都打开全部货品栏，没有降价和促销货品的话，就是在浪费时间。
关键切入点：
我们在用户第一次进入收藏夹时，加入利益点透传小黄条，比如“您收藏的货品有9件正在参与促销”，并运用“斗转星移”法，把利益点小黄条作为关键联动元素，慢慢飘逸缩小成提醒小圆点，点在全部货品栏上，提醒用户点开此处可查看9件促销商品。
实现价值：
提高产品操作、用户浏览效率，提高商品下单转化率。
3、框架层：魔方复原法。
魔方复原，即把二维的页面布局想象成三维立体空间里面的模块。当出现页面布局多样化，一种布局已经满足不了产品需求的时候，我们除了可以平铺所有的页面布局，更可以通过动效辅助，像拼接魔方一样，把A页面布局扭转成B页面布局。
案例1
产品问题：
1688后台产品分为买家端和卖家端两个端，用户进来需根据自己的身份选择买家端或者卖家端。但有些用户是买卖家同号的，即是买家也是卖家，需要频繁在两个端之间切换。
关键切入点：
我们加入买卖家切换手柄，用“魔方复原”法，顺应两端各自的布局，把买家端布局依次扭转成卖家端布局。
实现价值：
优化布局切换顺畅度，优化产品操作体验。
4、表现层：氛围渲染法。
氛围渲染，即把专业度高、略枯燥、浏览易倦怠的B类产品，加入适当友好的氛围动效。可以提升产品趣味性，增强用户对产品的情绪共鸣。也可以通过对专业数据的渲染，增加产品信赖感，科技感等。
案例1
产品问题：平台提供商家7项能力，需商家完成任务才能获得相关能力，但商家目前的任务参与度不高。
关键切入点：通过用“氛围渲染”法，提取物像特征，让商务人物奔跑来表现商家成长进度，调动用户的直观情绪感知。
实现价值：提高任务参与度，便于用户进行成长任务连贯操作，提高成长效率。
案例2
产品问题：B类后台产品专业度高、略枯燥、浏览易倦怠。
关键切入点：通过用“氛围渲染”法，对新加载的模块进行数据强化，提高平台专业感的同时，打破用户的倦怠感。
实现价值：增强平台专业感知，提高产品浏览体验。
四、后记
演员王宝强曾说过：没做过导演的演员，可能会给自己加戏，其实不是的，戏不在多，在于准确。
动效也是如此，我们并不需要为了表达自己的动效能力而在页面中加入各种动效。巧妙而精准的动效并不需要太多动作，却能真正的作用于产品。
当下时代，设计师是产品的共同缔造者，我们做的每一项设计，都得经过思考，用尽我们全部的智慧，服务于我们的用户，实现产品的价值。全局化思考产品问题，把在业务协同过程中遇到的产品问题分层拆解，洞见设计发力点，最终以最合适的动效创新手段，实现设计赋能。
以上观点并非绝对，仅希望带给大家一些帮助。希望大家都能以小支点撬动大价值。
