前端页面编写注意点

事先说明：下文列出的一些注意点很多人并不会遇到，因为他们早已养成良好的设计或编程习惯，我只是将我平时注意到的一些点整理了出来，做个笔记提醒自己。

1. 告诉设计师，设计时尽量不要用 opacity 来调试颜色，可以直接用纯颜色，rgba 等。

这样编写页面 css 时，就不用既写颜色属性（background-color），又写不透明度（opacity）了。

2. 如果页面有适应移动端的需求，就让设计师连移动端的布局也进行适当设计，并将设计稿给前端开发。

要不然前端开发在编写代码时自己使用UI框架的栅格系统调来调去看页面效果，实在有点心累。

3. 设计师提前将素材图切好发送给前端程序，并将 PSD 文件上传到 标你妹啊 供前端程序查看设计样式的相关参数，或者使用 Markman 将设计参数标注好，导出图片给予前端程序参考查看。

切图这种事，觉得还是设计师做的好。
蓝湖 - 极力推荐！设计师上传 psd，开发人员直接在上面选择元素获取宽高等信息。
标你妹啊 - （由于极不稳定，目前已转战蓝湖）新一代全自动化的标注工具，通过分析psd文件，自动创建图层、字体等元素的数据信息。
Markman - 高效的设计稿标注、测量工具。
两者各有优劣：Markman 标注好对程序来说更省时间，只需将图片固定在屏幕某处位置，便可以一次性看到所需信息；而 标你妹啊 对设计师来说省时间，对程序来说费时间，需要不断的将鼠标移到相关元素上方才能看到参数信息，并不能将参数像 Markman 那样明确标示在页面上。

4. 设计稿一定记得给需求方过！！

虽然说有时候设计的主动权在前端小组，需求方只是提出功能方面的需求，不会插手页面设计效果，但是！最终功能实现后还是得让需求方过目，这时候需求方要是再提出关于页面设计方面的问题并给予相关“建议”的话，前端程序改动代码比一开始从无到有编写费力多了，所以，最好一开始设计稿就是“最终稿”，避免代码改动的坎坷。

5. 如果不打算做响应式，就记得设置页面的最小宽度。

要不然手动改变浏览器宽度，或者电脑屏幕偏小时，页面就有可能出现布局错乱，其实只要提前设置好 body 的最小宽度，就能避免这种令人不愉快的场面出现。

6. 命名不要出现 ad / Ad / ad- ……等跟 ad（广告）有关的字眼。

现代浏览器使得用户可以装各种广告屏蔽的插件，你应该不希望自己的网站被意外屏蔽掉吧！

7. 常用 font-family: "Microsoft YaHei",Arial,Helvetica,sans-serif;

8. 使用 button 标签时，如果只是用于简单的按钮布局而不是表单提交，那么在标签内部记得写明 type="button"，要不然该按钮默认为 submit 按钮，点击会提交表单并刷新页面。

多少次莫名奇妙就刷新页面或者提交表单了……

9. 如果不希望 input 输入框出现黄色的背景，那就写明 autocomplete="off"。

自动填充的输入框就是会有黄色的背景，觉得丑就先发制人吧。

10. 按钮或者可点击区域记得写 cursor: pointer;。

这是对用户更友好的可点击标识，布局时要有写的意识，要不然后期修修补补很心累。可以提前写好一个专门的类，e.g. .c_p{ cursor: pointer; }，然后写标签时有需要就用上。

11. a 标签不用于点击跳转而只是用于布局，属性 href 就这么写：href="javascript:void(0);" 或 href="javascript:;"。

这样点击 a 标签时页面就不会刷新或者移动到顶部了~

12. 让设计师设计时记得考虑各种交互状态，如按钮的 hover / focus / disabled 等。

可能这是废话，但是有些时候还是需要提醒一下的。

13. class 或者 id 的命名，建议参考 Bootstrap 或者其他用习惯了的 UI 框架。

14. ajax 交互（表单提交 [会以各种形式、功能出现，如登录表单，用户个人资料表单……]，文件、图片上传，[前后端分离时]请求数据并填充页面等）需要给予用户相应的视觉反馈。

代码说明请移步到 这里 查看。

15. 收藏页面、设为主页、保存至桌面、把图片保存至剪贴板等， 有些功能由于浏览器安全机制，难以用脚本实现，需要变通。

如：把网页保存至桌面，可以通过引导用户将链接（a 标签）拖拽至桌面实现。
该解决方案参考自 这里：
A better UX (User Experience) choice is to give a small set of "how-to" instructions on how the users can make your page their homepage in their respective browsers. Give the user the choice!

16. 设计页面时如果有上传文件等功能，需要设计好上传成功或者失败的反馈信息和样式，同时也对文件类型进行文字提示。