前端 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 沟通。前端实现要注意细节。

你可能感兴趣的:(前端,UI实现,规范)