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

1、 见龙在田田软件工程程研发中中心界面规范范 目录TOC o 1-5 h z u HYPERLINK l _Toc271016317 前言 PAGEREF _Toc271016317 h 33 HYPERLINK l _Toc271016318 1. 说说明 PAGEREF _Toc271016318 h 4 HYPERLINK l _Toc271016319 2. 细细节 PAGEREF _Toc271016319 h 4 HYPERLINK l _Toc271016320 2.1 UII色彩与与字体 PAGEREF _Toc271016320 h 4 HYPERLINK l _Toc2710

2、16321 备注： PAGEREF _Toc271016321 h 5 HYPERLINK l _Toc271016322 外部主主界面 PAGEREF _Toc271016322 h 5 HYPERLINK l _Toc271016323 内部管管理主界界面 PAGEREF _Toc271016323 h 5 HYPERLINK l _Toc271016324 2.2 布局局与间距距 PAGEREF _Toc271016324 h 6 HYPERLINK l _Toc271016325 2.3 按钮钮 PAGEREF _Toc271016325 h 6 HYPERLINK l _Toc271

3、016326 2.4超超链接 PAGEREF _Toc271016326 h 7 HYPERLINK l _Toc271016327 2.5分分页控件件 PAGEREF _Toc271016327 h 7 HYPERLINK l _Toc271016328 2.6 griid vvieww PAGEREF _Toc271016328 h 7 HYPERLINK l _Toc271016329 2.7 验证信信息提示示 PAGEREF _Toc271016329 h 7 HYPERLINK l _Toc271016330 2.8 窗口 PAGEREF _Toc271016330 h 9 HYPE

4、RLINK l _Toc271016331 2.9日日期格式式 PAGEREF _Toc271016331 h 9 HYPERLINK l _Toc271016332 2.100特殊字字符 PAGEREF _Toc271016332 h 10 HYPERLINK l _Toc271016333 2.111 英文文输入 PAGEREF _Toc271016333 h 10 HYPERLINK l _Toc271016334 2.122 数值值字段 PAGEREF _Toc271016334 h 10 HYPERLINK l _Toc271016335 2.133字符字字段 PAGEREF _To

5、c271016335 h 10 HYPERLINK l _Toc271016336 2.144单行文文本框 PAGEREF _Toc271016336 h 10 HYPERLINK l _Toc271016337 2.155 密码码输入 PAGEREF _Toc271016337 h 10 HYPERLINK l _Toc271016338 2.166鼠标 PAGEREF _Toc271016338 h 11 HYPERLINK l _Toc271016339 2.177 光光标定位位 PAGEREF _Toc271016339 h 11 HYPERLINK l _Toc271016340 2

6、.188 TTAB键键 PAGEREF _Toc271016340 h 11前言界面是软软件与用用户交互互最直接接的层，界面的的好坏决决定用户户对软件件的第一一印象。设计良良好的界界面能够够引导用用户自己己完成相相应的操操作，起起到向导导作用。介于见见龙在田田软件工工程研发发中心内内部管理理系统，以及外外部网站站的设计计，对于于界面做了以以下几点点要求：目的：1、以以用户为为中心。设计由由用户控控制的界界面，而而不是界界面控制制用户。 2、清楚楚一致的的设计。所有界界面的风风格保持持一致，所有具具有相同同含义的的术语保保持一致致，且易易于理解解。3、拥有有良好的的直觉特特征。对对用户所所熟悉的

7、的现实世世界中的的事物进进行抽象象，来给用户户以暗示示，尽快快帮助用用户学会会如何操操作软件件。4、较较快的响响应速度度。5、简简单且美美观。 本规范的的主要设设计为：1 .对对于界面面规范的的介绍2 .对对于界面面设计的的细节部部分做了了充分的的要求与与说明1. 说说明设计由用用户控制制的界面面，而不不是界面面控制用用户。清清楚一致致的设计计，所有有界面的的风格保保持一致致，所有有具有相相同含义义的术语语保持一一致，且且易于理理解，拥拥有良好好的直觉觉特征，对用户所所熟悉的的现实世世界中的的事物进进行抽象象，来给以用户暗暗示和隐隐喻，来帮助助用户能能迅速学学会软件件的使用用，整个个系统能能够

8、有较较快的响响应速度度，简单单且美观观。界面面规范是是测试部部门对于于提交的的项目的的界面所所作测试试的依据据。2. 细细节2.1 UII色彩与与字体 导航栏的的字体均为14ppx。新闻详细细页面标标题字体体为166px，正文字字体为114pxx，副栏字字体122px，行间距距1500%。按钮内字字体为114pxx。gridd viiew控控件内的的字大小小统一用用默认即即smaall即即12ppx。新闻标题题列表字字体大小小12ppx。超链接“返回上上一级”字体大大小144px。内部系统统详细、编辑、高级查查询、添添加、登登记、修修改页面面内的字字体均为为12ppx。时间字体体大小均均为12

9、2px。备注：外部主界界面：文字大小（ppx）字体颜色14宋体#82cc7e7716宋体#1322ad7712宋体#0000000014宋体#1322ad7714宋体#0000000012宋体# 93393993内部管理理主界面面：文字大小（ppx）字体颜色14宋体黑12.14#5688fb3334.黑 (上班班，下班班)14黑(背景颜颜色#ebff7fdd)142.2 布局局与间距距查询时间间文本框框 1000pxx ，高高22ppx。下拉列表表高222px（宽根据据字数自动动控制）。gridd viiew控控件宽6288px，特特殊地方方需要修修改详情情请见22.6。两个字bbuttton

10、 高度222px，宽600px，多字BButtton根根据字数数系统自自动调节节宽度，需填写内内容的文文本框宽宽1400px ，高22ppx。Gridd viiew的的内容（不包括括“姓名”、“工号号”标识识的那一一行）满10行自自动分页页。不满满10行的的显示分分页控件件。（备备注：权权限列表表：FuuncttionnLisst.aaspxx，备忘录录： MMainnMemmos.asppx，给用户户组分配配权限：FunnctiionIImpoowerr.asspx，给用户户组分配配用户：PerrmisssioonAsssiggnmeent.asppx 不需要要分页）如果新闻闻中插入入图片，

11、图片高高3000，宽600%。与与上下文文相距55px，新闻内内容行间间距1550%。Txtbbox高高1200，宽5220。Txtaareaa高3200，宽7220。以下三种种情况为为按钮在在除了ggridd viiew 内的页页面内。两个按钮钮在一行行，按钮钮相距1123ppx，居居中。三个按钮钮在一行行，按钮钮相距440pxx，居中中。按钮与上上一行控控件相距距60ppx。若若按钮上上一控件件为分页页控件，与分页页控件相相距5ppx。2.3 按钮钮 1）按钮风风格相同同， 所有的的确定，添加，取消，编辑，查询等等两个字字的按钮钮的大小小均为宽宽60像素素，高222像素，字字体144px。

12、三个以以上字段段的按钮钮根据字字数自动动确定按按钮宽度度。2）grrid vieew 内内的按钮钮位置请请参照22.2原原图的坐坐标。以下三种种情况为为按钮在在除了ggridd viiew 内的页页面内。3）两个个按钮在在一行，按钮相相距1223pxx，居中中。4）三个个按钮在在一行，按钮相相距400px，居中。5）按钮钮与上一一行控件件相距660pxx。若按按钮上一一控件为为分页控控件，与与分页控控件相距距5pxx。2.4超超链接以特殊编编码的文文本或图图形的形形式来实实现链接接，如果果单击该该链接，则相当当于指示示浏览器器移至同同一网页页内的某某个位置置，或打打开一个个新的网网页，或或打开

13、某某一个新新的WWWW网站站中的网网页时使使用超链链接。当需要实实现链接接并需用易懂懂的符号号表示操操作时，请使用用动作按按钮。用于激活活一些功功能时，请使用用动作按按钮。2.5分分页控件件采用yaahooo sttylee格式，左右居居中，始始终与上上一控件件相距660pxx。Gridd viiew的的内容（不包括括“姓名名”、“工号”标识的的那一行行）满110行自自动分页页，不满满10行的的显示分分页控件件。（备备注：权权限列表表：FuuncttionnLisst.aaspxx，备忘录录： MMainnMemmos.asppx，给用户户组分配配权限：FunnctiionIImpoowerr

14、.asspx，给用户户组分配配用户：PerrmisssioonAsssiggnmeent.asppx，部部门维护护：AddminnMaiin.aaspxx不需要要添加分分页控件件。）2.6 griid vviewwgridd viiew控控件采用用自动套套用格式式：传统统型，wwidtth 6628ppx，rowwstyyle-higght 默认222px，把grrid vieew的第一一行的字字改为黑黑色，第第一行的的背景改改为白色色，字一一般是默默认即ssmalll，加加粗,ggriddlinne为 verrticcal。若没有查查询那一一行，ggridd viiew控控件采用用自动套套用

15、格式式：传统统型，wwidtth 6628ppx，rowwstyyle-higght默默认222px，把grrid vieew的第第一行rrowsstylle-hhighht 设设置为335pxx，颜色色为#72bbbecc，字改改为黑色色，加粗粗，字一一般是默默认即ssmall,grridllinee为 veertiicall l。Gridd viiew的的内容（不包括括“姓名名”、“工号”标识的的那一行行）满110行自自动分页页。2.7 验证信息息提示分级：A窗口提示示禁止操操作窗口提示示：禁止止提示。“禁止执执行此操操作！”。B窗口提示示窗口大小小是根据据字段确确定，统统一用116字段段

16、，如不不够166字段请请用空格格补足。文字大大小:112pxx。提示信息息：“确确定此此信息吗吗？”。详情请请见备注注。C当前页面面提示给出限制制提示项项标识符*红色，标识放放在文本本框的后后边，验验证提示示内容颜颜色为宋宋体红色色，122px，遵循的的原则是是验证提提示内容容尽量简简短。若为必填填项，在在文本框框后加“*”，并在在页面的的第一行行给予注注释“ ”，红色色，122px。提示信息息：“成功！”、“失败败！”。详情请请见备注注。提示时机机：一般般情况下下按总体体从上到到下，同同时行间间从左到到右的优优先级着着一单独独显示。D页面跳转转提示提示添加加成功，超链接接：“继继续添加加”o

17、rr“返回回管理页页面”。E不提示不与提示示事件：封封存、查查询、确确定、取取消、保保存、重重置、添添加、生生成报表表、登记记设备信信息、删删除、上上传、分分配、更更新、取取消、转转发、上上班下班班、密码码有误、列表为为空、时时间前后后错误、格式错错误，系系统繁忙忙。备注：上班：“签到成成功，朋朋友努力力工作吧吧！”。下班：“签退成成功，好好好休息息，明天天见！”为空：ggridd viiew内内列表为为空的提提示信息息统一为为12ppx，redd，样式式“*提示信信息”，居表格格中间，表格高高1700px，宽6228，提提示信息息距表格格80ppx，左左右居中中。“*无查询结结果！”形如：密

18、码有误误：“账账号不存存在或密密码错误误，请重重输。”时间前后后错误：“起始始时间应应该小于结结束时间间！”页面提示示：“成功功！”、“失失败！”，所在在位置紧紧挨上一一控件页页面居中中。如图图：格式错误误：“*应该该为”，122px，redd。在文文本框后后。系统忙：服务器器繁忙，请稍后后重试！2.8 窗口单击新闻闻、通知知、中心心日志标标题，在在弹出新新窗口上上显示新新闻、通通知、中中心日志志内容。2.9日日期格式式 1）日期期显示由由控件决决定，格格式统一一为：19888-88-244 000:000:000 2）使用用日期控控件，则则不可手手工录入入。 3）对于于日期段段，需在在截止日日期小于于开始日日期时给给出提示示，详情情请参照照2.44验证信信息提示示。2.100特殊字字符输入区域域输入特特殊字符符，插入入数据库库时不出出错或提提示不允允许输入入特殊字字符。特殊字符符包括：“=$%￥&#等 。2.111 英文输输入 英文输