用户登录

先设计一下开关组件,按一下 r ,打开矩形工具,在画板上画一个矩形,宽是 57,高是 28,调整一下这个矩形的圆角。然后修改一下矩形的外观,去掉边框,改一下填充颜色 ,选择一种浅灰色。

再按一下 e ,打开椭圆工具,在这个矩形上按住 shift 键,使用椭圆工具面画一个正圆形。修改一下这个圆形的尺寸,宽度还有高度都设置成 22 。

修改一下它的外观,去掉边框,填充颜色,可以选择使用白色。给这个形状添加一个阴影,X 是 0,Y 是 0,B 设置成 3。用方向键,微调一下这个圆形的位置。

使用选择工具,选中这两个东西, 打开 图层,然后按一下 command + G,把选中的东西放到一个群组里,双击这个群组图层,修改一下它的名字,比如 switch ,表示开关。

然后按一下 command + K ,把它制作成一个组件。 打开 资源,在这里你会看到刚才制作的这个 switch 组件。

让这个组件在画板上居中。

下面我们可以给这个组件添加一种新的状态,现在只有一种默认的状态,点击这个加号,选择 新建状态,名字可以设置成 打开。

然后设置一下这个开关在打开状态下的样式。选中这个组件里的矩形,修改一下它的填充,颜色可以设置成383838。再选中组件里的这个圆形,使用方向键把它移动到右边儿。

打开 原型, 选中画板上的这个开关组件,按一下它右边儿这个蓝色的箭头,当前选择的是这个组件的 打开 状态, 触发选择点击,类型是 自动制作动画,再选择一个目标,这里要选择默认状态,缓动选择 对齐。 持续时间可以是 0.3 秒。

再选中这个组件的默认状态,点击交互右边儿的加号,触发设置成 点击,类型是自动制作动画,再选择一下目标,这里可以选择这个组件的 打开 这个状态。

缓动设置成 对齐。持续时间是 0.3 。 最后我们可以去预览一下这个组件。

点击这个组件,会用一种动画效果显示组件的打开状态,再点击一下这个打开状态下的组件,会显示这个组件的默认状态。

0:00

组件的交互《 Adobe XD:组件 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点