分享近期在做的几个项目的设计规范与组件库搭建； 

通过一些项目接触了游戏UI的设计过程； 对迭代了一两年的项目做组件库整合； 几个连夜赶工的新项目的处理； 

同样是做组件库，不同的时间采取不同的方案，会有不一样的效果。 整合了几个特例分享给大家

（文章中的图片均为二次加工的简略图，仅用于解释说明，非实际效果图）

搭建一个组件库，前期要花费的时间会比纯完成界面要更多。但后期迭代能适用于非常多通用小需求，能明显地提升设计效率，且有了规范的约束能更好的维持统一性。

例子一

一个需要在3天内完成设计，需要快速开发完的demo； 对质量要求不高，因而可采用现有组件库筛选套用；

最主要定义的是色彩，结构，文字，图形等规范的统一；作为最基础的原子，也是一套设计差异化的最直观因素之一； 规范是一种限制，同时也是一种统一；

根据实际界面，选取适用组件。由于该项目题量不大，因而所涉及到的范围较小，无需用到的组件并不需要处理或待到后续迭代根据需要添加。

（此处仅筛选部分设计规范与组件库做说明用，非全部内容）

小的分子确定后，再根据项目需要，组合成对应的组织 这时可以用到figma的组件组功能；在组件中套用组件，后续调整均可以在设计稿上直接调用。

到这里，该项目的设计组件库基本已经完成了。 此时把内容做出来但它还只是个工具，该如何让其他人认同这个产出，让它发挥出最大的作用呢？ 要分享，要推荐身边的人一起使用，让大家亲身体验到组件库带来的效率

一个已经迭代了较长时间的游戏UI项目，由于前设计稿是用ps做的，切图标注的效率特慢，且多人协作不便；目前已知使用xd做界面设计稿，可直接导入到unity中，大量减少工作量。于是有了设计稿搬迁升级的规划。

颜色，文字，图形，风格等已经成型且整理成设计规范；因而本次会把重点都放在组件库的方面。 设计规范照搬输入进软件的组件库里即可。

此处仅筛选部分设计规范与组件库做说明用，非全部内容

初次搭建完成后整理归档，放置于一个xd文件中，且通过adobe的账号分享功能，在adobe云库中共享该组件库给其他成员； 制定每隔一段时间，更新一次组件库

设计稿从ps转到xd后，能有效减轻设计师重复的工作量，能腾出更多的时间处理其他事务。

adobe XD的一些操作，与游戏的平常习惯更贴切，软件过度上会更方便

Powered by Froala Editor