如何减少UI设计师产品与前端工程师的沟通成本

在日常工作中，UI设计师/产品与前端工程师难免会有一些冲突，这是我的一些小建议。

1.如何减少时间成本

先制作UI组件，再拼接页面

如果UI给前端的是一堆页面，前端需要花一些时间去整理提取UI组件。另一方面，UI设计师如果从组件的角度出发，先做组件再拼页面，既可以提高效率也可以避免UI元素在各个页面不统一的问题

制作产品流程图

设计产品流程图可以给前后台通用（新建一个大画布，把界面拉进画布，将按钮/链接与对应点击所进入的界面用线段链接起来），可以一目了然的明白业务需求，不用打开Axure导出的HTML一个链接一个链接的点击（偶尔还会有没加链接的情况）

提取出全局的可通用的部分

1、错误及提示列表 / 根据不同用户角色的错误及提示列表（订单中）

2、设计通用的错误页面，比如404（页面未找到）错误页面、504（服务器内部错误，可替换成更友好的提示）错误页面，用户权限错误页面

在开发过程中避免需求的修改

1、修改需求需要时间（尤其是修改已做好的功能），而开发时间是固定的，常常修改会压缩开发时间。压缩开发时间，就要靠加班解决

2、一个页面往往不是独立的，修改可能会影响多个地方。

3、多次的修改，容易让产品和开发产生矛盾。产品觉得开发简单，开发觉得产品傻逼

4、产品修改是为了能设计出好的产品，开发打代码是为了能做出好的产品，两者的目标相同，多沟通多理解但是少修改 : )

2.UI在设计中容易遗漏的点

1、表单

• 数据为空的情况
• 数据不合法的情况
• 初始状态的填写提示

填写提示需给出格式要求，复杂的表单项最好给出示例或提示（比如windows安装时在填写密钥的步骤中会给出密钥在光盘中的位置的图例提示）

• 友好提示

1、填写银行卡或者手机号码时给出分段提示，比如 187 0000 0000

2、密码强度的提示

3、自动补全，比如用户输入XXXXX，给出XXXXX@qq.com、XXXXX@126.com候选补全选项

2、错误

• 错误一：表单未填写完整或填写有错误

1、在复杂的表单中（建议三个以上），建议为填写或填写错误时不要给按钮灰显（表示不可用）。站在用户考虑用户并不知道是不可以操作还是填写错误操作不可操作。

2、必填的选项需用星号或者其他必填提示标明

3、错误提示最好在表单项失焦的时候给出，再加上初始状态填写提示及必填提示。而不是什么提示都不给，当用户点击按钮时给出一大堆错误提示（一片红色）

• 错误二：接口请求失败情况

1、可能是网络问题、用户未登录，用户权限不够的问题

2、接口请求一种是页面请求，一种是操作请求（ajax）。那么错误提示需要设计两种，一种页面形式，一种消息提示形式（页面中）

• 出现错误如何提示？

  简陋的alert(‘error’)浏览器弹窗来提示错误对用户来说是不友好的

  1、错误提示仅作提示，用户应无需操作（关闭、确认）（alert(‘error’)就是个反例）

  2、提示错误后帮助用户改正错误，比如最经典的出现密码错误是清空密码框里的内容，帮用户减少操作。另一方面，在第一时间给错误的表单项获取焦点也是一个不错的主意 : )

3、敏感操作

• 敏感操作必须用户再次确认方可操作，避免不可逆的误操作

1、敏感操作有哪些？

常见的有：删除、流程状态更改等。一般来说，操作不可逆与影响流程的操作都是敏感操作。

2、如何提示？

提示可以是小的气泡框提示，也可以是一个大的模态框。根据操作的影响程度来

4、交互效果

• UI图是静态的，而交互的动态的

  ​ 在标注稿上备注

• 简单交互效果可使用PS中的时间轴，复杂建议用AE（动态版的PS）

  ​ 建议不要搞太复杂

3.UI和前端工程师交接需要给出的内容

1、切图

UI设计师最好学一下CSS Sprite（雪碧图）的切法

2、标注稿

为了前端更快的开发页面 : ) 毕竟前端没有UI设计师那样对PS操作熟练

需要标记：尺寸（包括圆角大小）、颜色、字体及字号等

标注稿上可以给出一些交互说明，比如导航在页面滚动时要固定在顶部、轮播图是要渐隐还是滚动

4.愿景

• 产品/UI设计师与前端工程师交接后减少不必要的沟通

产品/UI设计师交货后，就可以休养生息了

• 前端工程师能专注前端

前端工程师电脑上需要装Axure（原型图软件）、Photoshop（切图软件，美颜哈哈）、PhpStudy（php运行环境、MySQL数据库），几乎从项目流程上的软件都要装一遍。然而以上软件都与前端没直接的关系