写给前端 / 产品和设计的一封信

Question

这里是结合我的一些体会，写给前端工程师、产品经理和设计师的一封信，当然不是情书～

规范

理论上在项目启动初应该根据项目制定一系列的规范，比如：

• 颜色色值
• 通用组件
• 通用图标
• 基础样式
• 单位、尺寸、字号
• 状态：滑过、按下、加载、出错等

通常这些规范的约束可以使我们后续在开发项目中如鱼得水～

需求评审

当一个项目来临之际，很多产品直接就拍了整个方案（当然不限于技术层面），然而我认为当一个项目在产品心中有一定结论后，希望列出相关的需求并整理出文档，然后能跟设计+前端一起"面对面"的聊聊，首先不要认为前端只是一个"执行者"，借用 @陈总 一句话：我们需要被关注，需要参与感。

当然需求的沟通不只是参与感，前端在聆听的过程中还可以占在"与用户0接触"的角度提一些问题，并当时还可以实时的跟设计交流一些事情，这样的前期沟通其实会对后续的开发带来你意想不到的收获，当然有时候收益是明显的，有时候收益是默默无闻的～

确认稿的质量

确认稿 - 顾名思义就是通过层层确认之后的psd稿，然而这里面的一些潜在性的问题是否有考虑呢？

• 适配问题，常见于移动端的页面，是否能在不同尺寸的屏幕上良好的展现呢？
• 状态问题，常见于页面逻辑很多，而没有给出相应的状态图，比如：列表为空、加载中、加载出错等
• 页面数据真实性、可选性，比如：某些字段可能为空，页面是否考虑到，某些数据可能长度有限制等

用户体验

在现代互联网高速发展的前提下，我们不能只做出来，我们更应该做的更好～

我认为用户体验就体现在我们身边，比如早上买粥时，老板会提前所粥盛好，就等你付钱直接拿走，这样可以缩小我们等待的时间，我认为这就是体验。然而我们在项目中也常常遇到体验，比如：

• 在移动端有手机号输入的文本框，我们给一个聚焦就直接为数字键盘，且最大长度为11的
• 在移动端有搜索框的地方，我们给这个框加上待定代码使其在聚焦文本框时，手机键盘右下角显示的是搜索按钮
• 在移动端由于文本框聚焦问题，我们往往要依赖代码让其在获得焦点时主动的把文本框移动到用户的最佳可视范围
• 在pc端，有文本框的时候，我们会优化考虑是否需要让用户使用ctrl+enter提交
• 在有表单的情况，总是会考虑让用户按回车时响应提交命令、或者进入下一个表单项的操作
• 在任何考虑ctrl快捷键的时候都要考虑mac上使用command替换方案
• 只要有异步查询处理就要考虑到加载中、加载成功、加载出错的情况，并且要通过断网测试
• 所有js操作的按钮要考虑到js绑定前点击问题和者用户按ctrl点击问题

甚至我认为发邮件时写日期格式为：12-19(周五) 也是种用户体验，体验就在我们身边，并且体验不只是前端要考虑的事，产品和设计都应该考虑，让我们共同努力使项目做的更好。