《软件界面规范V1.0.docxVIP

XXX信息技术标准/运作程序 编号： 适用范围：XXX软件开发处版本： 1.0 密 级： 无XXX集团软件界面规范版本编 写审 查会 审审 核批 准生效时间1.0主办单位：XXX集团信息办审查发送单位： 此文件属XXX有限公司所有，未经许可，不得以任何方式外传修改记录页版本日期章节页码修改范围及依据1.02011-12-30 首次发布目录1前言41.1编写目的41.2适应环境和对象41.3基本内容42界面设计准则42.1基本准则43目录结构及命名规则53.1目录结构规范53.2文件和目录命名规范63.3图片的命名规范63.4图片的格式选择73.5样式的命名规范73.6其它文件命名规范134界面实施细则134.1颜色134.2字体134.3文字表达164.4控件风格174.4.1文本输入框174.4.2按钮194.4.3单选284.4.4复选284.4.5GridView284.5界面布局294.5.1总体准则294.5.2界面总体布局304.5.3TOP-BANNER页面布局314.5.4LEFT-MENU页面布局324.5.5RIGHT-BODY页面布局334.5.6其它内容355UI界面标准规范管理395.1UI界面标准规范的维护395.2UI界面标准规范的执行396附录1：浏览器兼容问题与解决方案406.1标签样式重置406.2double-margin bug416.3清除浮动436.4img下的留白456.5非链接的hover状态456.6div 的垂直居中问题466.7如何对齐文本、图片与文本输入框466.8png格式的图片透明区域在IE6下显示为灰色476.9需要注意的477附录2：名词解释47前言编写目的通过此规范的推广以统一新开发系统的界面风格，提高团队的工作效率，提高用户满意度，同时满足软件产品化的需要。适应环境和对象本规范适用基于浏览器的B/S版软件项目开发工作。适用对象为开发编码人员、UI设计人员、界面测试人员等。开发流程中的模版页面编写和模板文件套用工作必须遵照此规范执行。基本内容本规范从目录结构及命名规则、界面设计实施细则两大方面对系统界面设计规范进行说明。旨在规范界面设计过程中，目录结构的建立，目录及文件的命名，图片及样式的命名，以及从颜色、字体、控件风格、位置编排等方面来规范界面的整体风格和总体布局。最后对UI界面标准规范管理和浏览器兼容问题与解决方案进行说明。界面设计准则基本准则系统界面是系统和用户交互的直接载体。“目录层次准确”、“功能布局合理”、“标识图易理解”、“文件容易找到”等准则应该被重视，它影响到用户能否独立轻松完成相关操作。应该让用户了解当前的操作状态，系统状态应该具有可见性。界面控件、文本标示应该保持一致性和标准，让用户有一致性的操作。目标、行为和可见选项具有可识别性，而不是让用户记忆，必要时，提供使用说明或提示信息。提供撤销、重做功能，不必再通过额外的对话就能离开那里，同时可以减少焦虑。一连串的动作应该被组织成开始、中间、结束三部份。当动作结束的时候，要提供反馈让用户知道动作已经完成。在做下个一连串的动作之前，先告知用户整个流程，能够减轻使用者的压力、提高满意度。一个能在第一时间防止犯错的设计，总好过一堆漂亮的错误提示信息。应当在用户行动以前，就消除能诱使犯错的条件，必要时提醒用户确认操作，防患于未然。目录结构及命名规则目录结构规范总体规则：目录建立的原则：以最少的层次提供最清晰简便的访问结构。根目录一般只存放标准框架必须的系统文件。包括default.aspx、FrmHeader.aspx、FrmBottom.aspx、FrmMain.aspx、FrmMenu.aspx、FrmPush.aspx、PageError.aspx、Index.aspx、OverdueLogin.aspx。业务系统的UI层的业务程序代码存放在根目录下的Web文件夹内。其它说明如下：上图所示: 四套皮肤样式，图片的存放位置。皮肤中包括所用到的图片／皮肤定义文件Default.css／皮肤用到的样式文件Default.css。皮肤中图片的存放位置。子系统用到的JS代码存放位置。标准UI公用组件共用的资源文件位置（不允许修改）。文件和目录命名规范文件命名的原则：以最少的字母达到最容易理解的意义。文件名称采用驼峰命名法,统一用大小写的英文字母、数字和下划线的组合，不得包含汉字、空格和特殊字符。尽量按单词的英语翻译为名称。例如：FeedBack(信息反馈) 不到万不得已不要以拼音作为目录名称。多个同类型文件使用头部加尾部命名，头尾部开头的第一个英文字母大写。头部表示文件内容，尾部表示文件性质等。例如：新增项目信息：ProjectAdd.aspx修改项目信息：ProjectModify.as