拿到ui图做出的页面也不合格?
在前段时间做页面的时候得出宝贵经验,遇到很多坑,现在整理下来,一起来看看吧,为以后避坑
注意UI图一定要在大小是百分之百的情况下看,否则一些按钮、选择框的大小不对,不容易发现
拿到ui图以后第一步做什么
- 找到ui或者后台人员,了解页面的各个功能,整个系统是做什么的,然后了解里面的逻辑(因为ui也可能有出错的地方,了解整个系统,可以意识到那里可能有问题并及时提出、调整)
- 观察UI整个页面的大小,即UI电脑的分辨率,宽度尽量用百分比的方式表示,需要注意,在不同分辨率下,页面布局可能有所差别
- 观察行为示例,按钮、图标hover、按下、禁用时候的颜色、大小,上下左右边距,观察图标点击以后是否发生变化,各种单选按钮、选择框选中状态,多选框的样式(可能和某些前端框组件有差别)
需要注意各种对齐、各种间距
我发现页面严格遵守我们古代的各种对齐美,对称美
- 将页面划分成几个部分,注意每个部分的大小内外边距
- 文字的对齐,上下左右是否对齐
- 上下左右的间隔大小一定是一样的(虽然 ui 有时候给我们的图并不非常严格)
观察页面的文字字体、大小,颜色,是否加粗,对齐方式
- 不同的标题 内容字体大小不一样,一般一个系统的文字字体是固定的只有一中
- 文字在选中和滑过是文字的颜色可能也有变化
注意在不同的浏览器下单选框和多选框的样式可能不一样
注意鼠标在标题处的形状
若是可点击需要将鼠标设置小手样式(可链接态)
小技巧
如果页面某一部分只是展示(比如文字和图片混合的情况),并无任何操作,并且不会发生改变,就可以把这一块内容扣下来,当作一张图片展示上去
注意页面的级联
1.如图所示:只有选择了以后,下面关联的个数才有意义,所以没选之前计数器要设置为禁用状态,当然里面的 数字颜色 也要 置灰 且不可修改
2.如果要设置计数器的值不能超过20个时,可以在后台js 控制,也可以用计算器的 max,后者要效果要更明显且更简单
3.注意 只有正确选择了所有条件以后,一些按钮才可恢复可点状态,否则为禁用状态
4.在单选列表中,可设置默认选择第一个