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

1、界面规范目录、八 、亠前言 界面是软件与用户交互最直接的层， 界面的好坏决定用户对软件的第一印 象。设计良好的界面能够引导用户自己完成相应的操作， 起到向导作用。 介于见 龙在田软件工程研发中心内部管理系统， 以及外部网站的设计， 对于界面做了以 下几点要求：目的：1 、 以用户为中心。设计由用户控制的界面，而不是界面控制用户。2 、清楚一致的设计。所有界面的风格保持一致， 所有具有相同含义的术语 保持一致，且易于理解。3 、拥有良好的直觉特征。对用户所熟悉的现实世界中的事物进行抽象，来 给用户以暗示，尽快帮助用户学会如何操作软件。4 、较快的响应速度。5 、简单且美观。 本规范的主要设计为：

2、1 . 对于界面规范的介绍2 . 对于界面设计的细节部分做了充分的要求与说明1. 说明设计由用户控制的界面，而不是界面控制用户。清楚一致的设计，所有界面 的风格保持一致，所有具有相同含义的术语保持一致，且易于理解，拥有良好的直觉特征，对用户所熟悉的现实世界中的事物进行抽象， 来给以用户暗示和隐喻， 来帮助用户能迅速学会软件的使用， 整个系统能够有较快的响应速度，简单且美 观。界面规范是测试部门对于提交的项目的界面所作测试的依据。2. 细节2.1 UI色彩与字体1）导航栏的字体均为14px。2）新闻详细页面标题字体为16px，正文字体为14px，副栏字体12px，行间距150%3）按钮内字体为1

3、4px。4）grid view控件内的字大小统一用默认即 small即12px。5）新闻标题列表字体大小12px。6）超链接“返回上一级”字体大小14px。7）内部系统详细、编辑、高级查询、添加、登记、修改页面内的字体均为12px。8）时间字体大小均为12px。备注：外部主界面：文字大小（px）字体颜色"见足在田*翼披简介14宋体#82c7e7中心公貴16宋体#132ad7更多”12宋体#000000友情镀接14宋体#132ad7洛阳丈克科袪有限鱼司14宋体#000000|版权所有tm见龙在田软ft工趨曲荒申心12宋体# 939393内部管理主界面：文字大小（px）字体颜色留售0乗新

4、14宋体黑1个人兴去机会J并不可怕12.应用14 #568fb31 r . o j . 4 r 丄0乙輩了乙34.黑八、我的菜单（上班，下班）14黑八、覆內任务（背景颜色#ebf7fd）14 2.2布局与间距1）查询时间文本框100px，高22px。2）下拉列表高22px （宽根据字数自动控制）。3）grid view 控件宽628px，特殊地方需要修改详情请见 2.6。4）两个字button高度22px，宽60px，多字Button根据字数系统自动调节宽 度，5）需填写内容的文本框宽140px，高22px。6）Grid view的内容（不包括“姓名”、“工号”标识的那一行）满 10行自动分页

5、。不满10行的显示分页控件。（备注：权限列表：FunctionList.aspx，备忘录： MainMemos.aspx，给用户组分配权限：Functionlmpower.aspx ，给用户组分配用户：Permissio nAssig nmen t.aspx 不需要分页）7）如果新闻中插入图片，图片高300,宽60%与上下文相距5px，新闻内容行 间距150%8）Txtbox 高 120，宽 520。9）Txtarea 高 320，宽 720。10）以下三种情况为按钮在除了 grid view 内的页面内。a）两个按钮在一行，按钮相距123px，居中。b）三个按钮在一行，按钮相距 40px，居

6、中。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 超链接以特殊编码的文本或图形

7、的形式来实现链接， 如果单击该链接， 则相当于指 示浏览器移至同一网页内的某个位置， 或打开一个新的网页， 或打开某一个新的 WW网站中的网页时使用超链接。当需要实现链接并需用易懂的符号表示操作时，请使用动作按钮。 用于激活一些功能时，请使用动作按钮。2.5 分页控件采用 yahoo style 格式，左右居中，始终与上一控件相距 60px。 Grid view 的内容（不包括“姓名”、“工号”标识的那一行）满 10行自动分页，不满 10 行的显示分页控件。（备注：权限列表： FunctionList.aspx ，备忘录：MainMemos.aspx给用户组分配权限：Functionlmpow

8、er.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 v

9、iew 的第一行 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）给出限制提示项标识符*红色，标识放在文本框的后边，验证提示内容颜色

10、为宋体红色，12px，遵循的原则是验证提示内容尽量简短。2）若为必填项，在文本框后加“ * ”，并在页面的第一 行给予注释“ ”，红色，12PX。3）提示信息：“成功！”、“失败！ ”。详情请 见备注。4）提示时机：一般情况下按总体从上到下，同时行间 从左到右的优先级着一单独显示。D页面跳转提 示提示添加成功，超链接：“继续添加”or “返回管理页E不提示不与提示事件：封存、查询、确定、取消、保存、重置、添加、生成报表、登记设备 信息、删除、上传、分配、更新、取消、转发、上班下班、密码有误、列表为空、 时间前后错误、格式错误，系统繁忙。备注：a）上班：“签到成功，朋友努力工作吧！ ”。b）下班

11、：“签退成功，好好休息，明天见！”c）为空：grid view 内列表为空的提示信息统一为12px，red，样式“ *提 示信息”，居表格中间，表格高170px，宽628，提示信息距表格80px， 左右居中。“ *无查询结果！”形如：d）密码有误：“账号不存在或密码错误，请重输。”e）时间前后错误：“起始时间应该小于结束时间！”f）页面提示：i. “成功！”、“失败！”，所在位置紧挨上一控件页面居中 如图： 3J卜畑列DI194002192a"姜4gg斗53rwi700346M7A29号右占34口昱|诵认發耳格式错误：*应该为，12px，red。在文本框后。g）系统忙：服务器繁忙，请

12、稍后重试!2.8 窗口单击新闻、通知、中心日志标题，在弹出新窗口上显示新闻、通知、中心日 志内容。2.9 日期格式1) 日期显示由控件决定，格式统一为 ：1988-8-24 00:00:002) 使用日期控件，则不可手工录入。3) 对于日期段，需在截止日期小于开始日期时给出提示，详情请参照 2.4 验 证信息提示。2.10 特殊字符输入区域输入特殊字符，插入数据库时不出错或提示不允许输入特殊字符。特殊字符包括：= ' $ % A % ¥ & # 等。2.11 英文输入英文输入不区分大小写，不可输入汉字、数字及特殊字符。2.12 数值字段只能输入+ , , 09及功能键(Backspace光标)。数值不能为负数。2.13 字符字段字符字段中只能输入字符，非法字符如单引号、数字均不可输入2.14 单行文本框长度合适，可以容纳相应文字，但不能超过输入框允许输入的最大字段长度， 将可以输入的最大字符数（*加宋体红色，12px ）标在旁边单行文本框中当输入 的字符超过一定长度时再输入无效。查询时间文本框100px 。需填写内容的文本框宽140px，高22px。2.15密码输入程序中应给出文字说明密码的可输入长度，4 8个。2.16鼠标系统正常