Web页面设计标准规范.doc
《Web页面设计标准规范.doc》由会员分享,可在线阅读,更多相关《Web页面设计标准规范.doc(49页珍藏版)》请在咨信网上搜索。
1、Web页面设计规范编 号:版 本 号:受控状态:作 者:分 发 号:文档修改历史统计文档修改统计日 期版本号更改人更改内容文档审核统计日 期版本号审核人审核意见目 录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.7Frame102.8其它页面元素113页面风格113.1风格分类113.2页面风格应用124WEB页面交互124.1
2、页面元素焦点切换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删除175.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在线帮助功效195.2.7菜单功效要求205.2.
3、8快捷键功效205.2.9快捷键限制215.2.10页面规范性215.2.11系统易用性225.2.12输入安全性要求225.2.13独特征要求235.2.14多窗口应用和系统资源236页面编程技术使用规范246.1页面元素命名246.2DHTMLx控件256.3Flex控件267页面资源规格说明267.1图标267.2图片267.3多媒体278附录288.1基于DHXCSS规格示例288.1.1表格CSS示例288.2经典应用页面示例28引言目标本文用于规范我企业所开发商业软件中对于web页面设计工作,明确在设计中所要遵照准则和方法,web页面中各个元素规格要求,确保所实现web页面在风格、
4、结构和功效上统一,提升商业软件外在品质。范围本规范适适用于企业全部商业软件产品。缩略术语DHMLX:web页面UI控件参考资料WEB页面框架内容页面框架WEB页面框架是指组成完整页面组织结构。通常是由以下三部分组成:Head,Main,Foot,有些时候出于布局需要,在“Head”下面还会加上用于页面功效导航“Menu”。图:图 1页面布局布局标准对于WEB应用来说,页面布局是和web应用功效区相对应,而且对于页面中各个部分之间切分百分比也需要遵守一定规则。页面布局设计,首先需要考虑用户在浏览web页面时视觉流向上要求:图 2从视觉流向上看,用户首先看到是页面“Head”部分左面,通常那里是标
5、识这个WEB应用Logo;然后是陈列WEB应用关键功效“Menu”来用于页面导航;接下来用户将看是处于页面左侧“sidebar”,通常这里也是用于页面功效导航,和“Menu”出选择相呼应,这里内容能够经过类似树状结构方法展示更为具体功效;接下来是处于页面中心位置内容部分,最终用户视线落在WEB页面底部。布局要求页面分割以上面图示布局方法为例,根据通常web页面设计时所遵照方法,并结合黄金分割百分比方法:首先,将页面根据3*3方法进行分割,以下图:在高度方向上,对上部1/3区域根据黄金分割方法分出head和menu区域;在宽度方向上,对中部左边1/3区域根据黄金分割方法分出sidebar区域,剩
6、下空间留给content区域;在高度方向上,对下部1/3区域根据黄金分割方法分出foot区域;页面结构页面布局中,各个区域大小定义方法是不一样,请见下图:图 3在页面布局中,对各个功效区域切分是根据“像素”和“百分比”方法来进行,以1024*768分辨率做为基准,其中:Head区域,宽度是根据百分比方法设置,宽度根据100%设置,高度采取所占固定像素值来确定,通常占?px,假如有menu区,则调整为?px;Menu区域,和“head”配置要求是一样,宽度根据100%设置,高度结合“head”高度设置来确定,通常占?px;Sidebar区域,宽度是结合和“content”之间黄金切分百分比,根据
7、固定像素方法确定,通常占?px;高度是根据百分比方法来设置;Content区域,高度和宽度方向布局全部是根据百分比方法来设置;Foot区域,宽度根据100%设置,高度采取所占固定像素值来确定,通常占?px;页面展现对于页面布局来说,除了上述要求外,还需要考虑以下要求:能自适应1024*768、800*600两种分辨率;界面层次不超出3层;默认窗口设置下,不应出现水平、垂直滚动条;当界面内容超出显示区域时,以浮动层形式显示;还有,对于用户感官而言,屏幕对角线相交位置是用户直视地方,而页面正上方四分之一处为易吸引用户注意力位置,所以在放置页面时要注意利用这两个位置。要求:父页面或主页面中心位置应该
8、设计在对角线焦点周围;子页面位置应该靠近主窗体左上角或正中;需要多个子页面弹出时,应该依次向右下方偏移,以显示窗体出标题为宜;在页面上方四分之一处放置用户logo、关键功效导航和部分系统操作功效;页面美化界面应该大小适合美学见解,感觉协调舒适,能在有效范围内吸引用户注意力。提议和要求:长宽靠近黄金点百分比,切忌长宽百分比失调、或宽度超出长度;布局要合理,不宜过于密集,也不能过于空旷,合理利用空间;同一页面上按钮大小应该一致,不一样页面按钮大小尽可能相近,按钮上忌用太长名称;按钮大小要和界面大小和空间要协调;避免空旷界面上放置很大按钮;放置完控件后界面不应有很大空缺位置;字体大小要和界面大小百分
9、比协调, 通常使用字体12px;前景和背景色搭配合理协调,反差不宜太大,主色要柔和,最好少用深色,如大红、大绿等,能够借用Windows界面色调;大型系统常见主色有#E1E1E1、#EFEFEF、#C0C0C0等;界面风格要保持一致,字大小、颜色、字体要相同,需要艺术处理或有特殊要求地方提议使用图片表现;假如窗体支持最大化或放大时,窗体上控件也要伴随窗体而缩放;切忌只放大窗体而忽略控件缩放;系统对话框页面不应该支持缩放,即右上角只相关闭功效;通常父窗体支持缩放时,子窗体没有必需缩放;假如能给用户提供自定义界面风格,则由用户自己选择颜色、字体等;页面字体页面字体属性设置在对应CSS中进行定义,页
10、面文字编码要求是UTF-8,在要求字体属性时,需要设置:汉字采取“宋体”,英文采取“Arial”或“verdana”,CSS文件中font-family里面必需确保有“宋体”。对于页面属性中字体大小设置,需要内容不一样等级来设置,通常:“Head”中标题文字,20px;“Menu”中导航文字,14px;“Sidebar”中文字,12px;“Content”中正文,12px或14px,标题;“foot”中文字,12px或10px;相关页面字体属性具体设置参见附录中CSS示例。边距WEB页面和其中表格全部应该设定边距,避免页面元素紧贴边缘情况发生,最小边距值为“3px”,默认边距值应在CSS中设定
11、。比如:图 4表格对于表格,其属性设置一样在CSS中进行定义。表格使用最多情况是显示装在数据,因为有很多表项需要在页面中完整显示,所以标准上对于表格各个单元格宽度设置应采取百分比方法来进行,这么表格不仅能够将数据完整地显示,而且还能够适应不一样分辨率情况。但因为表格中存在不定长内容,所以为了确保表格宽度不被挤变形,对于不定长内容,可固定显示宽度,当超出此显示宽度后,以显示,光标停留后,具体内容再在浮动层显示。其它要求:表头中数据应水平/垂直居中对齐。表单中内容如为定长,则为居中显示;如为不固定中英文内容,则为居左显示;如为数值形式,则为居右显示。表格表头应采取不一样于表格内容背景颜色,并要求对
12、比显著;表格表头文字应采取加粗,或不一样于表格内容字体;表格中相邻行需要经过两种有一定对比差异浅色作为背景色;各个页面表格边框风格需要统一,提议设置细边框;表格中存在链接文字需要采取不一样于其它内容颜色或字体显示;对于表格嵌套尽可能控制在三层以内,而且严禁使用表格来进行页面布局。相关表格属性具体设置请参见附录中CSS示例。段落排版在WEB页面中,“content”部分是展示页面正文区域,当段落是由纯文字组成时:正文一行字数最好不超出50,首页标题文字以8-20字为佳。行距提议用百分比来定义,常见两个行距值是line-height:120%或150%;对于一段文字,尤其是正文部分,确保左右最少有
13、15px留白,便于用户换行时不受到干扰。文字和背景对比要足够显著,确保最弱文字可读性。在使用标签,需要对应有,而且要求设置margin,使得段落文字前后左右能够有适宜空白区。可在CSS中设置:p margin: 18px 6px 6px 18px;,分别定义了上、右、下、左空白区大小。首行缩进时,严禁使用“ ”,而是在CSS中设置text-indent,比如:p text-indent: 2em; 。在一段完整文字中请尽可能不要使用 来人工干预分段;对于margin,为了预防因为采取默认margin值而造成页面排版问题,推荐全部标签定义为:margin: 0; 当采取竖排文字时,推荐
14、使用writing-mode。经过设置两个属性值:lr-tb和tb-rl,并结合direction完成文字竖排,lr-tb指是文字方向为:左-右、上-下,tb-rl是指上-下、右-左。FrameFrame是能够将一个WEB页面切分成多个窗口来显示WEB内容一个页面设计方法,切分后每个窗口内容是经过指向URL来实现。Frame标识是 ,而在使用Frame时,通常需要将其放在网页入口html文件中,而无须放入 标识。 是用以划分框窗,每一框窗由一个 标识所标示,必需在范围中使用。其中: 称框架标识,用以宣告HTML文件为框架模式,并设定视窗怎样分割。 则只是设定某一个框窗内参数属性。使用Frame
15、分割页面,需要根据2.1节“页面布局”中所描述要求来设置 和,以完成对页面各个部分合理切分。对于 和中部分属性设置,要求有:Name,表示Frame名字,必需有定义;Framespacing,表示各个Frame之间空白距离,要求设置为非零,通常设置为5;Noresize,表示是否许可使用者经过拖拉改变Frame大小,要求在Frame设置此参数; Scrolling,表示是否要显示卷轴,要求设置为“AUTO”Marginhight,表示框架高度部分边缘所保留空间,要求设置?Marginwidth,表示框架宽度部分边缘所保留空间,要求设置?其它页面元素按钮,要求按钮上显示文字能够正确表示功效含义;
16、单选框,默认选择一个,和所关联文字间距应该在3px;多选框,默认全不选,所关联文字应该能够正确表示选择含义,和控件间距应该在3px;下拉框,给出默认选择,而且默认选择显示出“默认全部”或“请选择”等文字提醒;图片,默认为显示出代表图片文件图标,或是缩略图;多媒体,默认为显示出代表多媒体文件图标;相关这些页面元素具体属性设置请参见附录中CSS示例。页面风格WEB页面风格是指WEB页面经过对页面布局、字体、配色、页面元素排列融合来传达给用户、含有主观感受。页面风格选择除了需要考虑通常用户感受外,还需要将用户所在环境原因考虑进去,从而形成符合特定用户要求页面风格。风格分类Web应用页面风格内容包含:
17、布局,不仅仅是系统入口主页布局,而是全部页面;颜色,根据风格专题来设置页面中包含颜色及其表现;页面元素,根据风格专题来确定页面元素大小、形状和交互响应行为;图标,根据风格专题来定制表示各类功效图标;提醒窗口,是页面交互关键形式,需要根据风格专题来定制;具体风格分类定义,待定。页面风格应用具体风格应用定义,待定。WEB页面交互页面元素焦点切换在WEB页面中,为了提升和用户之间互动,需要在各类页面元素取得焦点和失去焦点时候,在以下场景中采取页面交互方法有:信息填写对输入信息验证:假如需要校验填写内容,则需要在输入框失去焦点时进行数据有效性判定,并在输入框后给出提醒。图:对输入信息提醒:在一组需要被
18、验证数据填写时,假如有必填项,需要在输入框后面给出标志,并对填入规则加以说明。图:假如输入框内有默认文字,当输入框取得焦点时,需要将输入框内文字处于全选状态。图:鼠标交互响应对鼠标在页面中所产生事件进行处理,当页面元素取得焦点、被点击、失去焦点时,则需要控件本身在颜色、大小或形状上改变给和响应,亦能够添加声音响应。下面是多种情况下鼠标交互示例:比如:- 按钮:按钮颜色改变、或形状,或字体改变,图:鼠标放上取得焦点前:鼠标放上取得焦点后:- 链接:字体变粗、或字体变色、或背景变色,图:鼠标放上取得焦点前:鼠标放上取得焦点后:- 页签:取得焦点页签颜色改变,或页签大小和里面字体变大,图:鼠标放上取
19、得焦点前:鼠标放上取得焦点后:- 输入框,输入框边框变色;鼠标放上取得焦点前:鼠标放上取得焦点后:- 表格,表格中行底色改变;鼠标放上取得焦点前:鼠标放上取得焦点后:- 等候响应:当因为载入大量数据等原因,使得用户需要等候一定时间,需要将鼠标指针形状变成时间漏斗形状、或其它表示鼠标不可操作样子来提醒用户等候。图:对于我们所使用相关鼠标交互响应规范,将结合页面风格在附录中给出说明。页面信息交互操作结果确定在提交数据,或是载有数据页面关闭,或其它需要和用户进行确定交互场景,需要软件能够提供一个以弹出页面形式,要求用户确定实施结果对话框,包含情况有:提醒确定输入信息正确:弹出对话框,并将已填写内容列
20、出,要求用户确定内容正确性,给出“确定”和“取消”选择按钮;提醒确定数据更改是否保留:弹出对话框,提醒目前页面内容已经改变,要求用户确定是否保留更改信息,给出“是”和“否”选择按钮;提醒确定目前页面跳转:弹出对话框,提醒用户正在跳转到另外一个页面,要求用户确定离开目前页面,给出“是”和“否”选择按钮;确定删除数据内容:弹出对话框,提醒用户删除了目前选择内容,要求用户确定是否继续删除操作,给出“确定”和“取消”选择按钮;其它规则对于信息交互过程中,其它需要遵守规则有:关键命令按钮和使用较频繁按钮要放在界面上相对固定位置上;轻易引发操作错误或使程序退出、关闭按钮应不醒目,放在不易点位置;和正在进行
21、操作无关按钮应该加以屏蔽,比如:按钮背景为灰色显示;对可能造成数据无法恢复操作必需提供确定信息,给用户放弃选择机会;非法输入或操作应有足够提醒说明;对运行过程中出现问题而引发错误地方要有提醒,让用户明白错误出处,避免形成无限期等候;页面信息提醒在web页面提供功效中,很多情况需要系统发送部分必需提醒信息到页面显示给用户,这些信息分类有:警告信息严禁信息操作实施成功信息操作实施失败信息错误信息帮助信息提醒信息这些信息在目前页面或弹出页面上显示。假如采取弹出对话框形式,对话框页面结构以下图:图标区按钮 1按钮 2标题区提醒信息区标题区:简明给出此次提醒信息性质,比如:警告:操作非法!图标区:给出和
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 页面 设计 标准规范
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【a199****6536】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【a199****6536】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。