动效的价值——B端产品动效运用分享

层级路径梳理：解释类目之间的层级嵌套关系。

问题分析：在Dataphin中一共包含了80多个功能点，我们将这些功能点梳理归纳成5个大类目和20个子类目。因此我们既希望用户能明确每个类目下包含的子类目，又希望用户在选中子类目的同时，也能明确感知自己处在哪个大类目下。

下图中，用户从首页切换到数据资产版图，我们想要让用户明确信息的嵌套层级，静态的思维只能用双Tab形式展现。虽然解释了层级关系，但也使得导航高度过高，压缩内容区域，加之案例中的资产版图本身还包含三个子类目，于是，同一个页面出现了三层Tab，相当恶心。

解决方法：将嵌套路径通过动效的方式展现，运动轨迹可以暗示用户子类目从哪里展开，其余类目被收到了哪里，用动效的方式解释了层级嵌套路径。明确了层级嵌套关系，节约了为解释嵌套路径而铺展出的信息所浪费的页面空间。

操作路径梳理：解释操作流程的递进关系。

在Dataphin中，用户在创建逻辑表之前，会经过一系列繁琐的配置工作，如下图中，用户需要经过"定义维度"-"定义主键&来源逻辑"-"定义层级"三个步骤。由于操作流程复杂，我们为用户设计了铅笔线动效，让用户时刻明确自己操作所处的位置，也方便回退操作。

设计的价值：

通过动效梳理路径，使得B端产品复杂的产品逻辑更为清晰，降低用户的理解是成本，缩短因查找路径浪费的时间，提升工作效率。同时，将操作路径巧妙的隐藏在运动路径当中，可以节约为了展示路径关系而浪费的页面空间。

借位式：尽可能多的展示信息，缩短操作路径。

问题分析：在QuickBI仪表板中，用户需要导入已有的数据集以配置图表内容。数据集由用户自行创建，一般来说，B端产品用户文件命名比较偏长，正常情况下下拉框很难直接把名称显示完全，用户还需要将鼠标hover到名称上才能查看完整的名称，操作路径被拉长了。

解决方法：我们在侧边栏展开的一瞬间向两侧借一部分空间，使得名称获得了更多展示空间。尽可能多的展示信息，缩短操作路径，提高效率。

响应式：每一步操作都有回应，引导式的体验。

问题分析：再QuickBI仪表板中，用户创建图表的操作为：先拖动字段进入对应轴区，轴区便能读取字段内的信息并生成数据可视化。这一所见即所得的操作对老用户而言是高效的，但对于新用户而言认知成本则有些高。