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

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

2、321 备注： PAGEREF _Toc271016321 h 55 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 _Toc271016

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

4、NK l _Toc271016331 2.9日期期格式 PAGEREF _Toc271016331 h 9 HYPERLINK l _Toc271016332 2.10特特殊字符符 PAGEREF _Toc271016332 h 10 HYPERLINK l _Toc271016333 2.11 英文输输入 PAGEREF _Toc271016333 h 10 HYPERLINK l _Toc271016334 2.12 数值字字段 PAGEREF _Toc271016334 h 10 HYPERLINK l _Toc271016335 2.13字字符字段段 PAGEREF _Toc27101

5、6335 h 10 HYPERLINK l _Toc271016336 2.14单单行文本本框 PAGEREF _Toc271016336 h 10 HYPERLINK l _Toc271016337 2.15 密码输输入 PAGEREF _Toc271016337 h 10 HYPERLINK l _Toc271016338 2.16鼠鼠标 PAGEREF _Toc271016338 h 11 HYPERLINK l _Toc271016339 2.17 光标标定位 PAGEREF _Toc271016339 h 11 HYPERLINK l _Toc271016340 2.18 TAAB键

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

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

8、门对于提交的项目的界面所作测试的依据。2. 细节节2.1 UI色彩彩与字体体 导航栏的字字体均为14ppx。新闻详细页页面标题题字体为为16ppx，正正文字体体为144px，副栏字字体122px，行间距距1500%。按钮内字体体为144px。grid vieew控件件内的字字大小统统一用默默认即ssmalll即12ppx。新闻标题列列表字体体大小112pxx。超链接“返返回上一一级”字字体大小小14ppx。内部系统详详细、编编辑、高高级查询询、添加加、登记记、修改改页面内内的字体体均为122px。时间字体大大小均为为12ppx。备注：外部主界面面：文字大小（pxx）字体颜色14宋体#82c77

9、e716宋体#132aad712宋体#000000014宋体#132aad714宋体#000000012宋体# 93993933内部管理主主界面：文字大小（pxx）字体颜色14宋体黑12.14#568ffb334.黑 (上班，下下班)14黑(背景颜色色#ebff7fdd)142.2 布局与与间距查询时间文文本框 1000px ，高222px。下拉列表高高22ppx（宽宽根据字字数自动动控制）。grid vieew控件件宽6288px，特特殊地方方需要修修改详情情请见22.6。两个字buuttoon 高高度222px，宽宽60ppx，多多字Buuttoon根据据字数系系统自动动调节宽度度，需填写

10、内容容的文本本框宽1140ppx ，高22ppx。Grid vieew的内内容（不不包括“姓名”、“工号号”标识识的那一一行）满10行自自动分页页。不满满10行的的显示分分页控件件。（备备注：权权限列表表：FuuncttionnLisst.aaspxx，备忘录录： MMainnMemmos.asppx，给用户户组分配配权限：FunnctiionIImpoowerr.asspx，给给用户组组分配用用户：PPermmisssionnAsssignnmennt.aaspxx 不需要要分页）如果新闻中中插入图图片，图图片高3300，宽宽60%。与上上下文相相距5ppx，新新闻内容容行间距距1500%。

11、Txtboox高1200，宽5220。Txtarrea高高3200，宽7220。以下三种情情况为按按钮在除除了grrid vieew 内内的页面面内。两个按钮在在一行，按按钮相距距1233px，居居中。三个按钮在在一行，按按钮相距距40ppx，居居中。按钮与上一一行控件件相距660pxx。若按按钮上一一控件为为分页控控件，与与分页控控件相距距5pxx。2.3 按钮 1）按按钮风格格相同， 所有的确定，添加，取消，编辑，查询等两个字的按钮的大小均为宽60像素，高22像素，字体14px。三个以上字段的按钮根据字数自动确定按钮宽度。2）griid vvieww 内的的按钮位位置请参参照2.2原图图的

12、坐标标。以下三种情情况为按按钮在除除了grrid vieew 内内的页面面内。3）两个按按钮在一一行，按按钮相距距1233px，居居中。4）三个按按钮在一一行，按按钮相距距40ppx，居居中。5）按钮与与上一行行控件相相距600px。若若按钮上上一控件件为分页页控件，与与分页控控件相距距5pxx。2.4超链链接以特殊编码码的文本本或图形形的形式式来实现现链接，如如果单击击该链接接，则相相当于指指示浏览览器移至至同一网网页内的的某个位位置，或或打开一一个新的的网页，或或打开某某一个新新的WWWW网站站中的网网页时使使用超链链接。当需要实现现链接并并需用易懂懂的符号号表示操操作时，请请使用动动作按

13、钮钮。用于激活一一些功能能时，请请使用动动作按钮钮。2.5分页页控件采用yahhoo styyle格格式，左左右居中中，始终终与上一一控件相相距600px。Gridd viiew的的内容（不不包括“姓姓名”、“工工号”标标识的那那一行）满满10行自自动分页页，不满满10行的的显示分分页控件件。（备备注：权权限列表表：FuuncttionnLisst.aaspxx，备忘录录： MMainnMemmos.asppx，给用户户组分配配权限：FunnctiionIImpoowerr.asspx，给给用户组组分配用用户：PPermmisssionnAsssignnmennt.aaspxx，部门门维护：A

14、dmminMMainn.asspx不不需要添添加分页页控件。）2.6 ggridd viiewgrid vieew控件件采用自自动套用用格式：传统型型，wiidthh 6228pxx，rowwstyyle-higght 默认222px，把把griid vvieww的第一一行的字字改为黑黑色，第第一行的的背景改改为白色色，字一一般是默默认即ssmalll，加加粗,ggriddlinne为 verrticcal。若没有查询询那一行行，grrid vieew控件件采用自自动套用用格式：传统型型，wiidthh 6228pxx，rowwstyyle-higght默默认222px，把把griid vvi

15、eww的第一一行roowsttylee-hiightt 设置置为355px，颜颜色为#72bbbecc，字改改为黑色色，加粗粗，字一一般是默默认即ssmall,grridllinee为 veertiicall l。Grid vieew的内内容（不不包括“姓姓名”、“工工号”标标识的那那一行）满满10行自自动分页页。2.7 验验证信息息提示分级：A窗口提示禁禁止操作作窗口提示：禁止提提示。“禁止执行行此操作作！”。B窗口提示窗口大小是是根据字字段确定定，统一一用166字段，如如不够116字段段请用空空格补足足。文字字大小:12ppx。提示信息：“确定定此信信息吗？”。详情请请见备注注。C当前页面

16、提提示给出限制提提示项标标识符*红色，标标识放在在文本框框的后边边，验证证提示内内容颜色色为宋体体红色，12px，遵循的原则是验证提示内容尽量简短。若为必填项项，在文文本框后后加“*”，并在在页面的的第一行行给予注注释“ ”，红色色，122px。提示信息：“成成功！”、“失败！”。详情请请见备注注。提示时机：一般情情况下按按总体从从上到下下，同时时行间从从左到右右的优先先级着一一单独显示示。D页面跳转提提示提示添加成成功，超超链接：“继续续添加”or“返回管理页面”。E不提示不与提示事件：封存存、查询询、确定定、取消消、保存存、重置置、添加加、生成成报表、登登记设备备信息、删删除、上上传、分分

17、配、更更新、取取消、转转发、上上班下班班、密码码有误、列列表为空空、时间间前后错错误、格格式错误误，系统统繁忙。备注：上班：“签签到成功功，朋友友努力工工作吧！”。下班：“签签退成功功，好好好休息，明明天见！”为空：grrid vieew内列列表为空空的提示示信息统统一为112pxx，redd，样式式“*提示信信息”，居居表格中中间，表表格高1170ppx，宽宽6288，提示示信息距距表格880pxx，左右右居中。“*无查询结果！”形如：密码有误：“账号号不存在在或密码码错误，请请重输。”时间前后错错误：“起起始时间间应该小于结结束时间间！”页面提示：“成功！”、“失败！”，所所在位置置紧挨上

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