Adobe XD巧用虚线快速画出Apple Watch表盘运动U

近期Adobe XD的好消息可谓接踵而至，免费、中文化……Adobe公司也在不断加快软件更新的步伐，9月17日又增加了四大功能：

响应式调整大小

现在，您可以根据不同的屏幕大小轻松调整画板上的对象组大小，同时保持位置和可扩展性不变。XD 会根据各个元素的距离自动计算位置。

定时过渡

更好地控制在画板间过渡的时间。创建带有延迟自动淡入淡出、圆形旋转、加载、进度条等效果的循环动画。

拼写检查

在 XD 中设计的过程中，快速发现拼写错误。

全屏原型

现在支持在浏览器中全屏查看 Web 原型，方便您查看设计的实际大小，对设计效果有更准确的了解。

但相较于Sketch来说，Adobe XD在UI设计这块还是弱了不少，但巧用一些形状设置功能，还是能快速出一些比较好的界面设计图的。

以设计Apple Watch表盘上的运动计时UI为例，通过调整圆形的虚线长度，可快速生成一个漂亮的表盘界面。

图1

如图1所示，首先插入一个42mm表盘画板，在画板里面，我们插入一个宽度和高度都为234的圆形，设置圆形边界大小为25，边界颜色#B9FC00。

图2

如图2所示，我们修改圆形虚线长度，根据原型直径234，我们可以计算出圆形周长为pi*234=735，调整虚线长度为500，大概占圆形比例为2/3左右，这个可根据实际情况动态调整，同时我们选择圆形端点图标，实现弧形端点为圆角。

图3

如图3所，复制当前图层，取消虚线尺寸大小，将圆弧恢复成圆形，并将复制的图层置底，调整边界颜色为#121C01。

图4

添加相关文字、时间、圆点等，即可快速完成Apple Watch表盘界面的实现。

总结：关于Adobe XD的快速画Apple Watch表盘的教程就简单的为大家介绍到这里，但目前Adobe XD的不足也很明显，如圆形边界的颜色只能选择纯色，而无法实现Sketch那样可以选择渐变色，因此用这个方法无法完整的实现Apple Watch默写复杂表盘的设计，但相信随着Adobe XD软件后续的升级，功能将会更加完善。。