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

1、cd>AV-4-m&HUMDAV12V11iiidAc13-wUlMsgfiDI曲aa»2014-7-162013-6-1ma9am更invMMmVm1*2013-6-1oXXXX-PROJ-DOC/201306-01ffl2013-6-1番1. 树的规范41.1. 平台基本上所有的树都已经规范，树分为几类：41.2. 树的主要细节要求为：52. 按钮及icon83.页面对象错误!未定义书签。3.1. 文本框103.2. 代码集选择控件103.2.1当代码集只有1层：统一为“下拉框“103.2.2. 当代码集只有多层：统一为“弹出DIV“，但必须保证弹出的DIV中的文字

2、不能换行，可以通过统一的弹出页面参数控制DIV的宽度113.3. 选择框113.4. 日期对象113.5. 输入表单123.6. 验证134. 查询134.1. 查询条件（有树状）错误!未定义书签。4.2. 查询条件（无树状）错误!未定义书签。4.3. 带“代码集”的查询条件144.4. 查询结果145. 提示信息规范175.1. 删除：175.2. 修改：175.3启用/停用：176. 页面展示层级177. 界面规范187.1. 界面易用性187.2. 界面规范性187.3. 界面美观与协调性188. 兼容性208.1. 浏览器208.2. 分辨率：209. 注意事项209.1.规范测试：2

3、09.2. 流程测试：209.3. 数据测试：211.页面对象1.1. 树的规范1.1.1.平台基本上所有的树都已经规范，树分为几类：1）教职工树：师资表获取数据（查询在职、返聘状态的教职工）；2）教职工用户树：教职工类的用户表数据（查询启用状态的用户），当业务选择的对象是需要教职工登陆软件平台的情况下，应该选择“教职工用户”树，而不应该选择“教职工”树；如下图（因为发送的邮件，需要教职工登陆软件平台去接收邮件，所以是从用户表选的可以登陆平台的教职工用户，而非教职工基本档案表去选择一个收件人）；n同老西査工诈计划匚!工作日吉匚曲厂刑应建r啓画厂税耘厂厂也窜坦厂=uperadmrirt3

4、4;J厂H5W总鰹导莎養生）做锁合外聲辽）（fe颉号办金蜀跑辱血池站吏）昨如厂坊毗怕L旧国华3）学生树：学籍表中在校生数据（查询在读、复学、转专业、转班级、跳级、留级状态的学生）；4）学生用户树：在校生类的用户表数据（查询启用状态的用户），当业务选择的对象是需要学生登陆软件平台的情况下，应该选择“学生用户”树，而不应该选择“学生”树；5）校友树：已毕业、已结业的学生类学籍表数据；6) 机构树：启动状态的机构，不包括停用和已删除；7) 班主任树：通过班级找到的所有当前班主任班；8) 专业树：启动状态的专业，不包括停用和已删除；9) 班级树：启动状态的班级，不包括停用和已删除；10) 企业树；11

5、) 其他树；1.1.2.树的主要细节要求：脅学藉営理施谆些土吒宁丄三、丄上匕丁与哙电予王扌世庄叽说丄壬卞甦定王扌鬼庄:一莒迅宜刃.舍幣走聊晶与労学北沪三卢主.A.±r?t氓TT丁x、臣乳可容1)默认展开：点击功能菜单，树上第二-层节点默认展开；如下图：、班釀管理、沖学期芋生业务戸毕业洽业目举躋养动IS计查询2)第三层节点：点击第三层节点，当前节点展开，其他同级节点折叠；如下图：3）默认查询所有：从功能菜单点击进入，默认查询为树上根节点之下的所有数据，如：班级管理，点击菜单后，查询所有班级列表，即与点击“班级”根节点查询的结果一致;赳班年月；険计査通址宇工艺工业分折与栓验电召拯术应甲机

6、国加工14斗瑟壯朮应用廿删叵用i盘计"瓶车运用与酬化工工艺+茸机静Zjm脚电）启用®停用1.序吕班饭褊号班議名称.-X龍班年月建遊学期机构厂宇迦*2013-042D12H年&.a220120.抑迦汁12012-092D门再厂3201107冏顺计2011-032011.厂42D11DB2011iffit.2011002011¥=#.厂52D11DS20iiaif.2011-092011.厂6201110201isn计.2011-092D11*#=-厂720120201麵计.2012-092013*nB2D1010跑计I2010-092010*厂9201009

7、如跑诃.2010-09201.="|n102D1OO0200/.2010-09:-|专三.=-4）查询下级：当点击某个节点时，默认查询其节点下的所有记录，以及其下级节点下的所有记录；如下图：5）弹出页面的树：弹出页面的树已经统一为之前描述的几种。页面上“确定”按钮，而不是“保存”按钮；弹出页面的Title:按照父页面的业务来写，统一为“选择*”，比如文件审批人，那就是“选择文件审批人”，（尽管是从教职工表中选择的班主任，但不能叫做“选择教职工”）；选择树：单选时用radio，中间不显示”“”按钮，且若多次操作，后面选择的数据自动替换掉前面已选的，参考图1；多选时用复选框，参考图2；选

8、择树具有快速检索功能，只将查询结果列在选择框内；押i，加:皴如:？“直if如rtfSi'liO牺务如生言麻务中,b夹习工T戸口芋狡S3弈迪迷稱述张处*-厂蛉all土生勢全囱型砸学厢彪ig.EP+R丄先慟夯处）n+,*阳训部T三庄拒训銅学口工匚:*:工耶工用户：二1齐尝生芝招生血罕-一妄全应finjr3舌朋秀中心HIT-汁N?12按钮及icon以下为产品中所用到所有功能按钮，如果遇到不在此列表中的，请提出来！序号按钮名称Css样式名称效果截图1增加icon_add匾iTI2修改icon_edit3删除icon_delete4保存icon_save丨IS圖5查询icon_search6预览

9、icon_preview7锁定icon_key8导入icon_in脛导入|9导出icon_out|圏导出|10上传icon_upload丨會上隹111下载icon_download2|g由12查看结果iconresult画果13返回iconjeturn角返回14刷新iCOn_refreSh憧剧新15确定&提交iCOn_COnfirm星脱晅16关闭icon_close隊关圍17启用iconenable厂、-®启用18停用icon_disable画停用19打印icon_print©打印20设置icon_setting軍碍21清空（查询条件）22作废iconinvalid

10、&柞废23审批通过iconpass®审批通过24审批拒绝icon_refuse團审&25文件icon_file耳対26URL文件夹icon_url盂如27预览icojpreviewQ豳28拨款icon_appropriation拨芋29奖励icon_reward露奖励30收藏iconcollectg-Lo殛31批阅icon_readOver口擒阅32提问icon_quiz电理问33审核icon_audit.Q审核34课表icon_timetableI35阅办&授权icon_yueban（空駆剧i36回复icon_replyiQ回覆37总结icon_summar

11、ize38跟踪icon_track|山備|39催办icon_hasten40注册icon_register丨卫呦|41报道icon_report42授课icon_schoolteaching43抽卷icon_choujuan|陸抽巻44开始考评icon_startEvaluation号珈考评j45网络课堂icon_internetClassroomL鼻网璃魁|1.3. 文本框1）原则上高度、宽度统一；2）按照信息集要求，限制输入的文字数量；3 ）必须采用公共的CSS样式（只要采用公共样式，就会做到查询条件的输入框和表单中的输入框自适应宽度）；1.4. 代码集选择控件1.4.1.当代码集只有1层

12、：统一为“下拉框”1）原则上固定宽度，与“文本框”对齐，下拉框统一适应浏览器的行为（firefox目前可以，E需要另写样式）；t±0J工坐lit.!?；亠:TlJHt2510101131111111111出丄!i出.TEi'Ull，-FI咄讦卫17f:二巧卄岂Hi'ihl石Ji：ITTH；1.：.4J匸宅丄三.IT.+.f?V.i1I刊!甫凶右iit.L；T|2）统一下拉列表的默认显示，在没有指定的数据时，输入表单统一显示“请选择”；查询条件统一显示“全部”；142当代码集只有多层：统一为弹出DIV”，但必须保证弹出的DIV中的文字不能换行，可以通过统一的弹出页面参数

13、控制DIV的宽度T3G他=代殍选择吉通誣玮科/屮裁亚乎夜霸空J駄帶市届京村应届衣木寸往届TA现役军人腰门十匕消土留宁士/外诒1.5. 选择框原则上，单选时使用radio，复选使用checkbox；1.6. 日期对象1）默认值：默认服务器的系统时间，而非客户端系统时间；2 ）录入格式：YYYY-MM-DD、YYYY-MM-DDHH:SS、YYYY-MM-DDHH、YYYY-MM、YYYY,统一采用日期控件；3 ）显示格式统一采用FMT标签显示YYYY-MM-DD、YYYY-MM-DDHH:SS、YYYY-MM-DDHH、YYYY-MM、YYYY；4 ）格式转换：统一按照信息集的要求，存储在数据库

14、中；5 ）根据业务需求，只需要“年月日”的，命名为“日期”，需要加“时分秒”的命名为“时间”。在查询列表中只显示“YYYY-MM-DD"；6 ）若是时间段，即起止时间的选择，系统自动控制开始时间不能大于结束时间；7 ）在查询条件中，时间为空的，默认为所有时间；8 ）时间作为查询条件，只显示日期，日期控件宽度设置为刚好显示10个字符（此处请开发给定具体值），所有根据时间查询的地方都是选择时间段，不能只有一个时间，列表中只显示日期；1.7. 输入表单1 ）分栏：一行共分4列，其中每2列为一个页面对象；2）比例：每2列占50%；文字标签占15%，输入控件占35%；3）对齐：文字标签右对齐，

15、输入控件（如文本框、下拉框等）左对齐；学址学技网址用嗣上袁罩熹入亜面I-*刑雋丰竊沁问捋生结如问联枣人综上述，如下图：E-lYh3ik4 ）原则上，所有按钮统一浮动显示在最底部，保证在拖动表单内容的时，按钮不被拖动；特殊业务可以特殊处理；1.8. 验证1）增加（修改）数据时，尽可能考虑各种边界条件，如：记录为空，输入为空，输入出错等，当输入的信息满足这些边界条件时，将会弹出一个提示框提醒用户，以便用户能及时地做出修改；2）验证提示的提示语要统一，统一用弹出框提示，且用红色框标出不符合要求的输入项；3）对于相同的字段，在增加和修改时验证的标准要一致；1.9. 提交1）增加（修改）数据时，点击“保

16、存”后，原则上都返回到列表页面，对特殊业务可以特殊处理，在编辑页上提供不同操作按钮，如“保存并跳转到XX”、“保存并继续增加”；2）点击“保存"、“提交"、“查询"等按钮后，若处理时间较长，须加图层显示“正在处理”"正在处理”图层需美化2查询2.1. 常见查询条件1）查询条件页面，查询条件组成：“条件名称”+“：”+输入控件（文本框，日期选择控件，下拉列表）；2）对齐：条件名称居右（且加“全角”冒号）对齐；输入框居左对齐；“查询”按钮居中；3）多行查询条件与首行对齐排列，查询按钮摆放在首行右侧；如图：4）带树查询条件分栏：一行共分7列：其中，查询条件占6

17、列（每2列为一个查询条件），查询按钮占1列，如下图：琨:厂；+=;丄司茄9较+：.V5）无树查询条件分栏：一行共分9列：其中，查询条件占8列（每2列为一个查询条件），查询按钮占1列，如下图：2.3. 带“代码集”的查询条件1）代码集分为一层和多层；2 ）一层：查询条件统一为“下拉框”，支持多选；3 ）多层：“弹出框”，选择、清空；2.4. 查询结果1 ）带树的查询结果：原则上默认不显示查询结果，根据条件点击“查询”按钮后显示查询结果；但对特殊业务、特殊用户，默认显示相关查询结果；2）默认排序：查询结果以“倒序”排列，即最后新增数据排列在最前面；对于启用/停用状态，启用在前，停用在后；3）表头排

18、序：查询结果支持点击表头对当前页进行排序，列表右上方显示的排序字段，点击后对所有查询结果进行排序；4）表格列数：查询结果列不宜过多，原则上不超过10列；5）预览某条查询结果的详细信息，在列表点击“某某名称”弹出页面显示；6）滚动条：原则上查询结果表格不支持横向滚动；带翻页的查询结果表格不支持纵向滚动；7）查询结果列：序号、状态、选择、姓名、性别、专业、班级等通用的列，已经在:ss中完成固定宽度，其余列自行设置（一定要在1024分辨率下设置“百分比”调试）；8）默认记录数：所有可翻页的列表，原则上默认设置每页显示10条记录，从页面美观角度出发根据页面布局设置默认显示记录数；9 ）统一命名：查询条

19、件与查询结果列应该是相同的命名，如“姓名”，不要出现“学生姓名”；岀生日期专业班级身份怔号导-电子芯才区月是20101.6101822010.1996-01-0261019219941102.电子技术应用201051.巳610182201Q.cg.QC.2l51019219960311.屮学I艺工丄T看W栓塩电了強处在月矶杭M二孩A埶杆"天汕月计篡机应主d丄10）查询结果列表中，若某字段没有值则显示空白，对于成绩等数字可显示特殊符号；原则上完整显示字段内容，可换行，尽量少用title功能；11）学年学期合并显示时，显示方式“学年-学期”12）无查询结果的显示：若没有满足查询条件的数据

20、，在列表中显示“此次查询没有数据”，如图1所示，其他图示均不规范图1：匚丰齐耳>w«5iiSyjnFjiifsnr-?sgl?<1-田iilm>：BRit孙HS；HmEJali_>二邯讯zwipsnir®!UItiBT神m|_|HU?l«i«n学耳31生曰fll吉Itftft?«爭？W=lGH网抽55A些出嘿b*1*x«?ff-taitawhr*!-卿i£沽冑惦阿Sfl_才生昨徳星本启总f：H来冋匕岂收虫河自如至焙全烦驗耘槪累戸异动或习或业考剳自走.其佃现状为折审应廿師也长曲注社合目标助手誉力肉通KI

21、E品诵倏粽丸恒性身心傕隨自我椅控整台创新H腿柜神飆导与裁张导财两InvaliddataEFg*醸宇Si諒I甬丽|彌鼬阳s曲线厂能总收赏険艙蛙始蛙共卅湖t%廉活臣质闊冥习刑册自是T日他13) 查询结果列表样式:目前产品里有两种查询结果列表样式。3. 提示信息规范提示信息应口语化，要友好，不允许出现错别字。文字信息应尽量使用中文全称，少用缩写或代号3.1. 删除：未选：请选择您要删除的数据！是否确定删除？确定或取消3.2. 修改：未选：请选择一条您要修改的数据！多选/全选：只能选择一条数据进行修改！3.3启用/停用：未选：请选择您要启用/停用的数据！多选/全选：是否确定启用/停用?Ll1）对于一些

22、不可逆的操作和对数据影响较大的操作，给予提示，确认是否要执行该操作；2）一些特殊的、非常规的、不易理解的操作，系统在特定的地方给出温馨提示；4. 页面展示层级4.1. 第一层页面1）从查询列表点击增加修改“跳转”到第二层页面，不建议采用弹出窗口；特殊情况（如系统配置等简单的功能，可以弹出窗口）；4.2. 第二层页面1）第二层中数据进行“查看”详情时，使用弹框形式显示，此弹框页面可进行打印（根据业务需求）操作；比如：查看某人详细信息时，弹出窗口的形式查看；2 ）查看详情的弹出页面不需要"关闭"按钮，直接点击窗口右上角“X"关闭；3）只要不是张一层页面，都需要有“返回

23、”按钮，原则上返回到上一层列表页面，根据具体业务定位返回位置；5. 界面规范5.1. 界面易用性1）支持快捷键2 ）全键盘操作：TAB键保留；页面第一个对象默认获取焦点；输入项较多，支持"Enter"切换到下一个页面对象且支持方向键。5.2. 界面规范性1）按钮摆放：工具栏中，操作范围相同的按钮要集中放在一起。2）页面风格：页面风格要保持一致，字的大小、颜色、字体要相同，标点符号统一使用中文标点符号。有提示说明的地方全部使用中文。5.3. 界面美观与协调性1）按钮的大小要与界面的大小和空间要协调，避免空旷的界面上放置很大的按钮；2）弹出窗口的大小写应与内容多少协调，避免较大窗口显示较少内容或较小窗口显示很多内容；3 ）如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放。-?432i.<i用户二孙若勒紀求I労勒同貝命若不统一上沏；削遗Efc民颤I圏耳入團氐号i»n1林办?二郞r办3iKk4京队53?西补BSt箔办7党商办S件曬9玄賦10堆Bi办11直M12信息中心M行刊删沏砖弦靖濟九".：H他他6. 业务规范6.1. 命名规范1）功能命名：功能按钮的命名尽量简洁明了，如：在