产品页面规范说明书_v3.0.docx

创教育奇迹 点滴之处显威力点威所有产品页面规范说明书文档编号：DIANVO-PROJ-DOC/201306-01文件状态：草稿 正式发布 正在修改 当前版本：V2.0密 级：保密创建日期：2013-6-1批准日期：2013-6-1创 建 人：李应洪审核/批准人：李应洪版本号变化状态简要说明（变更内容和变更范围）日期变更人批准人V1.1C创建文档2013-6-1李应洪李应洪V1.2A内容变更2014-7-16张霞备注：变化状态：C创建，A增加，M修改，D删除，A审核目 录1.树的规范41.1.平台基本上所有的树都已经规范，树分为几类：41.2.树的主要细节要求为：52.按钮及icon73.页面对象93.1.文本框93.2.代码集选择控件103.2.1当代码集只有1层：统一为“下拉框“103.2.2. 当代码集只有多层：统一为“弹出DIV“，但必须保证弹出的DIV中的文字不能换行，可以通过统一的弹出页面参数控制DIV的宽度103.3.选择框113.4.日期对象113.5.输入表单113.6.验证124.查询124.1.查询条件（有树状）124.2.查询条件（无树状）124.3.带“代码集”的查询条件134.4.查询结果135.提示信息规范155.1.删除：155.2.修改：155.3启用/停用：166.页面展示层级167.界面规范167.1.界面易用性167.2.界面规范性177.3.界面美观与协调性188.兼容性198.1.浏览器198.2.分辨率：199.注意事项209.1.规范测试：209.2.流程测试：219.3.数据测试：211.页面对象1.1.树的规范1.1.1.平台基本上所有的树都已经规范，树分为几类：1） 教职工树：师资表获取数据（查询在职、返聘状态的教职工）；2） 教职工用户树：教职工类的用户表数据（查询启用状态的用户），当业务选择的对象是需要教职工登陆软件平台的情况下，应该选择“教职工用户”树，而不应该选择“教职工”树；如下图（因为发送的邮件，需要教职工登陆软件平台去接收邮件，所以是从用户表选的可以登陆平台的教职工用户，而非教职工基本档案表去选择一个收件人）；3） 学生树：学籍表中在校生数据（查询在读、复学、转专业、转班级、跳级、留级状态的学生）；4） 学生用户树：在校生类的用户表数据（查询启用状态的用户），当业务选择的对象是需要学生登陆软件平台的情况下，应该选择“学生用户”树，而不应该选择“学生”树；5） 校友树：已毕业、已结业的学生类学籍表数据；6） 机构树：启动状态的机构，不包括停用和已删除；7） 班主任树：通过班级找到的所有当前班主任班； 8） 专业树：启动状态的专业，不包括停用和已删除；9） 班级树：启动状态的班级，不包括停用和已删除；10） 企业树；11） 其他树；1.1.2.树的主要细节要求：1） 默认展开：点击功能菜单，树上第二-层节点默认展开；如下图：2） 第三层节点：点击第三层节点，当前节点展开，其他同级节点折叠；如下图：3） 默认查询所有：从功能菜单点击进入，默认查询为树上根节点之下的所有数据，如：班级管理，点击菜单后，查询所有班级列表，即与点击“班级”根节点查询的结果一致； 4） 查询下级：当点击某个节点时，默认查询其节点下的所有记录，以及其下级节点下的所有记录；如下图：5） 弹出页面的树：弹出页面的树已经统一为之前描述的几种。 页面上“确定”按钮，而不是“保存”按钮； 弹出页面的Title：按照父页面的业务来写，统一为“选择*”，比如文件审批人，那就是“选择文件审批人”，（尽管是从教职工表中选择的班主任，但不能叫做“选择教职工”）； 选择树：单选时用radio，中间不显示“”“”按钮，且若多次操作，后面选择的数据自动替换掉前面已选的，参考图1；多选时用复选框，参考图2；选择树具有快速检索功能，只将查询结果列在选择框内；图1图2 1.2.按钮及icon以下为产品中所用到所有功能按钮，如果遇到不在此列表中的，请提出来！序号按钮名称Css样式名称效果截图1增加icon_add2修改icon_edit3删除icon_delete4保存icon_save5查询icon_search6预览icon_preview7锁定icon_key8导入icon_in9导出icon_out10上传icon_upload11下载icon_download212查看结果icon_result13返回icon_return14刷新icon_refresh15确定&提交icon_confirm16关闭icon_close17启用icon_enable18停用icon_disable19打印icon_print20设置icon_setting21清空(查询条件)icon_query_empty22作废icon_invalid23审批通过icon_pass24审批拒绝icon_refuse25文件icon_file26URL文件夹icon_url27预览icon_preview28拨款icon_appropriation29奖励icon_reward30收藏icon_collect31批阅icon_readOver32提问icon_quiz33审核icon_audit34课表icon_timetable35阅办&授权icon_yueban36回复icon_reply37总结icon_summarize38跟踪icon_track39催办icon_hasten40注册icon_register41报道icon_report42授课icon_schoolteaching43抽卷icon_choujuan44开始考评icon_startEvaluation45网络课堂icon_internetClassroom1.3.文本框1） 原则上高度、宽度统一；2） 按照信息集要求，限制输入的文字数量；3） 必须采用公共的CSS样式（只要采用公共样式，就会做到查询条件的输入框和表单中的输入框自适应宽度）； 1.4.代码集选择控件1.4.1. 当代码集只有1层：统一为“下拉框”1） 原则上固定宽度，与“文本框”对齐，下拉框统一适应浏览器的行为（firefox目前可以，IE需要另写样式）； 2） 统一下拉列表的默认显示，在没有指定的数据时，输入表单统一显示“请选择”；查询条件统一显示“全部”；1.4.2. 当代码集只有多层：统一为“弹出DIV”，但必须保证弹出的DIV中的文字不能换行，可以通过统一的弹出页面参数控制DIV的宽度1.5.选择框原则上，单选时使用radio，复选使用checkbox；1.6.日期对象1） 默认值：默认服务器的系统时间，而非客户端系统时间；2） 录入格式：YYYY-MM-DD、YYYY-MM-DD HH:SS、YYYY-MM-DD HH、YYYY-MM、YYYY，统一采用日期控件；3） 显示格式：统一采用FMT标签显示YYYY-MM-DD、YYYY-MM-DD HH:SS、YYYY-MM-DD HH、YYYY-MM、YYYY；4） 格式转换：统一按照信息集的要求，存储在数据库中；5） 根据业务需求，只需要“年月日”的，命名为“日期”，需要加“时分秒”的命名为“时间”。在查询列表中只显示“YYYY-MM-DD”；6） 若是时间段，即起止时间的选择，系统自动控制开始时间不能大于结束时间；7） 在查询条件中，时间为空的，默认为所有时间；8） 时间作为查询条件，只显示日期，日期控件宽度设置为刚好显示10个字符（此处请开发给定具体值），所有根据时间查询的地方都是选择时间段，不能只有一个时间，列表中只显示日期；1.7.输入表单1） 分栏：一行共分4列，其中每2列为一个页面对象；2） 比例：每2列占50%；文字标签占15%，输入控件占35%；3） 对齐：文字标签右对齐，输入控件（如文本框、下拉框等）左对齐；综上述，如下图：4） 原则上，所有按钮统一浮动显示在最底部，保证在拖动表单内容的时，按钮不被拖动；特殊业务可以特殊处理； 1.8.验证1） 增加（修改）数据时，尽可能考虑各种边界条件，如：记录为空，输入为空，输入出错等，当输入的信息满足这些边界条件时，将会弹出一个提示框提醒用户，以便用户能及时地做出修改；2） 验证提示的提示语要统一，统一用弹出框提示，且用红色框标出不符合要求的输入项；3） 对于相同的字段，在增加和修改时验证的标准要一致；1.9.提交1）增加（修改）数据时，点击“保存”后，原则上都返回到列表页面，对特殊业务可以特殊处理，在编辑页上提供不同操作按钮，如“保存并跳转到XX”、“保存并继续增加”；2）点击“保存”、“提交”、“查询”等按钮后，若处理时间较长，须加图层显示“正在处理”；“正在处理”图层需美化2.查询2.1.常见查询条件1） 查询条件页面，查询条件组成：“条件名称”+“：”+输入控件（文本框，日期选择控件，下拉列表）；2） 对齐：条件名称居右（且加“全角”冒号）对齐；输入框居左对齐；“查询”按钮居中；3） 多行查询条件与首行对齐排列，查询按钮摆放在首行右侧；如图：4） 带树查询条件分栏：一行共分7列：其中，查询条件占6列（每2列为一个查询条件），查询按钮占1列，如下图：5） 无树查询条件分栏：一行共分9列：其中，查询条件占8列（每2列为一个查询条件），查询按钮占1列，如下图：2.3.带“代码集”的查询条件1） 代码集分为一层和多层；2） 一层：查询条件统一为“下拉框”，支持多选；3） 多层：“弹出框”，选择、清空；2.4.查询结果1） 带树的查询结果：原则上默认不显示查询结果，根据条件点击“查询”按钮后显示查询结果；但对特殊业务、特殊用户，默认显示相关查询结果； 2） 默认排序：查询结果以“倒序”排列，即最后新增数据排列在最前面；对于启用/停用状态，启用在前，停用在后；3） 表头排序：查询结果支持点击表头对当前页进行排序，列表右上方显示的排序字段，点击后对所有查询结果进行排序；4） 表格列数：查询结果列不宜过多，原则上不超过10列；5） 预览某条查询结果的详细信息，在列表点击“某某名称”弹出页面显示；6） 滚动条：原则上查询结果表格不支持横向滚动；带翻页的查询结果表格不支持纵向滚动；7） 查询结果列：序号、状态、选择、姓名、性别、专业、班级等通用的列，已经在css中完成固定宽度，其余列自行设置（一定要在1024分辨率下设置“百分比”调试）；8） 默认记录数：所有可翻页的列表，原则上默认设置每页显示10条记录，从页面美观角度出发根据页面布局设置默认显示记录数；9） 统一命名：查询条件与查询结果列应该是相同的命名，如“姓名”，不要出现“学生姓名”；10） 查询结果列表中，若某字段没有值则显示空白，对于成绩等数字可显示特殊符号；原则上完整显示字段内容，可换行，尽量少用title功能；11） 学年学期合并显示时，显示方式“学年-学期”12） 无查询结果的显示：若没有满足查询条件的数据，在列表中显示“此次查询没有数据”，如图1所示，其他图示均不规范图1：图2：13） 查询结果列表样式：目前产品里有两种查询结果列表样式。3.提示信息规范提示信息应口语化，要友好，不允许出现错别字。文字信息应尽量使用中文全称，少用缩写或代号。3.1.删除：未选：请选择您要删除的数据！是否确定删除？确定或取消 3.2.修改：未选：请选择一条您要修改的数据！多选/全选：只能选择一条数据进行修改！3.3启用/停用：未选：请选择您要启用/停用的数据！多选/全选：是否确定启用/停用?3.4.其他提示：1）对于一些不可逆的操作和对数据影响较大的操作，给予提示，确认是否要执行该操作；2）一些特殊的、非常规的、不易理解的操作，系统在特定的地方给出温馨提示；4.页面展示层级4.1.第一层页面1） 从查询列表点击增加修改“跳转”到第二层页面，不建议采用弹出窗口；特殊情况（如系统配置等简单的功能，可以弹出窗口）；4.2.第二层页面1） 第二层中数据进行“查看”详情时，使用弹框形式显示，此弹框页面可进行打印（根据业务需求）操作；比如：查看某人详细信息时，弹出窗口的形式查看；2） 查看详情的弹出页面不需要“关闭”按钮，直接点击窗口右上角“X”关闭；3） 只要不是张一层页面，都需要有“返回”按钮，原则上返回到上一层列表页面，根据具体业务定位返回位置；5.界面规范5.1.界面易用性1） 支持快捷键 2） 全键盘操作：TAB键保留；页面第一个对象默认获取焦点；输入项较多，支持“Enter”切换到下一个页面对象且支持方向键。5.2.界面规范性1） 按钮摆放：工具栏中，操作范围相同的按钮要集中放在一起。2） 页面风格：页面风格要保持一致，字的大小、颜色、字体要相同，标点符号统一使用中文标点符号。有提示说明的地方全部使用中文。5.3.界面美观与协调性1） 按钮的大小要与界面的大小和空间要协调，避免空旷的界面上放置很大的按钮；2） 弹出窗口的大小写应与内容多少协调，避免较大窗口显示较少内容或较小窗口显示很多内容；3） 如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放。6.业务规范6.1.命名规范1） 功能命名：功能按钮的命名尽量简洁明了，如：在某编辑页面，“保存”即可，不需要命名为“保存XX”；2） 统一命名：系统中针对同一对象的命名必须一致，如：“教师”与“老师”统一为“教师”；“科目”与“课程”统一为“课程”等；3） 在不同操作页面对同一对象的命名必须一致，如下图就完全不符合规范要求；6.2.业务控制1) 原则上所有到达流程“结束”节点的数据都不能再操作（如：修改，提交等），这种数据在列表中不可选；2) 所有被审批的业务