zoukankan      html  css  js  c++  java
  • 界面开发注意要素,降低界面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)总览:
    • 指标合不合理,这个需要产品经理把关
    • 指标是真实值,不是假数据
    • 曲线图、柱状图等横坐标、纵坐标要见图知意,如果不能,要增加横、纵坐标名称
    • 曲线图总名称要见名知意
     
    三、自测:增删改查正逻辑要正确,常见逆逻辑要正确
    • 常见逆逻辑:唯一性校验、非空校验、超长字符校验、边界值校验
     
    四、提测:自测通过,冒烟测试通不过不会测试,打回去
     
     
  • 相关阅读:
    Django-序列化器
    HTTP请求头响应头的信息
    HTTP协议
    IAAS,PAAS,SAAS
    MySQL-部分名词解释
    MySQL-事务和特性
    用Java仿QQ界面聊天小项目
    25篇Java入门技术博客,送给准备入坑的你
    Java自学推荐书籍
    Java中的并发讲解
  • 原文地址:https://www.cnblogs.com/ustcinfo-qc/p/12102289.html
Copyright © 2011-2022 走看看