设计一个滑动交互使用工具：AdobeXD左右滑动屏幕 _办公知识

创始人

2025-09-17 21:10:05

0次

怎么制作软件教程_教程制作软件下载_教程制作软件哪个好

明天的主题：设计滑动交互

使用工具：Adobe XD

预计持续时间：1-2 分钟

实用指数：★★★★★

难度系数：★

在本教程中，我们将与大家分享一个非常简单实用的教程——如何在Adobe XD中制作拖放手势并设计“滑动交互”。通过该功能，用户将可以在移动页面上左右滑动来切换内容，达到在同一区域显示多种内容的理想效果。

Adobe XD

左右滑动查看内容

怎么制作软件教程_教程制作软件下载_教程制作软件哪个好

教程制作软件哪个好_怎么制作软件教程_教程制作软件下载

01. 初步规划

创建“.xd”格式的新文件或下载我们在下面提供的材料文件。

[]

怎么制作软件教程_教程制作软件哪个好_教程制作软件下载

02. 复印

按住“option”键或“alt”键，同时拖动画板标题以创建新副本。

教程制作软件下载_怎么制作软件教程_教程制作软件哪个好

03. 缩放

双击旋转轴上的图片，更改屏幕左侧数据区的数据，调整图片的大小和位置。以下是参考数据：

- 图 1：宽：100，高：100，X：-208，Y：248

- 图片 2：宽：160，高：160，X：-98，Y：218

- 图 3：宽：240，高：240，X：79，Y：166

- 图 4：宽：160，高：160，X：336，Y：218

怎么制作软件教程_教程制作软件哪个好_教程制作软件下载

04.修改分组

在视口面板（视图 - 图层）中，将“NoLines”文本从“Group1”拖到“Group2”。

教程制作软件哪个好_怎么制作软件教程_教程制作软件下载

05.编辑标签

双击第二个画板上的“NoLines”以重新编辑标签。

教程制作软件哪个好_怎么制作软件教程_教程制作软件下载

教程制作软件下载_怎么制作软件教程_教程制作软件哪个好

06.加入互动

点击底部“原型”按钮进入原型模式后，双击选择第一个面板的中心图像。点击图片上的“蓝色箭头”，拖动它与第二个面板连接，在“触发”选项中选择“拖动”。

选择第二个画板的中心图片，单击图片上的“蓝色箭头”怎么制作软件教程，然后拖动以与第一个面板连接。

怎么制作软件教程_教程制作软件下载_教程制作软件哪个好

07. 最终预览

点击底部两侧的“播放按钮”即可预览。只需简单的滑动交互即可！

继续关注我们，与Adobe一起发现和探索更多有趣的新事物怎么制作软件教程，获取更多让你惊喜的最新功能和实用教程！

上一篇： MicrosoftVisualC++可视化集成编程系统（32/64位）

下一篇： 嗨格式数据恢复大师好用吗？好不用，具体要自己亲自测试一下