一：工作中一个项目的工作流程：
一个项目从立项到后期产品上线的整个工作流程中，需要多个人员共同配合完成；
其中包含：（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在切图时切图大小保持一致。
网友评论