见龙在田研发中心界面规范.docx

见龙在田软件工程研发中心界面规范 目录前言31. 说明42. 细节42.1 UI色彩与字体4备注：5l外部主界面5l内部管理主界面52.2 布局与间距62.3 按钮62.4超链接72.5分页控件72.6 grid view72.7 验证信息提示72.8 窗口92.9日期格式92.10特殊字符102.11 英文输入102.12 数值字段102.13字符字段102.14单行文本框102.15 密码输入102.16鼠    标112.17 光标定位112.18 TAB键11前言界面是软件与用户交互最直接的层，界面的好坏决定用户对软件的第一印象。设计良好的界面能够引导用户自己完成相应的操作，起到向导作用。介于见龙在田软件工程研发中心内部管理系统，以及外部网站的设计，对于界面做了以下几点要求：目的：1、 以用户为中心。设计由用户控制的界面，而不是界面控制用户。 2、清楚一致的设计。所有界面的风格保持一致，所有具有相同含义的术语保持一致，且易于理解。3、拥有良好的直觉特征。对用户所熟悉的现实世界中的事物进行抽象，来给用户以暗示，尽快帮助用户学会如何操作软件。 4、较快的响应速度。 5、简单且美观。 本规范的主要设计为：1 .对于界面规范的介绍2 .对于界面设计的细节部分做了充分的要求与说明1. 说明设计由用户控制的界面，而不是界面控制用户。清楚一致的设计，所有界面的风格保持一致，所有具有相同含义的术语保持一致，且易于理解，拥有良好的直觉特征，对用户所熟悉的现实世界中的事物进行抽象，来给以用户暗示和隐喻，来帮助用户能迅速学会软件的使用，整个系统能够有较快的响应速度，简单且美观。界面规范是测试部门对于提交的项目的界面所作测试的依据。2. 细节2.1 UI色彩与字体 1) 导航栏的字体均为14px。2) 新闻详细页面标题字体为16px，正文字体为14px，副栏字体12px，行间距150%。3) 按钮内字体为14px。4) grid view控件内的字大小统一用默认即small即12px。5) 新闻标题列表字体大小12px。6) 超链接“返回上一级”字体大小14px。7) 内部系统详细、编辑、高级查询、添加、登记、修改页面内的字体均为12px。8) 时间字体大小均为12px。备注：l 外部主界面：文字大小（px）字体颜色14宋体#82c7e716宋体#132ad712宋体#00000014宋体#132ad714宋体#00000012宋体# 939393l 内部管理主界面：文字大小（px）字体颜色14宋体黑12.14#568fb334.黑 (上班，下班)14黑(背景颜色#ebf7fd)142.2 布局与间距1) 查询时间文本框 100px ，高22px。2) 下拉列表高22px（宽根据字数自动控制）。3) grid view控件宽628px，特殊地方需要修改详情请见2.6。4) 两个字button 高度22px，宽60px，多字Button根据字数系统自动调节宽度，5) 需填写内容的文本框宽140px ，高22px。6) Grid view的内容（不包括“姓名”、“工号”标识的那一行）满10行自动分页。不满10行的显示分页控件。（备注：权限列表：FunctionList.aspx，备忘录： MainMemos.aspx，给用户组分配权限：FunctionImpower.aspx，给用户组分配用户：PermissionAssignment.aspx 不需要分页）7) 如果新闻中插入图片，图片高300，宽60%。与上下文相距5px，新闻内容行间距150%。8) Txtbox高120，宽520。9) Txtarea高320，宽720。10) 以下三种情况为按钮在除了grid view 内的页面内。a) 两个按钮在一行，按钮相距123px，居中。b) 三个按钮在一行，按钮相距40px，居中。c) 按钮与上一行控件相距60px。若按钮上一控件为分页控件，与分页控件相距5px。2.3 按钮 1）  按钮风格相同， 所有的确定，添加，取消，编辑，查询等两个字的按钮的大小均为宽60像素，高22像素，字体14px。三个以上字段的按钮根据字数自动确定按钮宽度。2）grid view 内的按钮位置请参照2.2原图的坐标。以下三种情况为按钮在除了grid view 内的页面内。3）两个按钮在一行，按钮相距123px，居中。4）三个按钮在一行，按钮相距40px，居中。5）按钮与上一行控件相距60px。若按钮上一控件为分页控件，与分页控件相距5px。2.4超链接以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页时使用超链接。当需要实现链接并需用易懂的符号表示操作时，请使用动作按钮。用于激活一些功能时，请使用动作按钮。2.5分页控件采用yahoo style格式，左右居中，始终与上一控件相距60px。Grid view的内容（不包括“姓名”、“工号”标识的那一行）满10行自动分页，不满10行的显示分页控件。（备注：权限列表：FunctionList.aspx，备忘录： MainMemos.aspx，给用户组分配权限：FunctionImpower.aspx，给用户组分配用户：PermissionAssignment.aspx，部门维护：AdminMain.aspx不需要添加分页控件。）2.6 grid view1) grid view控件采用自动套用格式：传统型，width 628px，rowstyle-hight 默认22px，把grid view的第一行的字改为黑色，第一行的背景改为白色，字一般是默认即small，加粗,gridline为 vertical。2) 若没有查询那一行，grid view控件采用自动套用格式：传统型，width 628px，rowstyle-hight默认22px，把grid view的第一行rowstyle-hight 设置为35px，颜色为#72bbec，字改为黑色，加粗，字一般是默认即smal,gridline为 vertical l。3) Grid view的内容（不包括“姓名”、“工号”标识的那一行）满10行自动分页。2.7 验证信息提示分级：A窗口提示禁止操作1) 窗口提示：禁止提示。2) “禁止执行此操作！”。B窗口提示1) 窗口大小是根据字段确定，统一用16字段，如不够16字段请用空格补足。文字大小:12px。2) 提示信息：“确定此信息吗？”。详情请见备注。C当前页面提示1) 给出限制提示项标识符*红色，标识放在文本框的后边，验证提示内容颜色为宋体红色，12px，遵循的原则是验证提示内容尽量简短。2) 若为必填项，在文本框后加“*”，并在页面的第一行给予注释“ ”，红色，12px。3) 提示信息：“成功！”、“失败！”。详情请见备注。4) 提示时机：一般情况下按总体从上到下，同时行间从左到右的优先级着一单独显示。D页面跳转提示提示添加成功，超链接：“继续添加”or“返回管理页面”。E不提示不与提示事件：封存、查询、确定、取消、保存、重置、添加、生成报表、登记设备信息、删除、上传、分配、更新、取消、转发、上班下班、密码有误、列表为空、时间前后错误、格式错误，系统繁忙。备注：a) 上班：“签到成功，朋友努力工作吧！”。b) 下班：“签退成功，好好休息，明天见！”c) 为空：grid view内列表为空的提示信息统一为12px，red，样式“*提示信息”，居表格中间，表格高170px，宽628，提示信息距表格80px，左右居中。“*无查询结果！”形如：d) 密码有误：“账号不存在或密码错误，请重输。”e) 时间前后错误：“起始时间应该小于结束时间！”f) 页面提示：i. “成功！”、“失败！”，所在位置紧挨上一控件页面居中。如图：ii. 格式错误：“*应该为”，12px，red。在文本框后。g) 系统忙：服务器繁忙，请稍后重试！2.8 窗口单击新闻、通知、中心日志标题，在弹出新窗口上显示新闻、通知、中心日志内容。2.9日期格式   1）  日期显示由控件决定，格式统一为 ：1988-8-24 00:00:00 2）  使用日期控件，则不可手工录入。 3）  对于日期段，需在截止日期小于开始日期时给出提示，详情请参照2.4验证信息提示。2.10特殊字符输入区域输入特殊字符，插入数据库时不出错或提示不允许输入特殊字符。特殊字符包括：  “ =        $  %    % ￥ & #  等 。2.11 英文输入 英文输入不区分大小写，不可输入汉字、数字及特殊字符。2.12 数值字段   只能输入+ ， ，09及功能键(BackSpace 光标) 。数值不能为负数。2.13字符字段   字符字段中只能输入字符，非法字符如单引号、数字均不可输入   2.14单行文本框       长度合适，可以容纳相应文字，但不能超过输入框允许输入的最大字段长度，将可以输入的最大字符数（*加宋体红色，12px）标在旁边单行文本框中当输入的字符超过一定长度时再输入无效。 查询时间文本框 100px 。需填写内容的文本框宽140px ，高22px。2.15 密码输入 程序中应给出文字说明密码的可输入长度， 48个。 2.16鼠    标 系统正常情况下，鼠标显示箭头。当鼠标放置在超链接区域，鼠标显示手状，形如：  。2.17 光标定位  1）  打开新增（修改）页面时，光标初始定位在第一个待输入的文本区 2）  用户重新输入时，光标默认focus在出错的输入区，并高亮全选该错误输入。2.18 TAB键 1） 界面支持键盘自动浏览按钮功能。即TAB的自动切换功能。 2） Tab键的顺序与控件排列顺序要一致，一般情况下总体从上到下，同时行间从左到右的方式。