Adobe XD组件功能常见交互用例!

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作

图片


平时,你是怎么使用Adobe XD的组件功能呢?


将内容制作为组件重复利用么?其实这只是组件功能的一部分,利用XD的组件多态功能,我们可以在按钮,输入字段,卡片等上创建多状态效果,从而制作出模拟真实的交互模型。


00使用组件状态创建悬停效果


下图向我们展示10多种使用组件创建悬停状态的交互效果,这些平时在真实场景中出现的交互用例,只需要用多态组件就可以制作。


图片


00创建一个组件


我们以悬停状态为例,示范在按钮或其他元素上创建悬停状态。


创建组件非常简单,只需右键单击该元素,然后选择“制作组件”或单击组件面板上的“+”号。

图片

00建立状态


创建组件后,单击“默认状态”旁边右上角的+将允许添加新状态。有两种选择,即New State和Hover State。


如果选择悬停状态可以看到旁边有一个闪电,说明软件默认已经给这个状态添加了交互效果了,如果不是创建悬停状态,可以创建New State。


图片


00编辑状态属性


选择新状态后,可以将按钮或元素的属性修改为所需的悬停效果。这里我们以加深按钮背景为示范。


图片


00预览悬停状态


将状态切换回默认状态并单击预览按钮将在新窗口中显示设计。


将鼠标移到组件上方将显示新创建的悬停状态,以及默认和悬停之间的平滑动画。 

图片

除此之外,我们还可以利用组件的悬停状态来制作其他效果如:


00创建一个复选框组件


图片


00使用组件状态构建可重用的下拉菜单


图片


00浮动动作按钮和弹出菜单


图片

00图像轮播和滑块


图片


这些都只是展示了部分多态组件的用例场景,如果你感兴趣,可以继续使用Adobe XD尝试更多的可能性!



标记狮私有云部署
一键部署标记狮至私有服务器,构建快速、安全、高效、私密的UI设计团队云协作
立即部署>>
标记狮私有云部署-一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作