页面规范及标准OeDipp

1、页面标准及规范神龙汽车有限公司预批量管理系统页面标准及规范版本 1.0作者：罗晓梅日期：2008-11-13审批：日期：1/12页面标准及规范 变更记录日期版本变更说明作者1 项目信息项目名称预批量管理系统项目编号 客户名称神龙汽车有限公司客户代表项目开始日期2008-09-22项目结束日期2 页面规范2.1 页面模板要求l 进入系统后全屏幕最大化显示所有信息。l 主页面标题中文名称固定为“神龙汽车公司预批量管理系统”；l 横向导航菜单如图固定显示，树型菜单默认展开并根据菜单的长度允许出现水平、垂直滚动条。l 树型菜单上面显示当前登录用户信息，登录时间格式为：YYYYMMDD。l 右边区域如图

2、固定显示。l 对于具体的业务页面，标题栏显示一定要与业务操作保持一致。如进入项目新增页面，标题显示为“项目创建”；进入项目修改页面，标题显示为“项目修改”。如下图所示： 2.2 页面布局2.2.1 录入页面l 友好提示说明文字放在标题之下，所有输入信息之上。如下图的“注：新用户的默认登录密码为888888”。l 所有标签文本右对齐、文本输入框左对齐。标签和文本框之间需要“：”。l 每行显示一列输入信息：用两个TD来分别处理label和文本框。l 当文本输入框中输入的内容是需要参与计算的数字型，光标应该居右显示。l 必填选项必须用红星标志在控件右边，红星和控件间没有空格。l 操作按钮位于所有输入

3、信息之下且居中显示。如下图所示：2.2.2 查询页面l 页面有多个查询控件，则每行显示两列：每列用两个TD来分别处理label和输入、选择框。l 只有一个查询控件（Label）和一个查询按钮则放在一行处理。l 日期控件放在一行处理 。l 标签和文本框之间需要“：”。l 查询条件文本框输入前后空格要做trim处理。l 新增保存返回列表清空查询条件，编辑保存返回后带查询条件。l 查询结果为空，显示表头，表头和正常查询结果表头完全一样，同时在表格下方用标签显示文字提示，统一为：“没有符合条件的查询结果”。2.2.3 预览页面预览页面要求信息完整，和录入页面信息保持一致。所有预览页面都是跳转页面。预览

4、的表格日期格式为YYYYMMDD，如：2007-01-01l 主单信息：要求信息完整，和录入页面信息保持一致。l 单据明细：当主表下存在相关子表时，当对应子表没有信息时，子表表格须显示完整，并附上“没有相应XX信息”等类似语句。子表有信息时，子表须将所有信息显示在网格中。2.3 表格样式l 表格样式列表表头：<table width="99%" border="0" align="center" cellpadding="3" cellspacing="1" bordercolordark

5、="#FFFFFF" bgcolor="7DB2DA" class="txt1">奇数行：<tr class="txt1" bgcolor="FFFFFF"></tr>偶数行：<tr class="txt1" bgcolor="E4F1F9"></tr>l 列表表头居中显示。l 列表表头提供排序功能，按什么字段排序，需根据具体情况看。l 列表中,所有不定长的文本左对齐,定长文本居中显示,数字居右显示。l

6、 列表表间隔行换色表示，如下图所示：如下图所示：2.4 按钮样式l 目前具有相同或相似功能的按钮请使用规范的统一名称，列表如下：序号按钮名称序号按钮名称1查 询112新 增3修 改4保 存5重 置6返 回7查 看8添 加9提 交10处 理11编 辑注：拥有添加功能的按钮应按照页面的需要尽量细化并表述清楚，例如对订单零件进行添加的称为“添加零件”等。l 按钮的大小为了美观，按钮之间要有空格，如下图所示：l 列表页面的操作按钮统一放在表格右下方位置，居右显示。l 录入页面的操作按钮统一放在所有录入信息的下方，居中显示。l 查询页面的查询按钮统一放在查询条件之下，另起一行，只有一个查询控件（Labe

7、l）和 一个查询按钮则放在一行处理。2.5 翻页控件在列表页面，当查询结果超过当前页面显示的记录之后出现。l 列表处于第一页时，“第一页”和“上一页”这两个按钮置灰。l 列表处于最后一页时，“下一页”和“最后一页”这两个按钮置灰。2.6 日期控件鼠标触发文本框或操作图标。显示如下页面：日期显示方式：2008-08-05 (精确到天)对于日期型的查询要求按 “>=起日期”且“<=止日期”，例如：l 修改日期为：2008-12-01到2008-12-30，查询结果显示从2008年12月1日到2008年12月30日的所有数据，查询条件取 2008-9-26 0:0:0 到 2008-9-

8、27 23:59:59l 修改日期为：2008-12-01到null，则查询从2008年12月1日到当前日期(以数据库服务器时间为准)的所有记录。l 修改日期为：null到2008-12-30，则查询从当前日期(以数据库服务器时间为准)到2008-12-30的所有记录。l 修改日期为：2008-12-01到2008-12-01，则查询2008-12-01的所有记录。l 修改日期为：2008-12-01到2008-12-01，则查询不出来记录。2.7 放大镜点击放大镜弹出模态窗口：l 只允许出现垂直滚动条，不允许出现水平滚动条。l 窗口大小不能改变。l 标题统一表述为：查询说明：为所要查询的对象

9、3 验证约束验证控件设计规则：光标离开即出现验证提示。1、超长。控件限制长度约定：a、text文本框输入中文、法文或“编号”采用maxlength限制长度等于数据库设计长度的一半。b、text文本框输入中/英混合字符，任何一个字符都占一个字符位。c、text area文本框输入不做长度限制，如果超过数据设计长度在焦点离开时提示：输入的内容超出文本区域长度，长度应小于数据库长度个字符。d、查询条件中输入框长度保持与数据库设计长度一致。2、必填项。提示：请输入用户名。请选择问题来源。.（注：用户名/问题来源 即必填项名）3、格式要求，比如数字，Email。都需要验证，提示：*输入有误！/Email

10、输入有误。（注：E-mail 即该验证的字段名）对于本项目编号类别的文本框中禁止输入“<>!#$%&*.?/|+_)(* ”之类字符。4、如果编号重复提示：“该*编号已经存在！”5、上传文件中必填时的验证信息：请选择要上传的文件。.6、文件类型错误时的验证信息：所选文件格式无效，请重新选择。7、成功导入文件提示：已成功导入*条记录。8、导入文件失败提示：第*条记录格式有误，导入失败。9、导出文件提示：将要导出××条记录，确定？10、系统中所有页面屏蔽鼠标右键、浏览器地址栏、工具栏。4 特殊要求1.仓库管理中输入操作，应支持Enter键换行。2.系统需要支

11、持800*600及以上分辨率。3. 系统应支持IE 6.0以上版本的浏览器5 系统页面默认规则1. 字典数据类别用编号顺序排列，明细采用id倒序排列。2. 参考系的维护：数据列表显示，后台维护采用编号或id倒序排列方式；参考系引用，采用编号或id顺序排列。3. 非字典数据维护的数据排序，即采用创建、编辑日期倒序排序方式；4. 数据列表超长采用折行显示该内容；5. 对于弹出页面：不允许鼠标右键、左键选取。点关闭，关闭弹出的页面；点保存时，保存数据并关掉窗口。6. 对于跳转页面：点返回，返回到上个页面；点保存时，保存数据并跳转回。7. 对于点保存后，如果该页面不跳转。则提示：“保存成功！”8. 对

12、于同一个网页对话框，系统保持只能弹出一个，在弹出的页面再有操作其他页面须执行跳转。9. Title显示，如果该页面为列表，则显示为“XXX列表”；如果该页面为信息查看，则显示为“XXX查看”；如果该页面为编辑，则显示为“XXX编辑”；如果该页面位新增，则显示为“XXX新增”。10. 删除前有提示：“您确定删除该记录吗？”；删除失败必须有提示，删除成功不提示，刷新页面即可；11. 新增删除对翻页的影响。原则：新增或删除某条记录要保证立即显示操作效果。例如删除第3页的数据，删除成功后仍停留在第3页；新增一条数据，如果是第3页点新增，新增刷新后到页面第1页；这样可以关注到新增的数据或者删除的记录已经不在。如果第3页只有一条数据，删除该条数据后，自动跳到第2页。12. 下拉框样式：查询、录入页面下拉框默认为空：13. View页面的文本全部用label显示；14. 对于每个弹出的页面对话框，必须有内嵌的标题描述该功能，浏览器标题内容与内 嵌标题内容一致。15. 对字符输入框进行trim处理。16. 关于空数据列表的提示: 如果是搜寻结果为空：列表区域显示：“没有符合条件的查询记录”17. 导出、导入时间较长时，需要友好等待提示：请稍候18. 为防止用户快速多次点同一按钮，当第一次点击后，将该页面上所有按钮置灰。