完美企业网站的101项指标

世界上最有趣的职业是网站设计师，有人为自己的作品喊价5000美金，有人129美金就行，而很多人并看不出这两者的差别，我见过一个加拿大 Freelancer 设计师，他的网站上有个报价系统，你可以选择自己的预算范围，其中最小的一个选项是2500-5000美金，而在 Craigslist （www.craigslist.org）上，百把美金的网站设计师比比皆是。如果你读 Alistapart (www.alistapart.com)，就会知道顶尖设计师整天都在想什么，他们简直是小题大做，为一些细微的东西较真，这世界上不乏追求完美的人，而完美并不存在，于是所有人都胡乱地做，网站是这样一种产品，它的消费者以为是高不可攀的东西，在设计者眼里可能视之如草芥，它的门槛如此之低，而真正的好作品又是如此之难。中国有130万网站，它们要么从来就没有更新过，要么包含了大量技术错误，要么压根无法在第二种浏览器中访问，要么被搜索引擎彻底抛弃，要么惨不忍睹，要么让人摸不着头脑，要么一攻即可破，要么过度设计得象爆发户，要么简陋得象草台班子。
　　
　　《完美企业网站的101项指标》是这样诞生的，大约在1999年始，我从事的职业相当于企业的 IT 咨询顾问之类，主要面向企业的 Web 应用与开发，先后参与开发了 COMSHARP E2RP 和 COMSHARP CMS （www.comsharp.com）两个产品，后者是一个网站内容管理系统，认为本帖是广告帖的读到这里可以选择离开，很多人仍然记得90年代末，2000年初的那段日子，那时 Netscape 还没有死，Firefox 还没有诞生，但 Opera 已经悄无声息地活着了，因为它太低调，人们使用 Javascrīpt 探测浏览器版本的时候甚至都没想到它。那个时代，为不同浏览器输出不同 HTML 代码很流行，微软的 DHTML 很激动人心，在网站上开 Javascrīpt 特效很酷，Java Applet 更酷，总之，人们在 Web 泡沫尚且丰富的那个时期，为 HTML 这个乡下丫头肆意地打扮，新技术层出不穷，而每个新技术人们都无不用其极。
　　
　　在先后从事这两个产品开发的空隙，一直到2007年，我都在从事 Web 易用性，安全，W3C标准以及 SEO 方面的研究，这方面的积累是101指标的基础，前面说过，完美是不存在的，所以我并不保证这101项指标本身是完美的，而且标准也在随时变化，从这个意义上说，完美企业网站只是一个目标，101指标分强制性指标和指导性指标，强制性指标一般针对易用性，安全，W3C标准以及SEO等方面，而指导性指标针对的是内容和设计。《完美企业网站的101项指标》现在是第二版，我会随时调整其中的条目推出更新版本。

　　我们有一套严格的标准，包含101项指标，用来评测企业网站是否完美，COMSHARP CMS 建立在这套标准之上，这101项指标分为7个类别，它们是：

• 内容
• 易于使用
• 设计
• 安全
• 性能
• W3C标准
• SEO

　　我们把内容放在第一位，而把很多企业过分侧重的设计放在第三位，事实上，在一个企业网站中，内容代表整个站点80%的价值，这是 COMSHARP CMS 反复强调的东西。如果将上面的7个方面用于人，我们不妨这样理解一个完美的人：

• 内容 （我有真才实学）
• 易于使用 （容易沟通与相处）
• 设计 （看上去也很棒）
• 安全 （非常可靠）
• 性能 （健康强壮）
• W3C标准 （遵守规则）
• SEO （被很多人关注）

数位设计引入了一种新的图标设计样式。以下是设计和创建样式图标的具体规范。
图标样式应该有趣、色彩丰富且充满活力，因为现在的系统支持图标是32位图标，并且边缘非常平滑。在矢量程序中绘制完每个图标后，再用Adobe Photoshop进行处理可使图像更加完美。本规范是专为设计者编写的。在创建图像时，建议您与高水平的图形设计者一起工作，尤其是具有丰富的矢量和3D软件经验的图形设计者。

图标设计概述的目的是让您熟悉WindowsXP的新样式，为创建图标做好准备。
图标样式特性
(1) 色彩丰富，是对WindowsXP外观的补充。
(2) 不同的角度和特性为图像增添了动态活力。
(3) 元素的边角十分柔和，并略微有些圆滑。
(4) 光源位于图标的左上角，同时有环绕光照亮图标的其它部分。
(5) 渐变效果使图标具有立体感，进而使图标的外观更加丰满。
(6) 投影使图标更具对比度和立体感。
(7) 添加轮廓可使图像更清晰。
(8) 日常对象(如计算机和设备)具有更现代化的个人外观。

图标尺寸
Windows XP图标有四种尺寸，建议使用以下四种尺寸：
(1) 48×48像素
(2) 32×32像素
(3) 24×24像素
(4) 16×16像素

图标色彩深度支持
WindowsXP支持32位图标。32位图标为24位图像加上8位alpha通道。使图标边缘非常平滑，且与背景相融合。
每个WindowsXP图标应包含以下三种色彩深度，以支持不同的显示器显示设置：
24位图像加上8位alpha通道(32位)
8位图像(256色)，加上1位透明色
4位图像(16色)，加上1位透明色

调色板
图标中使用的主要颜色。

对象的角度和分组
WindowsXP样式图标使用的网格：并非所有对象使用16×16的复杂图像都能获得较好效果。某些对象通常以直观图像显示：文档图标、符号图标(如警告或信息图标)、单一对象图标(如放大镜)

除非创建重叠辅助对象可以更清楚地表达图标的含义，否则就可读性和完整性而言，还是应使用直观图像。还应考虑如何按组查看图标，以便确定如何将对象分组。

投影
使用投影后，WindowsXP图标将更清晰且更具立体感。可在Photoshop中实现这种效果，本指南的后面部分将对此进行描述。若要为图像添加投影，请在 Photoshop中双击图像的图层，并选择Drop Shadow。然后将Angle更改为135，Distance更改为 2，Size更改为2。此时投影为75%不透明黑色。

轮廓
绘制XP样式图标时，为图像添加轮廓可使之更清晰，并可保证图像在不同背景色上都具有较好效果。

概念
设计图标时，请考虑以下因素：
使用已有概念以确保真实表达了用户的想法。考虑图标在用户界面环境中以何种形式出现，以及如何作为图标集的一部分使用。考虑图形的文化背景。避免在图标中使用字母、单词、手或脸。必须用图标表示人或用户时，请尽可能使其大众化。如果图标中的图像由多个对象组成，应考虑如何使图像尺寸更小。建议在图标中使用的对象不超过三个。对于 16×16的尺寸大小，还可考虑删除某些对象或简化图像使之更容易辨认。

透明工具
将Gif Movie Gear(GMG)打开一个对话框，其中显示您的图标。使用吸管工具单击图标的背景色。此颜色将更改为暗黄绿色(或在 GMG中选作透明背景色的颜色)。重复所有4位和8位帧。若要保存图标，请选择 File->Save Icon As...。

创建工具栏
Windows工具栏图标除不使用投影之外，使用的样式与其它图标相同。由于工具栏图标非常小，建议您使用简单的图像。如果以直观方式显示图像即可清晰地表达图标的含义，则不必使用其它复杂方式。

创建AVI
WindowsXP使用8位AVI。创建.avi文件的过程与创建图标的过程相同-在Photoshop中准备图像，然后将其拖动到GMG 中。请按以下指导创建8位图标。若要使用GMG保存AVI，请转至File->Export As->AVI file。
创建.avi文件时，请考虑以下因素：使用品红(R255 G0 B255)作为背景透明色。在Photoshop中，重要的一点是不要出现杂散像素。请将填充能力设置为0，并确认未选中取消锯齿.

一个网站无论做得如何完美，如果不将它推广开来，靠推广来提高它的访问量，那么，这个网站只能说是做给自己看的，它存在的意义就大为逊色了。可如何推广，如何提升自己网站的访问量，并且能够吸引客户的眼球，让他从今天的新客户变成明天的老客户？结合笔者自身经验，今天就从内部因素和外部因素两个方面来聊聊这个问题。

一、内部因素

首先，得有一个内容、版面、规划、设计都差不多的网页，这些东西作为你网站的门面，一定要注意主页的美工设计是否到位，整体的框架结构是否合理，页面上所用的图片是否与你主页的内容相配合，也就是说整体的搭配是否协调。

其次，注意网站的速度。堆放太多的Falsh是会影响速度的，试想，几分钟才打开一个页面的网站会有几个浏览者愿多呆一秒钟呢？时间就是金钱，就是效益，与其在这儿傻傻地等待一个页面，有这功夫，人家早都打开另外的几个站点了。显然，这时候你就已经失去了一个潜在的客户，当然你也失去了一个本来已经很不容易才得到的浏览量。所以，王靖提示大家，在你选择免费空间的时候，一定要选速度最快的。

此外，要使用静态页面[HTML]语言。使用静态页面[HTML]，在源文件中加入与主页主题内容相关的关键词，这也是主页推广的好办法。当您的关键词与搜索引擎工作时用到的搜索词相匹配时，您的网址便成为了搜索结果之一。这样，就不愁他不来点击咱的站点的。呵呵，选择好的关键词这一项可是很重要的哦：））

最后要合理利用收藏夹。毫无疑问，被访问者收藏后，旧地重访的几率要远远大于那些人凭记忆来回想网址的访问者。所以，如何让你的网页添加到浏览者的收藏夹是个很值得你去花时间研究的问题。将网站做得不但出色还能吸引人，再借助一些java弹出窗口来提醒浏览者，及时添加收藏，相信这个办法给你的网站带来一定效果的。

二、外部因素

1.登记搜索引擎

想必这个方法是所有使用搜索引擎的网友都必须掌握的技能，登记搜索引擎的目的也就是为了更有效地进行网站推广。到新浪、搜狐、google、yahoo等一些大的搜索引擎网站去登记一下，只是填一些表格而已，虽是一个小举动，却会给你带来意想不到的效果哦。

2.走出去，主动宣传

把网址连同网站相关资料做成一个签名，或文字链接，或做成一个图片，在发送Email或者行走BBS时，放在发言的下面，既排除了乱发广告的嫌疑，还能起到宣传的作用，岂不是一举两得吗？

3.友情链接

通过友情链接来增加访问量也是目前推广网站的好方法，不论是文字还是LOGO链接，只要链得合理，也会带来一笔不小的流量。要注意的是，一定要找一些访问量较大的网站来做，最好要求对方在显眼的位置摆放，还要找与本网站内容相关或相近的网站进行链接，更有利于提高排名。这点可参照电子商务指南的友情链接www.111cn.net ^_^提醒一点，主页上放过多的LOGO链接会减慢你网站首页的打开速度，对此，可要适合而止。

4.与对方网站交换广告

这个就需要技巧了。当一个浏览者进到你的站点，首先就为你创造了一个访问量，如果恰巧他对你页面上的广告感兴趣，他就会选择点击，而这个点击又给你带来了一个浏览量。如此循环，你的访问量当然就会与日俱增了。另外，放置广告还能增加主页的内容，也可起到一个美化的作用，这就看你怎么去利用它了。

通过以上介绍，相信现在的你基本上已经心中有数了吧。将内因与外因结合使用，你的主页访问量必定会有所增加。需提醒一点的是，你网站的内容也要不断更新不断充实，最好定期美化一下，这样才能在稳定访问的基础上不断增加访问量。关于其他一些因素，则需要我们在实践中不断地摸索，好的方法别忘拿出来大家一起分享哦：））

我www.111cn.net的网站架起来有一段时间了,里面的文章有上万篇了,奇怪的是我有搜索引擎总是找不到我的网站,我查了原因,没想到,是我网站原创文章太少,所以我昨天写了一篇ajax+php用户注册功能的代码,发上去,没到第二就被google收集了,虽然给我带了的IP只有几个,但是让我太太的发现搜索引擎软件喜欢原创文章,

最后,各位站长如果想自己的网站被搜索引擎软件经常光顾的话,就多写一些原创文章吧.

Rules and preference for designing a website can differ from website to website depending on the target audience, whether it is entertainment website or corporate website or just a personal portfolio. But there are still somethings that are common in all websites, and if followed can make your site look better. So here are few things I would like to discuss.

 

网站设计要根据目标受众，选择设计方法。娱乐性网站，公司网站以及个人网站设计方法都不相同。但是网站设计中有一些通用原则，如果遵循这些规则，网站看上去会更专业。下面，介绍几个要点。

1. Font Style and Size
1.字号和字体

Selecting a right font and size is essential. For example fonts such as Verdana, Arial and Helvetica look especially good in websites, whereas fonts such as Times New Roman, Courier, Sans-Serif... etc types won't look good. Also the size of the font plays important role in website design, smaller sized fonts look neat but it is more difficult to read. So it is your decision to make a choice between the look and usability. Following is the comparison between Times New Roman and Verdana.

选择合适的字号和字体，是网站设计要考虑的一项重要内容。比如说，网站中使用Verdana、Arial和Helvetica字体，就会使页面看起来非常舒服，然而， Times New Roman、Courier、Sans-Serif等字体就不会有这样的效果。同样，字号在网站中也能发挥重要的作用，稍小的字号会使内容看起来更整洁，但不利于用户的浏览 。所以，你要在外观和可用性方面作一个选择。下面就是Times New Roman和Verdana的一个比较：

 

This sentence is in Times New Roman with size 3 （Times New Roman3号字体）

 This sentence is in Verdana with size 3（Verdana3号字体）
 
This sentence is

in Times New

Roman with size 2 （Times New Roman2号字体）

 This sentence is

in Verdana with

size 2 (Good

Choice) （Verdana2号字体）（是一个好的选择）
 
This sentence is

in Times New

Roman with size 1（Times New Roman1号字体）
 This sentence

is in Verdana

with size 1 （Verdana1号字体）
 

2. Using tables? Don't forget the cellpadding
2.使用表格时利用cellpadding属性

 

Almost all the websites use tables in one way or another, but using tables with a sense of design will make your site look better. If you use tables background colors in your page, then it is very important to use cellpadding, otherwise all the text inside the table will stick to the border of the table. Which is not recommended at all. Here is the Examples:

几乎所有网站都会利用一种或者几种表格，但是只有正确使用表格才会使网站看上去更美观。如果在网页中运用表格背景色，那你必须要运用cellpadding这个属性，否则表格内容会到边缘，这样的效果很不好。下面就是一个比较，上面的表格利用了cellpadding属性，下面的没有使用。 This table has a cellpadding of 10. This table has a cellpadding of 10. This table has a cellpadding of 10. This table has a cellpadding of 10. This table has a cellpadding of 10. This table has a cellpadding of 10.
 

 

 

 

This table has a cellpadding of 0. This table has a cellpadding of 0. This table has a cellpadding of 0. This table has a cellpadding of 0. This table has a cellpadding of 0. This table has a cellpadding of 0.

 

3. Design websites for 800x600 resolution
3.网站设计考虑800x600分辨率

While 1024x860 resolution is the most used resolution online, it is recommended to design your website 800x600 compatible. Because there are people who still use 800x600 resolution. There are different ways to design a website which is compatible to 800x600 resolution.

现在，用户使用最多的是1024x860分辨率，但是，必须保证网站可以在800x600分辨率的状态下呈现，因为仍然有用户在使用这个分辨率。要保证网站在800x600的分辨率下呈现，可以利用很多方法。

1. For example you can design it in a way that it will stretch to any size (any resolution), here is one good example of such website. Alamy.com

 

1.比如说，你可以将网站设计成能够自动适应任何尺寸（或任何分辨率）的网站，Alamy.com就是这样的一个网站。

2. Another way is fixed size such as this website. The size does not change no matter how much is the resolution. Yahoo.com

2.另一种方法就是将网站设计成固定尺寸，比如：W3pop.com，它不会随着分辨率的改变而改变。Yahoo.com也是这样的网站。

3. And finally not so user friendly but still acceptable design that is all the content is placed on the table not exceeding 800 pixels. There will still be a horizontal scroller on your browser but at least you don't have to scroll it when you are reading something on the site. Here is a good example of such site: Tomshardware.com

3.最后，还有一种方法虽然不是广为人知，但仍然有人使用，那便是在表格中放置宽度不超过800像素的内容。虽然会在浏览器上出现水平滚动条，但当你阅读信息时，你完全没有使用它的必要。Tomshardware.com就是这样的一个网站。

4. Pop up window? Bad idea
4.避免出现弹出窗口

Pop up windows are a good to catch user's attention and force him to take action (at least to make him close the window), but it is annoying and generally users don't like it. So unless it is very essential to use a pop up window for you - I would say avoid using it. Even though you can program it to pop up only once, it is still considered a bad idea.

使用弹出窗口，确实能吸引用户的注意力，促使他们采取行动（至少可以使它们阅读内容），但是大多数用户对这个感到厌烦。因此，只有在非常有必要的情况下，才可以使用探出窗口，不过，最好是一次也不要用。

Especially now with the browser's build in pop-up blockers, most of the popups are left blocked.

现在很多浏览器自带了弹出框屏蔽器，大多数弹出框都会被屏蔽。

5. Mention Image height and width in html <width="120" height="100">
5.在html中使用<width="120" height="100">来设置图片的高度和宽度

When browser opens a particular page it tries to understand the html, so when you leave the image without mentioning its dimensions, browser gets confused how much space it supposed to take, thus it will slow down the loading of the page. However if you mention the width and height of the image, browser can know exactly how much space should it allocate for particular image, and even before the image loads it can allocate this space to it and continue loading the rest of the page. So if you want your pages to load faster, don't forget to include image width and height.

 

当浏览器打开网页的时候，它会试图读懂html的语言，所以在没有涉及到图片尺寸的情况下，浏览器不了解图片会占用多少空间，因此图片下载速度会减慢。然而，如果设置了图片的长度和宽度，浏览器就可以了解图片的存储空间，会在下载以前分配图片的空间，然后继续下载网页的其它部分。所以，要使网页下载速度加快，就需要在在html中使用<width="120" height="100">来设置图片的高度和宽度。

 

6. Follow the web conventions.
遵循网站设计规则

Web conventions are very useful when it comes to web design, if you follow them you will make your user's life a lot easier. After all only useful things will become a convention. For example having the logo on the top-left corner of your website and linking it to the homepage is one of the conventions. Or employing consistent navigation throughout your website is another convention.

在设计网站时，遵循网站规则很重要，这样可以方便用户进行浏览。当然，只有有效的方法才会成为规则。比如说，logo要放置在网站的左上角，并且可以与首页进行链接，这是一个规则。网站的导航系统要连贯是另外一个规则。

 

7. Avoid under construction pages.
7.避免出现未建设完成的网页

 

Publish your websites only if it is fully completed, or if you have unfinished pages then do not put those pages online yet and do not provide link to them until they are fully completed. Under construction pages are totally useless, it will waste your user's click and might even generate negative effect towards your website (or you). Because if you think from user's perspective you don't want to click on the link just to find out that this page is under construction.

只有在网站建设完成之后，才可以在网上呈现，如果某些网页没有完成，就不要把它们放在网上，或者是不要进行链接。未完成的网页毫无作用，只会浪费用户的点击时间，这样会对网站产生消极的影响。因为，如果站在用户的角度考虑，你肯定不想链接完成之后，看到一个正在建设的网页。

 

8. Underlined texts that are not links.
8.不要给非链接文本内容添加下划线

nly links should be underlined, if you underline the text then make sure the user will not confuse it for a link.

能够进行链接的内容可以加下划线，但非链接文本就不要出现下划线，因为这样会使用户产生混淆。

9. Avoid intros and Welcome pages
9.抛弃引导页和欢迎页

Unless you have a very impressive intro (maybe designed by 2advanced) avoid using intros. As for the welcome pages that has an "enter" button and some info about the site should be avoided as well. Basically with welcome page you are stopping your users from actually seeing your site, you are keeping them one step behind. You never know maybe some of your users leave your site without even clicking on your 'enter' button, if so then you are loosing a potential customers.

如果引导页不是令人印象特别深刻，那就不要出现。出现“进入”以及某些信息的欢迎网页最好也不要出现。如果使用欢迎页面，那就意味着用户需要多点击一次，才能找到所需要的内容。你可能不知道，一些用户在点击“进入”键之前就已经离开网站了，这就意味着网站流失掉一些潜在用户。