UI设计师的工作交接

Why？

1、现各个条线工作交接流程制度不完善

2、提高各个条线交接工作效率，减少返工率

3、提高UI设计师对接文件的利用率

目录

1、UI设计的工作流程

2、UI设计师对接的资料的使用方法

3、前端大大可以使用的一些便利技巧

在我们公司，UI设计师在工作中主要的上下游条线对接为需求与前端，工作流程如下图：

UI设计师给前端同事对接的资料包括设计评审通过的设计稿（jpg\psd）、标注图（png）、切图文件（文件夹）。

建议：1、接收到需求的PRD文档和原型图后，明确功能架构、操作流程、交互逻辑

2、打开设计图，观察设计样式和交互效果，反馈UI设计师可行性分析

3、根据标注图的标注进行代码书写（1366px下尺寸）

4、需要图片时打开切图文件进行图片搜索（1920px下图片）

标注图：

1、标注图我将分为3张，分为别前端样式标注图（文字、样式、间距、大小），GIS样式标注图，交互效果标注图（对交互前样式、交互后样式、交互方式进行标注）

2、前端样式标注图：蓝色（文字信息：font-family；font-size；color；font-weight等）、

红色（形状大小信息：width;height;）

紫色（间距信息）

绿色（样式信息）

例：首页监控平台

前端样式标注图：

GIS样式标注图：

交互效果标注图：

1、Photoshop安装包和破解文件

需要的私信留言额~~

2、Photoshop的基础设置 Ctrl+K打开首选项

3、如何快速的找到所在图层或者图层组，如何查看相关属性

不勾选，选择时按住Ctrl+鼠标左键点选

4、如何测量形状大小

5、如何快速调整颜色

精确调整：

方法1

方法2

选中图层，按Ctrl键

模糊调整：快捷键Ctrl+U，调节色相值