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

XX所有产品页面规范说明 书 关于书的成语关于读书的排比句社区图书漂流公约怎么写关于读书的小报汉书pdf 文档编号：XXXX-PROJ-DOC/201306-01文件状态：草稿［］正式发布凶正在修改［］当前版本：V2.0密级：保密创建日期：2013-6-1批准日期：2013-6-1创建人：审核/批准人：版本号变化状态简要说明（变更内容和变更范围）日期变更人批准人V1.1C创建文档2013-6-1V1.2A内容变更2014-7-16张霞备注：变化状态：C——创建，A——增加，M——修改，D——删除，A——审核TOC\o"1-5"\h\zHYPERLINK\l"bookmark2".树的规范4平台基本上所有的树都已经规范，树分为几类：4树的主要细节要求为：5HYPERLINK\l"bookmark4"2按钮及icon8.页面对象错误!未定义书签。文本框10HYPERLINK\l"bookmark8"代码集选择控件10当代码集只有1层：统一为“下拉框“10.当代码集只有多层：统一为“弹出DIV“，但必须保证弹出的DIV中的文字不能换行，可以通过统一的弹出页面参数控制DIV的宽度11选择框11日期对象11输入表单12验证13.查询13查询条件（有树状）错误!未定义书签。查询条件（无树状）错误!未定义书签。HYPERLINK\l"bookmark24"带“代码集”的查询条件14HYPERLINK\l"bookmark26"查询结果14HYPERLINK\l"bookmark28".提示信息规范17HYPERLINK\l"bookmark30"删除：17HYPERLINK\l"bookmark32"修改：17HYPERLINK\l"bookmark34"用/停用：17HYPERLINK\l"bookmark38".页面展示层级17HYPERLINK\l"bookmark44".界面规范18HYPERLINK\l"bookmark46"界面易用性18HYPERLINK\l"bookmark48"界面规范性18HYPERLINK\l"bookmark50"界面美观与协调性18HYPERLINK\l"bookmark58".兼容性20HYPERLINK\l"bookmark60"浏览器20HYPERLINK\l"bookmark62"分辨率：20HYPERLINK\l"bookmark64".注意事项20HYPERLINK\l"bookmark66"规范测试：20HYPERLINK\l"bookmark68"流程测试：20HYPERLINK\l"bookmark70"数据测试：211.页面对象1.1.树的规范1.1.1.平台基本上所有的树都已经规范，树分为几类：教职工树：师资表获取数据（查询在职、返聘状态的教职工）；教职工用户树：教职工类的用户表数据（查询启用状态的用户），当业务选择的对象是需要教职工登陆软件平台的情况下，应该选择“教职工用户”树，而不应该选择“教职工”树；如下图（因为发送的邮件，需要教职工登陆软件平台去接收邮件，所以是从用户表选的可以登陆平台的教职工用匚虹L用户一二十-一量总支党m分公立「蚊加t「第甫处「招生就址逃「后财st工芸户，而非教职工基本档案表去选择一个收件人）；rsupEradmrirtSS^Jr御*华r时比图点如r-MES〔故注导扑叁期r电电剪的短台亦■露a。r源岂出便闻！导办需国》rSift幽短号打出或ir梅单旭的线导办公idrwsw弊总女领导।r对修西（5&e■正的r诂营悲caw支厢寻r虫子卷世处届由门（*号学镇学）r地蜘।虐身立।r街里怕牌导贽r旧国华俊导kr黄明理由导景学生树：学籍表中在校生数据（查询在读、复学、转专业、转班级、跳级、留级状态的学生）；学生用户树：在校生类的用户表数据（查询启用状态的用户），当业务选择的对象是需要学生登陆软件平台的情况下，应该选择“学生用户”树，而不应该选择“学生”树；校友树：已毕业、已结业的学生类学籍表数据；机构树：启动状态的机构，不包括停用和已删除；班主任树：通过班级找到的所有当前班主任班；专业树：启动状态的专业，不包括停用和已删除；班级树：启动状态的班级，不包括停用和已删除；企业树；其他树；1.1.2.树的主要细节要求：骨学籍S'理蹦*ift造祖窥代字J1土、J1上:r■于三庖七子无市的用乩法」」_L在木单.这必千史用一言机.它用台一传解弗岳与瞥学前卒三汽车工用与均』TTHz默认展开：点击功能菜单，树上第二-层节点默认展开；如下图：口基*H，班期管理，学:年学期口学生业势日学错异己H妩计查询第三层节点：点击第三层节点，当前节点展开，其他同级节点折叠；如下图：一班以二Ir子妹、内再二一行二二心」.t^#dj—口茎脸置、专业部＞瓯营叁，学年学期□学生11伺n"业拮业目学雄魁日按什在由3)默认查询所有：从功能菜单点击进入，默认查询为树上根节点之下的所有数据，如：班级管理,点击菜单后，查询所有班级列表，即与点击"班级"根节点查询的结果一致；J」即「互、一匕中于斑桀S砧函由年月——此学工艺匚1工业分析与检瑞电孑技术应用®后用®17＞册Stf前件F”4序号班出褊号斑皈冬鞋速现年月建证领校区心」前跑加工It术意控技术应用□1■,■ULH2y颂，2013-0425厚耳…爆触1T-：-1号二］毕睁业计耳机匠用匚.蒯艮若与至r220120.../oi颂R.2012-09201j?=5...忘腔爆轴□32D1107加11皴片」2011-09251芋年..忘睦矍为男_1字踊#动10•.十三日—学前鼓营，二汽车运用与鞋整r12D1DB如匐计...|2011-092D11学年…忘睦化工工艺」计算机确r52D11D9加飙计...2011-092口11芋年…忘睦«sar62D-1102011如计…।2011-092D11羊年总姬r72口7口…201涉计2012-092D12羊年总姐聘罚rB2D,010boi融计］2010-092口”羊年总蟠腿目r92D-009如CgRiti1..2010-09刘口学耳忘嫄srsflr102O-DO02o\cg/..2010-092010^^忠校区域勿■学野管理茶探・学稗营理卢城.•些副出专-班破首理全首页?港4)查询下级：当点击某个节点时，默认查询其节点下的所有记录，以及其下级节点下的所有记录；如下图：■店年欧主任---单阂与上-:.二型朝口士,辽二，党迨支—f,党也也娃一敦各处俱百姓招生皿处后勤处LTS「三up日「adminftf朗研;iri炯用尸密解争r刘应建澄翎与宓世宣）F醺世国一品翎）£*r税牝笈市领导宓£反，L建志电譬领导办芸4卜1湖章也f«漏熨啥句r工分专业好部门营领导办及交§r都雌漕导星）二1!i_葡定5）弹出页面的树：弹出页面的树已经统一为之前描述的几种。✓页面上“确定”按钮，而不是“保存”按钮；✓弹出页面的Title:按照父页面的业务来写，统一为"选择***"，比如文件审批人，那就是“选择文件审批人”，（尽管是从教职工表中选择的班主任，但不能叫做“选择教职工”）；✓选择树：单选时用radio，中间不显示《”“》”按钮，且若多次操作，后面选择的数据自动替换掉前面已选的，参考图1；多选时用复选框，参考图2；选择树具有快速检索功能，只将查询结果列在选择框内；司曰.幼觇工用户竟改办口务办竟枝身蜕射因噌字生d招生办总费处殳全办_•印啕「生任足务中心实习工Twiy苧校我务效叵百三7黄音j于p■_^<口旭退［］国蝌雌宝苴ii办）•畴危•:定的加儆觉期加赃友题加单选的便和加校注.：^S苴吵一」\^加獴施加\手曲也如丸曲缶：同加《蛔出如JW班加孑艇隼范贝加江建平•用i加*丽，道EM年花?i用者，力，）_（包面定匚1王布用由务处n王书渤否组匚1王洞进昭训部口壬罩香曲训都*足1：王选择文件由批人地职工用户-+1■?.：＜'It.i-rr宣:产ij”市一党检.我学生:.•二招生为重全由印中r3――心T71T-二器彳一*E1・2.按钮及icon以下为产品中所用到所有功能按钮，如果遇到不在此列表中的，请提出来！序号按钮名称Css样式名称效果截图1增加icon_add[届博11]2修改icon_edit邂修出3删除icon_delete4保存icon_save|困的5查询icon_search|母嗣6预览icon_preview7锁定icon_key园崛8导入icon_in明导元|9导出icon_out|国导10上传icon_upload1畲上蜀11下载icon_download2@稗|12查看结果icon_result113返回icon_returnB返回14刷新icon_refresh博用新15确定&提交icon_confirm［星）遵16关闭icon_close©关闭17启用icon_enable®肩用18停用icon_disable@停用19打印icon_print©frai20设置icon_setting21清空（查询条件）icon_query_empty22作废icon_invalid・作废23审批通过icon_passB市城醺24审批拒绝icon_refuse里市搬睦25文件icon_file民文件26URL文件夹icon_url［就郑陕］［27预览icon_preview28拨款icon_appropriation居］二29奖励icon_reward।餐到励30收藏icon_collect但砌［31批阅icon_readOver匚2批阅32提问icon_quiz立提问33审核icon_audit自亩核34课表icon_timetable口的35阅办&授权icon_yueban36回复icon_reply।Q回复37 总结 初级经济法重点总结下载党员个人总结TXt高中句型全总结.doc高中句型全总结.doc理论力学知识点总结pdf iconsummarize38跟踪icon_track山电39催办icon_hasten40注册icon_register1国硼II41报道icon_reportM磔42授课icon_schoolteaching工会43抽卷icon_choujuan―抽卷44开始考评icon_startEvaluation段开始考评45网络课堂icon_internetClassroomg网商萼1.3.文本框原则上高度、宽度统一；按照信息集要求，限制输入的文字数量；）必须采用公共的CSS样式（只要采用公共样式，就会做到查询条件的输入框和表单中的输入框自适应宽度）；1.4.代码集选择控件1.4.1.当代码集只有1层：统一为“下拉框”1）原则上固定宽度，与“文本框”对齐，下拉框统一适应浏览器的行为（书面。乂目前可以』E需要另写样式）；虹喑IL泅姐“，J在版工上口白蟠-I军包士批L春的行图匚f:二Ei，Hr中国游真宜员中臼共竟为中国址产主文白年团团员中国WHUH."空工去=良中|"三=].盟我・.中臼.，:=邛臼=会m政府磁：。白里,‘产~~"三1'1.\+JJ9+警员:可/irthto±it裒越自治rafisas事融人士上厂孑£V.l,2)统一下拉列表的默认显示，在没有指定的数据时，输入表单统一显示“请选择”；查询条件统一显示“全部”；1当代码集只有多层：统一为〃弹出DIV"，但必须保证弹出的DIV中的文字不能换行，可以通过统一的弹出页面参数控制DIV的宽度1口度日加揉豆■■普通啬捶注科/4^5职3店农节空)1间帝两届农村应画-城植住鼠农村往届工人二干部(L复退军人现受军人输苦涉门生■台湾土-噌国华济也朝吉侨留学生/外照_一次而1.5.选择框原则上，单选时使用radio，复选使用checkbox；1.6.日期对象1)默认值：默认服务器的系统时间，而非客户端系统时间；2）录入 格式 pdf格式笔记格式下载页码格式下载公文格式下载简报格式下载 ：YYYY-MM-DD、YYYY-MM-DDHH:SS、YYYY-MM-DDHH、YYYY-MM、YYYY,统一采用日期控件；)显示格式统一采用FMT标签显示YYYY-MM-DD、YYYY-MM-DDHH:SS、YYYY-MM-DDHH、YYYY-MM、YYYY；格式转换：统一按照信息集的要求，存储在数据库中；根据业务需求，只需要“年月日”的，命名为“日期”，需要加“时分秒”的命名为“时间”。在查询列表中只显示“YYYY-MM-DD”；若是时间段，即起止时间的选择，系统自动控制开始时间不能大于结束时间；在查询条件中，时间为空的，默认为所有时间；8)时间作为查询条件，只显示日期，日期控件宽度设置为刚好显示10个字符(此处请开发给定具体值)，所有根据时间查询的地方都是选择时间段，不能只有一个时间，列表中只显示日期；输入表单分栏：一行共分4列，其中每2列为一个页面对象；比例：每2列占50%；文字标签占15%，输入控件占35%；对齐：文字标签右对齐，输入控件(如文本框、下拉框等)左对齐；综上述，如下图：i-LLv招生主相C.HH可以^M提育一fit社怔谕妻uL.N-占小》.a3》带朋|[ZZZ?招生冲刎学校地址—-学校网址1]邮他用BU上・裹单，入页面如,闽生嘱同E-rYhaill1—1据生姑至时同■1]联塞人1]原则上，所有按钮统一浮动显示在最底部，保证在拖动表单内容的时，按钮不被拖动；特殊业务可以特殊处理；验证增加（修改）数据时，尽可能考虑各种边界条件，如：记录为空，输入为空，输入出错等，当输入的信息满足这些边界条件时，将会弹出一个提示框提醒用户，以便用户能及时地做出修改；验证提示的提示语要统一，统一用弹出框提示，且用红色框标出不符合要求的输入项；对于相同的字段，在增加和修改时验证的 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 要一致；提交1）增加（修改）数据时，点击“保存”后，原则上都返回到列表页面，对特殊业务可以特殊处理，在编辑页上提供不同操作按钮，如“保存并跳转到XX”、“保存并继续增加”……；2）点击“保存”、“提交”、“查询”等按钮后，若处理时间较长，须加图层显示“正在处理……”；“正在处理……”图层需美化2.1.常见查询条件查询条件页面，查询条件组成：“条件名称”+“：”+输入控件（文本框，日期选择控件，下拉列表……）；对齐：条件名称居右（且加“全角”冒号）对齐；输入框居左对齐；“查询”按钮居中；多行查询条件与首行对齐排列，查询按钮摆放在首行右侧；如图：带树查询条件分栏：一行共分7列：其中，［查询条件］占6列（每2列为一个查询条件），［查询］按钮占1列，如下图：无树查询条件分栏：一行共分9列：其中，［查询条件］占8列（每2列为一个查询条件），［查询］按钮占1列，如下图：2.3.带“代码集”的查询条件1）代码集分为一层和多层；一层：查询条件统一为“下拉框”，支持多选；多层：“弹出框”，选择、清空；2.4.查询结果1）带树的查询结果：原则上默认不显示查询结果，根据条件点击“查询”按钮后显示查询结果；但对特殊业务、特殊用户，默认显示相关查询结果；默认排序：查询结果以“倒序”排列，即最后新增数据排列在最前面；对于启用/停用状态，启用在前，停用在后；表头排序：查询结果支持点击表头对当前页进行排序，列表右上方显示的排序字段，点击后对所有查询结果进行排序；表格列数：查询结果列不宜过多，原则上不超过10列；预览某条查询结果的详细信息，在列表点击“某某名称”弹出页面显示；滚动条：原则上查询结果表格不支持横向滚动；带翻页的查询结果表格不支持纵向滚动；)查询结果列：序号、状态、选择、姓名、性别、专业、班级等通用的列，已经在css中完成固定宽度，其余列自行设置(一定要在1024分辨率下设置“百分比”调试)；默认记录数：所有可翻页的列表，原则上默认设置每页显示10条记录，从页面美观角度出发根据页面布局设置默认显示记录数；9)统一命名：查询条件与查询结果列应该是相同的命名，如“姓名”，不要出现“学生姓名”；10)查询结果列表中，若某字段没有值则显示空白，对于成绩等数字可显示特殊符号；原则上完整显示字段内容，可换行，尽量少用title功能；学年学期合并显示时，显示方式“学年-学期”无查询结果的显示：若没有满足查询条件的数据，在列表中显示“此次查询没有数据”，如图1所示，其他图示均不规范图1：育军口*吊，Wf-的瑞用箜的？♦#5•姓U*fi*\R孑-fcs图2:□学生成餐隧।篁神息字籍信息询隹息赛庭信直小耳免助学金奖学金奖m诞处叫成修［fl］异动其习鼬：！！物自定义苴他现状分折岗住钟f麻区曲特:朗索掴,学生成米牌基本信息箱能息东e僧百家庭情总收盅或免助学金：岩金奖m殿果表檎索明异动妄习就让考助自启以其他现状分而岗地分析位长曲设nH.^KKgU-4SLj=*69三年七明归咻4工田虹wiagiWf邮也耨工如工:»判市用工理昆工:［册I.餐印M牌H.1SMIH+动手/力用北技祖品宿修养久恒性身心催随自珑稔控醛白偿出团队精神强与与班搭导□到a口予主■阮取5・白电！fl7:峰上生日及于ItW.W子口刘#力旧见芍中声幽国阵**WR在翦口入酢L4ar早印时四噌:二梦至里阳±eIFQiXsl□wsm碌疾日晒编号子隼繇都王0阐甫［写道Invaliddata.立利忙鼠艇»孚期用M总「真境如询QWS/昆登毗营猾沱・u省!录求出u霸生曜丽T苧王|柴司-翔・1细-田茹甘“田置噂£善立国・13)查询结果列表样式：目前产品里有两种查询结果列表样式。3.提示信息规范提示信息应口语化，要友好，不允许出现错别字。文字信息应尽量使用中文全称，少用缩写或代号。删除：未选：请选择您要删除的数据！是否确定删除？［确定］或［取消］修改：未选：请选择一条您要修改的数据！多选/全选：只能选择一条数据进行修改！用/停用：未选：请选择您要启用/停用的数据！多选/全选：是否确定启用/停用?其他提示：1）对于一些不可逆的操作和对数据影响较大的操作，给予提示，确认是否要执行该操作；2）一些特殊的、非常规的、不易理解的操作，系统在特定的地方给出温馨提示；.页面展示层级第一层页面从查询列表点击［增加］［修改］“跳转”到第二层页面，不建议采用弹出窗口；特殊情况（如系统配置等简单的功能，可以弹出窗口）；第二层页面第二层中数据进行“查看”详情时，使用弹框形式显示，此弹框页面可进行[打印(根据业务需求)]操作；比如：查看某人详细信息时，弹出窗口的形式查看；)查看详情的弹出页面不需要“关闭”按钮，直接点击窗口右上角“X”关闭；只要不是张一层页面，都需要有“返回”按钮，原则上返回到上一层列表页面，根据具体业务定位返回位置；.界面规范界面易用性支持快捷键2)全键盘操作：TAB键保留；页面第一个对象默认获取焦点；输入项较多，支持“Enter”切换到下一个页面对象且支持方向键。界面规范性按钮摆放：工具栏中，操作范围相同的按钮要集中放在一起。页面风格：页面风格要保持一致，字的大小、颜色、字体要相同，标点符号统一使用中文标点符号。有提示说明的地方全部使用中文。界面美观与协调性按钮的大小要与界面的大小和空间要协调，避免空旷的界面上放置很大的按钮；弹出窗口的大小写应与内容多少协调，避免较大窗口显示较少内容或较小窗口显示很多内容；如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放。.业务规范命名规范功能命名：功能按钮的命名尽量简洁明了，如：在某编辑页面，“保存”即可，不需要命名为“保存XX”；统一命名：系统中针对同一对象的命名必须一致，如：“教师”与“老师”统一为“教师；”“科目”与“课程”统一为“课程”等；在不同操作页面对同一对象的命名必须一致，如下图就完全不符合规范要求；6.2.业务控制原则上所有到达流程“结束”节点的数据都不能再操作(如：修改，提交等)，这种数据在列表中不可选；所有被审批的业务，都应能看到审批意见；所有待处理的业务(不止是审批流)都应在消息精灵中有提示；导出功能，在列表中，若有选中项，则导出所选内容；若不选，则导出所有；7.兼容性浏览器必须满足时下主流浏览器：IE7,IE8,IE9；尽量满足火狐、360等常用浏览器。分辨率：必须在分辨率为1024X768时，正常显示：文字不换行；页面内容能完整显示；布局不变形；页面的外层不能出现滚动条，如下图，是不应该出现滚动条的；8.注意事项开发、测试人员在完成功能开发后，一定要自测和全面功能测试，需要有如下思路：规范测试：先检查页面的规范，按照该文档的要求；规范是第一位的，因为如果不规范的话，早晚会改规范的，浪费时间和精力，甚至让你很厌烦；流程测试：1）检查功能是否通畅，只有功能通畅了才可能走完所有功能；2）对于同一业务，由于数据不同审批流程不同的，分别对各种流程进行查检；数据测试：检查数据的是否正确，只有数据也正确了，才能敢投入业务应用。例如：一个教职工进行“离职管理”审批通过后，该教职工已经为离职状态，这时必须要去用户管理去测试，这个用户账号是否还能正常使用，如果账号还能登陆系统、甚至在“内部邮件—发件箱”还能选择该用户，那就是有问题。