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

在平常工做中，UI设计师/产品与前端工程师不免会有一些冲突，这是个人一些小建议。

1.如何减小时间成本

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

若是UI给前端的是一堆页面，前端须要花一些时间去整理提取UI组件。另外一方面，UI设计师若是从组件的角度出发，先作组件再拼页面，既能够提升效率也能够避免UI元素在各个页面不统一的问题

制做产品流程图

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

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

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

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

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

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

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

三、屡次的修改，容易让产品和开发产生矛盾。产品以为开发简单，开发以为产品傻逼

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

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

一、表单

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

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

• 友好提示

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

二、密码强度的提示

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

二、错误

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

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

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

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

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

一、多是网络问题、用户未登陆，用户权限不够的问题

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

• 出现错误如何提示？

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

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

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

三、敏感操做

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

一、敏感操做有哪些？

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

二、如何提示？

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

四、交互效果

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

  ​ 在标注稿上备注

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

  ​ 建议不要搞太复杂

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

一、切图

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

二、标注稿

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

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

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

4.愿景

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

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

• 前端工程师能专一前端

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