设计：16款设计导航网站，你要的全在这了

基本内容

网络上的变革每天都在发生，当我们觉得网站设计技术已经非常简单和熟悉的时候。国外网站设计标准化的概念早已悄悄的形成和迅速“蔓延”，自2000年起，大部分新发行的浏览器版本都开始支持网站标准。主流的网页编辑工具也开始全面支持网站标准，甚至一些软件几乎完全由XML文件组成，例如Dreamweaver MX。一些著名的大型商业网站开始采用网站标准来重新构建另外一些则拒绝非标准浏览器浏览它们的网站众多的设计网站和个人网站更是标准推广的先行者，纷纷转向采用XHTML+CSS来建立。2004年2月4日XML1.1推荐标准正式发布，标志着网站设计的标准时代已经到来。

一.为什么要建立网站标准

我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的“浏览器大战”，为了兼容Netscape和IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。

如何解决这些问题呢?有识之士早已开始思考，需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司(Netscape、Microsoft等)也终于认识到统一标准的好处，因此在W3C(W3C.org)的组织下，网站标准开始被建立(1998年2月10日发布XML1.0为标志)，并在网站标准组织(webstandards.org)的督促下推广执行。

简单说，网站标准的目的就是：

提供最多利益给最多的网站用户

确保任何网站文挡都能够长期有效

简化代码、降低建设成本

让网站更容易使用，能适应更多不同用户和更多网路设备

当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。

对于网站设计和开发人员来说，遵循网站标准就是使用标准对于你的网站用户来说，网站标准就是最佳体验。

访问量排名世界第4，中国第1的新浪网站，也遭遇非标准DHTML的问题。在最新发布的Netscape7和Mozila1.6浏览器中，新浪首页的漂浮广告全部失效，层叠挤在页面左下角。也许那些广告主认为损失这些潜在的用户无所谓。(截图日期2004年4月12日)

二.什么是网站标准

网站标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。我们来简单了解一下这些标准：

1.结构标准语言

(1)XML

XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的.不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。

(2)XHTML

XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。

2. 表现标准语言

CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

3.行为标准

(1)DOM

DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们。

这个网站在国内排名也是不很的，你可以用百度找一下就可以找到这个网站的！

一、画板尺寸

因为网页尺寸与用户屏幕相关，而用户屏幕的种类难以统计。所以我们的设计稿只能主要顾及主流用户的分辨率，其他分辨率用适配的方式来解决。在最新版Photoshop网站Web预设尺寸给了我们一些启示：常见尺寸(1366x768px)、大网页(1920x1080px)、最小尺寸(1024x768px)、Macbook Pro13 (2560x1600px)、MacBook Pro15(2880x1800px)、iMac 27(2560x1440px)等。

二、文字规范

我们现在都知道了网站上面的文字是通过前端工程师重新写在代码里的。那这种文字在浏览器上的渲染与系统和浏览器有关。

三、图片规范

网站设计中的图片常用4(宽)：3(高)、16(宽)：9(高)、1:1等比例。具体图片大小没有固定要求，但整数和偶数为佳。

四、按钮

按钮的风格在过去的十几年发生了很大的变化，由一开始的“斜面与浮雕”风格过渡到后面的“拟物风格”，现在更流行的是扁平风格。

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 密码输入在需求中定义密码是否允许为空或空格密码是否允许特殊字符是否区分大小写，密码的可输入长度程序中应给出文字说明密码的可输入长度。

不固定的内容： 1.网页背景 a.纯色背景平铺(自适应浏览器) b.渐变色或底纹平铺背景(自适应浏览器) 目前网页设计中都会做通栏大图，以方便吸引客户，增加网站整体美观 c.通栏大图

二.屏幕分辨率 1.标准分辨率：1024px*768px(目前10%-20%的用户在用) 主体设计内容宽度：1000px(常用宽度：960px，1170px，980px，1100px，1200px) 首屏高度大约在700px

2.常用分辨率：1280px*768px 主体设计内容宽度：1200px(常用宽度：1190px，1170px，1100px，1200px) 首屏高约：750px

三.设计文档大小 1.PS中新建文档宽要大于主体设计内容的宽度(目的为了表现设计意图，展示背景效果，左右宽度最少200px) 2.设计到通栏大图片新建文档的宽度：1920px，所有的设计文档宽1920px主体内容根据具体情况而定(主体内容要是想要适应所有用户必须低于1000px)