围观国内微博 （新浪微博 腾讯微博 网易微博 搜狐微博等）

Wait for renew

实验是让用户浏览（不做任何点击）以下这个仿照雅虎布局的测试页面（根据用户的国籍使用相应语言版本的页面），眼动仪将做实时记录，测试过程为30秒。

图1：测试页面

研究者将页面分为9个兴趣区域（AOI, AREA OF INTERESTS）。

图2：兴趣区域（AOI）

从下图“头25秒用户访问的AOI总和”可以看出，韩国用户的眼睛一直在整个页面到处跳动。比起其他两个组别，他们更多地在各个区域中跳来跳去。在 头15秒，中美两国用户的眼动比较相似，在头10秒，中国用户的AOI活动稍微高于美国用户，但很快就明显领先了。15秒之后，美国用户的AOI的增长率 低于中国用户，说明美国人的眼睛活动开始稳定，并开始将注意力集中在页面的某一处。

下图是“每AOI注意点时长总和”。注意点停留时长反映出该区域对用户的重要性。页头中部的区域2（见图2）是尤其重要的，它吸引了三国用户最长久 的注意。总体来说，美国用户将注意力放在区域1、2、5的时间明显高于其他两组。中国用户则在区域6、7、8、9集中了更久的注意力。

再来看看眼动结果（由上至下依次为中、美、韩）。绿色的点代表眼睛活动的开始，红色代表结束。

中国用户眼动图

美国用户眼动图.

韩国用户眼动图

根据眼动结果，研究者从两个方面做出了分析：

其中

• Sequential Reading: 眼睛随着区域块依次浏览
• Circular Scan: 眼睛扫描路径接近于顺时针画圆.
• Back and Forth Scan: 眼睛在内容之间往返扫描，某个区域在短时间内被反复注视.
• Scan Only: 用户只是扫描页面，并没有将焦点放在某个区域，也就是眼动很频密.
• Focus on Title: 用户的注意力相对更多地放在标题上.
• Navigation Reading: 用户的注意力更多放在导航条上，会花一定时间浏览导航内容
  由此可见，中韩用户更倾向以扫描、打圈的方式阅读网页。同时，中韩用户更喜欢往返于各个内容区域，说明他们阅读时比较随意。相反地，美国用户比较关注细节，也很少这看一眼那看一眼。 下图是从另一个角度来阐释眼动结果。
  
• “0” Shape: 眼动路径类似于画0
• “5” Shape: 眼动路径类似于画5. (也就是，眼睛以此访问: 2, 5, 6, 9, 8, 7区域).
• “N” Shape: 眼睛看完一列再看另一列.
• “Z” Shape: 眼睛依次扫过各行.
• “X” Shape: 眼睛以对角线的方式扫描，随意跳跃.可见，多数中国人和韩国人都采用0式浏览，而美国人更多是采用5式浏览。也就是说，中韩用户会整体去看一个页面，而多数美国人趋向于从中心向外围浏览。
  最后，研究者提出了一些设计建议。对于采用整体思维方式（holistic thinkers）的中韩用户来说，他们更倾向于扫描页面整体，而且以一种非线性的浏览方式，因此内容安排可以较为灵活。对于采用分析性思维方式 （analytic thinkers）的美国用户来说，页面布局要非常清晰，每个信息区域都要有区别于其他的特点，导航部分也尤其重要。

研究详情，请参阅原文：http://www.ijdesign.org/ojs/index.php/IJDesign/article/view/267/163

via 互联网的那点事

那怎么办到的呢？引入了正题：

丰富网页摘要（微数据、微格式和 RDFa）

这个规范似乎非常抽象，而且绕嘴。英文的原意为Rich snippets (microdata, microformats, and RDFa)，似乎还稍微的好理解一些。那么关于丰富网页摘要和结构化数据，其实就是前端工程师，通过使用微数据、微格式和 RDFa （microdata, microformats, and RDFa）标记方法编辑HTML源代码，将一些有用的信息第一时间传递给搜索引擎（Google），帮助 Google 更准确地理解和呈现您的网页信息。

光用文字描述似乎有些抽象难以理解，下面我们看个例子，你就会恍然大悟，^皿^:

豆瓣使用RDFa提供给Google抓取《1988 我想和这个世界谈谈》

我们看到的是google在抓取豆瓣提供的页面的时候，得到的信息，在标题下面那一行评分 打分次数便是RDFa再发挥作用~~~

那么豆瓣们是怎么办到的呢，他们是怎么和Google这个大佬谈谈的呢，而作为一个草根站长是不是也可以和这个老大谈谈呢？答案是肯定的。当然目前，Google 只支持以下信息类型：评论、用户个人资料、商品、商家信息、食谱和活动。

下面就介绍三种方式，把你页面的秘密告诉Google。

使用微数据（microdata）标记内容，将信息讲给Google

Microdata 实际上是 HTML5 提出的规范，是一种标记内容以描述特定类型的信息。微数据使用 HTML 标记（常为 <span>或 <div>）中的简单属性为项和属性指定简要的描述性名称。

下面是一个简单内容的HTML结构：

<div>
My name is Bob Smith but people call me Smithy. Here is my home page:
<a href="http://www.example.com">www.example.com</a>
I live in Albuquerque, NM and work as an engineer at ACME Corp.
</div>

用Microdata进行标记后的HTML：

<div itemscope itemtype="http://data-vocabulary.org/Person">
  My name is <span itemprop="name">Bob Smith</span>
  but people call me <span itemprop="nickname">Smithy</span>.
  Here is my home page:
  <a href="http://www.example.com" itemprop="url">www.example.com</a>
  I live in Albuquerque, NM and work as an <span itemprop="title">engineer</span>
  at <span itemprop="affiliation">ACME Corp</span>.
</div>

Microdata Person Demo
Google抓取到信息：

Google抓取到微数据提供的信息图例

当你使用微数据时，你要注意引用规范集 也就是 itemtype=”http://data-vocabulary.org/Person”，当然当你的页面描述其他信息的时候

• Reviews （itemtype=”http://data-vocabulary.org/Reviews”）
• People（itemtype=”http://data-vocabulary.org/Person”）
• Products（itemtype=”http://data-vocabulary.org/Products”）
• Businesses and organizations（itemtype=”http://data-vocabulary.org/Organizations”）
• Recipes（itemtype=”http://data-vocabulary.org/Recipes”）
• Events  （itemtype=”http://data-vocabulary.org/Events”）
• Video 这个比较特殊稍后再谈

使用微数据（microformats）标记内容 将信息讲给Google

微格式是网页上使用的简单规范（称为实体），用于描述特定的信息类型。通常情况下，微格式使用 HTML 标记（常为 <span> 或 <div>）中的 class 属性为实体及其属性分配简要的描述性名称。

下面是一个简单内容的HTML结构：

<div>
   <img src="www.example.com/bobsmith.jpg" />
   <strong>Bob Smith</strong>
   Senior editor at ACME Reviews
   200 Main St
   Desertville, AZ 12345
</div>

用Microformats进行标记后的HTML

<div class="vcard">
   <img class="photo" src="www.example.com/bobsmith.jpg" />
   <strong class="fn">Bob Smith</strong>
   <span class="title">Senior editor</span> at <span class="org">ACME Reviews</span>
   <span class="adr">
      <span class="street-address">200 Main St</span>
      <span class="locality">Desertville</span>, <span class="region">AZ</span>
      <span class="postal-code">12345</span>
   </span>
</div>

Microformats Person Demo

Google抓取到的信息：

Google抓取到微格式提供的信息图例

当使用微格式Microformats作为结构化描述的时候，我们应该注意class=” ” ，Google是通过这个类标记来获得结构信息的：

• Reviews （class=”hreview”）
• People（class=”vcard”）
• Products（）
• Businesses and organizations（class=”vcard” class=”fn org”）
• Recipes（class=”hrecipe”）
• Events  （ class=”vevent”）
• Video 这个比较特殊稍后再谈

使用RDFa标记内容 将信息讲给Google

RDFa 是标记内容的一种方式，用于描述特定的信息类型，通常情况下，RDFa 使用 XHTML 标记（常为 <span> 或 <div>）中的简单属性为实体和属性分配简要的描述性名称。

下面是一个简单内容的HTML结构：

<div>
My name is Bob Smith but people call me Smithy. Here is my home page:
<a href="http://www.example.com">www.example.com</a>.
I live in Albuquerque, NM and work as an engineer at ACME Corp.
</div>

用RDFa进行标记后的HTML

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person" >
  My name is <span property="v:name">Bob Smith</span>,
  but people call me <span property="v:nickname">Smithy</span>.
  Here is my homepage:
  <a href="http://www.example.com" rel="v:url" >www.example.com</a>.
  I live in Albuquerque, NM and work as an <span property="v:title">engineer</span>
  at <span property="v:affiliation" >ACME Corp</span>.
</div>

RDFa Demo

Google抓取到RDFa提供的信息图例

使用RDFa进行标记，要注意的是开头使用 xmlns 的命名空间声明。在结构开始使用xmlns:v=”http://rdf.data-vocabulary.org/#” 命名空间声明，然后选择不同的类型进行描述。比如上例里面的 type=”v:Person” 注意在调用声明的时候一定要使用结尾斜线和 #

• Reviews （typeof=”v:Review-aggregate” ）
• People（typeof=”v:Person”）
• Products（）
• Businesses and organizations（typeof=”v:Organization”）
• Recipes（typeof=”v:Recipe”）
• Events （typeof=”v:Event”）
• Video 这个比较特殊稍后再谈

以上对三种结构化标记进行了简单的介绍，当然每一种 丰富内容结构化标记 都有针对不同实体属性的描述方式。这些内容，以后我会更详细的分别介绍。

早在一个月之前就见识了google最新的版式，当时是在Chrome中突然发现的，这个是google？相当的突然。询问了很多朋友，他们的回答都是没有看到新版的啊，于是乎一阵子screen capture，然后信誓旦旦的想写篇Google 新UI的浅评，结果一个月过了，这篇文章才刚动笔，而且新的界面也已经放出，但是没有关系。好的交互体验，不论什么时候都是值得去写写的。google给我们的答卷也总是超出我们想象的。

让我眼前一亮的是新版的logo，当时什么也没注意，就感觉google logo怎么那么2.0了？XD

Google New Logo 2.0风十足

那个以前不加修饰的搜索框也变了模样

Google新搜索框

而今天放出的版本的结果显示似乎有些不同了

放出公测的搜索框

为了达到好的插图效果我适当的缩短了搜索条长度，通过上图对比我们发现了显示结果数量的条目被挪到了下放，似乎google认为将搜索结果数量放到搜索框的后面，文字采用灰度颜色效果不如将此模块直接放到搜索框下效果来的好

再让我们来看看之前Google搜索框是怎么样给我们展示的吧

Google之前使用的搜索框以及结果数量显示

之前版本的搜索框没有加入任何修饰，使用最简单的样式，而在结果数量的显示方面也显得比较保守提供了较为详细的信息给用户。那个“打开百宝箱”功能我们下文再详细分析。