界面开发注意要素，降低界面BUG

基于SpringBoot+Vue+ElementUI基础框架二次开发的系统，梳理界面开发注意要素：

一、产品经理：

1、保证平台的完整性

• 登录页带上平台元素
• 菜单梳理，菜单归类按照人为使用习惯；菜单名称最大不超过6个字符
• 脚本梳理，纯表带初始化数据，不要带测试数据
• logo完整性
• 门户首页带上门户元素

 

二、研发：

1、 一个页面的开发有几点元素：增、删、改、查、列表

（1）新增、修改：

1）窗口样式：

• 新增界面以弹框展现，如新增用户窗口
• 窗口尺寸：窗口宽度以基础框架新增用户窗口宽度为标准，长度根据字段多少自动扩展，最大长度窗口上下边线不能超过系统屏幕范畴；
• 窗口位置：系统屏幕上下左右居中
• 窗口名称：新增XX，编辑XX （统一）
• 弹出窗口不要出现横滚动条

2）窗口字段：

• 必填项要有显性提示，红色*
• 必填项要进行非空校验，如用户名不能为空；提示位置：字段框下方显示，提示语与字段框左对齐
• 字符长度最大边界值要做校验，超出最大值输入不生效
• 唯一性字段要进行唯一性校验，如用户名已存在；提示位置：字段框下方显示，提示语与字段框左对齐
• 字段格式校验，如手机号11为、邮箱xx@xx.xx、身份证18位等
• 非空提示、唯一性校验提示均在离开输入框立即生效
• 对于字段名不是很好理解的，要有字段提示，以灰色调在边框里显示
• 字段能够有默认值，均增加默认值，如：时间、状态、版本号等
• 字段顺序符合人为操作习惯，从上到下填写很顺畅
• 文本框输入空间默认2行，
• 富文本框输入空间高度默认3行
• 文本框、选择框、富文本框宽度统一右对齐，铺满一行
• 有单位的要增加单位显示，如金额： 金额/元 、工时：工时/h 等
• 下拉框字段，对于1：1关系的已使用的选项不能消失，以灰色显示，但不能选择

2）窗口按钮：统一为：取消、确定（默认带皮肤色），右下角

（2）删除：

1）危险操作要进行提示，窗口名称统一：系统提示

2）提示图标为黄色感叹号

（3）查询：

1）配置界面统一一个查询框，可根据多字段查询

2）提示与列表字段名称一致

3）enter键生效

4）点击下一页，再输入查询条件查询结果要正确

（4）列表：

1）字段个数：不是所有新增界面的字段都要展现，挑重要的展现，比如：必填字段

2）字段顺序：唯一性字段排第一位，其他字段符合人为习惯，如：跟新增界面字段顺序一致

3）字段空间：

• 字段名称与新增界面的一致
• 有单位的要增加单位显示，如金额：/元、工时：/h 等
• 以百分比固定自动缩放
• 按字段取值多少分配字段空间，如姓名、状态、是否默认等这种一看就是固定的不超过3个字符，那么就最多分配3个字段长度即可
• 唯一性字段空间要相对其他字段要长一点
• 唯一性字段要显示全，一行显示不全，就换行显示全
• 非唯一性字段一行显示不全，省略浮动冒泡显示全
• 唯一性字段超链接颜色与皮肤色要一致，皮肤变更了相应变更
• 操作栏：超链接顺序与名称统一为 编辑、删除、xx配置、日志等；不能出现换行；xx配置窗口标准同新增窗口的一样
• 字段取值是超链接的，统一为 查看，点击 查看弹出窗口显示详情，窗口标准同新增窗口的一样

4）按钮图标统一，参见用户管理界面

（5）日志查询：

1）查询栏：

• 按字段个数排列，一个字段一个框
• 字段个数默认不能超过3行，超过3行的，增加高级查询超链接，点击超级查询弹出更多查询框
• 一行顶多3到4个字段，根据实际字段个数合理排列，不要拥挤

2）列表的展现同配置界面的列表一样

（6）总览：

• 指标合不合理，这个需要产品经理把关
• 指标是真实值，不是假数据
• 曲线图、柱状图等横坐标、纵坐标要见图知意，如果不能，要增加横、纵坐标名称
• 曲线图总名称要见名知意

 

三、自测：增删改查正逻辑要正确，常见逆逻辑要正确

• 常见逆逻辑：唯一性校验、非空校验、超长字符校验、边界值校验

 

四、提测：自测通过，冒烟测试通不过不会测试，打回去