2022年Web页面设计规范 .pdf
《2022年Web页面设计规范 .pdf》由会员分享,可在线阅读,更多相关《2022年Web页面设计规范 .pdf(28页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、Web页面设计规范编号:版 本 号:受控状态:作者:分 发 号:名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 1 页,共 28 页 - - - - - - - - - 文档修改历史记录文档修改记录日 期版本号更改人更改内容文档审核记录日 期版本号审核人审核意见名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 2 页,共 28 页 - -
2、- - - - - - - 第 3 页 共 28 页目录1引言 . 51.1目的 . 51.2范围 . 51.3缩略术语 . 51.4参考资料 . 52WEB 页面框架内容 . 52.1页面框架 . 52.2页面布局 . 62.2.1布局原则 . 62.2.2布局要求 . 62.2.2.1页面分割 . 62.2.2.2页面结构 . 72.2.2.3页面展现 . 82.2.2.4页面美化 . 82.3页面字体 . 92.4边距 . 92.5表格 . 92.6段落排版 . 102.7FRAME. 102.8其他页面元素 . 113页面风格 . 113.1风格分类 . 113.2页面风格应用 . 1
3、24WEB 页面交互 . 124.1页面元素焦点切换 . 124.1.1信息填写 . 124.1.2鼠标交互响应 . 124.2页面信息交互 . 144.2.1操作结果确认 . 144.2.2其他规则 . 144.3页面信息提示 . 144.4键盘响应支持 . 165WEB 页面通用规范 . 175.1一般页面功能 . 175.1.1新增 . 175.1.2修改 . 175.1.3删除 . 17名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 3 页,共 28 页 -
4、 - - - - - - - - 第 4 页 共 28 页5.1.4查询 . 175.1.5取消 . 185.1.6保存 . 185.1.7重置 . 185.1.8返回 . 185.1.9分页 . 185.1.10全选 . 185.2一般页面规则 . 185.2.1默认值 . 185.2.2必填值 . 195.2.3界面传递 . 195.2.4窗口嵌套 . 195.2.5输入框操作. 195.2.6在线帮助功能 . 205.2.7菜单功能要求 . 205.2.8快捷键功能. 215.2.9快捷键的限制 . 215.2.10页面的规范性 . 215.2.11系统易用性. 225.2.12输入安全
5、性要求 . 235.2.13独特性要求. 235.2.14多窗口的应用与系统资源 . 246页面编程技术使用规范. 246.1页面元素命名 . 246.2DHTMLX控件 . 266.3FLEX控件 . 267页面资源规格说明. 267.1图标 . 267.2图片 . 277.3多媒体 . 278附录 . 288.1基于 DHX 的 CSS 规格示例 . 288.1.1表格 CSS 示例 . 288.2典型应用的页面示例 . 28名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - -
6、- - 第 4 页,共 28 页 - - - - - - - - - 第 5 页 共 28 页1引言1.1 目的本文用于规范我公司所开发的商业软件中对于web 页面的设计工作,明确在设计中所要遵循的准则和方法,web 页面中各个元素的规格要求,确保所实现的web 页面在风格、结构和功能上的统一,提升商业软件的外在品质。1.2 范围本规范适用于公司所有的商业软件产品。1.3 缩略术语DHMLX :web 页面的 UI 控件1.4 参考资料2WEB 页面框架内容2.1 页面框架WEB 的页面框架是指构成完整页面的组织结构。通常是由以下三部分构成:Head, Main,Foot,有些时候出于布局的需
7、要,在“Head”下面还会加上用于页面功能导航的“Menu” 。如图:图 1 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 5 页,共 28 页 - - - - - - - - - 第 6 页 共 28 页2.2 页面布局2.2.1 布局原则对于 WEB 应用来说, 页面布局是和web 应用的功能区相对应的,并且对于页面中各个部分之间的切分比例也需要遵守一定的规则。页面布局的设计,首先需要考虑用户在浏览web 页面时视觉流向上的要求:图 2 从视觉流向上看,用户首
8、先看到的是页面“Head”部分的左面,通常那里是标识这个WEB 应用的 Logo;然后是陈列WEB 应用主要功能的“Menu”来用于页面导航;接下来用户将看的是处于页面左侧的“sidebar” ,通常这里也是用于页面功能导航的,和“Menu”出的选择相呼应, 这里的内容可以通过类似树状结构的方式展示更为详细的功能;接下来是处于页面中心位置的内容部分,最后用户的视线落在WEB 页面的底部。2.2.2 布局要求2.2.2.1 页面分割以上面图示的布局方式为例,按照通常web 页面设计时所遵循的方法,并结合黄金分割比例的方法:首先,将页面按照3*3 的方式进行分割,如下图:名师归纳总结 精品学习资料
9、 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 6 页,共 28 页 - - - - - - - - - 第 7 页 共 28 页在高度方向上,对上部1/3 区域按照黄金分割的方法分出head和 menu 的区域;在宽度方向上,对中部左边1/3 区域按照黄金分割的方法分出sidebar 的区域,剩下的空间留给content 区域;在高度方向上,对下部1/3 区域按照黄金分割的方法分出foot 的区域;2.2.2.2 页面结构页面的布局中,各个区域大小的定义方式是不同的,请见下图:图 3 在页
10、面布局中,对各个功能区域的切分是按照“像素”和“比例”方式来进行的,以1024*768 的分辨率做为基准,其中:Head 区域, 宽度是按照比例方式设置的,宽度按照 100%设置, 高度采用所占的固名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 7 页,共 28 页 - - - - - - - - - 第 8 页 共 28 页定像素值来确定的,一般占?px,如果有menu 区,则调整为?px;Menu 区域,和 “head” 的配置要求是一样的,宽度按照100%设置
11、,高度结合“head”的高度设置来确定,一般占?px;Sidebar 区域,宽度是结合与“content”之间的黄金切分比例,按照固定像素的方式确定的,一般占?px;高度是按照比例方式来设置的;Content 区域,高度和宽度方向布局都是按照比例方式来设置的;Foot 区域,宽度按照100%设置,高度采用所占的固定像素值来确定的,一般占?px;2.2.2.3 页面展现对于页面布局来说,除了上述要求外,还需要考虑如下要求:能自适应1024*768、 800*600 两种分辨率;界面层次不超过3 层;默认窗口设置下,不应出现水平、垂直滚动条;当界面内容超出显示区域时,以浮动层的形式显示;还有, 对
12、于用户的感官而言,屏幕对角线相交的位置是用户直视的地方,而页面正上方四分之一处为易吸引用户注意力的位置,所以在放置页面时要注意利用这两个位置。要求:父页面或主页面的中心位置应该设计在对角线焦点附近;子页面的位置应该靠近主窗体的左上角或正中;需要多个子页面弹出时,应该依次向右下方偏移,以显示窗体出标题为宜;在页面上方四分之一处放置用户的logo 、主要功能导航和一些系统操作功能;2.2.2.4 页面美化界面应该大小适合美学观点,感觉协调舒适,能在有效的范围内吸引用户的注意力。建议和要求:长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度;布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间
13、;同一页面上的按钮大小应该一致,不同页面的按钮大小尽量相近,按钮上忌用太长的名称;按钮的大小要与界面的大小和空间要协调;避免空旷的界面上放置很大的按钮;放置完控件后界面不应有很大的空缺位置;字体的大小要与界面的大小比例协调,通常使用的字体12px;前景与背景色搭配合理协调,反差不宜太大, 主色要柔和, 最好少用深色, 如大红、大绿等,可以借用Windows界面色调;大型系统常用的主色有#E1E1E1、#EFEFEF、#C0C0C0等;界面风格要保持一致,字的大小、 颜色、 字体要相同, 需要艺术处理或有特殊要求的地方建议使用图片表现;如果窗体支持最大化或放大时,窗体上的控件也要随着窗体而缩放;
14、切忌只放大窗体而忽略控件的缩放;系统对话框页面不应该支持缩放,即右上角只有关闭功能;名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 8 页,共 28 页 - - - - - - - - - 第 9 页 共 28 页通常父窗体支持缩放时,子窗体没有必要缩放;如果能给用户提供自定义界面风格,则由用户自己选择颜色、字体等;2.3 页面字体页面字体属性的设置在相应的CSS 中进行定义,页面文字编码要求是UTF-8 ,在规定字体属性时,需要设置:中文采用“宋体”,英文采用“
15、Arial ”或“ verdana” , CSS 文件中的 font-family 里面必须保证有“宋体”。对于页面属性中字体大小的设置,需要内容的不同级别来设置,通常:“Head”中标题文字,20px;“Menu”中的导航文字,14px;“Sidebar”中的文字, 12px;“Content”中的正文, 12px 或 14px,标题;“foot”中的文字,12px 或 10px;有关页面字体属性的具体设置参见附录中的CSS 示例。2.4 边距WEB 页面和其中的表格都应该设定边距,避免页面元素紧贴边沿的情况发生,最小边距值为“ 3px” ,默认边距值应在CSS 中设定。例如:图 4 2.5
16、 表格对于表格,其属性的设置同样在CSS中进行定义。表格使用最多的情况是显示装在的数据,由于有很多表项需要在页面中完整显示,因此原则上对于表格各个单元格宽度的设置应采用百分比方式来进行,这样表格不仅能够将数据完整地显示, 而且还能够适应不同分辨率的情况。但由于表格中存在不定长的内容,所以为了保证表格的宽度不被挤变形,对于不定长的内容,可固定显示宽度, 当超出此显示宽度后,以显示,光标停留后,详细内容再在浮动层显示。其他要求:名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - -
17、 第 9 页,共 28 页 - - - - - - - - - 第 10 页 共 28 页表头中的数据应水平/垂直居中对齐。表单中内容如为定长,则为居中显示;如为不固定的中英文内容,则为居左显示;如为数值形式,则为居右显示。表格的表头应采用不同于表格内容的背景颜色,并要求对比明显;表格表头的文字应采用加粗,或不同于表格内容的字体;表格中相邻行需要通过两种有一定对比差异的浅色作为背景色;各个页面的表格边框风格需要统一,建议设置细边框;表格中存在的链接文字需要采用不同于其他内容的颜色或字体显示;对于表格的嵌套尽量控制在三层以内,并且禁止使用表格来进行页面布局。有关表格属性的具体设置请参见附录中的C
18、SS 示例。2.6 段落排版在 WEB 页面中,“content”部分是展示页面正文的区域,当段落是由纯文字构成时:正文一行字数最好不超过50,首页的标题文字以8-20 字为佳。行距建议用百分比来定义,常用的两个行距的值是line-height:120% 或 150%;对于一段文字,尤其是正文部分,保证左右至少有15px 的留白,便于用户换行时不受到干扰。文字和背景对比要足够明显,保证最弱文字的可读性。在使用 标签,需要对应有,并且要求设置margin,使得段落文字的前后左右能够有合适的空白区。可在CSS 中设置: p margin: 18px 6px 6px 18px;,分别定义了上、右、下
19、、左的空白区大小。首行缩进时, 禁止使用 “ ” ,而是在 CSS 中设置 text-indent,例如: p text-indent: 2em; 。在一段完整的文字中请尽量不要使用 来人工干预分段;对于 margin,为了防止由于采用默认的margin 值而导致的页面排版问题,推荐所有标签定义为: margin: 0; 当采用竖排文字时,推荐使用writing-mode 。通过设置两个属性值:lr-tb 和 tb-rl ,并结合 direction 完成文字竖排,lr-tb 指的是文字方向为:左-右、上 -下, tb-rl 是指上 -下、右 -左。2.7 Frame Frame是能
20、够将一个WEB 页面切分成几个窗口来显示WEB 内容的一种页面设计方法,切分后的每个窗口内容是通过指向URL 来实现的。Frame 的标记是 ,而在使用Frame 时,通常需要将其放在网页入口的html 文件中,而不必放入 标记。 是用以划分框窗的,每一框窗由一个 标记所标示, 必须在 范围中使用。其中: 称框架标记,用以宣告HTML文件为框架模式,并设定视窗如何分割。名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 10 页,共 28 页 - - - - - - -
21、 - - 第 11 页 共 28 页 则只是设定某一个框窗内的参数属性。使用 Frame 分割页面,需要按照 2.1 节 “页面布局”中所描述的要求来设置 和 ,以完成对页面各个部分合理的切分。对于 和 中的一些属性设置,要求有:Name,表示 Frame 的名字,必须有定义;Framespacing,表示各个Frame之间空白距离,要求设置为非零,通常设置为5;Noresize,表示是否允许使用者通过拖拉改变Frame 的大小,要求在Frame设置此参数;Scrolling ,表示是否要显示卷轴,要求设置为“AUTO ”Marginhight ,表示框架高度部分边缘所保留的空间,要求设置?M
22、arginwidth ,表示框架宽度部分边缘所保留的空间,要求设置?2.8 其他页面元素按钮,要求按钮上显示的文字能够准确表达功能含义;单选框,默认选择一个,和所关联的文字的间距应该在3px;多选框, 默认全不选, 所关联的文字应该能够准确表达选择的含义,和控件的间距应该在 3px;下拉框,给出默认选择,并且默认选择显示出“默认全部”或“请选择”等文字提示;图片,默认为显示出代表图片文件的图标,或是缩略图;多媒体,默认为显示出代表多媒体文件的图标;有关这些页面元素的具体属性设置请参见附录中的CSS 示例。3页面风格WEB 页面的风格是指WEB 页面通过对页面布局、字体、配色、页面元素排列的融合
23、来传达给用户的、含有主观感受。页面风格的选取除了需要考虑一般的用户感受外,还需要将用户所在环境的因素考虑进去,从而形成符合特定用户要求的页面风格。3.1 风格分类Web 应用的页面风格内容包括:布局,不仅仅是系统入口主页的布局,而是所有页面;颜色,按照风格主题来设置页面中包含的颜色及其表现;页面元素,按照风格主题来确定页面元素的大小、形状和交互响应行为;图标,按照风格主题来定制表示各类功能的图标;名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 11 页,共 28 页
24、 - - - - - - - - - 第 12 页 共 28 页提示窗口,是页面交互的主要形式,需要按照风格主题来定制;具体风格分类的定义,待定。3.2 页面风格应用具体风格应用的定义,待定。4WEB 页面交互4.1 页面元素焦点切换在 WEB 页面中,为了提高和用户之间的互动,需要在各类页面元素获得焦点和失去焦点的时候,在如下场景中采用页面交互的方法有:4.1.1 信息填写对输入信息验证:如果需要校验填写内容,则需要在输入框失去焦点时进行数据有效性的判断,并在输入框后给出提示。如图:对输入信息提示:在一组需要被验证的数据填写时,如果有必填项, 需要在输入框后面给出标志,并对填入的规则加以说明
25、。如图:如果输入框内有默认的文字,当输入框获得焦点时,需要将输入框内的文字处于全选状态。如图:4.1.2 鼠标交互响应对鼠标在页面中所产生的事件进行处理,当页面元素获得焦点、被点击、失去焦点时,名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 12 页,共 28 页 - - - - - - - - - 第 13 页 共 28 页则需要控件本身在颜色、大小或形状上的变化给与响应,亦可以添加声音响应。下面是各种情况下的鼠标交互示例:例如:- 按钮 :按钮颜色改变、或形状,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 2022年Web页面设计规范 2022 Web 页面 设计规范
限制150内