xd怎么做页面滑动_XD教程 | 如何在XD中制作"拖拽手势”

原标题：XD教程 | 如何在XD中制作"拖拽手势”

今日主题：设计一个滑动交互

使用工具：Adobe XD

预计时长：1-2分钟

实用指数：★★★★★

难度系数：★

本期教程，我们将与大家分享一个非常简单且实用的小教程—如何在Adobe XD制作拖拽手势，设计一个“滑动交互”。凭借这项功能，用户将能在手机页面上左右滑动切换内容，实现在同一区域展示多样内容的理想效果。

Adobe XD

左右滑动屏幕查看内容

01.前期准备

新建一个“.xd”格式的文档或者下载下方我们所提供的素材文件。

[ https://adobe.ly/2IzjJCQ ]

02.复制副本

按住“option”键或者“Alt”键，同时拖动画板标题来创建一个新的副本。

03.比例缩放

双击旋转轴上的图片，在屏幕右侧数据区域修改数据，调整图片的大小及位置。以下是参考数据：

-图1：W:100, H:100, X:-208, Y:248

-图2：W:160, H:160, X:-98, Y:218

-图3：W:240, H:240, X:79, Y:166

-图4：W:160, H:160, X:336, Y:218

04.更改分组

在图层面板(“视图”-“图层”)中，将“No Lines”的文本从“Group1”拉到“Group2”。

05.编辑标签

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

06.连接交互

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

选择第二个画板的中心图片，点击图片上的“蓝色箭头”，拖动与第一个面板相连接。

07.最终预览

“播放按钮”进行预览。一个简单的滑动交互就完成啦！

持续关注我们，和Adobe一同发现和探索更多好玩的新鲜事物，get更多给你惊喜的最新功能和实用教程吧！

-end-

给你更好的用户体验，去创造最好的交互

灵感激发永无止境！返回搜狐，查看更多

责任编辑：