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-

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

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

责任编辑：

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

xd怎么做页面滑动_XD教程|如何在Adobe XD中创建滑动手势
设计流畅的用户体验对于任何移动应用程序都是至关重要的.在本教程中,设计师Cynthia Fong使用Zhenya Rynzhuk的设计资产在Adobe XD中制作了滑动手势的原型,以确保关键要素(例如 ...
xd怎么做页面滑动_Adobe XD中的滚动组功能详解！
Hi,米娜,在制作ui设计稿交互演示的过程中,我们经常需要对一些内容做滚动设置. 这里解锁一个Adobe XD的隐藏黑科技,这个功能可以快速地制作滚动的交互演示内容,非常适合使用多面板的界面,地图卡片 ...
xd怎么做页面滑动_页面布局（XD）：滚动页面《从设计到代码：布局设计》
在预览这个设计的时候,我想让页面可以滚动,先选中这个中等尺寸画板,然后调整一下画板的高度,让它可以包含所有的内容.这个蓝线以下的区域就是可以滚动显示的内容. 再调整一下边栏的高度,还有主体区域背景的容 ...
Blend4精选案例图解教程（三）：一键拖拽
原文:Blend4精选案例图解教程(三):一键拖拽拖拽效果,常规实现方法是定义MoveLeftDwon.MoveLeftUp.MouseMove事件,在Blend的世界里,实现对象的拖拽,可以不写一 ...
PowerPoint 教程:如何在 PowerPoint 中从大纲创建演示文稿？
PowerPoint 教程:如何在 PowerPoint 中从大纲创建演示文稿? 欢迎观看 Microsoft PowerPoint 教程,带大家学习 PowerPoint 的使用技巧,了解如何在 P ...
dota2html颜色代码,技术向教程如何在DotA2中使用彩色字体
技术向教程如何在DotA2中使用彩色字体编译:M82A1炸菜如何使用16进制编辑器对DotA2文字就行颜色编辑需要:十六进制编辑器.记事本.控制台 1.打开steam平台 2.在游戏库中选择D ...
【Blender教程】在Blender中制作森系少女(下)
上文<[Blender教程]在Blender中制作森系少女(上)>中Renderbus云渲染农场从项目灵感.模型制作等方面介绍了使用Blender制作森系少女的上半部分文章,接下来我们将继 ...
AI教程如何在 Illustrator 中创建渐变颜色？
欢迎观看Illustrator教程,小编带大家学习 Illustrator 的基本工具和使用技巧,了解如何在 Illustrator 中使用不同类型的渐变,以及对图稿应用线性和放射性渐变. 在 Ill ...
Microsoft Word 教程:如何在 Word 中更改页边距、创建新闻稿栏？
欢迎观看 Microsoft Word 教程,小编带大家学习 Microsoft Word 的使用技巧,了解如何在 Word 中更改页边距.创建新闻稿栏. 在 Word 中,每个页面会自动显示一英寸的 ...

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

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

最新文章

热门文章