AdobeXD让设计规范执行起来变得简单

1445天前
转载文章 / UI / 技术分享 (本文章为转载文章,如果若您的权利被侵害,请联系管理员删除的)
4637
0
0
 | 
作者:陈心添


“游戏UI如何实现全局调用、一键换皮?”


1668155485327691_1.png


在游戏UI设计中,风格确定后需要制作设计规范文档用来保证界面量产中设计师产出的作品保持一致性。随着项目的不断推进,这个时候就会出现2个棘手的问题:




1

团队的设计按照最新的规范来执行变得困难;控件更新后,新老资源交替使用的情况。给设计团队很大的审核压力,随着项目的推进这个混乱的雪球会越滚越大,这个时候解决这个问题会让人头皮发麻!




2

时间差导致前期和后期设计稿的元素使用不一致问题,需要花费大量时间去把老的设计稿一个个拿出来手动替换最新的资源,很多项目常常因为节点紧张就丢着不管了。


1668155485767169_2.png


AdobeXD如何解决以上问题?带着这个疑问我们先来了解AdobeXD是一款什么软件。


1668155485293469_3.png


“AdobeXD 是一个功能强大的协作式易用平台,可帮助您和您的团队......游戏等创建设计”


1668155485226744_4.png


很多人会拿Sketch和Acure来和XD做对比,看起来只是交互设计师使用的原型设计工具。不仅如此,它还有更强大的功能。


我们用一个量产流程对比来方便理解XD在在设计规范落地方面的优势:




一、创建设计规范


1668155486587920_5.png


常规PS创建的规范文档大多数时候只拿来看,设计师做设计的时候习惯从切图文件夹拉取,缺乏可执行性。


1668155486644108_6.png

XD的规范文档


XD的规范文档在线共享,设计师直接调用组件进行设计,如果规范管理者更新了组件团队的每一个人都会实时同步更新,此步骤是被动进行不需要人为操作,有效避免人为更新不及时的问题。


1668155486138356_7.png

XD中的在线团队共享



二、交互设计


1668155486259666_8.png


XD云文档组件可以直接调用做交互原型,并且可以导出PSD,能够和视觉设计师现实工作链的接通。


1668155486218563_9.png

链接云文档的资源来做交互原型



三、视觉设计


1668155487354891_10.png


高保真的通用界面XD交互稿可以作为最终效果图,视觉设计师可以把这部分视觉节省下来;并且很好的保证了资源的复用性,避免设计师再设计新的控件。最终XD上还原效果图,1来可以方便进行完整的原型交互体验,2来为后续迭代的全局修改提供条件。


1668155487687223_11.png

控件库修改后在设计稿中会有更新提示



四、视觉迭代


1668155487767358_12.png


视觉迭代过程中,XD在线控件库解决了我们文章开始提的第1个问题。设计规范实时更新,一键同步组件不管新老设计稿就能实现最新效果,我们称之为全局调用。此过程可节省大量的迭代制作时间,能让设计师把更多精力放到强视觉包装的界面设计上,一键换皮说得有点夸张但能大幅提高整体迭代效率。


1668155487266081_13.png

左上角的链接为绿色表示是最新的,为蓝色时表示控件库发生修改需要更新


当然,在项目执行过程中有太多的不确定性和差异性遇到的问题和结果也有些偏差,希望能以此文来“抛砖引玉”引发大家对效率工具的讨论,第一篇公众号分享欢迎大家的批评指正,更欢迎大家能一起交流进步。

声明:乐魔UI(Lemooui)内网友所发表的所有内容及言论仅代表其本人,并不反映任何UI(Lemooui)之意见及观点。
举报
收藏
文章-技术分享
4637
0
0
标签
没有标签
全部评论
发表评论
设置密码
注册会员
我已阅读并接受《乐魔UI协议》
微信登录
二维加载中...

使用微信扫一扫登录

“乐魔UI”

建议反馈
提交取消
举报
提交取消