web系统界面规范.docx

Web平台界面规范1.操作类型界面规范整体要求：美观大方，简洁易懂。支持1024*768（包含）以上分别率1.1控件布局规范控件对齐方式：控件纵横间距均匀汉字对齐方式：两端对齐不加标点录入类型为文本框：矩形录入框1.2按钮控件规范按钮控件有3类，分别为：公用按钮、图片按钮、其他按钮。1.2.1公用按钮公用按钮包含：确定、取消、重置、查询、查看、新建、修改、删除分页按钮包含：首页、上一页、下一页、尾页。1.2.1.1按钮定义 确定：弹出提示信息对话框中，确定某种行为时使用； 快捷键：ALT+Y 取消：弹出提示信息对话框中，取消某种行为时使用； 快捷键：ALT+C 重置：页面信息恢复为信息修订前的初始状态； 出现在查询区域、新建信息录入页面、详细信息修改页面； 快捷键：ALT+R 查看：多条数据中，对单条数据的详细内容进行展示时使用； 快捷键：ALT+V 查询：多条数据检索时应用； 快捷键：ALT+Q 新建：数据增加时使用； 快捷键：ALT+N 修改：对拥有数据进行修订时使用； 快捷键：ALT+M 修改信息以弹出窗口形式出现，弹出窗口中按钮控件包含：确定、重置、取消 删除：数据删除时使用； 快捷键：ALT+S 弹出提示信息对话框中，按钮为：确定、取消 首页：进入数据列表中的第一页时使用； 快捷键：ALT+F 上一页：进入当前页的前一页时使用； 快捷键：ALT+P 下一页：进入当前页的后一页时使用； 快捷键：ALT+X 尾页：进入当前查询数据列表中的最后一页时使用； 快捷键：ALT+L Flex程序中共用按钮的快捷键为：CTRL+ALT+字母 各种公用按钮代表字母同上。1.2.1.2按钮规范1.按钮风格高度一致，排序均匀；2.按钮位置在整体录入区的下方，单独成行3.在当前页面所处的区域的行居中显示；4.按钮为可用状态是，鼠标放到按钮上时，显示为小手形状；5.按钮上要加TIPS功能，即对“按钮”的功能进行简易的说明：说明文字要简洁易懂6.按钮不可用时为反显形式（置灰），按钮可用时以正常状态显示7.弹出窗口提示中，“确定”按钮支持回车键的快捷操作，“取消”按钮支持ESC键的快捷操作；8.按钮中文字风格：按钮中的文字居中显示，快捷键中的字母为大写字母，括号与字母均未半角形式：如,“确定（Y）”1.2.1.3按钮排列顺序1.页面中包含“确定”“取消”按钮时，“确定”在左，“取消”在右显示；2.页面中包含“确定”“重置”“取消”按钮时，三个按钮的位置依次：确定、重置、取消；3.页面中包含“查询”“重置”，按钮的位置依次：查询、重置；4.页面中包含“新建”“修改”“删除”按钮时，按钮的顺序依次：新建、修改、删除；5.程序书写时，按钮间无间距，页面显示效果为一小空格。1.2.2图片按钮1.支持快捷键（ALT+大写字母）；2.图片按钮规范定义同“公用按钮”；3.特殊说明：图片形按钮出现位置不必居中显示，根据业务需要确定。1.2.3其他按钮1.“其他按钮”的规范要求与“公用按钮”一致；2.按钮中中文名称长度要求为不超过10个字（不包含快捷键）。1.3弹出提示信息规范1.3.1提示类型规范IE自带的提示框，不能使用；只能使用：模式对话框（自主开发）。1.3.2提示信息类型提示信息类型共3类：提示、确定、错误。1.3.2.1提示类型提示框1.系统弹出的提示信息对话框中，只存在一个“确定”按钮；2.提示操作出现错误，如：注册时填写年龄的格式不对，点保存时，将弹出的提示等。3.弹出提示信息对话框中：包含提示图标“！”；4.提示信息规范：“XXXXX,请确定关闭！”5.该提示框的标题为：提示信息。1.3.2.2确定类型提示框1.系统弹出的提示信息对话框中，包含“确定”“取消”两个按钮；2.触发条件：当删除或者修改某条信息时，系统给出的确定信息；3.弹出提示信息对话框中：包含提示图标“？”；4.提示信息规范：请确定进行XXXX操作？（提示信息中必须为业务级语言提示。）5.该提示框的标题：确定信息；1.3.2.3错误类型提示框1.系统弹出的错误提示信息对话框中，包含一个“确定”按钮；2.触发条件：系统发生冲突，存储过程报错，系统异常等情况弹出提示；3.弹出提示信息对话框中：包含有提示图标“X”4.提示信息规范：由于XXXXXXX错误，请重试或者与我们联系（其中“我们”为超链接形式，点击“我们”时直接打开outlook进入写邮件界面）。5.该提示框的标题：错误信息；1.3.2.4提示信息风格规范1.提示信息弹出位置：当前窗口位置居中；2.窗口大小：320*180px3.系统支持竖形滚动条，不允许出现水平滚动条。4.提示信息中文字左对齐。1.4页面布局规范1.图示显示功能： ：三角箭头向上，表示当前区域为展开状态，点击可收缩本区域； ：三角箭头向上，表示当前区域为展开状态，点击可收缩本区域；2.文本型录入字段的表示方式：字段名+文本输入框；3.当字段为必填项时，在录入框的后面标注红色的“*”号；4.页面中有必填项标注时，录入控件整体下方增加文字说明：“*”表示为必填项（本行文字单独成行居左显示）；5.布局最高目标：美观大方，具体情况根据实际业务需要设计。1.5菜单页面布局规范1.5.1页面布局页面主要包括主标题区、菜单区、操作区、版权说明区。1. 主标题区：根据用户权限显示相应的功能模块，以及其他功能的按钮。此外还应该依次显示公司名称，所属单位，登录人员以及当前日期。2. 菜单区：登录之后默认显示菜单区，且菜单区大小固定。3. 操作区：显示页面标签以及操作界面；4. 快捷操作区按钮：依次包括：帮助、全屏、平铺、重登录和退出。“帮助”中必须连接具体的帮助文档，点击“帮助”后，直接弹出当前标签的帮助文档。5. 版权说明区：显示在页面下方，格式为copyright版权所有 XXXXX;6. 菜单区与操作区中分栏线包含箭头：点击箭头显示或者隐藏菜单区，显示菜单区时箭头变为向右，隐藏菜单区时箭头显示向左。1.5.2其他规范1. 页面中字段统一 字段信息在菜单区域主菜单区显示应一致； 字段信息在菜单区与标签中显示应一致； 字段信息在不同页面应一致； 菜单节点名称不能重复；2. 页面中不显示多余信息，登录用户只能看到该用户拥有权限的菜单;无此权限的菜单不显示；3. 与业务流程相关的信息，必须采用业务表达语言描述，不允许以代码形式显示。4. 添加TIPS:数据列表中数据添加TIPS，以免数据太长时无法查看某条数据的全部内容。5. 菜单前的图标能直观的代表要完成的操作。6. 菜单前的图标不宜太大，与字高保持一直最好。7. 字体的大小要与界面的大小比例协调。8. 如果能给用户提供自定义界面风格更好，由用户自己选择颜色、字体等。9. 应当注意尽可能避免用户无意录入无效的数据。10. 对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。1.6标签规范1.选中的标签高亮显示，区别与其他标签。2.每个标签中显示关闭按钮“X”，点击“X”关闭当前标签页面。3.在当前激活的标签中点击“帮助”按钮，显示当前模块的帮助文档。1.7页面操作模型规范1.操作模式应以业务操作模式为标准。2.查询区查询条件排列方式：查询条件每行最多显示3列；3.数据列表对齐方式： 数字类型：右对齐 字符串：左对齐 日期：左对齐 列表标题：居中显示4.查询结果数据区中只允许出现竖形滚动条，除业务要求的特殊情况外，否则不应该出现水平滚动条；5.下拉框控件： 下拉列表中数据选项必须按照特定顺序排列，在无业务要求下按字母升序排列，数字应按从小到大进行排序； 所有下拉框控件，在无业务关联时，下拉框中无系统默认值； 所有下拉框列表中应包含空白（或者全部）选项；6.输入框控件：完成精细化输入框 控制输入N个X类型的字符； 输入框加入TIPS，显示其输入的说明。如：允许输入的字符数和类型等； 业务操作流程1） 当输入框中允许输入10个字符时，用户输入到第11个字符时，光标将自动移动到下一个焦点上；2） 当输入框中允许输入10个字符时，由于业务需要用户输入到第6个字符便完成操作，此时用户可以按【Enter】或者【table】键，光标将自动移动到下一个焦点上，当然在大文本的输入框中，Enter键位换行的功能；3） 当对输入框校验时，弹出的提示窗口被关闭后，光标焦点将自动停留在被校验的输入框上。7. 日期控件： 日期控件图标应放置在输入框之外，紧邻输入框显示； 日期控件只能包含四种类型：精确到日期、精确到秒、flex控件、windows控件； 查询条件中对于包含初始、截止日期成对出现的日期控件，开始日期默认显示为当前月的1号，结束日期显示为系统当前日期。 页面中包含单个日期控件，如：“操作日期”则无任何默认值。 日期控件的文本