今天来说一说UI交付文件的事情。

  项目上原型设计完成之后，下一步需要交给UI做设计，UI设计师设计完成之后会给我们一个压缩包，解压之后大概这个样子：

如图，如果你用的是Windows电脑，解压之后会出现两个文件夹，一个正常的命名，一个带着macOSX的文件；如果正巧你本身用的是Mac，那解压出来之后应该是一个文件夹。我们说比较通用的Windows系统吧，由于UI设计师用的Mac进行设计并打包，所以在Windows电脑解压的时候就会出现两个文件夹，当然那个macOS文件夹没什么用，不喜欢可以直接删掉。

  打开命名正常的文件夹之后，目录长这个样子，下面分别介绍：

1、assets

这个文件夹里面放的是UI设计师做好的一些icon图片，项目上有时候遇到技术人员说要抠好的图，其实指的就是这个文件夹里面的图片，打开看一下

里面是一个一个的小图片，这个图片技术是怎么用的呢，其实我们在用Axure的时候就体验过：比如我们新建一个图片控件，然后需要给这个图片选择一个样式，这个样式就从UI给的icon里面选。@2x、@3x指的是相同样式的不同分辨率。

2、links

这个文件夹里面的内容非常重要，它设计好了每个控件的位置、颜色，是对我们原型进行深度加工的产物，先看样式：

首先是一个一个HTML文件，打开之后是我们的APP页面，点击页面的控件会展示这个控件的详细情况：位置、大小、颜色、透明度等等信息。前端技术最开始在做页面的时候，其实就是参考这个HTML文件里面的信息，把这个信息全部完善到自己的工程中，静态页面也就做好了

3、preview

  这个文件夹里面的内容主要是给客户看的，里面就是一些静态的图片，无需过多解释

最后那个index的HTML文件，就是links的首页，打开之后会展示links文件夹里面的全部内容