使用 Adobe XD 设计 UI 开/关,为 App 用户提供清晰的视觉反馈。
双手握住手机的特写,屏幕显示“Shipping updates”(配送状态更新)更新字段,UI 开关设置为“Off”(关)

您可以下载练习文件跟着一起操作,或者使用这些知识来设计您自己的 UI 开关。 

组合基本形状,创建 UI 开关的“On”(开)和“Off”(关)状态。我们的开关由一个圆角长方形和一个圆圈组成。我们首先设计“Off”(关)状态,圆圈位于长方形的左侧。然后,复制这两个形状,并将圆圈移动到右侧,设计“On”(开)状态。

工具栏显示正方形和圆形,画布上有 2 个椭圆形,每个椭圆形里面有一个圆,“Appearance”(外观)面板的边界半径设置为 18

尝试“Appearance”(外观)面板中的不同颜色、形状和阴影,创建正确的样式。您还可以直接向开关元素中添加文字,标记不同的状态。

UI 开关控件的 4 种样式,每种都有“On”(开)和“Off”(关)状态,2 个有文字标签,2 个通过颜色来表示不同的状态

以下就是我们为这个 App 设计的开关样式。

并排显示两个 UI,灰色 UI 开关位于左侧的“Off”(关)位置,黄色的位于右侧的“On”(开)位置

将每个开关的组件进行组合,将其拖放到您的画板中。进入“Prototype”(原型)模式,将“Off”(关)开关连接到“On”(开)画板上,反之亦然。确保勾选“Preserve the scroll position”(保持滚动位置),以提供顺畅的用户体验。

应用程序屏幕设计,选中灰色 UI 开关,动画“Properties”(属性)显示“Transition”(过渡效果)为“Dissolve”(溶解),“Easing”(渐入/出)为“Ease Out”(渐出)

现在,您可以为您 App 中的用户设置创建自己的 UI 开关了。

07/29/2020

Adobe Stock 教程作者:Farknot Architect

此页面是否有帮助?