前端 UI 实现自检清单

通过自检清单，提高前端和 UI 间的工作和沟通效率。

自检清单：

1、易忽略的实现：字体颜色、框线、背景颜色、分割线、字体粗细、hover、icon

2、对齐：图像和文字居中对齐、文字换行对齐、模块间对齐（左对齐，右对齐）、标题和按钮对齐

3、hover 前后样式变化：背景色、字体颜色、圆角

4、间距：模块和分割线的边距、按钮间间距、模块间间距、标题内外的间距：

5、文字：颜色、文案内容需确认和 产品图 或 UI 的一致、一般不换行

6、表格：有多种情况和布局要求，在实现过程中最好和 UI 多沟通。

表格文字内容（居中或者左对齐）、自适应的情况（让视觉上看起来和页面其他表格自适应方式类似，或采用每列等比缩放，或固定某列宽度，其他列自适应的方式）

7、表单：表单间间距、左右对齐、表单label和输入框对齐、阴影

8、小标题：数字、图标等和文字间的间距、括号全角、颜色

9、弹框：内外间距、宽高

10、icon：丢失、模糊、大小、颜色

11、按钮：框重叠、圆角、颜色

12、框线、下划线：缺失、颜色、高宽

13、气泡弹窗：显示位置

14、ie 兼容问题：到ie浏览器看看效果

15、自适应问题，按照 1366、1440 分辨率展示。并伸缩窗口看看情况，避免留白出现

16、鼠标hover样式改变，cursor:pointer

17、避免模块抖动

18、二维码：描边框以及描边框的圆角和颜色、间距、背景色、尺寸

19、图片：有的需要圆角。图片不要给阴影，前端自己实现，避免后期沟通成本

其他布局注意事项：

1、字体粗细：字体粗细默认400，bold对应的是700，400-700的中间值由于 mac 和 window 的屏幕分辨率不同，就算设置了值在window中看不出效果。可找 UI 一起商讨字体粗细如何设置，尽可能的接近原稿。

2、有可参考的模块，尽量统一

3、避免肉眼可见的布局错误：先过一眼、缩放下窗口、避免明显的布局bug

4、修改后，不要导致其他样式变化

5、有的改动较大的，排到下次的需求中

6、line-height 问题：不要直接使用 UI 上的，可作为边距调整的参考，看着和 UI 差不多就行，自行调整。

7、有的情况下，后端返回的数据缺失导致页面显示为空，视觉看起来不好。可用些极端的例子测试下空数据的展示。

沟通注意事项：

1、向 UI 要距离时，不要随便标大概的距离，而是准确的标出要哪个的距离。避免歧义。

2、对于已有组件的复用。不需要修改的样式，提前和 UI 确认。避免 UI走查耗费时间。

3、有的布局比较灵活，布局要多做考虑，多和 UI 沟通。前端实现要注意细节。