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,调节色相值
领取专属 10元无门槛券
私享最新 技术干货