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

近期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软件后续的升级,功能将会更加完善。。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,003评论 3 119
  • 前言 这是一个关于笔者个人使用 Apple Watch 体验的系列文章。笔者认为,任何产品体验文章都是来源于作者个...
    WindsorDuke阅读 1,104评论 0 2
  • 可能是大半夜情绪失控又无处发泄才敲击着键盘写下的这个文。之前似乎把自己伪装的很好,伪装的那么热情大方。人少时学着适...
    M_11fc阅读 124评论 0 0
  • 湘里乡亲,以弘扬湘菜特色饮食文化为己任。湘菜,又叫湖南菜,是中国历史悠久的八大菜系之一,早在汉朝就已经形成菜系。湘...
    JadenHe阅读 2,992评论 1 2
  • 有些事需要且只能执行一次(比如互斥量初始化)。通常当初始化应用程序时,可以比较容易地将其放在main函数中。但当你...
    3e1094b2ef7b阅读 2,247评论 0 0