企业官网建设流程全解析

最近用Axure做高保真原型时，接到一个"图片轮盘式"的交互需求。乍一听以为是普通的轮播图，等到真正动手才发现，这玩意儿和传统平移式轮播完全是两码事：图片不是左右滑动，而是像转盘一样围绕一个圆心旋转切换，当前项在最前面放大显示，两侧的卡片斜向排开，视觉冲击力比普通banner强很多，非常适合官网首屏、活动专题页、产品卖点展示这类场景。折腾了两天，踩了不少坑，今天把实现思路和完整步骤整理出来，给同样被这个需求卡住的同学一个可以直接抄作业的参考。

老实说，Axure里做图片轮盘式原型，没见过几个能一次做成的。核心原因不是操作复杂，而是Axure的旋转交互和你脑子里想的"旋转"不是一回事。这篇文章会从需求拆解、原理分析、实操步骤到常见问题，完整过一遍，无论你之前有没有做过轮播，按照这个思路走都能搭起来。

1. 项目拆解：轮盘式和普通轮播图到底差在哪

1.1 交互形态的本质区别

普通轮播图大家都很熟悉：一组图片横向排列，通过左右切换按钮或者自动播放，让图片在可视区域内左右滑动，每次只显示一张，切换时是平行移动的效果。

图片轮盘式完全不同。它要模拟的是一个物理转盘的效果：若干张图片围绕中心点排列，每次切换时整个组绕圆心旋转一定角度，下一张转到正前方，原本在正前方的图片转到侧面。真实产品里，用户看到的往往是中间一张大图、两边各露出半张或一小条预览，点右侧按钮时所有图片顺时针旋转，点左侧按钮时逆时针旋转。

这个交互形态的难点在于：普通轮播只需要管理"当前显示哪张图"，轮盘式需要管理的是"每一张图片当前位于什么角度"，并且每次切换后所有图片的角度都要重新计算。这直接决定了实现方案和普通轮播完全不同。

1.2 为什么非要用Axure做高保真原型

有人会说，这种效果直接写前端或者用现成插件不就行了吗？原型阶段用Axure做，核心诉求是验证交互逻辑和视觉表现，不需要跑真实代码。轮盘式的关键交互点在于切换节奏、旋转方向、当前项的强调形式、侧边卡片的露出比例，这些在高保真原型里能完整模拟，业务方和开发人员一眼就能看懂产品意图。

Axure的优势在于它是可视化的交互搭建工具，不需要写CSS透视、transform这类前端属性。缺点是Angular、Vue这些框架里的复杂动画能力在Axure里要打折，尤其是"旋转"这个动作，用的好是神器，用不好就是噩梦。这个后面会重点讲。

2. 核心原理：先搞懂Axure的旋转机制再动手

2.1 旋转角度计算与圆心基准

要实现图片轮盘式，先得把一个关键概念搞明白：Axure中"旋转"动作是围绕元件自身的中心点进行旋转，还是可以指定圆心？

Axure RP 9和RP 10中，选中一个元件，在"交互"面板里选择"旋转"，默认是让元件绕自身中心旋转。如果你想让多张卡片绕一个共同的圆心旋转，简单的做法不是给每张卡片单独设旋转角度，而是把这些卡片装进一个"转台"动态面板，然后让整个转台绕自身中心旋转。

但这里有个坑：转台的中心和视觉上轮盘的中心要想办法重叠。如果转台面板本身是正方形，中心好算；如果转台是长方形的，旋转中心就会偏移，看起来就不像轮盘了。

我最终采用的方案是：所有卡片放在一个正方形动态面板（转台）中，转台内卡片的具体位置用绝对坐标摆放成放射状，转台旋转时所有卡片以转台中心为圆心同步旋转。这样只需要控制转台一个元件的旋转角度，就能实现整组切换，卡片数量再多也不需要逐个控制。

2.2 角度驱动与循环逻辑的数学关系

现在进入最关键的逻辑部分。假设轮盘上一共有6张图片，编号0到5，均匀分布在圆周上，每张图片之间的夹角是60度。初始状态下，图片0位于正前方（0度基准），图片1位于60度方向，图片2位于120度方向，以此类推。

点击"下一张"时，我希望图片1转到正前方，也就是整个轮盘需要逆时针旋转60度；点击"上一张"时，轮盘需要顺时针旋转60度。这个很好理解。

但问题在于循环。转到图片5之后，再点击"下一张"，应该回到图片0，而不是继续往6、7走。用数学公式表示就是：目标角度 = 当前索引 × (-60) 的循环模360。在代码里这是一个简单的取模运算，可在Axure里没有取模函数，旋转动作又不支持填写动态表达式，所以只能把所有可能的角度分支列出来。

6张图片对应6个状态，每个状态都对应一个转台的旋转角度。我需要几个按钮、几个case，把这些状态都覆盖到。这个"穷举状态"的思路是Axure做轮盘式的核心，理解了这点，后面不管多少张图都只是多列几个case的问题。

3. 直接能抄的实操方案：Axure图片轮盘式完整搭建步骤

3.1 元件准备与初始状态摆放

先说准备工作。以Axure RP 9为例，新建页面后，建议页面尺寸设为1440×900，轮盘展示区域放在中央偏上位置。准备6张图片，尺寸建议统一为480×270，也就是16:9的横图，3:2的也行，但所有图片必须裁剪成同样尺寸，否则旋转到侧面时视觉上会非常乱。

操作步骤如下：

1. 在页面中拖入一个动态面板，命名为"wheel"，宽高都设为800×800，这个面板就是转台。动态面板初始状态下放一个空矩形占位即可，后续把6张卡片都塞进这个面板里。

2. 打开"wheel"动态面板的State1，在里面拖入6个动态面板，分别命名为card_0、card_1、card_2、card_3、card_4、card_5。为什么每张卡片要用独立的动态面板包一层？因为如果直接在转台里放6个矩形或6张图片，后续如果想给卡片单独加选中态、悬停态或点击跳转，就得逐个组建交互，用动态面板统一包一层管理成本低得多。

3. 计算6张卡片的初始坐标。转台中心在面板的（400，400）坐标处，设旋转半径R为280px，每张卡片的中心点坐标用公式：x = 400 + R×cos(角度角的弧度)，y = 400 + R×sin(角度角的弧度)。以图片0在正上方为例，它坐标为（400，400-R）；图片1与图片0夹角60度，坐标用三角公式算出后减去卡片自身宽度的一半。

这里有个经验之谈：不要试图在Axure里手动用公式计算坐标，直接在外部用计算器或者Excel算好，再把数字一个个填进去。6张卡片算起来很快，但如果卡片数量超过8张，建议先用纸笔画一下坐标分布，避免排布重叠。

3.2 旋转case的搭建与循环判断

转台和卡片放好后，接下来做切换按钮。在页面上放置两个按钮，一个命名为"btn_next"（下一张），一个命名为"btn_prev"（上一张），并添加一个名称为"curIndex"的全局变量，初始值为0，表示当前位于正前方的卡片编号。

选中"btn_next"，添加"单击时"交互用例，按以下逻辑配置：

• 用例1，条件设置为：curIndex为0。动作：旋转"wheel"动态面板，角度设为-60度（负数表示逆时针旋转），动画线性，时间500ms；然后设置变量curIndex为1。

• 用例2，条件设置为：curIndex为1。动作：旋转"wheel"，角度-120度，动画线性，时间500ms；设置curIndex为2。

• 用例3，条件为curIndex为2。角度-180度，curIndex变为3。

• 用例4，条件为curIndex为3。角度-240度，curIndex变为4。

• 用例5，条件为curIndex为4。角度-300度，curIndex变为5。

• 用例6，条件为curIndex为5。角度-360度，curIndex变为0。

这里要注意一个细节：每次旋转的角度是"绝对值"而不是"增量值"。也就是说，如果当前curIndex是2，轮盘直接旋转-180度，而不是在现有角度上再旋转-60度。Axure的旋转动作没有"相对上次角度再旋转"的选项，要么用绝对角度，要么每次重置角度到0再叠加。实操下来，直接用绝对角度最不容易乱。

上一张按钮的逻辑与此对称，只是旋转正数角度：curIndex为1时角度60度，curIndex为2时120度，以此类推，curIndex为0时则旋转360度回到最后一张。

我这样写的第一个版本，切换是成功了，但有个很丑的问题：当curIndex从4转到5时，转台直接一下子旋转-300度，也就是几乎整整转了一圈，动画看起来非常漫长。原因在于绝对角度的累积差：上一轮已经转到-300度，这次要到-360度，只差60度，这个是对的；但从初始状态0直接到-360度，其实和直接旋转0度没有视觉差别，但因为数值从0变成了-360，动画会反向旋转一整圈。

解决这个问题有两个办法。第一个是在每个case里，先让转台"旋转到0度"且不带动画，再立刻旋转到目标角度，这样每次动画都只转60度，观感恢复正常。第二个是接受整圈旋转的动画，如果切换次数不多也还能忍。我后来采用第一个方案，把每case拆成两个旋转动作，第一个旋转设置动画为"无"，第二个旋转设置动画为500ms，出来的效果干净利落。

3.3 自动播放、悬停暂停与点击卡片的完整接入

纯手动点击切换只是及格水平，产品经理拿过去一看，多半会问一句：能自动播放吗？鼠标放上去能停吗？所以把自动播放逻辑也做进去。

自动播放的实现思路是用Axure的"等待"事件配合循环触发：在页面空白处添加一个"页面加载时"交互用例：等待3000ms，然后触发"btn_next"的单击事件，然后再等待3000ms，再触发"btn_next"，无限循环。

这里有个细节：Axure的等待和触发事件写在同一个用例里，确实能实现循环，但这会导致鼠标悬停暂停不好做。我采用的方案是：加一个全局变量"autoPlay"，默认值为true。在页面加载时的循环里，每一轮等待结束后判断一下autoPlay的值，如果为false就只等待不触发切换。

鼠标悬停暂停的做法是：选中整个轮盘区域（"wheel"动态面板）添加"鼠标移入时"交互用例，设置autoPlay为false；添加"鼠标移出时"交互用例，设置autoPlay为true。

点击卡片跳转则是把"wheel"里的每个卡片动态面板都加一个"单击时"用例，根据需要设置跳转外部链接或切换到指定页面状态。这个属于业务功能，按实际需求配置即可。

4. 踩坑实录与排查清单

4.1 旋转中心跑偏、角度复位的经典问题

第一坑：转台旋转时卡片不是绕整个轮盘中心转，而是绕着转台面板自己的中心转。如果转台面板是正方形且尺寸不包含全部卡片，视觉上就歪了。解决方法是把转台面板的尺寸设得足够大，确保所有卡片都在面板范围内，并且卡片的排列以面板中心为圆心。面板中心就是轮盘中心，这个前后关系一定要一致。

第二坑：第一版做完后点击"下一页"，发现图片切换方向反了。这是因为Axure的旋转正负方向和视觉判断容易搞混。Axure中正角度是顺时针旋转，负角度是逆时针旋转。如果点击"下一张"时想让下一张从右侧进入中心，具体是正还是负，取决于你的卡片初始排布方向。我建议先在纸上画一个简单示意图，标出正前方、图片0位置、点击后目标位置，再换算角度方向，不要靠感觉硬试。

第三坑：每次自动播放时，轮盘会来回抖动。原因是"prev"和"next"逻辑里我最初用了增量角度，叠加几次后数值越滚越大，某次绝对角度和实际位置对不上，就出现了抖动。统一改成绝对角度后问题消失。这个坑非常推荐各位重点避让。

4.2 动效细节与体验优化补充

轮盘式的视觉效果，很大程度取决于动画曲线。Axure默认线性动画太生硬，轮盘要表现得自然，建议在旋转交互的动画选项里改成"缓入缓出"（easeOut或者easeInOut），时间设置在500ms到800ms之间。太快像抽搐，太慢像卡顿，500到700ms是多数人比较舒服的区间。

还有一个小细节：如果转台里卡片数量多，旋转时离中心最远的卡片边缘会超出转台面板的边界，出现被裁切的视觉问题。解决办法是把转台面板尺寸再次调大，或者把超出的部分用"置于底层"的大矩形遮挡住。很多做高保真的同学在这里反复调半天，其实直接放大转台面板是最省事的方式。

性能方面，如果卡片图片非常大（比如1920原图），旋转动画会掉帧。建议在原型里先统一压缩图片体积，控制在200KB以内，否则演示时在电脑上还好，拿到会议室用普通笔记本演示就会明显卡顿。

4.3 扩展玩法：支持任意数量的卡片

这套方案的case数量与卡片数量绑定，6张图就要写6个case分支。如果产品方随时可能加图，更推荐用中继器来管理图片和角度。具体思路是：把图片数据放在中继器里，中继器每行生成一个卡片动态面板，用"项目加载时"的交互根据索引设置卡片的位置和初始旋转角度。切换时同样通过变量curIndex的绝对值映射到目标角度。

中继器方案的优点是后续增删图片只需要改数据集，不需要动交互逻辑；缺点是配置复杂度高，如果对Axure不熟悉，反而容易卡住。我的建议是：如果只是单个活动页演示，用case穷举方案完全够用，改起来心里有底；如果是要做一套通用组件反复用，再考虑中继器方案。

做这个原型的时候还有个小发现：不要试图把"拖拽转动轮盘"做到Axure原型里，Axure对拖拽旋转的支持非常弱，要么用拖动事件模拟但手感很差，要么就得绕很远的逻辑去做。业务方要验证拖拽效果，直接建议他们看开发出来的前端Demo更靠谱，原型阶段用按钮和自动播放把交互逻辑讲清楚就够了。

根据我个人经验，图片轮盘式原型的复杂度不在"做出来"，而在"调好看"。逻辑清楚了顶多半天搭建完，剩下的时间都花在角度方向、动画曲线、卡片露出比例这些视觉细节上。动手之前先把圆心、初始朝向、正负角度这三件事在纸上理清楚，基本就成功了一半。如果你正被这个需求卡着，照着上面的步骤走一遍，有问题可以在评论区把现象发出来，我看到会逐一回复。