iOS适配的规范及切图规范

一：工作中一个项目的工作流程：

一个项目从立项到后期产品上线的整个工作流程中，需要多个人员共同配合完成；

其中包含：（1）PM（产品经理），PM主要把控整个项目方向，完成需求文档给到UE；

（2）UE（交互设计师）， 输出原型图给到UI设计师；

（3）UI设计师，完成高保真视觉稿，切图、标注给到开发；

一个项目的工作流程

UI设计师除了界面设计之外，还要将视觉稿切图、标注给到开发工程师。在整个项目流程中，担任了时觉负责人的工作，统一规范的切图、标注，可以保证项目的视觉统一，便于整个团队人员协作，以及后期的产品迭代工作。

二：如何进行一稿适配？

1：通常UI设计输出1倍图的设计稿尺寸：375x667pt；然后分别切@2x图和@

3x图，在1倍图设计稿上进行标注，给到开发交接文档；

2：iphone7的750x1334px的尺寸，如何适配到iphoneX的750x1624px尺寸？

iphoneX的电量通知条是88px，比iphone 7的电量条多出48px；在88px高度电量条中，将电量条的数据居中，如下图：

顶部适配

同时iphoneX在底部多出了68px的操作栏（68px中的细框：268x10px；距底部18px；），接着上边是98px的tab栏；如下图：

底部适配

三：切图的目的？

（1）为了适应多种屏幕的分辨率；

（2）为了减小文件安装包的容量，增加运行效率；

（3）提高组件的复用性；

（4）达到组件和尺寸规范的标准统一化；

四：切图的命名方式：

对于规则的几何图形的按钮直接把高度、宽度、圆角大小标注出来给到开发即可，不用切图；

对于有阴影的按钮或icon等应该怎么切呢？

对于有阴影的按钮或icon等，可以直接切没有阴影效果的部分，之后写清楚效果，开发人员可以直接代码写出；或者将阴影部分也切出来；具体情况和开发沟通即可。

方法1：按照控件格式命名：控件_类别_功能_状态@倍率.png;

切图时按钮的状态有3种：①默认状态：nor/def；②点击状态：pre；③不可点击状态：dis；

例如： 首页标签栏默认状态下的图标：tab_icon_home_def@2x.png;

例如： 菜单页导航栏点击状态下的图标：nav_icon_menu_pre@2x.png;

例如： 工具栏添加状态图标：toolbal_icon_add@2x.png;

方法2：按照页面切图命名格式：页面_类别_功能_状态@倍率.png;

例如： 邮件页面下的搜索图标：mail_icon_search_pre@2x.png;

启动页切图方法：在纯色背景下，只用切图像即可，不用切背景；

启动页命名：splashecreen@2x.png;

登录页命名：

①登录页背景：login_bg@2x;  

②登录页icon：login_logo@2x;

③登录按钮：login_btn_nor@2x;

④登录按钮选中状态：login_btn_pre@2x;

列表页命名：

list_功能描述_状态描述.png;    如：list_icon_bookmark@2x;

五：切图的方法：

1：ps中切图方法：

①：纯手工切图，需要用到ps中的画板工具；

a:新建透明背景的画板；

b:在要切图的图层上新建矩形，降低不透明度；然后图层-新建基于图层的切片；隐藏矩形；

c:双击选中切片工具，切片命名；

d:保存ctrl+alt+shift+s，选择png_24,只想导出切片，可以选择：选中的切片；

②：利用切图插件切图：蓝湖等；

2：sketch中切图方法：

①sketch中的sketch measure进行切图标注；

标注原则：按照位置、大小、样式分开标注，剧中的元素可以不标注，通栏宽度不用标注；标注字体大小、样式；

按钮标注方法：按钮各种状态都要展示出来；icon后边有数字的，需要标注固定图标间间距；

热区标注方法：标注热区是切图的热区，不同于开发时的热区，切图热区会相对小一些，同一层级的icon在切图时切图大小保持一致。