本文描述了一个量化用户体验的快餐式的方法，我发现这个方法对于提供给客户一个关于他们的网站和过去开发所作努力的快速、客观、形象的表现很有帮 助。

什么是用户体验？

“用户体验”这个术语指的是一个概念：把最终用户作为设计和开发活动的焦点

，而不是系统、应用程序或者单纯的审美价值。它是基于一般的以用户为中心（用户至上）的设计理念。

用户体验主要由四个因素组成：

• 品牌
• 可用性（注释：用户能够使用一个界面来达到他们的目的的难易程度）
• 功能
• 内容

单独作用的话，这些因素中没有一个能带来积极的用户体验；然而，如果综合起来，这些因素就组成了一个网站成功的主要因素。

举例来说，一个设计精美的网站，却频繁地出现服务器错误或超时。或者想象一个很棒的数据库应用程序，由于某种原因而从未被使用过，因为 它被深深地掩埋在了网站信息架构的深处。在两种情况中，我们都可以看到，独立的品牌、可用性、功能和内容等要素是无法说明一个网站是成功的。然而，当综合 在一起时，这些核心要素就构成了用户体验的基础。

目标分析工具的必要性

比如说你来了一位新领导 – 他们对网站现状不满意，想让你帮忙把握网站的正确航向。如果你像我一样的话，第一件要做的事就是先浏览一下这个网站，然后在脑海中做一些粗略的记录。然后 你怎样把这些想法和记录传达回给你的客户，而不是简单地像撕成八瓣一样对现有网站批判一番？

问题在于，我们每个人对一个网站是好还是坏的感知，是受我们个人背景和行业特性的影响而有所偏倚的。如果被叫来评价一个网站的优点和缺 点，一个开发人员、可用性专员、设计人员或信息架构人员可能会有完全不同的评判。

一个客观的测量分析工具，会帮你提供给客户有事实依据的建议，而不仅仅是主观臆断和观点。本文中我们将探讨的方法会帮助你：

• 尽可能消除个人偏见（主观因素）
• 让不同背景的人（设计人员，开发人员，客户）能够在理解网站上有统一的共识
• 创建基准规则，以便于网站与其竞争者或过去的开发努力作比较
• 为你的客户提供一个关于他们网站的优缺点的事实依据和可视化的展示

衡量用户体验

如上所述，用户体验由四个相互关联的要素所组成：

• 品牌
• 可用性
• 功能
• 内容

但是，我们如何量化和衡量这些看似无形的元素呢？

方法很简单。我们把分析分为四个部分 – 每个用户体验的元素为一个部分。对于每一个元素，我们创建一系列的描述或参数，用于针对性地测量网站。我们为每一个描述创建一个从1到X的尺度范围；并且 在这个范围内给每个描述打分。

一旦你完成了这个分析的第一部分，四个栏目中的每一个描述就都有了一个对应的分数。

在本文附上的范例分析中，我们只为每个元素使用了五个描述或参数。因此，我们使用了一个20分的尺度范围，这样网站的最高分值就是 100。所以，如果我们为每个元素添加额外的五个描述或参数，我们就会使用10分的尺度范围来打分。

下面就是对范例分析中的每个元素以及描述或参数的概要：

品牌

品牌包括在网站中所有审美的、设计相关的项目。它带给网站想要的组织形象或信息的创意。用于测量品牌的描述包括：

• 网站提供给访客有吸引力的和难忘的体验
• 网站的视觉效果与品牌特征保持一致
• 图像、附加内容和多媒体对于体验的增值
• 网站传达出品牌的感知预示
• 网站利用了媒体的能力来增强和扩展品牌

功能

功能包括所有技术方面的和“后台的”进程和应用。它让网站提供给所有最终用户交互式的服务，而且重要的是，注意这有的时候同时意味着前 台公众用户和后台管理员。网站功能的描述包括：

• 用户及时获得对他们查询和提交信息的响应
• 任务进程的清晰告知（比如，成功页面或邮件更新提示）
• 网站和应用严格遵守通用的安全和隐私标准
• 在线功能与离线业务流程结合
• 网站包含管理员工具来加强管理员的效率

可用性

可用性带来的是所有网站元素和特性的总体易用性。可用性之下的二级主题包括导航和易用性（友好度）（注释：易用性处理的是使在线内容可 用于用户的体验，享受和使用的问题）。可用性的描述包括：

• 网站防止错误发生，并帮用户从错误中恢复
• 整体网页侧重针对主要受众优化
• 网站帮助访问者达成一般目标和任务
• 网站遵循它自己的一致性和标准
• 网站为残疾用户提供内容

内容

内容指的是网站的实际内容（文本，多媒体，图像）及其结构，或信息架构。我们来看信息和内容是如何按照定义的用户需要和客户的商业需求 组织的。测量内容的描述包括：

• 链接密度有足够的清晰度，且容易导航
• 内容组织方便用户达到目标
• 内容及时准确
• 内容适合客户需要和商业需求
• 多语言的综合性内容

在多数情况下，我会为这四种元素分别使用10到20个独立的描述。我建议你使用如上描述作为你创建你自己的分析的基础。请记住，如果你 添加了更多的描述，你必须也调整20分的尺度，以便每个元素的总分为100。例如，如果你为每个元素使用10个描述，那么你的评分尺度应该是1-20。如 果你为每个元素使用20个描述，你的尺度应该是1-5。

作为这一类分析的例子，请你下载这个范例Excel文件。

显示你的结果

一旦你完成了你的分析，并且得到了每个描述或参数的分值，就是时候把数据放入清晰而便于告知的格式中去了。

首先我们要做的是，把每个元素的所有的分值加总。因为我们已经设置了分值尺度，来为每个元素提供满分为100的分数，我们真正得到的是 一个百分比的分数。一旦我们有了这些百分数，我发现最有效的是创建一个雷达图来直观地呈现。微软的Excel或者Open Office Calc都很适合，尽管任何带有图表功能的数据表软件都可以。

使用你的数据表软件，你可以创建一个可视化的数据展示。请参见你在上面下载的示例文件来获取更多的范例。

对你的分析发挥创意

关于本文描述的分析和方法最棒的事情是，他们可以用于满足你的特定客户或项目需求。

你当然可以在分析中添加第五个类别来描述易用性（友好度）或者商业指标。例如，你得到了一个政府客户，需要严格遵循508规则（针对美 国）。你可以容易地创建一套描述或参数来专门处理易用性（友好度）元素，修改你的图表来相应展示。同样，你也可以很容易地创建一个类别来专门处理你的客户 的重要商业指标，比如，ROI，点击率，转化量，或者重复顾客数。

可选地，这个分析平台还可以让你能够为你选择的元素添加更大的权重。比如说你有一个客户，他是奢侈品生产商，并且主要侧重在品牌和视觉 效果上。你当然可以创建一个修改过的测量系统，来为品牌要素提供更大的权重，而为，比如说，可用性要素上减少权重。

实际应用

我已经把这个分析用于很多我所从事的项目。我常常在新客户的提案中包含一个“快餐式”分析作为附录，来提供预期的客户一个关于他们网站 相对于竞争者的简单印象。

提供这类的评论通常能够给你一个极好的机会来展示你的专业性。机会是其它竞标的公司不会包含这样的免费咨询服务 – 并且你在提案中包含的这个报告可能会是一个对你有利的决定性因素。

在其它事例中，我已经有客户出钱购买关于他们网站的深入的分析和完整的建议。这类报告包括，对于每种描述或参数，完成不同的描述性段 落，再配上截屏范例。如果我最终通过跟进我的建议而赢得了客户，我通常会预定网站发布6个月后的再一次评估，作为显示进步的方式，同时加强我的服务的价 值。

这种分析也能作为一个入门项目，引出更多的业务。如果你给这种分析定价合理，它可以是一个很棒的工具来让你得到新客户，并展示给他们你 的服务的好处。

译者：Leon Zhang, 数字营销宝典 (DigiMarketing.cn)

原作者：Robert Rubinoff；原文：http://www.sitepoint.com/print/quantify-user-experience

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• WEB日志格式及分析工具
• 默认Web字体样式
• 页面元素的两种表达状态：常态，暂态
• 雅虎发布网站性能监测工具：从用户角度衡量
• 迈过社会化网络：互联网的新时代
• 设计中的色彩：黑色
• 设计中的色彩：白色
• 解码 Web 开发语言
• 苹果 vs. 微软 – 网站可用性研究
• 网页设计现状：2010年设计趋势[下]

Feed enhanced by Better Feed from Ozh

一、日志格式类型

目前常见的WEB日志格式主要由两类，一类是Apache的NCSA日志格式，另一类是IIS的W3C日志格式。NCSA格式又分为NCSA普 通日志格式（CLF）和NCSA扩展日志格式（ECLF）两类，目前最常用的是NCSA扩展日志格式（ECLF）及基于自定义类型的Apache日志格 式；而W3C扩展日志格式（ExLF）具备了更为丰富的输出信息，但目前的应用并不广泛，所以这里主要介绍的是NCSA扩展日志格式（ECLF）。

二、常见日志格式的组成

这是一个最常见的基于NCSA扩展日志格式（ECLF）的Apache日志样例：

58.61.164.141 – – [22/Feb/2010:09:51:46 +0800] “GET / HTTP/1.1″ 206 6326 ” http://www.google.cn/search?q=webdataanalysis” “Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)”

可以看到这个日志主要由以下几个部分组成：

访问主机（remotehost） 显示主机的IP地址或者已解析的域名。

标识符（Ident）由identd或直接由浏览器返回浏览者的EMAIL或其他唯一标示，因为涉及用户邮箱等 隐私信息，目前几乎所有的浏览器就取消了这项功能。

授权用户（authuser）用于记录浏览者进行身份验证时提供的名字，如果需要身份验证或者访问密码保护的信 息则这项不为空，但目前大多数网站的日志这项也都是为空的。

日期时间（date）一般的格式形如[22/Feb/2010:09:51:46 +0800]，即[日期/月份/年份:小时:分钟:秒钟 时区]，占用的的字符位数也基本固定。

请求（request）即在网站上通过何种方式获取了哪些信息，也是日志中较为重要的一项，主要包括以下三个部 分：

• 请求类型（METHOD）常见的请求类型主要包括GET/POST/HEAD这三种；
• 请求资源（RESOURCE）显示的是相应资源的URL，可以是某个网页的地址，也可以是网页上调用的图 片、动画、CSS等资源；
• 协议版本号（PROTOCOL）显示协议及版本信息，通常是HTTP/1.1或HTTP/1.0。

状态码（status）用于表示服务器的响应状态，通常1xx的状态码表示继续消息；2xx表示请求成 功；3xx表示请求的重定向；4xx表示客户端错误；5xx表示服务器错误。

传输字节数（bytes）即该次请求中一共传输的字节数。

来源页面（referrer）用于表示浏览者在访问该页面之前所浏览的页面，只有从上一页面链接过来的请求才会 有该项输出，如果是新开的页面则该项为空。上例中来源页面是google，即用户从google搜索的结果中点击进入。

用户代理（agent）用于显示用户的详细信息，包括IP、OS、Bowser等。

三、日志格式扩展

apache日志格式可以自定义来配置其输出格式，常见的基于NCSA扩展日志格式（ECLF）自定义添加的包括域名 （domain）和cookie。其中域名在一个网站拥有二级域名或者子域名时，可以更好地区分日 志；而cookie可以作为用户的身份标识。其他具体的自定义信息详见：Custom Log Formats

四、导入日志数据到MySQL中

访问分析是SEO的一项重要工作，但统计、分析工具毕竟功能是针对大众的，很多时候SEO需要一些特定的数据，是统计分析软件、程序所不能提供的。 这样，直接的Web日志分析就是最合适的了，日志中会记录每一个访问情况，只要按自己的意愿提取、组合，就能得到想要的数据。使用SQL语句分析是最方便 的，需要什么样的数据，只要使用相应的SQL命令就能实现。

导入Web日志到MySQL数据库的实现

1、修改Apache日志格式

修改Web日志格式为：

Logformat combined %>a,%ui,%un,[%tl],”%rm %ru HTTP/%rv”,%Hs,%h”,”%{User-Agent}>h”,%Ss:%Sh

SQL需要导入的内容有特定的分隔符，Apache的日志默认是以空格分隔的，而有些内容（如状态码中的 200 610）也包含空格，这就无法准确的导入。将日志格式修改为以逗号分隔，就能准确的导入了。还可以根据自己的需要，取消日志格式中不需要的内容，减少日志 文件大小。

2、建立MySQL数据表

drop table if exists weblog;
create table weblog (
id int unsigned auto_increment PRIMARY KEY not null,
l_date date,
l_time time,
c_ip varchar(15),
s_ip varchar(15),
s_port varchar(5),
method varchar(10),
path varchar(255),
query varchar(255),
status varchar(3),
domain varchar(50),
system varchar(200)
);

注：上面只是一个MySQL数据表结构范例，没有与上一步日志格式对应，请勿直接复制使用！

新建一个数据库，数据表结构与日志格式对应起来。

3、导入日志到MySQL中

LOAD DATA INFILE  ’/日志位置/日志文件’  INTO TABLE weblog FIELDS TERMINATED BY ‘,’;

weblog 对应上面的数据表名。

另外，乐思蜀从网上找到一个将IIS日志导入到MySQL数据库的.pl程序，需要的点这里下载（Readme.txt为使用说明）。

五、常用日志分析工具

1.awstats

2.analog

3.webalizer

4.PHPMyVisites

本文参考：

http://webdataanalysis.net/reference-and-source/weblog-format/

http://www.lesishu.com/net/import-weblog-to-mysql/

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 如何量化用户体验
• 关于交互设计师需要画的线框图
• 做网站常用工具下载与介绍
• 5个整站下载工具
• 50 个Web 设计师的超便利工具[下]
• 50 个Web 设计师的超便利工具[上]
• 20免费的Web UI元素工具箱和模具
• 20个使Web开发变得更轻松的制作工具
• 2009年 非盈利机构必备的10大Web2.0工具
• 15个最受Web开发者欢迎的文本编辑器

Feed enhanced by Better Feed from Ozh

Modern Web UI Set (.psd)

这套 UI 库包括了从按钮，到渐变，到文字各种 UI 元素，非常整齐地存放在不同目录下，由于是 PSD 矢量分格式，里面的任何元素都是可以修改的。

Massive Web UI & Button Set (.psd)

这套 UI 元素库包含3种风格，水晶，渐变色，单色，渐变色还包含7种颜色组合。

Web UI Element Pack (.psd)

包含 19 个 UI 元素，从加载进度条，到按钮，到页码，到滑动条。

Web UI Wireframe Kit (.psd)

这套 UI 库中的元素全部基于 Photoshop 矢量图案。

Browser Form Elements (.psd)

如果你想设计浏览器，会发现这套 UI 很有用（设计浏览器在国内很时髦，是不是）。

Web Page Elements (for Omnigraffle)

这套 UI 库几乎包含了全部常用 Web 元素，Header，表单元素，图标等等。

Wireframe Kit (Google Drawings)

这是一套用于 Google Drawing 的 UI 库。

Sketching & Wireframing Kit (.ai, .eps, .pdf & .svg)

这是一套用于原型草图设计的 UI 库，包含的元素有表单，图标，指示器，反馈消息，工具提示，导航元素，图片框，内嵌视频，滑动条以及广告 Banner，包括 Illustrator 和 SVG 两种矢量格式。

Wireframe Symbols (.ai)

这套 UI 包含一个 Illustrator 符号库和一个 Illustrator 文件，可以用来创建设计原型。

Yahoo Design Stencils (.xml, .pdf, .svg, .png and Omnigraffle)

Yahoo! 为 Web 设计师们贡献过很多好东西，包括著名的 YUI 框架，还有这套 UI 元素库，包括广告单元，日历，图表，表单，网格，菜单，按钮，导航等等，提供多种矢量和非矢量格式。

Ext JS v3.0 Stencil (for Omnigraffle)

这是一套用于可以著名 JavaScript 框架 Ext JS 的 UI 库。

165 Vector Icons in 5 Colours (.ai, .jpg and .svg)

这套来自 Liquidicity 海量图标库包括 5 种不同配色。

Flex 3 Stencil (for Omnigraffle)

这套流程图 UI 包含 Flex 3 风格的面板，表格，按钮，链接，菜单，滚动条，手风琴式菜单，选项卡等等。

Twitter Widget Stencil (for Omnigraffle)

Twitter 相关的 UI 图库。

Web Designer Toolkit (.psd)

这个 PSD 格式的 UI 库包含非常整洁的 Web 元素库。

Facebook GUI (.psd)

大名鼎鼎的 Facebook UI

Facebook Applications (Omnigraffle)

如果你要创建 Facebook 应用，这套 UI 库非常有用。

Web Elements Kit (.psd)

这套 Web 元素库包括 17 个模块，每个模块包含四种配色。

Flex Darkskin UI (.psd)

漂亮的 Flex UI 皮肤。

WEB UI Treasure Chest

非常值得收藏的 Web 元素库，卷边效果很漂亮。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 50 个Web 设计师的超便利工具[下]
• 50 个Web 设计师的超便利工具[上]
• 20个使Web开发变得更轻松的制作工具
• 10款杰出的Web线框图创建绘制工具[原型设计]
• 设计中的色彩：黑色
• 设计中的色彩：白色
• 美化你的Google阅读器
• 网页设计现状：2010年设计趋势[下]
• 网页设计现状：2010年设计趋势[上]
• 网页设计心理学

Feed enhanced by Better Feed from Ozh

这也正是我们发布这篇文章的原因，在此，我们收集了40个专业且详细的基于网络布局的PSD模板。

某些免费的模板都有伴随着一个教程，介绍该模板是如何创建的。但是，基于本篇文章的目的所在，我们只关注那些提供有源文件，并且是可自由使用的免费.psd模板。

40个专业且详细的基于网络布局的PSD模板

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 55个激发您设计灵感的蓝色风格Web设计
• 50个激发灵感的红色网页设计
• 40个基于彩虹风格的网站设计
• 30套最好的网站开发与设计中使用的小型图标
• 20个漂亮的极简主义的WordPress主题模板
• 10个最佳的迷你版的WordPress的免费主题
• 转换设计原图 PSD 为 HTML
• 深色调社交图标：免费且高质量的社交媒体图标集
• 9个可用性及Ux陷阱：了解如何避免它们
• 95个漂亮的名片设计【下】

Feed enhanced by Better Feed from Ozh

CSS3 的 Media Queries

在 CSS2 时代，如果你曾经为你的网站设计过打印版 CSS，就会明白 CSS3 Media Queries 的作用，不过，CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用，事实上，CSS2 的 Media Type 并不曾被多少设备所支持过。CSS3 的 Media Queries 可以帮你获取以下数据：

• 浏览器窗口的宽和高
• 设备的宽和高
• 设备的手持方向，横向还是竖向
• 分辨率

如果用户有一个支持 Media Queries 的设备，我们就可以为该设备编写专门的 CSS，让网站适应这个设备的小屏幕，英国的 Web 技术大会 dConstruct 便基于该技术推出他们的 2010 年大会网站，手机也可以轻松访问，以下是该网站的桌面版和手机版截图：

这个网站在不同尺寸的设备上按不同的布局显示，并且，手机版在 iPhone，Opera Mini， Android 等设备上有完全一致的表现。

使用 Media Queries 为手机创建单独的 CSS

我们举一个简单的两栏式结构的例子。

为了让这个布局更好地在手机上显示，我们为手机版设计一个一栏式布局，且缩小 header 部分的图片大小。

使用 Media Queries 最直接的方法是，在你的 CSS 代码中，加一段独立代码分支，如下：

@media only screen and (max-device-width: 480px) {

}

接着，在这个分支中，为小屏幕编写独立的 CSS 定义，这些定义可以覆盖桌面版 CSS 中的相应定义（只要将这段分支代码放在后面），以下针对小屏幕的 CSS 将布局变成一栏式，且使用了小尺寸的 Header 图片：

@media only screen and (max-device-width: 480px) {
	div#wrapper {
		width: 400px;
	}

	div#header {
		background-image: url(media-queries-phone.jpg);
		height: 93px;
		position: relative;
	}

	div#header h1 {
		font-size: 140%;
	}

	#content {
		float: none;
		width: 100%;
	}

	#navigation {
		float:none;
		width: auto;
	}
}

最终，我们在小屏幕设备上得到了如下显示效果：

使用 Media Queries 链接单独的 CSS 文件

对于小型的改动，直接在 CSS 代码中插入移动设备代码分支是很方便的，但对于大型站点，可以使用 Media Queries 链接独立的式样表文件，以便在独立的式样表文件中完全自由地为小设备编写 CSS 代码，方法如下：

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

测试 Media Queries

要在不同设备上测试 Media Queries 并非易事，你要有各种设备，还要将代码上传到某个主机进行访问测试。这里有一个在线服务，ProtoFluid，该服务允许你提供你要测试的网站的 URL，或者你本机上的 URL，然后，模拟 iPhone 等移动设备显示你的设计，下图是上文中提到的 dConstruct 网站在 ProtoFluid 的 iPhone 模拟中显示的样子。你也可以填写你自己的窗口尺寸，来模拟特定的设备。

在 ProtoFluid 使用 Media Queries，你需要同时加上 max-width 和 max-device-width 属性，这意味着，Media Queires 不仅可以针对不同的移动设备，还可以针对桌面系统中某些人为的小窗口情形。

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

}

使用上面的代码，在桌面浏览器上，当你改变窗口尺寸到达 480 像素的时候，就会看到布局的改变。需要注意的是，上面的 max-width 部分仅仅为了测试，如果你不希望用户在桌面浏览器中因为改变了窗口大小而导致你的布局改变，可以去掉 max-width 部分，而只针对那些移动设备。

对现有网站的整改

上面的例子为了说明问题起见都很简单，现实中的站点不可能这样，下面的例子，作者将使用他自己的公司网站，说明如何使用 Media Queries 对现有网站进行移动化整改。

桌面布局

作者自己的网站是几年前设计的，那是还没有考虑 Media Queries 问题，这是一个三栏式布局。

增加新的式样表

为了适应移动设备，将使用 Media Queries 加载独立的式样表：

<link
rel="stylesheet"
type="text/css"
media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)"
href="/assets/css/small-device.css"
/>

作者的做法是，将他站点中原来的 CSS 文件另存为 small-device.css ，在这个基础上针对移动设备进行整改。

压缩 Header 部分

第一步是让 Logo 部分能在小屏幕上显示，因为这个 Logo 是基于背景图片的，因此很好办，同时，提供一个小尺寸的背景图，以便和 Logo 搭配。

body {
	background-image: url(/img/small-bg.png);
}

#wrapper {
	width: auto;
	margin: auto;
	text-align: left;
	background-image: url(/img/small-logo.png);
	background-position: left 5px;
	background-repeat: no-repeat;
	min-height: 400px;
}

单列式布局

下一步主要的工作是将多栏式布局换成单栏式，桌面版使用 Float 实现多栏布局，要改成单栏，只需将 float 设置为 float:none，并将 width 设置为 width:auto，这样，就实现了单列式布局。

.article #aside {
	float: none;
	width: auto;
}

再紧凑一些

然后，将margin 和 padding 进行调整，使之更紧凑一些：

在 iPhone 中测试

在 iPhone 中实际测试的时候，发现网站在单列式布局中仍然向外延伸了，从 Safari developer website 找到解决办法，在网站头，添加一个 meta tag，将网站的视窗宽度设置成何设备一致。

<meta name="viewport" content="width=device-width" />

更多资源

• 后 移动时代的 Web 设计
• A List Apart – Responsive Web Design （ALA – 反应灵敏的 Web 设计）
• Apple – Safari Web Content Guide （Apple – Safari Web 内容指引）
• Sitepoint CSS Reference – Media Queries （SitePoint 的 CSS 参考手册 – Media Queries）
• Targeting the iPhone 4 Retina Display with CSS3 Media Queries  （使用 CSS3 Media Queries 实现面向 iPhone 4 高精细显示屏的设计）
• Aral Balkan: How to make your web content look stunning on the iPhone 4’s new Retina Display（Aral Balkan：如何让你的 Web 内容在 iPhone 4 的高精细屏上更好地显示）
• Stuff and Nonsense: Proportional leading with CSS3 Media Queries （使用 CSS3 Media Queries 实现按比例行间距）
• Matthew James Taylor: iPad layout with landscape and portrait modes （iPad 的水平和垂直布局模式）

在旧浏览器上支持 Media Queries

如果你面向的访问者是 iPhone， Opera Mini 等移动设备，这没有问题，对于那些不支持 Media Queries 的浏览器（像 IE6/7/8），以下文章或许对你有帮助。

• Media Queries section on When Can I Use, showing which browsers have support （Media Queries 的浏览器支持情况）
• Media Queries jQuery plugin (only deals with max/min width) （Media Queries jQuery 插件）
• css3-mediaqueries-js – a library that aims to add media query support to non-supporting browsers（在不支持 Media Queries 的浏览器中实现对 Media Queries 的支持）

更多示例

Jon Hicks 在 Hicksdesign 基于 Media Queries 实现了非常好的浏览体验，不仅针对移动设备，还面向那些拥有小屏幕的桌面系统。另外，还可以看看 Simon Collison’s website 以及 Ed Merritt’s portfolio 这些网站中对这种技术的运用。

本文作者

Rachel Andrew

Rachel Andrew 是一名 Web 前端设计师与后端开发者，是一家英国 Web 开发顾问公司 edgeofmyseat.com 的主管，她还是一款小型 CMS 系统 Perch 的设计者。她写过多本 Web 开发与设计相关的书，包括由 SitePoint 出版的 CSS Anthology: 101 Essential Tips, Tricks and Hacks，她的个人博客是 rachelandrew.co.uk。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 后移动时代的 Web 设计
• 从大屏幕到小屏幕迁移的三种设计方案
• 为移动网站编码
• 2010网页设计趋势[下] — CSS3 技术
• 2008年国外最佳Web设计/开发技巧、脚本及资源总结
• 默认Web字体样式
• 黑莓9300最新谍照泄露
• 页面输出时一些常用的小技巧
• 页面元素的两种表达状态：常态，暂态
• 面向对象的CSS

Feed enhanced by Better Feed from Ozh

W猫在北京中关村。他从小就是个脑袋很大眼睛发亮的天才少年，数理化成绩很好，逻辑思维超强，英文和中文一般流利。在首都某著名大学毕业后，W直接去美国名校拿了硕士，接着回国创业。我一直觉得，他是硅谷Geek们的中国版。诸如iPad之类的新技术玩意，我总能第一时间从他那儿找到。他也是国内把玩Facebook、Twitter、Groupon、Foursqure的人。啥叫互联网的未来，W做的网站就代表互联网的未来。

W比L拥有更多的掌声和名声。但遗憾的是，他做了好几个连投资人都觉得很酷的网站，却始终没有挣到大钱。原因不外如下：要么是起个大早，却被一大堆抄近道的同行给围追堵截；要么因为资金接济不上，只能让一个更有资源实力的大公司直接吃掉，还有的不知道触了哪根高压线被主管部门直接暂停。

L的生意是实实在在每天都能数着钱的，他都已经可以打高尔夫了，但他并不想告诉无关人他挣到钱了。说了也没人信，几十万月薪不到2000的打工仔拿着300块钱买的山寨机玩L公司做的游戏，每月给他贡献过百元的ARPU值，换句话说，他们收入的十来分之一都心甘情愿地送给L了。我有时也想不通，W针对的客户明明是北京、上海这些大城市中最有消费能力的精英。为什么他们舍得花钱买最贵的手机，换最新的笔记本电脑，下最好的馆子，在网上却什么都要免费。

圈里公认，只要是W做的事情必定引来围观。同行也好，媒体人、营销人也罢，口口相传，网站流量和用户量几乎是一条直线往上蹿。但奇怪的是，过了没多久就停止上升势头，开始跟中老年同志的心脏一样来回震荡。我也问过L，他的这些草根用户没几个有自己的电脑，更谈不上3G，究竟是怎么发掘的？L笑笑说，网吧都不是最有效的渠道。厂区周边有很多便利店，工人一下班就聚到哪儿。老板提供一台电脑，里面装了各种手机用的游戏、MP3、电影，再备一本类似早年K歌房里的“点歌簿”。不用上网，拿根USB数据线，想要什么下什么。还有更方便的，用手推车直接送到宿舍门口。

有次跟L吃饭，他提问我：如果一款游戏要打入45万富士康工人的市场，该请哪位代言人合适？我先猜周杰伦，摇头，丫目标受众是城市，又猜春哥也不对，她只杀伤学生和少妇，怒了，决定猜当红的凤娇，还是被鄙视！正确答案是凤凰传奇，有百度歌手榜单为证。备选是慕容晓晓。完全超出我知识范围，还好我没猜韩寒。

过去W单纯地以为凭技术就能改变社会，现在他知道你可以不过问政治，但政治会来过问你。不过，要让一个海归精英学会怎么跑门子疏通关系确实有点臊。L曾经愤青过，但如今很务实，好的商人都是知道怎么看《新闻联播》的。他挺关心运营商的人事变动和扫黄整顿，还搞过几次工友联谊会，虽然目的是为了推广他的游戏。前一段富士康工人“12连跳”，他很严肃地跟我说，这事他们有责任。我吓一跳。L讲，那些一想不开就跳楼的年轻人正是他的衣食父母。一部手机通常就是这些工人唯一的娱乐设备，与厂外世界交流的唯一媒介。他们有责任让工人们更快乐。

我所认识的投资人都对W评价很高，但却更爽快给L投钱。因为他们的心里也明镜似的：在中国，做精英的只能赚吆喝，做草根的才能赚着钱。腾讯、百度不就是最好的例子嘛。

上海那位梳分头打摩丝的笑星说过一句经典：我是喝咖啡的，北方那两位是吃大蒜的。咖啡是舶来品，感觉很洋气，吃大蒜却有益身心。今年炒大蒜的都挣了很多钱，没听说谁倒腾咖啡挣了钱。中国的互联网好像也是一样？

我曾经突发奇想，如果把W和L对调位置，情况会不一样吗？他们会更理解各自商业的长短吗？后来想想觉得这事不太可能。

W所追求的互联网，其实是一个“美式的互联网”。在美国，信息革命是从上个世纪60年代开始的，从1950后到1990后都是“数字化的一代”。他们之间并没有太大的“数字鸿沟”，他们的生意与生活，工作与娱乐都与互联网分不开。这也是为什么80后的扎克伯格能够和50后的乔布斯、60后的贝索斯、70后的佩奇同台竞技的原因。

同时，美国的社会结构是一颗“橄榄”，没有那么大的贫富差距、地区差异、城乡之别，所以，美国的互联网可以说是“全民的互联网”。

但当下中国的社会结构，原本我们以为它会是一座“金字塔”，但越来越变成一颗“图钉”。W和L一个站在削尖的头上，一个站在遥远的钉帽上。中国没有一个所谓“全民的互联网”，中国的互联网是人为割裂的。它既存在于精英的Think笔记本上，也存在于草根的MTK山寨机中。我们的精英也许和美国同步，草根却与越南同步。

事实上，中国的“数字化一代”只存在于北上广等一些大城市，20-40岁之间的几千万中产阶级。剩下的几亿中国互联网用户归根结底都只是QQ用户。互联网改变不了这个现状，能改变它的也许需要更宏大的社会变革和经济变革？

我相信，L看穿了所谓“中国的互联网”的本质。哪些精英们的欲望从来不缺乏满足的渠道，太多的企业在追逐宠坏其实有限的一群客户。相反，有一大批“数字化贫民”却没有办法利用互联网改变自己的命运，没有条件通过网络让自己的生活质量飞升，只能沉醉于廉价的虚拟娱乐中。L的商业很符合本土国情，很和谐社会，但他能够走出国门吗？

我一直相信，终有一天，W能做点“代表先进互联网”的事情，让美国人也能跟着咱们屁股后面学。可现实的磨难会不会打消他的意志呢？

按照哲学家柏拉图的“洞穴”理论，每个人从出生开始就呆在自己挖的一个洞穴里，我们所见的世界只不过是被阳光抛到洞穴墙壁上的影像，而我们这些洞穴的居民却把它当作是真实的世界，因为我们没有见到过其他的东西。而真实的世界却是在洞穴之外，在有太阳的地方。

不管看这个BLOG的各位精英们是否承认，我们和某些人——一群数量比我们大得多的人（中国的农民工、刚毕业的大学生等等，大概3亿人），完全生活在两个不同的世界。如果能关注那一群人，还会有很多机会。但很有可能，我们永远都走不出自己呆的洞穴。

作者：申音《创业家》杂志主编

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 类似于Groupon的社区型电子商务的未来
• 构建完善的互联网产品文案体系
• 数据化运营 — 影响互联网网游产品成败的关键
• 商业周刊：Zynga与Facebook关系复杂化
• 6款与时间维度相关的产品设计
• 10款杰出的Web线框图创建绘制工具[原型设计]
• 10条简易步骤帮助您创建电子商务网站
• 默认Web字体样式
• 页面元素的两种表达状态：常态，暂态
• 阿里巴巴内部资料：交互设计全档案

Feed enhanced by Better Feed from Ozh

现在，社会化元素仍然在现在的 网络世界里扮演着重要的角色，那些当前最重要的互联网网站，让你表达你的想法（Facebook），交流正在发生的事情（Twitter），或者记录你正 在什么地方（Foursquare），都是社会化网络的一部分。但更重要的是，所有这些网站产生的数据和内容正越来越多的被用来为你提供个人化服务。

数据信息越多，个人化服务就会 越贴切。在这些源内容中，其中一些来自于我们所熟悉的社交网站，比如Facebook和Twitter，但更多的则来自于物联网（ Internet of Things）和政府组织提供的数据。简而言之，现在的网络（read/write Web ）已经不仅仅是社会化网络那么简单。

如何迈过社会化网络

那么，如何迈过现在的以社会化 网络为主的阶段，进入到个人化服务的新时代？

在Web2.0最繁荣的时候， 我们开始渐渐的被越来越多的数据信息所包围。我们认为我们已经使用了足够多的数据信息了。我们在YouTube上看视频，在MySpace和 Facebook上聊天，阅读博客，通过Twitter关注一些人。在2008年底，我们已经被如此之多的内容所淹没。我们该怎么做？

到了2010年，我们依然在和 越来越多扑面而来的数据信息奋斗着。但是实际上，从2009年起，事情有了一些改变。我们开始认识到，我们拥有的数据信息的数量多少并不重要，重要的是如 何处理这些信息。社会化依然很重要，但对数据信息的处理正慢慢的变得更重要，因为这些数据信息，正变得可以被分析、过滤、综合和个人化。

结构化数据和物联网

两种新的潮流正在促使这种改变 发生。

首先，政府组织和个人正把越来 越多的数据信息放到网络上。这其中的绝大部分数据都使用了诸如RDFa和microformats这样的语义网络（Semantic Web）技术进行了处理。换句话说，这些数据被特殊加工成了机器也可以读懂的内容。这样的例子有很多，比如最近的美国和英国的政府公开数据计划，Best Buy的店铺信息和Facebook的Open Graph同样使用了这种技术。

另外，现在我们还有物联网。一 个可以把现实生活中的东西和互联网通过诸如传感元件和RFID标签等连接在一起的新技术。所有你能想到的东西，车里的，家里的，路上的，都可以和互联网进 行连接。随着越来越多的现实中的东西通过物联网技术和互联网连接，可以想象，我们所熟悉的互联网，即将迎来一次数据信息的大爆炸。

我们如何使用这些数据信息

社会化网络的信息，政府和企业 公开的信息，以及所有通过传感器和RFID连接到互联网的现实生活中的事物的信息，所有这些加在一起，数量惊人。这其中的大部分数据并不应该直接拿来进行 阅读或使用。如何过滤并重新组织这些数据信息使之最终变成个人化的信息，将是这些海量数据存在的价值所在。而现在，提供这样服务的网站并不多。

Adam Greenfield是物联网领域的领先的思考者。我在今年早些的时候曾因他的新书《Everywhere》而采访 过他。Greenfield最近写了一篇文章，来描述在不久的 将来，一个不懂任何技术的普通人如何去使用网络。在这篇文章中他假想了一个这样的场景：她的妈妈使用”ad-hoc service“来制定一个坐火车去见她的孩子的行程，ad-hoc service使用了实时的互联网数据。

而实际上，在现在，2010 年，他的妈妈不得不通过几个不同的网站程序来查找和制定她的行程，其中好多她需要的信息甚至没法在网上找到。Greenfield设想在不久的将来，他的 妈妈只要在她的手机上写下她的要求，然后手机的应用程序就可以显示出足够的实用的个人化信息。（译者注，现在有个应用叫http://siri.com/就提供类似的服务，这个网站刚刚被 苹果收购）

忘掉社会化吧，多想想如何使用 现在的数据信息

在Web 2.0时代，成功的网站大多具有社会化的元素在里面：YouTube,，MySpace 和 Flickr仅仅是一些早期的例子。而现在，从2009年初开始，关注的焦点已经从社会化转移到了数据驱动（data-driven ）上面。成功的网站应该能够过滤、组织和个人化这些海量数据。

如果我是一个公司老板或开发人 员，我不会再去考虑社会化的东西了，我会去想如何利用现在的这么多的数据信息，然后在这之上构建新的东西。现在，有多到不可思议的机会正在等待着你。
现 在，这个网络的新时代还没有被命名，这是一个好事情。可以肯定的是，现在的网络还是我们所熟悉的那个网络，只是现在你所接触的内容信息更多的来自于社会化 网站之外了。现实生活中的事物，政府组织和商业机构的数据，虚拟的事物……无论是什么，你将慢慢的和越来越多的来自他们的内容信息纠缠在一起。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 默认Web字体样式
• 页面元素的两种表达状态：常态，暂态
• 设计中的色彩：黑色
• 设计中的色彩：白色
• 解码 Web 开发语言
• 苹果 vs. 微软 – 网站可用性研究
• 网页设计现状：2010年设计趋势[下]
• 网页设计现状：2010年设计趋势[上]
• 网页设计技巧大全（摘抄）
• 网页设计心理学

Feed enhanced by Better Feed from Ozh

这是一个完整的互联网产品文案体系结构，这个体系贯穿在产品的整个生命周期中。

有的看官可能会问：

1、你这个所谓的体系真的有用么？

答：产品本身就是由不同的体系构成的，除了文案还有价格体系、销售体系、UI设计规范、交互设计规范等等。所以这个文案体系的作用也正是为了产品良 性发展做铺垫。如果产品的名称三天两头的改；如果产品都开始铺市场了，销售合同还没有拟好；如果客户买了你的产品之后，不会用或者遇到问题，可是没有客服 支持、没有产品手册、没有产品帮助。产品不是这样做的。

2、每个产品都需要做这么多狗屁玩意？

答：根据产品的业务类型而定，例如面向中小企业的付费型SAAS产品就需要《产品手册》和《销售合同》；而网易推出免费邮箱就没有必要了 。

3、如此庞大的体系如何落到实处？

答：再庞大和复杂的体系都需要分拆来实现。首先是分阶段实现：撇开产品的市场和用户调查阶段，产品规划、产品功能设计、产品需求、产品测试、产品上 线、产品入市、产品售后这几个阶段都可以作为文案体系的时间节点。下面是一张甘特图，横轴是产品进度的几个阶段，纵轴是文案体系的12个内容。

这里简单的对每个任务点做一下说明：

产品名称需要在产品规划阶段完成：这个显而易见，否则还得弄个产品的临时代号，多尴尬。在有的公司如果产品名称没有确定是无法立项的。

广告创意从产品规划中期开始到产品测试阶段中期完成：因为在规划阶段就已经开始提炼产品的卖点和精髓，很多创意都萌生在这个阶段，一般的产品上线都 是结合市场一起来做的，所以上线的时候这些广告就要派上用场了。

功能名称在功能设计阶段完成：这个和产品名称一样，不用多说。

产品帮助从功能规划阶段开始到测试阶段完成：规划的功能的时候就已经在考虑功能的操作方法、机制、可能会遇到的问题了，所以至少可以给产品帮助做一 个框架，产品测试的时候可以已经实现了注册、登陆、系统功能、交互效果，产品帮助里面的截图这时候就可以补充了。产品上线至少得保证常见问题有内容。

产品手册从功能设计的中期开始到产品入市之前完成：这个手册大部份公司是提供给客户，而不是用户的，可以是电子文档，也可以是光盘或者纸张的小册 子。

产品信件从功能规划阶段开始到产品需求阶段完成：产品信件是产品和用户之间信息的沟通渠道，例如通过邮箱找回密码、通过有些激活帐号、通过邮箱订阅 信息等等，都需要一个信件的方式来实现。作为产品使用流程的一部分，这些内容需要在产品测试之前完成，确保整个产品流程的畅通。

功能交互在产品需求阶段完成：功能交互性内容，可以说是这个体系中较重要的一部分，用户在使用产品时，系统出现的提示、成功或者失败的反馈、引导类 图示、信息范例类备注都在功能交互类文案范围内。必须在产品测试之前完成。

服务条款在产品需求阶段完成：服务条款一般出现在注册、安装、下载、转载等涉及到法律或者政治风险的使用流程中，需要在产品测试之前完成。

产品问卷在产品需求阶段完成：因为测试阶段包括用户测试，所以产品问卷得在测试之前完成。当然，问卷调查在产品上线之后仍然可以进行，产品是不断的 收集市场需求过程中完善的。

推广软文在产品测试阶段完成：这个和广告创意类似，一般都是配合产品上线来做的。也有为了危机公关和产品打算投入市场而做的。

销售合同在产品入市之前完成：这不用说了，没合同卖毛哦！

产品海报在产品入市之前完成：可能互联网的大部份产品不会去做海报，但是在大型公司的重点产品来说是经常需要的。

把这个体系按阶段拆解完之后，就可以开始安排按人员拆解了。

如果这个产品有一个团队支持，包括产品经理、产品设计、交互设计、产品助理、内容设计那么恭喜你，这个团队会很好的把这个体系消化掉。

产品名称和广告创意：可以发挥整个团队的创意，最后筛选出几个给公司领导拍板。

功能名称：最好是产品经理亲自来定，然后发起团队讨论。

产品帮助和产品手册：就交给产品专员吧。

产品信件：也是最好由产品经理亲自来定，然后发起团队讨论。

功能交互：这个是交互设计师的强项。

服务条款和销售合同：产品经理亲自上吧！最后交给公司的法务把关。（很多公司没有法务，就给直接领导或者总经理。）

产品海报：交给产品专员，他通过产品首页的文案设计，已经领会了产品的精髓应该怎么表达。

产品问卷：交互设计如果对用户测试很了解，就知道应该怎么来书写问卷。

可能产品经理没有经理专门来盯这个体系，可以找产品设计来盯。

如果你是光杆一个，啥人都没有，那也恭喜你，因为这是个提升你个人能力的契机，如果没有一定的表达能力、逻辑思维能力、项目管理能力是很难把这个体 系支撑起来的。不管是不是有这些能力，只要在进度允许的范围内我都建议尝试一下这个体系。找一个勤劳的助手来写《产品帮助》和《产品手册》。

这个体系的12个内容中的每一块，在撰写的时候都有一些方法、原则和需要注意的地方，各位看官可以关注一下，在未来的一周里我会详细说。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 类似于Groupon的社区型电子商务的未来
• 数据化运营 — 影响互联网网游产品成败的关键
• 商业周刊：Zynga与Facebook关系复杂化
• 告诉你一个真实的中国互联网：精英与草根
• 6款与时间维度相关的产品设计
• 10款杰出的Web线框图创建绘制工具[原型设计]
• 10条简易步骤帮助您创建电子商务网站
• 默认Web字体样式
• 页面元素的两种表达状态：常态，暂态
• 阿里巴巴内部资料：交互设计全档案

Feed enhanced by Better Feed from Ozh

404页面一般都会收到几次访问，但访问一个错误页面，一定不是愉快的 用户体验的一部分。这就是现在许多设计师花一些额外的时间和精力去制作有创意的404页面的原因。这样做可以减少用户使用时的挫折感，并显示了网站对细节 关注。

1、“貌似页面丢失”， 好可怜的宇航员。

2、“宇宙迷失”

3、“成功人士将受益于错误，并尝试其他途径。”

4、“p.s.等会见”（等会见鬼）

5、“我去那个 Mark Dijkstra网站，看到的都是这个恶心的404页面”

6、“休斯敦，我们遇到一个问题。”（休斯顿是干嘛的？）

7、左鸟：“出毛病了”。 右鸟：“这次轮到你丫去整了。”

8、“国道 404：找不到”（国道是我瞎掰的，不过也是路）

9、我总感觉过一会这小样会笑。

10、“你迷路 了！”

11、“抱歉”

12、“别在意窗帘后的那家伙”

13、“哇！你出界啦。”

14、“哎呀！我们搞丢页面了……”

15、“靠，别！”

16、你遇到了一个大大的404错误。

17、“好像少了一块”

18、“我们找不到你想要的”

19、“抱歉，发生了错误”（Twitter衍生了不少“鸟”站）

20、“我们很抱歉，你所需找的内容这里没有，也许你要到主页去看看。”

21、“啊噢，页面没找到。”

22、图片模仿 Twitter的错误鲸。

23、这个不可能图像本身诠释了错误本身，又转移了人对404错误本身的注意力。

24、“一个忍者偷走了本页面”（这是忍者么，这头戴斗笠的人怎么让我想起功夫熊猫？）

25、“派对玩完了！”

26、“看来这里有问题了。”

27、哦，不！！

28、黑板风格

29、这图片风格跟我们国家某个时期的宣传画有点像。

30、404页面不存在。可能你打开的是过期的书签，或者输入了错误的地址。

31、可爱的猫头鹰。

32、“哇，错误，就在这里！”（熟悉的雪花画面——或许现在的孩子已经不熟悉了）

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 默认Web字体样式
• 页面元素的两种表达状态：常态，暂态
• 迈过社会化网络：互联网的新时代
• 设计中的色彩：黑色
• 设计中的色彩：白色
• 解码 Web 开发语言
• 苹果 vs. 微软 – 网站可用性研究
• 网页设计现状：2010年设计趋势[下]
• 网页设计现状：2010年设计趋势[上]
• 网页设计技巧大全（摘抄）

Feed enhanced by Better Feed from Ozh

1、首先，某一个页面新建立，就意味着这个页面在Google的PR地址库中没有任何记 录。此时，该页面的PR是UnMarked，即没有任何PR记录，这时候该页面并没有被Google赋予任何权重，连PR0都算不上。在搜索结果页中，如 果不是比较冷门的搜索并且全标题匹配，很难在Google搜索引擎中有一个好的排名，或者根本在搜索结果页 中排名10开外。

2、大概在半个月甚至更长的时间内，Google会建立此页面的权重，但是不出所料页面的权重应该为零。此时，通过查询工具查询到的PR值应该显示 为零而不是N/A，到这个阶段，页面的排名将会大大提前，并且会逐渐有一些来自搜索引擎的访问。需要注意的是，这种访问并不是搜 索引擎给你的高排名带来的，而是Google会尝试性的将你的网页在某一次或几次的搜索中提到最前面，然后观察这个页面的单击情况以判断这个页面的质量。

3、然后，随着这个页面的地址在互联网中曝光次数的不断增加，获得的反向链接也越来越多，Google会逐渐赋予这个页面权重（PR值）。也就是一 个拥有比较好的反向链接的普通排名1~10，此时，随着反向链接的增多，PR会随着时间的推移慢慢增加。

对于一个小型的网站来说，达到PR3是非常容易的事。但是靠转载与Spam为生的网站往往很难达到这样的排名。通过分析百度与Google的结果页 面可以大致推断，Google已经有了判断内容是哪个网站原创的模糊意识，对于通过转载与Spam外链建立起权重的页面，Google会刻意将其排名降 后。但是目前百度还没有这样的排名技术。

就目前网趣在线的情况来看，虽然 PR为零（域名是全新域名），但是搜索引擎对其给与的权重却在飞速的提升，原因个人归纳有二：一是高质量的内容；二是大量的与内容有关的分布式外链。

通过对搜索引擎的分析，很容易看出百度与Google的技术差距了。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 默认Web字体样式
• 页面元素的两种表达状态：常态，暂态
• 迈过社会化网络：互联网的新时代
• 设计中的色彩：黑色
• 设计中的色彩：白色
• 解码 Web 开发语言
• 苹果 vs. 微软 – 网站可用性研究
• 网页设计现状：2010年设计趋势[下]
• 网页设计现状：2010年设计趋势[上]
• 网页设计技巧大全（摘抄）

Feed enhanced by Better Feed from Ozh

Grinder – Grinder是一个开源的JVM负载测试框架，它通过很多负载注射器来为分布式测试提供了便利。支持用于执行测试脚本的Jython脚本引擎HTTP测试可通过HTTP代理进行管理。根据项目网站的说法，Grinder的主要目标用户是“理解他们所测代码的人——Grinder不仅仅是带有一组相关响应时间的‘黑盒’测试。由于测试过程可以进行编码——而不是简单地脚本化，所以程序员能测试应用中内部的各个层次，而不仅仅是通过用户界面测试响应时间。

Pylot -Pylot是一款开源的测试web service性能和扩展性的工具，它运行HTTP负载测试，这对容量计划，确定基准点，分析以及系统调优都很有用处。Pylot产生并发负载（HTTPRequests），检验服务器响应，以及产生带有metrics的报表。通过GUI或者shell/console来执行和监视testsuites。

WebCapacity Analysis Tool (WCAT) – 这是一种轻量级负载生成实用工具，不仅能够重现对Web 服务器（或负载平衡服务器场）的脚本 HTTP 请求，同时还可以收集性能统计数据供日后分析之用。WCAT是多线程应用程序，并且支持从单个源控制多个负载测试客户端，因此您可以模拟数千个并发用户。该实用工具利用您的旧机器作为测试客户端，其中每个测试客户 端又可以产生多个虚拟客户端（最大数量取决于客户端机器的网络适配器和其他硬件）。您可以选择使用 HTTP 1.0 还是 HTTP 1.1请求，以及是否使用 SSL。并且，如果测试方案需要，您还可以使用脚本执行的基本或 NTLM 身份验证来访问站点的受限部分。（如果您的站点使用cookie、表单或基于会话的身份验证，那您可以创建正确的 GET 或 POST 请求来对测试用户进行身份验证。）WCAT还可管理您站点可能设置的任何 cookie，所以配置文件和会话信息将永久保存。

fwptt – fwptt 也是一个用来进行WEB应用负载测试的工具。它可以记录一般的请求，也可以记录Ajax请求。它可以用来测试 asp.net，jsp， php 或是其它的Web应用。

JCrawler – JCrawler是一个开源( CPL)的WEB应用压力测试工具。通过其名字，你就可以知道这是一个用Java写的像网页爬虫一样的工具。只要你给其几个URL，它就可以开始爬过去了，它用一 种特殊的方式来产生你WEB应用的负载。这个工具可以用来测试搜索引擎对你站点产生的负载。当然，其还有另一功能，你可以建立你的网站地图和再点击一下， 将自动提交Sitemap给前5名的搜索引擎！

ApacheJMeter – ApacheJMeter是一个专门为运行和服务器装载测试而设计的、100％的纯Java桌面运行程序。原先它是为Web/HTTP测试而设计的，但是它已经扩展以 支持各种各样的测试模块。它和用于HTTP和SQL数据库（使用JDBC）的模块一起运送。它可以用来测试静止资料库或者活动资料库中的服务器的运行情 况，可以用来模拟对服务器或者网络系统加以重负荷以测试它的抵抗力，或者用来分析不同负荷类型下的所有运行情况。它也提供了一个可替换的界面用来定制数据 显示，测试同步及测试的创建和执行。

Siege -Siege（英文意思是围攻）是一个压力测试和评测工具，设计用于WEB开发这评估应用在压力下的承受能力：可以根据配置对一个WEB站点进行多用户的 并发访问，记录每个用户所有请求过程的相应时间，并在一定数量的并发访问下重复进行。 Siege 支持基本的认证，cookies， HTTP 和HTTPS 协议。

http_load – http_load以并行复用的方式运行，用以测试web服务器的吞吐量与负载。但是它不同于大多数压力测试工具，它可以以一个单一的进程运行，一般不会把客户机搞死。可以 可以测试HTTPS类的网站请求。

WebPolygraph – WebPolygraph这个软件也是一个用于测试WEB性能的工具，这个工具是很多公司的标准测试工具，包括微软在分析其软件性能的时候，也是使用这个工具做 为基准工具的。很多招聘测试员的广告中都注明需要熟练掌握这个测试工具。

OpenSTA –OpenSTA是一个免费的、开放源代码的web性能测试工具，能录制功能非常强大的脚本过程，执行性能测试。例如虚拟多个不同的用户同时登陆被测试网 站。其还能对录制的测试脚本进行,按指定的语法进行编辑。在录制完测试脚本后，可以对测试脚本进行编辑，以便进行特定的性能指标分析。其较为丰富的图形化 测试结果大大提高了测试报告的可阅读性。OpenSTA 基于CORBA 的结构体系，它通过虚拟一个proxy，使用其专用的脚本控制语言，记录通过 proxy 的一切HTTP/Straffic。通过分析OpenSTA的性能指标收集器收集的各项性能指标，以及HTTP 数据，对系统的性能进行分析。

欢迎您留下你认为不错的WEB应用性能测试的工具。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 在线评测一下你的网站负荷能力
• 六个好用的免费文件存放网站
• 免费的用户行为点击热区跟踪采集
• 8个常用的在线站点验证和测试工具
• 8个实用的 JavaScript 测试及效验工具
• 5款免费的制作移动版本的网站的工具
• 5个最好的提供在线文件共享服务的网站
• 5个免费的最佳的系统还原工具
• 10个提供免费WordPress主题下载的网站
• 10个分析、测试网站加载速度的工具

Feed enhanced by Better Feed from Ozh

如果我们开发的是局域网 Web 应用的话，可能没有必要这样做。但如果我们的 Web 应用面向的是互联网上的成千上万的用户，这样做就很必要了。因为在现实世界中并不是所有的用户都有高数率的网络连接，也许用户使用的是拨号接入，移动设 备，3G，或者是 USB 网络加密狗。如果我们没有在低数率的网络环境中测试过我们 Web 应用，极有可能在上线后收到一些意想不到的关于系统性能方面的抱怨。这个时候无论我们的 Web 应用界面多么地 Web 2.0，功能多么地强大，对于用户来说都失去了使用价值。

目前有很多工具能够模拟慢速网络，值得一提的是 Firefox Throttle，这是一个 Firefox 插件，你可以设置上载和下载的数率，并且监控当前带宽的使用情况。另一个非常有用的特性是它可以控制你的 localhost 的连接数率，对本地测试很有用。

Firefox Throttle 的截图

另一个工具是 Sloppy， 它是一个 Java Web Start application。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 默认Web字体样式
• 页面元素的两种表达状态：常态，暂态
• 迈过社会化网络：互联网的新时代
• 设计中的色彩：黑色
• 设计中的色彩：白色
• 解码 Web 开发语言
• 苹果 vs. 微软 – 网站可用性研究
• 网页设计现状：2010年设计趋势[下]
• 网页设计现状：2010年设计趋势[上]
• 网页设计技巧大全（摘抄）

Feed enhanced by Better Feed from Ozh

1.三维导航设计：

网站导航已经不满足于常见的平面化设计，越来越多的网站喜欢用立体感强的三维导航。折纸是最常用的表现形式。

Delibar

Blue Door Baby

Mystery Tin

psdtowp

Harry Bissett

Sower of Seeds

2. 说话气泡导航设计

把 菜单设计成讲话的气泡形状 ，似乎是另一种流行的趋势。

Alexarts

Bush Theatre

Tienda

Rob Alan

SproutBox

Kingpin Social

Contrast

Design Spartan

Definitely Dubai

Robin James Yu

GIANT Creative

Yellow Bird Project

3.圆角导航设计

圆角经常用来软化规整的 矩形，其按钮的外观为是为了吸引用户点击它们。

Ballpark

NOSOTROS

New Look Media

LemonStand

MetaLab

Vistrac

gugafit

PeepNote

Viljami Salminen

4.应用图标的导航设计

精致的图标越来越多的应用 到导航设计中，因为现在带宽不再令人担心了。由 于视 觉上的吸引力，人们正越来越多地使用的图标 ，这种趋势仍在继续。 图 标不仅能吸引眼球，还有助于用户进行视觉识别。

Adii Rockstar

Sourcebits

Carsonified

marcusK

MobileMySite.com

mesonprojekt

Dreamling.ca

nadamastriste

RedVelvetart.com

Custom Toronto

5.JavaScript 动画

JavaScript 技术使 Web设计人员只用 几行代码的网页元素即可容易创建动画，设计师们最近一直在使用功能多用又美观的JavaScript。

Andreas Hinkel

Jon White Studio

Votaw

Utah.travel

RUDEWORKS

MULTIWAYS

Bert Timmermans

Dragon Interactive

6. 不规则形状导航设计

由 于大多数网站都用的是直边和尖角，不规则的形状让你有机会摆脱俗套范。

Booma

Kutztown University

Yorkdale

The Crazy Love Campaign

Carnivale du Vin 2009

Wrangler Face Off

HTO

smriyaz.com

Think Up

f claire baxter

Inner Metro Green

Custom Tshirts UK

Pirata London

koraykibar.com

Idea.org

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 30个漂亮的分页样式设计
• 120个非常优秀的CSS水平导航菜单
• 黄金分割在Web设计中的应用
• 高雅的极简设计
• 高品质的网页设计: 实例与技巧
• 轻设计，让网站灵敏轻便的6个技巧
• 转换设计原图 PSD 为 HTML
• 设计良好网页的4项原则
• 设计的延续性
• 设计完美商标图案的45条原则

Feed enhanced by Better Feed from Ozh