通过自检清单,提高前端和 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 沟通。前端实现要注意细节。