《开发部web界面设计规范》由会员分享，可在线阅读，更多相关《开发部web界面设计规范（12页珍藏版）》请在金锄头文库上搜索。
1、开发部Web界面设计规范版本修订历史起止日期作者/修订人更改章节修改描述版本/状态1. 目录结构规范1) 目录建立原则：以最少的层次提供最清晰的访问结构。2) 目录的命名以小写英文字母、下划线组成。3) 根目录一般只放index.html已经其他必须的系统文件。4) 根目录下的images用于存放各页面都要使用的公用图片。5) 所有JS等脚本存放在根目录下的scripts或js目录。6) 所有CSS文件存放在根目录下的style或css目录。2. 设计命名规范页面基本框架结构 container header45132 navbar menu6 main sidebar7 footercont
2、ainer就是将页面中的所有元素包在一起的部分header是页面的头部区域，一般来讲，它包含网站的logo和其他一些元素navbar等同于横向的导航栏，是最典型的页面元素，也可以命名为navmenu此区域包含一般的链接和菜单，也可以命名为subNav,linksmain是网站的主要区域，也可以命名为contentsidebar此区域包含网站的次要内容，例如最近更新内容列表等。footer包含一些附加信息，也可以命名为copyright命名规则注意点1) 尽量考虑为元素命名其本身的作用或用意，达到语义化不要使用表面形式命名，如：red/left/big等2) 组合命名规则：元素类型-元素作用/内
3、容。如搜索按钮btn-search、登录表单form-login。3) 凡涉及交互行为的元素通常会有正常、悬停、点击和已经浏览等不同样式。参考：搜索按钮btn-search、btn-search-hover、btn-search-visited常用命名汇总名称命名规范页头header top登录条loginbar标志logo侧栏sidebar导航nav子导航subNav菜单menu子菜单submenu工具条toolbar表单form栏目column箭头arrow搜索search滚动条scroll内容content标签页tab列表list提示tips栏目标题title链接links页脚foote
4、r end服务service下载download注册register reg状态status按钮btn上传upload登录login合作伙伴partner版权copyright网站地图sitemap图片命名规则1) 图片名称分为头尾两部分，用下划线隔开。禁止用中文名。2) 头部分表示此图片的大类性质。例如：放置在顶部的长方形图片可以取名banner；标志图片取名logo；位置不固定并且带有链接的小图片取名button；做栏目链接的图片取名menu；不带链接表示标题的取名title；装饰的照片取名pic；等。3) 尾部分用来表示图片的具体含义，用英文字母表示，如banner_ad.gif log
5、o_firefox.gif button_next.gif menu_aboutus.gif title_news.gif pic_people.jpg4) 有onmouse效果的图片，两张分别在原有文件名后加”_on”和”_off”命名。3. 布局规范推荐使用CSS+DIV来布局页面，少用table，table只用于数据处理。优势如下：1. 表现和内容相分离，将布局放在一个独立的样式文件中，html文件只存放文本信息。2. 提高页面浏览速度，采用CSS+DIV结构的页面容量比table的页面容量小得多，且标签要等下载完后才可以显示，而使用CSS+DIV标签不用等待下载好就可以显示，所有速度快
6、。3. 易于维护和改版，只要简单的修改几个CSS文件就可以重新设计整个网站的页面。例如layout.cssbody font-family:Verdana; font-size:14px; margin:0;#container margin:0 auto; width:100%;#header height:100px; background:#9c6; margin-bottom:5px;#menu height:30px; background:#693; margin-bottom:5px;#mainContent height:500px; margin-bottom:5px;#si
7、debar float:left; width:200px; height:500px; background:#cf9;#sidebar2 float:right; width:200px; height:500px; background:#cf9;#content margin:0 205px !important; margin:0 202px; height:500px; background:#ffa;#footer height:60px; background:#9c6;index.html This is the Header This is the Menu This is
8、 the sidebar This is the sidebar2 3列左右侧固定，中间列自适应居中+头部+导航+尾部 This is the footer效果4. 边距规范页、表格都应该有边距，避免紧贴边沿的情况发生，最小边距值为“3px”，默认边距值应在CSS中设定。5. 字体规范1) 字体尺寸使用pt为单位，对象和线条使用px为单位。基准字体为9pt；2) 字体尽量采用Verdana, Arial, Helvetica, sans-serif, 宋体。一个页面最多包含两种字体；3) 所有字体设定应该在CSS中完成。6. 颜色规范1) 尽可能通过选择合适的主题颜色或系统颜色来选择颜色；2)
9、 不要混用颜色类型。也就是说，不要同时运用多个主题颜色。使用主题颜色外的颜色时最好从主题颜色派生，而不是硬编码颜色值；3) 尽量限制色彩的数目。4) 应当根据对象的重要性来选择颜色，重要对象用醒目的颜色表示；5) 使用颜色的时候应当保持一致性，如错误提示用红色表示就要在其他时候保持一致；7. 输入框规范1) 当打开一个页面时光标默认停留在第一个输入的文本框。2) 当选择下拉框存在默认值时要默认选中。不存在默认值时，则默认为“请选择”，不要空着。 3) 必填项必须以红色*号标识。4) 当必填项没有填写时，可在光标移走时在文本框后以红色文字提示。5) 总给输入框提供一个标签来标明它的用途，且主要对
10、齐。6) 关闭弹出提示框提示出错后，要把焦点定位在出错的输入框。7) 只允许输入数字的输入框要控制输入的非法字符，而不是输入非法字符后给予提示。8) 只允许输入日期、时间的输入框要给予格式化。9) 输入内容的长度要限制，默认对应数据库相关字段的长度。10) 对非法的字符的控制，限制输入或给予提示。11) 只读文本框（灰色）和可输入文本框（白色）在颜色上必须区分。12) 文本框上下或左右对齐。13) 输入框没输入时尽量在框里有相应hint文字提示。8. 搜索框规范1) 搜索框文本框的长度应适中，至少应提供显示10个中文字符的宽度2) 搜索组件中使用的文本框必须为单行文本框3) 文本框的长度不得少
11、于130个像素，高度不得低于18个像素4) 文本框要有标示性文字（即hint提示），颜色为灰色#cccccc，搜索按钮可突出显示9. 提示框规范1) 提示信息中的标点符号统一为全角符号。2) 复杂的操作在成功后给予提示信息。3) 提示信息不宜过长，宽度不能超过窗口的1/2，内容可考虑换行，不要滚动显示。4) 窗口应居中显示。5) 当按钮为图片按钮时，光标停留时需给予浮动提示。6) 选择默认按钮，将最安全的或最常用的选项作为默认按钮。10. 键盘支持规范1) 支持回车键提交。2) 支持tab键移动光标焦点，使用tabindex属性改变移动顺序。11. 鼠标1) 在整个交互式语境地中，需可以识别鼠
12、标操作；2) 支持滑轮（鼠标中间的滚动轮）上下翻动操作；3) 对于相同种类的元素采用相同的操作激活；4) 用沙漏表示系统忙，用手型表示可以点击；12. 表格列表规范1) 在写互相嵌套时，严格按照的规范，对于单独的一个来说，对齐，缩进一个TAB，中如果还有嵌套的表格，也缩进TAB，如果中没有任何嵌套的表格，结束标记应该与处于同一行，不要换行。如 2) 表头水平/垂直居中对齐。3) 表格中内容如为定长，则居中显示；如为不固定的中英文内容，则为居左显示；如为数值，则居右显示。4) 保证表格的宽度不被挤压变形，对于不定长的内容，可以固定宽度。当超出此宽度后，以省略号显示，光标停留后，详细内容再浮动显示。5) 表格的嵌套控制在三层以内。6)
