一、前言
B类产品设计过程中会遇到各种各样的问题，不同问题有不同的解法。有的问题不适合用动效去解决，盲目无意义的动效不仅浪费设计师及开发成本，更会降低产品性能、分散用户操作注意力等。然而有些问题则用动效解决更为巧妙，恰到好处的动效可以简化产品模型，降低设计开发成本，促进用户对产品的理解等。
本文将介绍一套动效创新方法。以B类产品为例，讲解如何分步骤的剖析B类产品设计过程中所产生的问题，接着运用动效创新解决产品问题，最终产生设计价值（如产品用户体验及关键数据的提升）。
二、B类产品设计中遇到什么样的问题适合用动效去解决？
我们可以全局审视整个产品，将需要解决的问题按用户体验要素进行拆解和归类。
1、战略层：
这一层，设计师需了解企业和用户对产品的期望和目标，促进设计目标的制定。战略层是整个产品设计的底层，动效能直接作用于战略层的情况不多。
2、范围层：
此层需明确产品的功能和内容。B类产品的功能复杂、内容很多，往往一个豆腐块大小的界面要塞下很多内容。当有太多内容放不下的时候，除了增加产品页面数，我们可以尝试运用动效，在同一页面上扩大产品的内容范围。
3、结构层：
此层确定产品的层级结构，主要用来设计用户如何快速、准确的到达某个页面，并且要考虑他们完成事情之后能够去哪里。由于B类产品的内容模块很多，信息层级嵌套较C类产品更为复杂，对于这一点尤其适合用动效去解决，巧妙的动效可以关联上下文，瞬间降低用户理解成本，提高产品操作效率。
4、框架层：
此层用于优化页面设计布局，确定各元件的摆放位置，涉及到具体的信息、界面、导航设计。如界面，选择正确的元素和布局，将重要的功能放在显眼的位置，相似的功能分类放置在一起等。导航，允许用户在相关的内容之间自由的切换，以找到足够多有效的信息。在这一层，动效可以用来辅助，如强化重要元件的位置，优化布局切换顺畅度等。
5、表现层：
此层乃UI感知，涉及到视觉、听觉、触觉的体验设计。B类产品复杂度高，较C类产品往往更枯燥，但加入适当友好的动效能够提升产品趣味性，加强用户与产品的情感链接，增加用户对产品的友好度。
以上问题，是以我日常接触的B类产品为基准，推敲总结归纳的。在实际业务协同过程中，我们都可以根据实际产品，按照这种思路，以全局视角拆解产品，洞见微动效赋能点。为用户为产品去服务，解决产品的实际问题。
三、针对四大层问题的动效创新方法集
1、范围层：以一扩三法。
以一扩三，即不改变内容的区域大小，在同一块阵地上，运用微动效，达到扩充内容范围的效果。比如本来可以展示一行内容的区域，现在可以展示多行内容。
案例1
产品问题：
B类买家把感兴趣的货品加入收藏夹。这时我们可以透传收藏夹列表中商品的关键利益点，从而辅助用户进行二次决策，提高产品L到D的转化率。但是有的货品没有利益点，有的货品利益点又很多，这时在保证列表相同秩序的情况下，该怎么透传内容呢？
关键切入点：
希望列表保证相同的秩序，却又放下不同容量的内容，这属于范围层的问题。我们运用“以一扩三”法，在界面中框定一个相同的区域，让多出来的内容在相同区域内滚动，达到不改变界面大小，扩大内容范围的效果。
实现价值：
解决内容过载问题，保证产品列表页的统一。同时动效本身自带吸引用户注意力的属性，无形之中强化了商品关键利益点，刺激用户点击，提高了产品L到D的转化率。
案例2
产品问题：
C类用户下单是为了自用，下单多取决于感性喜好。而B类用户下单是为了销售，下单时会将产品好不好卖作为自己下单的重要决策因素。因此我们希望在收藏夹场景下，把下游销售数据前置，在买家对感兴趣的商品进行操作时，直接透传相关参谋数据，帮助B类买家更高效的进行二次下单决策。这时问题来了，商品相关下游数据很多，在商品操作半浮层页能否展示相对较多的数据呢？
关键切入点：
商品操作半浮层页大小有限，却又想放下更多的内容，这依然是一个范围扩大问题。我们运用“以一扩三”法，把参谋数据分层，依次在浮层页中轮播展示。同时用户可以参照页面运动路径，了解到页面可以左右来回轮播后，用手指左右波动页面，也可以看到更多参谋数据。
实现价值：
让B类买家在单位区域内看到更多参谋内容，辅助用户进行二次决策，提高产品下单转化率。
“以一扩三”法非常简单，但是却很有效。熟悉此法后，遇到类似内容很多，界面大小不够用时，除了增加产品页面数，我们更可以尝试运用动效，让单位页面放下更多内容。
2、结构层：斗转星移法。
斗转星移，即以关键联动元素在各个复杂的页面层级中进行移动，引导用户视线，从而解释产品各个层级之间的关系，起到关联上下文，降低用户理解成本的作用。比如层级A、层级B、层级C，在产品定位上层级A和层级C是有关系的，但在视觉表现上ABC看起来都像是独立的个体，这时用联动元素从层级A移动到层级C，则能自然而然的向用户透传出层级A与层级C的关联性。
