标准规范
页面缩放显示是否正常
表格的行高具有一致性。
表格单行文本折行,多行文本折行问题:根据实际业务同比例设置相应表格宽度或者溢出部分隐藏掉,鼠标放上去显示全部内容。
价格左,库存居中,其他居左(具体看需求)
文字颜色和文字背景色,需要定出主文字颜色,同系统避免出现太多的颜色,太花哨。
网站统一日期时间和数字格式。当支持本地化或者国际化时,需考虑不同locale下格式的规范
页面的返回:所有需要返回上一页的时候使用history.back();不使用history.go(-1); 需要返回前n页(n>1)时使用history.go(-n);所有返回都使用连接的方式而不是button。
提交前数据的判断:<br>保证提交前的数据都会通过JS进行数据类型以及长度的判断,需要通过方法focus()聚焦页面第一个错误字段。
当数据超出一屏时,需要提供滚动条。
模块化表现要全部统一的。*(UI考虑)
异常文字采用红色突出显示
链接文字以蓝色表示(UI考虑)
弹出窗口居中显示
提示处理(要考虑国际化的展示,这里以中文为例)
错误提示信息的处理:所有错误信息全部使用中文提示错误信息,标点使用中文半角符号,格式如下:"错误:"+提示信息+"!"
成功提示信息的处理:所有成功信息全部使用中文提示成功信息,标点使用中文半角符号,格式如下:"成功:"+提示信息+"!"
文字的标点符号全角/半角需要在整个应用内保持一致
输入框/选择框,按钮在同一行
a. 搜索框文本框尽量保持全系统宽度(UI考虑)
b. 搜索组件中使用的文本框必须为单行文本框
c. 文本框的长度不得少于130个像素 高度不得低于18个像素
文本框如果不允许输入,内部底色为灰色,且输入焦点无法落入控件内
输入焦点始终在最上层窗口(window)。
不建议弹窗口,session/cookie传值可能会发生问题
当数据显示时间超过2秒时,需要有加载动画或者提示信息。加载动画在整个应用内需要统一
当页面有多个数据块(表格,功能区等),针对该数据块需要有title,概括数据块作用。
对某些功能有浮动提示的,如果该元素位于界面左边或左上位置,当鼠标移动到该位置时,提示内容应该在右方或右下方显示,如果在右边或右下位置,提示内容则显示在左或左上的位置,提示内容不能和功能名称(caption或text)相同,必须是对其简单明确的描述。(UI考虑气泡展示)
表单的必填项使用红色*来表示
图片显示控件,界面固定大小,位置(不要直接使用图片大小显示)。
图片因为网络问题,无法正常加载情况下,显示alt标签。
对于树形控件,需要提供展开和缩进功能。
对于开始/截止日期选择框,需提供默认值,可选截止日期需要大于等于开始日期。当开始日期选择大于截止日期,相应的截止日期需要相应变化(一般变更为开始日期)。
全选控件和各个选择项选择控件间联动需要提供三种状态,全部选中,部分选中和全部未选中状态。
系统版本申明
帮助信息,同一个web产品中搜索的位置和表现形式尽量保持一致
readonly控件:所有不可更改的信息都要使用readonly属性
页面多行,且功能为label和文本输入控件构成:
label需要左对齐;
文本输入框左对齐;
输入框内文字左对齐;控件行列间留适当空白。同类型控件长度一致。
session时效性
session设置过期时间标准为10分钟或者半小时
session过期,操作任何页面自动重定向到login页
支持的浏览器
Chrome/Safari/Firefox/IE10下显示是否正常
大屏小屏分辨率页面展示是否正常
邮件功能
做成可视化配置,以后开发可以直接甩给产品去线上做配置(优化)
邮件组有账号无效,过虑,其他正常发送
导出功能
异步处理,要求同一用户不能重复的下载,待异步请求处理结束放开操作。
下载的标题头和页面上的标题头一致,标题头也需要支持多语言,根据最后的一次查询结果导出(如果点击查询后,又换了查询条件,但未点击检索,则下载的是第一次点了查询按钮的检索结果)
文件下载的内容: 支持多语言
有价格要带币种即下载内容追加币种(货币)一列,支持format,保留2位小数
注意币种
已失效或者已删除的商品,不能参与下载
下载效率:目前基本都是异步处理
点击下载提交成功时,弹出提示信息,告知用户需要去下载履历中导出下载文件内容
如果展示以CODE为单位,下载需要以SKU为单位,加code数量限制,不得超过1W,提示文案产品定
下载履历中,当前用户只能看到自己提交的下载请求,分页固定每页5条
下载履历中,翻页功能,分页计算,刷新功能,操作时间倒序
翻页控件
正常翻页
分页数据计算正确
一览页点检索按钮时,pageNo要强制指定成1
当前页不可点击。当前页最后一页时,后一页跳转和最后一页链接为禁用状态;当前页为第一页时,前一页跳转和第一页链接为禁用状态。<br>鼠标放上去呈手状显示。