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

1、1 / 10见龙在田软件工程研发中心界面规范目录前言 .31.说明 .42 / 102.细节 .42.1UI色彩与字体 .4备注： .4外部主界面 .4内部管理主界面 .52.2布局与间距 .52.3按钮 .62.4超链接 .62.5分页控件 .62.6GRID VIEW.72.7验证信息提示 .72.8窗口 .92.9日期格式 .92.10特殊字符 .92.11英文输入 .92.12数值字段 .92.13字符字段 .92.14单行文本框 .92.15密码输入 .102.16鼠标. 102.17光标定位 .102.18 TAB键. 103 / 10、八 、亠前言界面是软件与用户交互最直接的层，

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

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

4、即small即12px。5）新闻标题列表字体大小12px。6）超链接“返回上一级”字体大小14px。7）内部系统详细、编辑、高级查询、添加、登记、修改页面内的字体均为12px。8）时间字体大小均为12px。备注：外部主界面：文字大小（px）字体颜色戯见龙在0D勲故简介14宋体#82c7e7中心公告16宋体#132ad712宋体#000000友14宋体#132ad7洛阳艾克科抹台限於司14宋体#0000005 / 10槪根所祈匕潯眶见龙花田软髀理匚；：躱屮c12宋体#939393内部管理主界面：文字大小（px）字体颜色留言。条新14宋体黑1 个人失去机會并不町怕112.陆用14#568fb31

5、C * O 4 .Ar I丄D必迁m34.黑八、（上班，下班）14黑八、拢的ft务（背景颜色#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行自动分页。不满10行的显示分页控件。（备注：权限列表：FunctionList.aspx

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

7、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.a