当前位置:首页 » 网页前端 » web设计规范
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web设计规范

发布时间: 2022-01-20 17:15:49

Ⅰ 网站设计或网页设计有行业或国家标准或规范

只有这种网页才有标准!别的没有!
标准编号:YD/T 1761-2008
标准名称:信息无障碍 身体机能差异人群 网站设计无障碍技术要求
标准状态:现行
英文标题:Information Accessibility for People With Physical Disabilities Technical REquirements for Web Accessibility
实施日期:2008-7-1
内容简介:本标准规定了无障碍上网的网页设计技术要求,其中包括网页内容的可感知要求、接口组件的可操作要求、内容和控制的可理解要求、内容对现有和未来可能出现的技术的支持能力要求等。本标准适用于无障碍上网的网页设计,也适用于公众网站的拥有者,网站管理人员,网页开发者设计、开发和管理无障碍网站。
出处: http://www.csres.com/detail/189654.html

Ⅱ 网站界面设计规范有哪些

易用性规范

2.001 常用按钮要支持快捷方式。

2.002 完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。

2.003 界面要支持键盘自动浏览按钮功能,即按Tab键的自动切换功能。

2.004 界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。

2.005 分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab

2.006 默认按钮要支持Enter和选操作,即按Enter后自动执行默认按钮对应操作。

2.007 可写控件检测到非法输入后应给出说明并能自动获得焦点。

2.008 Tab键的顺序与控件排列顺序要一致,目前流行总体从上到下,同时行间从左到右的方式。

2.009 复选框和选项框,按选择几率的高底而先后排列。

2.010 复选框和选项框要有默认选项,并支持Tab选择。

2.011 界面空间较小时使用下拉框而不用选项框。

2.012 选项数较少时使用选项框,相反使用下拉列表框。

2.013 根据用户不同采用相应的词语语气语调,如专用软件,可以出现很多专业词汇;用户为儿童:这可以语气亲切和蔼;老年用户则应该成熟稳重。

2.014 鼠标为不可点击状态时显示箭头,可点击状态显示手型;系统忙时显示沙漏形状
规范性规范

2.015 菜单前的图标能直观的代表要完成的操作。

2.016 工具栏要求可以根据用户的要求自己选择定制。

2.017 系统常用的工具栏设置默认放置位置。

2.018 工具箱要具有可增减性,由用户自己根据需求定制。

2.019 状态条要能显示用户切实需要的信息,常用的有、目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等,如果某一操作需要的时间较长,还应该显示进度条和进程提示。

2.020 滚动条的长度要根据显示信息的长度或宽度能及时变换,以利于用户了解显示信息的位置和百分比。

2.021 状态条的高度以放置五号字为宜,滚动条的宽度比状态条的略窄。

2.022 菜单和工具条要有清楚的界限;菜单要求凸出显示,这样在移走工具条时仍有立体感。

2.023 工具条一般比菜单要宽,但不要宽的太多,否则看起来很不协调。

帮助规范

2.024 帮助文档中的性能介绍与说明要与系统性能配套一致。

2.025 打包新系统时,对作了修改的地方在帮助文档中要做相应的修改。

2.026 在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。

2.027 用户可以用关键词在帮助索引中搜索所要的帮助,当然也应该提供帮助主题词。

2.028 如果没有提供书面的帮助文档的话,最好有打印帮助的功能。

2.029 在帮助中应该提供我们的技术支持方式,一旦用户难以自己解决可以方便的寻求新的帮助方式。

合理性规范

2.030 与正在进行的操作无关的按钮应该加以屏蔽(Windows中用灰色显示,没法使用该按钮)。

2.031 对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。

2.032 非法的输入或操作应有足够的提示说明。

2.033 对运行过程中出现问题而引起错误的地方要有提示,让用户明白错误出处,避免形成无限期的等待。

2.034 提示、警告、或错误说明应该清楚、明了、恰当。

2.035 提交失败后必须保存用户已经输入的内容,以便修改后再次提交。

美观与协调规范

2.036 长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度。

2.037 布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间。

2.038 按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置。

2.039 按钮的大小要与界面的大小和空间要协调。

2.040 避免空旷的界面上放置很大的按钮。

2.041 放置完控件后界面不应有很大的空缺位置。

2.042 字体的大小要与界面的大小比例协调。

2.043 前景与背景色搭配合理协调,反差不宜太大,最好少用深色,如大红、大绿等。如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等。

2.044 如果使用其他颜色,主色要柔和,具有亲和力与磁力,坚决杜绝刺目的颜色。

2.045 界面风格要保持一致,字的大小、颜色、字体要相同,除非是需要艺术处理或有特殊要求的地方。

2.046 如果能给用户提供自定义界面风格则更好,由用户自己选择颜色、字体等。

2.047 色盲、色弱用户,即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示符。

2.048 颜色方案也需要测试,常常由于显示器、显卡的问题,色彩表现每台机器都不一样,应该经过严格测试,不同机器进行颜色测试。

2.049 使用统一的语言描述,例如一个关闭功能按钮,可以描述为退出、返回、关闭,则应该统一规定。

菜单设计规范

2.050 菜单通常采用"常用--主要--次要--工具--帮助"的位置排列,符合流行的Windows风格。

2.051 常用的有"文件"、"编辑","查看"等,几乎每个系统都有这些选项,当然要根据不同的系统有所取舍。

2.052 下拉菜单要根据菜单选项的含义进行分组,并按照一定的规则进行排列,用横线隔开。

2.053 一组菜单的使用有先后要求或有向导作用时,应该按先后次序排列。

2.054 没有顺序要求的菜单项按使用频率和重要性排列,常用的放在开头,不常用的靠后放置;重要的放在开头,次要的放在后边。

2.055 如果菜单选项较多,应该采用加长菜单的长度而减少深度的原则排列。

2.056 菜单深度一般要求最多控制在三层以内。

2.057 对与进行的操作无关的菜单要用屏蔽的方式加以处理,如果采用动态加载方式——即只有需要的菜单才显示——最好。

2.058 菜单前的图标不宜太大,与字高保持一直最好。

2.059 主菜单的宽度要接近,字数不应多于四个,每个菜单的字数能相同最好。

2.060 主菜单数目不应太多,最好为单排布置。

独特性规范

2.061 安装界面上应有单位介绍或产品介绍,并有自己的图标。

2.062 主界面,最好是大多数界面上要有公司图标。

2.063 登录界面上要有本产品的标志,同时包含公司图标。

2.064 帮助菜单的"关于"中应有版权和产品信息。

2.065 公司的系列产品要保持一直的界面风格,如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。

安全性规范

2.066 应当注意尽可能避免用户无意录入无效的数据。

2.067 采用相关控件限制用户输入值的种类。

2.068 当用户作出选择的可能性只有两个时,可以采用单选框。

2.069 当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。

2.070 当选项特别多时,可以采用列表框,下拉式列表框。

2.071 在一个应用系统中,开发者应当避免用户作出未经授权或没有意义的操作。

2.072 对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。

2.073 对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。

2.074 对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。

2.075 对错误操作最好支持可逆性处理,如取消系列操作。

2.076 在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。

2.077 对可能造成等待时间较长的操作应该提供取消功能。

2.078 特殊字符常有;;'"><,`'、"["{、\|}]+=)-(_*&&^%$ #@!~,.。?/还有空格。

2. 079 与系统采用的保留字符冲突的要加以限制。

2.080 读入用户所输入的信息时,根据需要选择是否去掉前后空格。

2.081 有些读入数据库的字段不支持中间有空格,但用户切实需要输入中间空格,这时要在程序中加以处理。

输入项规范

2.082 必输项中不可为空,不可输入空格

2.083 必输项给出必输项标识(*)。

2.084 非必输项字段,Null插入数据库时不会出错,在数据库中设置默认值

2.085 日期显示格式一致;或提供固定格式的选择。

2.086 输入区域输入特殊字符,插入数据库时不出错或提示不允许输入特殊字符。

2.087 英文输入不区分大小写,不可输入汉字、数字及特殊字符

2.088 数值字段只能输入+ ,— ,0~9及功能键(BackSpace 光标) 。数值不能为负数。

2.089 单行文本框/多行文本框;长度合适,可以容纳相应文字,但不能超过数据库该字段长度,最好将可以输入的最大字符数标在旁边。建议单行文本框中当输入的字符超过一定长度时再输入无效;对于多行文本框给出最大字符数标识

2.090 附件;可正常添加符合格式的附件; 附件可正常打开和保存,附件名较长时可正常操作;直接输入错误的附件地址,保存时应给出提示信息;附件打开和保存到本地时,文件名要显示原文件的文件名。

2.091 密码输入;在需求中定义密码是否允许为空或空格;密码是否允许特殊字符;是否区分大小写,密码的可输入长度;程序中应给出文字说明密码的可输入长度。

Ⅲ web app 的设计规范和标准有哪些

WEB标准设计 :

网页结构 HTML XHTML XML DIV+CSS XHTML+CSS 表现层

网页表现 (Cascading Style Sheets) 样式表 页面皮肤

网页行为 ECMAScript DOM BOM

用户体验 (User Experience)

搜索引擎优化 (Search Engine Optimization)


App的标准

IOS:界面尺寸、图标尺寸、字体、颜色值

内部设计:1、所有能点击的图片不得小于44px(Retina需要88px)
2、单独存在的部件必须是双数尺寸
3、两倍图以@2x作为命名后缀
4、充分考虑每个控制按钮在4中状态下的样式,如图

Aos:界面尺寸、图表尺寸、字体、颜色值

希望可以帮助你,望采纳,谢谢啦~~~~~~

Ⅳ Web 页面采用多大的宽度最合适

网页设计在初始要界定出网页的尺寸大小.就像绘画给出一块画版来.这样才能方便设计.

网页的尺寸受限于两个因素:一个是显示器屏幕.显示器现在种类很多,以17寸为主流, 正在朝19寸及宽屏的方向发展.但目前也有为数不少的15寸显示器.另一个是浏览器软件,就是我们常用的IE,遨游,Friefox等.

高度:

高度是可以向下延展的,所以一般对高度不限制. 对于一屏来说,一般没有一个固定值,因为每个人的浏览器的工具栏不同,我见过有的浏览器工具栏被插件占了半个屏幕,所以高度没有确切值。

宽度:

1、在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。

2、在Firefox下,宽度的分率辨减19。比如1024的宽度-19就变成1005

3、在Opear下,宽度的分率辨减23。比如1024的宽度-23就变成1001

注:Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。

所以如果是1024的分辨率,你的网页不如设成1000安全一点。设成900两侧空白更大,视觉上更舒服一点.也方便做一些浮动层的设计.

如果是800的分辨率一般都设成770。但也有设成760的.

这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化所以 800的分辨率一般设定760左右,1024的设定990左右.

网页设计标准尺寸:

1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。

2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。

3、在ps里面做网页可以在800*600状态下显示全屏,页面的下方又不会出现滑动条,尺寸为740*560左右

4、在PS里做的图到了网上就不一样了,颜色等等方面,因为WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广,所以自然会有失色的现象.

页面标准按800*600分辨率制作,实际尺寸为778*434px

页面长度原则上不超过3屏,宽度不超过1屏

每个标准页面为A4幅面大小,即8.5X11英寸

全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px

另外120*90,120*60也是小图标的标准尺寸

每个非首页静态页面含图片字节不超过60K,全尺寸banner不超过14K

标准网页广告尺寸规格

一、120*120,这种广告规格适用于产品或新闻照片展示。

二、120*60,这种广告规格主要用于做LOGO使用。

三、120*90,主要应用于产品演示或大型LOGO。

四、125*125,这种规格适于表现照片效果的图像广告。

五、234*60,这种规格适用于框架或左右形式主页的广告链接。

六、392*72,主要用于有较多图片展示的广告条,用于页眉或页脚。

七、468*60,应用最为广泛的广告条尺寸,用于页眉或页脚。

八、88*31,主要用于网页链接,或网站小型LOGO。

广告形式 像素大小 最大尺寸 备注

BUTTON 120*60(必须用gif) 7K

215*50(必须用gif) 7K

通栏 760*100 25K 静态图片或减少运动效果

430*50 15K

超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果

巨幅广告 336*280 35K

585*120

竖边广告 130*300 25K

全屏广告 800*600 40K 必须为静态图片,FLASH格式

图文混排 各频道不同 15K

弹出窗口 400*300(尽量用gif) 40K

BANNER 468*60(尽量用gif) 18K

悬停按钮 80*80(必须用gif) 7K

流媒体 300*200(可做不规则形状但尺寸不能超过300*200) 30K 播放时间 小于5秒60帧(1秒/12帧)

网页中的广告尺寸

1.首页右上,尺寸120*60

2.首页顶部通栏,尺寸468*60

3.首页顶部通栏,尺寸760*60

4.首页中部通栏,尺寸580*60

5.内页顶部通栏,尺寸468*60

6.内页顶部通栏,尺寸760*60

7.内页左上,尺寸150*60或300*300

8.下载地址页面,尺寸560*60或468*60

9.内页底部通栏,尺寸760*60

10.左漂浮,尺寸80*80或100*100

11.右漂浮,尺寸80*80或100*10

Ⅳ 什么是web标准,为什么要使用web标准

WEB标准不是某一个标准,而是一系列标准的集合。目前所通常所说的WEB标准一般指网站建设采用基于XHTML语言的网站设计语言,WEB标准中典型的应用模式是“css+div”(什么是css+div)。实际上,WEB标准并不是某一个标准,而是一系列标准的集合。

网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的网站标准也分三方面:结构化标准语言,主要包括XHTML和XML;表现标准语言主要包括CSS;行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C组织(什么是W3C组织)起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。

web标准的本意是实现内容(结构)和表现分离,就是将样式剥离出来放在单独的css文件中。这样做的好处是可以分别处理内容和表现,也方便搜索和内容的再利用。

一些Web开发人员和Web设计师对使用Web标准持抵触态度。普遍的看法是它太难了,不管它是怎么运作,我使用的那些软件总会创建出一些不规范的代码。.

学习新的技术并放弃您所熟知的技术,这很容易引起情绪上的反感,并产生抵触的情绪。然而,如果您很理智的观察一下现在的形势,将会发现,通过学习和使用Web标准会得到许多好处。举几个例子:

  • 更简易的开发与维护:使用更具有语义和结构化的HTML,将让您更加容易、快速的理解他人编写的代码。

  • 与未来浏览器的兼容:当您使用已定义的标准和规范的代码,那么您这个向后兼容的文本就消除了不能被未来的浏览器识别的后患。

  • 更快的网页下载、读取速度:更少的HTML代码带来的将是更小的文件和更快的下载速度。如今的浏览器当处于标准模式下将比它在以前的兼容模式下拥有更快的网页读取速度。

  • 更好的可访问性:语义化的HTML(结构和表现相分离)将让使用浏览器以及不同的浏览设备的读者都能很容易的看到内容。

  • 更高的搜索引擎排名:内容和表现的分离使内容成为了一个文本的主体。与语义化的标记结合会提高您在搜索引擎中的排名。

  • 更好的适应性:一个用语义化标记的文档可以很好的适应于打印和其他的显示设备(像掌上电脑和智能电话),这一切仅仅是通过链接不同的CSS文件就可以完成。你同样可以仅仅通过编辑单独的一个文件就完成跨站点般的表现上的转换。

  • Web标准可以为网站的创建者节省时间与金钱,还可以为网站的浏览者提供一个更好的经历。此外,Web标准是未来的。如果你还没有使用We b标准,那么现在应该开始动手了,否则你会落伍的。

Ⅵ Web标准设计的主要内容

《Web标准设计》针对Web开发人员讲解Web标准。开始部分解释了Web标准的一些概念跟误会,之后详细介绍了构成Web标准的各个组成部分,着重介绍了XHTML和CSS的应用,同时还讨论了JavaScript、XML、XSLT的应用,此外还介绍了中文的特殊表现、命名的应用以及Web标准中最常给人忽视的无障碍网页倡议(WAI)。
基于上述的讨论,《Web标准设计》以实例的形式介绍了这些内容的组合应用,以及一些常见和不常见的技术。
虽然《Web标准设计》讲述的内容是Web标准,但由于页数有限,《Web标准设计》无法让你精通Web标准所有的知识点,我选择的重点是XHTML+CSS,其他的方面只能说让你达到了解、掌握基础的地步。

Ⅶ 公司后台管理web界面设计尺寸是多少

这个一般用百分比来设计,头部固定高度,左侧固定宽度,右侧用100%-左侧宽度,以达到最佳浏览效果
一般后台管理都会有表格编排问题,会涉及到很多参数,用百分比可以根据表格属性自动伸缩,而且不影响美观性
望采纳

Ⅷ web端设计和web前端开发 的区别 (详情)

是否会写代码

Ⅸ web界面设计规范有哪些

一、网页尺寸
制作网页时,我们选用的分辨率是72像素/英寸,使用的画布尺寸1920px*1080px。
但是并不代表我们可以在整个画布上作图。
网页的布局主要有两种,左右型布局和居中型布局。布局的不一致,使得可设计的空间也不相同。
二、网页字体
字体设计的总原则是:可辨识性和易读性。
网页的文字设计是系统默认的字体:宋体、微软黑体、苹果系统黑体,英文则建议使用arial无衬线字体
常用的字号大小有以下几种:
12px是应用于网页的最小字体,适用于非突出性的日期,版权等注释性内容。
14px 则适用于非突出性的普通正文内容。
16px、18px或者20px 适用于突出性的标题内容。

Ⅹ Web 服务封装规范

本系统中的网格服务管理中心和数据绑定接口全部采用 Web 服务技术进行开发,下面介绍 Web 服务封装有关的规范。

Web Service 是基于网络的、分布式的模块化组件,它执行特定的任务,遵守具体的技术规范,这些规范使得 Web Service 能与其他兼容的组件进行互操作。它可以使用标准的互联网协议,像超文本传输协议 HTTP 和 XML,将功能体现在互联网和企业内部网上。Web Service 最大的优势就是提供了跨平台的用不同语言编写的各种程序之间交互的一系列标准。Web Service 可以采用多种编程语言进行编写,如 C#,Java 等。

Web Service 是通过一系列协议规范来保证分布式应用程序之间的动态连接。目前这些协议规范有:

(1)XML 与 XSD 规范。XML(可扩展标记语言)是 Web Service 平台中表示数据的基本格式。具有易于建立和易于分析的特点,除此之外,XML 主要的优点在于它与平台和厂商无关。XML 是由万维网协会(W3C)创建,W3C 制定的 XML Schema XSD 定义了一套标准的数据类型,并给出了一种语言来扩展这套数据类型。Web Service 平台用 XSD作为数据类型系统。当使用某种语言如 C#来构造一个 Web Service 时,为了符合 WebService 标准,所有使用的数据类型都必须被转换为 XSD 类型。如想让它在使用不同平台和不同软件的不同组织间传递,还需要用 SOAP 协议将其包装起来。

(2)SOAP 协议规范。SOAP 是 XML 文档形式的调用 Web 服务方法的规范,它可以支持不同的底层接口,像 HTTP(S)或者 SMTP。之所以使用 XML 是因为它独立的编程语言,良好的可扩展性以及强大的工业支持。之所以使用 HTTP 是因为几乎所有的网络系统都可以用这种协议来通信,由于它是一种简单协议,所以可以与任何系统结合,还有一个原因就是它可以利用 80 端口来穿越防火墙。SOAP 的强大是因为它简单。SOAP 是一种轻量级的,非常容易理解的技术,并且很容易实现。它有工业支持,可以从各主要的电子商务平台供应商那里获得。从技术角度来看,SOAP 详细指明了如何响应不同的请求以及如何对参数编码。一个 SOAP 封装了可选的头信息和正文,并且通常使用 HTTP POST 方法传送到一个 HTTP 服务器,当然其他方法也是可以的,例如 SMTP。SOAP 同时支持消息传送和远程过程调用。

(3)WSDL。WSDL 是定义如何利用 XML 语法描述 Web Services 的规范。它通过在服务提供者和服务请求者之间交换的消息来描述 Web Services,可被看做是 Web Services 和外界沟通的桥梁。WSDL 文档描述了用户调用 Web Services 所需的一些关键信息: WebServices 的名称、Web Services 的获取地址、可供调用的方法、每个方法的输入输出参数类型。因为是基于 XML 的,所以 WSDL 既是机器可阅读的,又是人可阅读的。

(4)UDDI。UDDI 是一套基于 Web 的、分布式的、Web Service 信息注册中心的实现标准,UDDI 的设计目的是为电子商务和服务发现机制提供标准的信息格式和服务调用。同时也包含一组使企业能将自身提供的 Web Service 注册,以使别的企业能够发现的访问协议的实现标准。因此,企业可以使用 UDDI 找到潜在的合作伙伴。