用Pixso做轮播图：旅行卡片与点击交互

在 Pixso 中制作可点击轮播图，可以先建立三张尺寸一致的旅行卡片，再用热点把第 1 张连接到第 2 张、第 2 张连接到第 3 张，并明确最后一张如何返回。用 295×530 的旅行页面做练习，先完成静态卡片，再用Pixso 原型交互演示切换。

1. 使用UI软件Pixso制作轮播图

这里以一款旅行页面为例，给大家详细讲解下使用Pixso制作轮播图的全过程。

1.1 创建画板

登录或注册 Pixso 账号。进入Pixso工作台，点击左上角新建文件，快速创建画板。Pixso为了方便UI设计师，预制了多种手机、网页和平板尺寸，同时也支持自定义创建画板。

这里我们选择自定义画板，创建一个295x530的画板。

1.2 设置轮播图背景颜色

这里调整下背景颜色，我们选择画板，在右侧工具栏中选择填充里的颜色，点击颜色出现颜色设置弹窗，在颜色设置的拾色器中选择合适的颜色，这里选择一个墨绿色作为背景色。

小贴士：Pixso的拾色器除了填充纯色外，还可以选择线性渐变、径向渐变、角度渐变和图片等模式。

1.3 添加轮播图文本内容

选择上方工具栏中的文字图标，在页面中创建文本。单击是创建单行文本，拖拽是创建文本框。这里需要注意下文字的层次关系，主标题、副标题、文字介绍需要区分开。

• 主标题：大小35px，白色，透明度100%

• 副标题：大小20px，白色，透明度70%

• 文字介绍可先用 18px 试排，颜色要与最终照片及遮罩一起检查。不要仅因主标题更突出，就把正文透明度降到难以阅读；照片变化后也要重新看最亮区域上的文字。

1.4 添加轮播背景图片

这里选择一张合适的照片作为页面背景，让页面整体效果更加丰富。图片的添加是在右侧工具栏填充中，点击图片弹出颜色设置，选择最后的图片，选择电脑中合适的图片即可。

也可以从Pexels 插件中搜索旅行照片，再选择与目的地相符的图片。

背景图片与底部文字颜色过于接近了，这里我们可以创建一个矩形，使用渐变工具将矩形的下面变深，上面保持透明的状态。将这个矩形盖在图片上即可将背景下面颜色压深。

1.5 添加元素

作为轮播图需要在页面底部添加上轮播符号，用来告诉用户这是轮播图。这里使用三个矩形，当前轮播页面的矩形是高亮状态。这样一张轮播图就完成了。

1.6 创建多张轮播图

根据以上方法，创建出其他几张轮播图，这里需要注意的是每张轮播图都需要新建画板，然后轮播符号对应到相应的轮播图中，这样一套轮播图就基本完成了。

2. 使用Pixso添加轮播图交互

图中展示整张画板单击切换的基础连接。如果旅行卡还要打开目的地详情，就把切换动作放到独立按钮：在每张卡上增加“上一张”“下一张”，保留底部三个指示器，再分别连接目标画板。

2.1 创建交互事件

切换到右侧属性面板的「原型」，选中画板1里的“下一张”按钮，再从所选图层右边框中心的触发点连到画板2。完成后在右侧面板检查交互事件的属性，设置如下：

• 触发：单击

• 操作：跳转到

• 目标：画板2

• 动画：移入

同样选中画板2里的“下一张”按钮并连到画板3，再把画板3里的“下一张”连回画板1。三个按钮形成向前循环，卡片本身仍可保留进入目的地详情的动作。

2.2 交互演示

点击右上角播放图标，进入演示模式，在演示模式下就可以通过点击实现轮播图的交互效果。

让三个指示器真正对应三个目的地

沿用图中的卡片标题，把三张画板命名为“东南亚地区”“马尔代夫”“普吉岛”，让评审时能直接识别目标。以下练习采用首尾循环；若业务不需要循环，最后一张也可以禁用下一张，但必须在画面上表现清楚。

分别选中按钮或指示器图层，在右侧原型面板添加单击事件，连接目标画板。用原有“移入”效果可以演示切换方向，但不要把动画方向当作目标关系本身；先逐个点对目标，再看过渡是否自然。

用长标题和不同照片检查文字层级

把第二张标题临时换成“周末出发去马尔代夫看海”，观察两行标题是否挤到介绍或指示器。把三张照片分别设为偏亮、偏暗和细节复杂，逐张调整底部遮罩；同一个透明度数值不保证三张都清楚。图片暂未加载时也保留标题和导航位置，避免按钮跳动。

本例先使用手动切换。若之后加入自动播放，应同时给出暂停/继续入口，并考虑悬停或键盘焦点进入时暂停，让用户有时间阅读。可参考W3C 轮播动画控制说明；原型可呈现这些状态，键盘和读屏行为还需要在成品网页中实现。

3. 用UI软件Pixso，制作高级感轮播图

完成三张画板后，用演示模式依次检查下一张、上一张和每个指示器；再从第一张直接跳到第三张，确认高亮随内容变化。分享演示链接时说明这是单击轮播方案，让讨论集中在目的地信息、切换方向和操作入口。