用变换组件打造高保真交互原型：3个实战案例详解

引言

在高保真原型交互设计中，有一个交互功能可能很多产品经理不太了解或者容易忽视，但它其实是非常灵活且能提升原型表现力的功能，那就是“变换组件”。

很多人一提到到原型交互，就只能想到“跳转页面”“显示隐藏”等基础性的交互或者“变量”“函数”等复杂路逻辑交互。其实除了这些，更能让原型更接近真实产品体验的，反而是那些微妙又自然的动态变化。比如：

• 手机App底部导航栏切换时，图标背景高亮变化；
• 抽奖抽到卡时，点击翻转卡面从正面翻到背面；
• 地图页面双指放大缩小时，界面元素随之变化......

这些常见的交互，其实都能通过“变换组件”在高保真原型中实现。只不过，很多产品经理和设计师并没有真正用过。这篇文章就来带你了解：变换组件的原理、适用场景，以及3个实战案例。拥有变换组件功能的原型设计工具不多，本文仅以墨刀原型中的变换功能为例，但原理适用于其他工具，也可按本文教程学习和实操，无商业推广目的。

一、什么是“变换组件”？

“变换组件”字如其名，就是在令组件通过不同状态的切换，实现视觉或内容的变化。你可以把变换理解成能让界面中的组件元素发生以下多个变化：平移、缩放、旋转/3D旋转，还可选择变换中心控制位置。通过交互触发后，会自动在指定的形态之间平滑切换，从而实现动画效果。

它与“动效”的区别在于：

• 动效偏向展示，比如弹跳、渐显、抖动；
• 变换偏向状态控制，比如移动、放大、翻转。

换句话说，动效让界面“更好看”，而变换让界面“会动”。当两者结合使用，就能做出既自然又有逻辑的高保真交互原型。

二、常见使用场景与案例教程

接下来我们通过3个真实场景，看看“变换组件”能做什么。

案例1：底部导航栏切换状态

场景说明：

当用户点击底部菜单（如“首页”“发现”）时，当前图标背景横移至选中菜单，其他图标恢复默认。

实现步骤：

1. 先将底部导航栏图标的背景制作出来称为“背景图”；
2. 对每个图标设置交互事件：触发方式为单击、跳转至对应页面；
3. 以“发现”为例，添加交互：

• 交互行为：变换
• 目标为“背景图1”
• 变换设置选择：平移至“X200 Y0”

设置完毕后就可以得到图标背景随着点击触发而发生位移，展现动态效果。这类交互看似细微，但是却能让原型的演示体验如同真实上线产品一般更加灵动。

案例2：卡片反转展示详情

场景说明：

在抽奖时抽中卡片（这里为红包），点击拆开查看详情，卡片从正面翻到背面，显示更详细的内容，以下案例展现红包中奖详情。

实现步骤：

1. 先将红包页中奖内容隐藏（隐藏文案、数值和按钮）；

2. 选择红包添加交互事件：

• 触发行为：单击
• 交互行为：变换
• 目标为当前元素
• 变换设置：3D旋转，横向180°

3. 将中奖内容全部显示（注意将变换前的提示文案“点击打开红包”隐藏）

这样就可以得到一个点击卡片自然翻转的效果，让交互体验更贴近真实产品。

案例3：内容缩放+位置调整

场景说明：

点击图片预览时，放大对应图片后其他图片缩小排列在右侧。

实现步骤：

1. 对预览选中图片设置交互行为：

• 触发方式：单击
• 交互行为：变换
• 目标为当前元素
• 变换设置为：平移至“X75 Y55”、缩放至“X225% Y225%”

2. 接着对受影响的其他图片设置平移与缩放的变换行为。

通过对每个图片的变换设置，可以实现触发内容后实现排版布局的整体动态变化效果。另外有个小技巧：还可以设置变换中心，让效果更匹配需求。

掌握了以上三种场景的基础变换后，还可以尝试更复杂的组合逻辑，比如变换+动效（页面进入时平移+渐显，离开时旋转+缩小）；比如变换+动态组件（同时控制多个元素变换实现联动动态效果）......

结语

变换组件是一个非常“低调但强大”的功能，它不像很多交互功能那样引人注目，但却能让原型更贴近真实细节的交互体验；还可以帮助产品经理在制作高保真原型的过程中，减少页面绘制数量，便于维护与修改。