设计流畅的用户体验对于任何移动应用程序都是至关重要的。在本教程中,设计师Cynthia Fong使用Zhenya Rynzhuk的设计资产在Adobe XD中制作了滑动手势的原型,以确保关键要素(例如多张照片传送带)在她的应用程序上线之前能够正常工作。
在此视频中,对Fong的过程进行一分钟的观察。步骤如下所示。
在你开始前
方使用Rynzhuk创建的设计元素提供了一个完全设计的画板,供您在尝试此技术时使用。使用此样本文件或自己练习。
步骤1:设定目的地
Fong复制了她原来的画板。在XD中复制画板会保留图层名称,这对于动画在后续步骤中起作用很重要。
步骤2:变更重点
在新的画板上,Fong将旋转木马分组。然后,她双击每个图像并更改属性检查器中的大小和位置,以模拟当用户滑动转盘时进入和退出视图的图像。她还将文本图层从第1组移动到第2组,并修改了文本。
步骤3:连线和动画
Fong切换到“原型”模式以定义用户交互。她双击第一个画板上的中心图像,然后将电线拖到第二个画板上。然后,她将“触发器”设置为“拖动”,这会将“动作”自动设置为“自动动画”。她通过从第二个画板上的中心图像拖动导线并返回到第一个画板来完成。XD记得她以前的设置。最后,她在Desktop Preview中测试了交互。
完成
创建滑动手势,以模拟移动应用程序中逼真的用户交互。
注意:本教程随附的项目文件仅出于练习目的。