拿到ui图做出的页面也不合格？

拿到ui图做出的页面也不合格？

在前段时间做页面的时候得出宝贵经验，遇到很多坑，现在整理下来，一起来看看吧，为以后避坑

注意UI图一定要在大小是百分之百的情况下看，否则一些按钮、选择框的大小不对，不容易发现

拿到ui图以后第一步做什么

1. 找到ui或者后台人员，了解页面的各个功能，整个系统是做什么的，然后了解里面的逻辑（因为ui也可能有出错的地方，了解整个系统，可以意识到那里可能有问题并及时提出、调整）
2. 观察UI整个页面的大小，即UI电脑的分辨率，宽度尽量用百分比的方式表示，需要注意，在不同分辨率下，页面布局可能有所差别
3. 观察行为示例，按钮、图标hover、按下、禁用时候的颜色、大小，上下左右边距，观察图标点击以后是否发生变化，各种单选按钮、选择框选中状态，多选框的样式（可能和某些前端框组件有差别）

需要注意各种对齐、各种间距

我发现页面严格遵守我们古代的各种对齐美，对称美

1. 将页面划分成几个部分，注意每个部分的大小内外边距
2. 文字的对齐，上下左右是否对齐
3. 上下左右的间隔大小一定是一样的（虽然 ui 有时候给我们的图并不非常严格）

观察页面的文字字体、大小，颜色，是否加粗，对齐方式

1. 不同的标题 内容字体大小不一样，一般一个系统的文字字体是固定的只有一中
2. 文字在选中和滑过是文字的颜色可能也有变化

注意在不同的浏览器下单选框和多选框的样式可能不一样

注意鼠标在标题处的形状

若是可点击需要将鼠标设置小手样式（可链接态）

小技巧

如果页面某一部分只是展示（比如文字和图片混合的情况），并无任何操作，并且不会发生改变，就可以把这一块内容扣下来，当作一张图片展示上去

注意页面的级联

1.如图所示：只有选择了以后，下面关联的个数才有意义，所以没选之前计数器要设置为禁用状态，当然里面的 数字颜色 也要 置灰 且不可修改

2.如果要设置计数器的值不能超过20个时，可以在后台js 控制，也可以用计算器的 max，后者要效果要更明显且更简单
3.注意 只有正确选择了所有条件以后，一些按钮才可恢复可点状态，否则为禁用状态
4.在单选列表中，可设置默认选择第一个

最后希望这篇文章可以帮你避坑