文档介绍：该【WEB页面设计规范--整理ok模板 】是由【玥玥】上传分享，文档一共【21】页，该文档可以免费在线阅读，需要了解更多关于【WEB页面设计规范--整理ok模板 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
Web页面设计规范
目
录
1前言.......................................................................
3
2WEB页面框架内容...........................................................
3
页面框架.............................................................
3
页面布局.............................................................
3
布局原则.......................................................
3
布局要求.......................................................
4
假如能给用户供给自定义界面风格,则由用户自己选择颜色、字体等;.......
6
页面字体.............................................................
6
边距.................................................................
7
表格.................................................................
7
段落排版.............................................................
7
................................................................
8
其余页面元素.........................................................
8
3页面风格...................................................................
8
风格分类.............................................................
9
4WEB页面交互
...............................................................
9
页面元素焦点切换.....................................................
9
信息填写.......................................................
9
鼠标交互响应...................................................
9
页面信息交互........................................................
10
操作结果确认..................................................
10
其余规则......................................................
11
页面信息提示........................................................
11
键盘响应支持........................................................
13
5其余快捷键的支持,需要依据项目的实质状况来定义。..........................
13
6WEB页面通用规范..........................................................
13
一般页面功能........................................................
13
新增..........................................................
13
改正..........................................................
13
删除..........................................................
13
查问..........................................................
14
撤消..........................................................
14
保存..........................................................
14
重置..........................................................
14
返回..........................................................
14
分页..........................................................
14
全选.........................................................
14
一般页面规则........................................................
14
默认值........................................................
14
单项选择按组钮默认值..............................................
14
表单元素选择..................................................
14
必填值........................................................
15
界面传达......................................................
15
窗口嵌套......................................................
15
输入框操作....................................................
15
在线帮助功能..................................................
15
菜单功能要求..................................................
15
快捷键功能...................................................
16
快捷键的限制.................................................
16
页面的规范性.................................................
16
系统易用性...................................................
17
输入安全性要求...............................................
18
独到性要求...................................................
18
多窗口的应用与系统资源.......................................
19
7尽量防备对系统的独占使用;................................................
19
8页面编程技术使用规范......................................................
19
........................................................
19
9页面资源规格说明..........................................................
20
图标................................................................
20
图片................................................................
21
多媒体
..............................................................
21
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
1前言
本文用于规范我们所开发的商业软件中对于web页面的设计工作,明确在设计中所要依据的准则和方法,web页面中各个元素的规格要求,保证所实现的web页面在风格、构造和功能上的一致,提高商业软件的外在质量。
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
2WEB
页面框架内容
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
页面框架
WEB的页面框架是指组成完好页面的组织构造。往常是由以下三部分组成:Head,Main,
Foot,有些时候出于布局的需要,在“Head”下边还会加上用于页面功能导航的“Menu”。
如图:
页面布局
布局原则
对于WEB应用来说,页面布局是和web应用的功能区相对应的,并且对于页面中各个
部分之间的切分比率也需要恪守必定的规则。
页面布局的设计,第一需要考虑用户在阅读web页面时视觉流向上的要求:
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
图1
从视觉流向上看,用户第一看到的是页面“Head”部分的左面,往常那边是表记这个
WEB应用的Logo;而后是陈设WEB应用主要功能的“Menu”来用于页面导航;接下来用
户将看的是处于页面左边的“sidebar”,往常这里也是用于页面功能导航的,和“Menu”出
的选择相响应,这里的内容能够经过近似树状构造的方式显现更加详细的功能;接下来是处
于页面中心地点的内容部分,最后用户的视野落在WEB页面的底部。
布局要求
页面切割
以上边图示的布局方式为例,依据往常web页面设计时所依据的方法,并联合黄金切割比率的方法:
第一,将页面依据3*3的方式进行切割,以下列图:
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
在高度方向上,对上部1/3地区依据黄金切割的方法分出head和menu的地区;
在宽度方向上,对中部左边1/3地区依据黄金切割的方法分出sidebar的地区,剩下的空间留给content地区;
在高度方向上,对下部1/3地区依据黄金切割的方法分出foot的地区;
页面构造
页面的布局中,各个地区大小的定义方式是不一样的,请见下列图:
图2
在页面布局中,对各个功能地区的切分是依据“像素”和“比率”方式来进行的,以
1024*768的分辨率做为基准,此中:
Head地区,宽度是依据比率方式设置的,宽度依据100%设置,高度采纳所占的固定像素值来确立的,一般占?px,假若有menu区,则调整为?px;
Menu地区,和“head”的配置要求是相同的,宽度依据100%设置,高度联合“head”的高度设置来确立,一般占?px;
Sidebar地区,宽度是联合与“content”之间的黄金切分比率,依据固定像素的方式确立的,一般占?px;高度是依据比率方式来设置的;
Content地区,高度和宽度方向布局都是依据比率方式来设置的;
Foot地区,宽度依据100%设置,高度采纳所占的固定像素值来确立的,一般占?px;
页面显现
对于页面布局来说,除了上述要求外,还需要考虑以下要求:
能自适应1024*768、800*600两种分辨率;
界面层次不超出3层;
默认窗口设置下,不该出现水平、垂直转动条;
当界面内容高出显示地区时,以浮动层的形式显示;
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
还有,对于用户的感官而言,屏幕对角线订交的地点是用户直视的地方,而页面正上方
四分之一处为易吸引用户注意力的地点,所以在搁置页面时要注意利用这两个地点。
要求:
父页面或主页面的中心地点应当设计在对角线焦点邻近;
子页面的地点应当凑近主窗体的左上角或正中;
需要多个子页面弹出时,应当挨次向右下方偏移,以显示窗体出标题为宜;
在页面上方四分之一处搁置用户的logo、主要功能导航和一些系统操作
功能;
页面美化
界面应当大小适合美学看法,感觉协调舒坦,能在有效的范围内吸引用户的注意力。
建讲和要求:
长宽凑近黄金点比率,切忌长宽比率失调、或宽度超出长度;
布局要合理,不宜过于密集,也不可以过于空阔,合理的利用空间;
同一页面上的按钮大小应当一致,不一样页面的按钮大小尽量邻近,按钮上忌用太长
的名称;
按钮的大小要与界面的大小和空间要协调;
防止空阔的界面上搁置很大的按钮;
搁置完控件后界面不该有很大的空缺地点;
字体的大小要与界面的大小比率协调,往常使用的字体12px;
远景与背风景搭配合理协调,反差不宜太大,主色要轻柔,最好少用深色,如大红、大绿等,能够借用Windows界面色彩;
大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等;
界面风格要保持一致,字的大小、颜色、字体要相同,需要艺术办理或有特别要求
的地方建议使用图片表现;
假如窗体支持最大化或放大时,窗体上的控件也要跟着窗体而缩放;切忌只放大窗
体而忽视控件的缩放;
系统对话框页面不该当支持缩放,即右上角只有封闭功能;
往常父窗体支持缩放时,子窗体没有必需缩放;
假如能给用户供给自定义界面风格,则由用户自己选择颜色、字
体等;
页面字体
页面字体属性的设置在相应的CSS中进行定义,页面文字编码要求是UTF-8,在规定
字体属性时,需要设置:中文采纳“宋体”,英文采纳“Arial”或“verdana”,CSS文件中
的font-family里面一定保证有“宋体”。
对于页面属性中字体大小的设置,需要内容的不一样级别来设置,往常:“Head”中标题文字,20px;
“Menu”中的导航文字,14px;
“Sidebar”中的文字,12px;
“Content”中的正文,12px或14px,标题;“foot”中的文字,12px或10px;
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
边距
WEB页面和此中的表格都应当设定边距,防止页面元素紧贴边沿的状况发生,最小边距值为“3px”,默认边距值应在CSS中设定。
比如:
表格
对于表格,其属性的设置相同在CSS中进行定义。
表格使用最多的状况是显示装在的数据,因为有好多表项需要在页面中完好显示,所以
原则上对于表格各个单元格宽度的设置应采纳百分比方式来进行,这样表格不单能够将数据
完好地显示,并且还可以够适应不一样分辨率的状况。但因为表格中存在不定长的内容,所认为了保证表格的宽度不被挤变形,对于不定长的内容,可固定显示宽度,当高出此显示宽度后,以显示,光标逗留后,详细内容再在浮动层显示。
其余要求:
表头中的数据应水平/垂直居中对齐。
表单中内容如为定长,则为居中显示;如为不固定的中英文内容,则为居左显示;如为数值形式,则为居右显示。
表格的表头应采纳不一样于表格内容的背景颜色,并要求对照显然;表格表头的文字应采纳加粗,或不一样于表格内容的字体;
表格中相邻行需要经过两种有必定对照差别的淡色作为背风景;各个页面的表格边框风格需要一致,建议设置细边框;
表格中存在的链接文字需要采纳不一样于其余内容的颜色或字体显示;
对于表格的嵌套尽量控制在三层之内,并且严禁使用表格来进行页面布局。
段落排版
在WEB页面中,“content”部分是显现页面正文的地区,当段落是由纯文字组成时:
正文一行字数最好不超出50,首页的标题文字以8-20字为佳。
行距建议用百分比来定义,常用的两个行距的值是line-height:120%或150%;
对于一段文字,特别是正文部分,保证左右起码有15px的留白,便于用户换行时
不遇到扰乱。
文字和背景对照要足够显然,保证最弱文字的可读性。
在使用<p>标签,需要对应有</p>,并且要求设置margin,使得段落文字的前后左右能
够有适合的空白区。可在CSS中设置:p{margin:18px6px6px18px;},分别定义了上、右、
下、左的空白区大小。
首行缩进时,严禁使用“&nbsp;”,而是在CSS中设置text-indent,比如:p{text-indent:
2em;}。
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
在一段完好的文字中请尽量不要使用<br>来人工干涉分段;
对于margin,为了防备因为采纳默认的margin值而致使的页面排版问题,介绍所有标
签订义为:margin:0;
当采纳竖排文字时,介绍使用writing-mode。经过设置两个属性值:lr-tb和tb-rl,并结
合direction达成文字竖排,lr-tb指的是文字方向为:左-右、上-下,tb-rl是指上-下、右-左。
Frame是能够将一个WEB页面切分红几个窗口来显示WEB内容的一种页面设计方法,
切分后的每个窗口内容是经过指向URL来实现的。
Frame的标记是<FRAMESET><FRAME>,而在使用Frame时,往常需要将其放在网
页进口的html文件中,而不用放入<BODY>标记。<FRAMESET>是用以区分框窗的,
每一框窗由一个<FRAME>标记所标示,<FRAME>一定在<FRAMESET>范围中使用。
此中:
<FRAMESET>称框架标记,用以宣布HTML文件为框架模式,并设定视窗怎样切割。
<FRAME>则不过设定某一个框窗内的参数属性。
使用Frame切割页面,“页面布局”中所描绘的要求来设置<FRAMESET>
和<FRAME>,以达成对页面各个部分合理的切分。
对于<FRAMESET>和<FRAME>中的一些属性设置,要求有:
Name,表示Frame的名字,一定有定义;
Framespacing,表示各个Frame之间空白距离,要求设置为非零,往常设置为5;
Noresize,表示能否同意使用者经过拖沓改变Frame的大小,要求在Frame设置此
参数;
Scrolling,表示能否要显示卷轴,要求设置为“AUTO”
Marginhight,表示框架高度部分边沿所保存的空间,要求设置?
Marginwidth,表示框架宽度部分边沿所保存的空间,要求设置?
其余页面元素
按钮,要求按钮上显示的文字能够正确表达功能含义;
单项选择框,默认选择一个,和所关系的文字的间距应当在3px;
多项选择框,默认全不选,所关系的文字应当能够正确表达选择的含义,和控件的间距
应当在3px;
下拉框,给出默认选择,并且默认选择显示出“默认所有”或“请选择”等文字提示;
图片,默认为显示出代表图片文件的图标,或是缩略图;
多媒体,默认为显示出代表多媒体文件的图标;
页面风格
WEB页面的风格是指WEB页面经过对页面布局、字体、配色、页面元素摆列的交融来传达给用户的、含有主观感觉。
页面风格的选用除了需要考虑一般的用户感觉外,还需要将用户所在环境的要素考虑进去,进而形成切合特定用户要求的页面风格。
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
风格分类
Web应用的页面风格内容包含:
布局,不不过是系统进口主页的布局,而是所有页面;
颜色,依据风格主题来设置页面中包含的颜色及其表现;
页面元素,依据风格主题来确立页面元素的大小、形状和交互响应行为;图标,依据风格主题来定制表示各种功能的图标;
WEB页面交互
页面元素焦点切换
在WEB页面中,为了提高和用户之间的互动,需要在各种页面元素获取焦点和失掉焦点的时候,在以下场景中采纳页面交互的方法有:
信息填写
对输入信息考证:
假如需要校验填写内容,则需要在输入框失掉焦点时进行数占有效性的判断,并在输入框后给出提示。如图:
对输入信息提示:
在一组需要被考证的数据填写时,假若有必填项,需要在输入框后边给出标记,并对填入的规则加以说明。如图:
假如输入框内有默认的文字,当输入框获取焦点时,需要将输入框内的文字处于全选状态。如图:
鼠标交互响应
对鼠标在页面中所产生的事件进行办理,当页面元素获取焦点、被点击、失掉焦点时,则需要控件自己在颜色、大小或形状上的变化给与响应,亦能够增添声音响应。
下边是各样状况下的鼠标交互示例:
比如:
按钮:按钮颜色改变、或形状,或字体改变,如图:鼠标放上获取焦点前:
鼠标放上获取焦点后:
链接:字体变粗、或字体变色、或背景变色,如图:鼠标放上获取焦点前:
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
鼠标放上获取焦点后:
页签:获取焦点的页签颜色变化,或页签的大小和里面的字体变大,如图:
鼠标放上获取焦点前:
鼠标放上获取焦点后:
输入框,输入框的边框变色;
鼠标放上获取焦点前:
鼠标放上获取焦点后:
表格,表格中行的底色改变;
鼠标放上获取焦点前:
鼠标放上获取焦点后:
等候响应:当因为载入大批数据等原由,使得用户需要等候一准时间,需要将鼠标指针的形状变为时间漏斗的形状、或其余表示鼠标不行操作的样子来提示用户等候。如图:
页面信息交互
操作结果确认
在提交数据,或是载有数据的页面封闭,或其余需要和用户进行确认交互的场景,需要
软件能够供给一个以弹出页面形式,要求用户确认履行结果的对话框,包含的状况有:
提示确服输入信息正确:弹出对话框,并将已填写的内容列出,要求用户确认内容的正确性,给出“确立”和“撤消”的选择按钮;
提示确认数据改正能否保存:弹出对话框,提示目前页面内容已经改变,要求用户确认能否保存改正的信息,给出“是”和“否”的选择按钮;
提示确认目前页面的跳转:弹出对话框,提示用户正在跳转到此外一个页面,要求用户确认走开目前页面,给出“是”和“否”的选择按钮;
确认删除数据内容:弹出对话框,提示用户删除了目前选择的内容,要求用户确认能否持续删除的操作,给出“确立”和“撤消”的选择按钮;
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板
WEB页面设计规范--整理ok模板