在网络设计领域关于Eye-Tracking的研究十分火爆，但是如何把这些研究结果转变为具体可行的设计来运作依旧是个难点。以下就是一些来自于Eye-Tracking研究结果的窍门，可以为改进你的网站设计提供些意见：

1.对比图像，文字更具吸引力

与你所认为的相反，在浏览一个网站的时候，能够直接吸引用户目光的并不是图像。大多数通过偶然点击进入你的网站的用户，他们是来寻觅信息的而不是图像。因此，保证你的网站设计凸现出最重要的信息板块，这才是设计的首要原则。

2.眼球的第一运动聚焦于网页的左上角

用户浏览网页的这一习惯应该在意料之中，毕竟左上部为主要操作中心这一点为大多数重要的计算机应用程序的设计所采用。在你构建网站考虑网站设计时，应该尽量保持这一格式。要知道，如果你希望保持个人特色，搭建一个成功的网站，你就必须尊重用户们的习惯。

3.用户浏览网页时，首先观察网页的左上部和上层部分，之后再往下阅读，浏览右边的内容

用户普遍的浏览方式呈现出“F”的形状。保证网站内容的重要要素集中于这些关键区域，以此确保读者的参与。在此放置头条，副题，热点以及重要文章，这样可以吸引到读者进行阅读。

4.读者会忽视横幅广告

研究表明，读者常忽视大部分的横幅广告——尽管你以此维持网站生计——视线往往只停留几分之一秒。如果你想通过广告挣钱，那么必须创新你的广告位以及合理配置网站广告形式。

5.花哨的字体和格式被忽视

为什么呢？那是因为用户会认为这些是广告，并非他们所需要的信息。事实上，研究表明用户很难在充满大量颜色的花哨字体格式里寻找到所需的信息，因为视觉线索告诉他们把这些忽略吧。保持网站的清爽，不要因为华而不实的表面，让重要的信息被忽略。

6.用数词来代替数字

如果使用数词取代数字的罗列，读者会发现在你的网站可以很容易地发现真实的资料。要知道，你是写给那些将第一次浏览你的网站的读者，所以，让他们容易发现他们所需的信息，让他们感兴趣。

7.字体大小影响浏览行为

想改变人们对你的网页的看法吗？改变网页字体的大小。大的字体刺激浏览，而小一些的字体则提高焦点阅读量。根据你的需要，合理配置两者的比例。

8.遇到感兴趣的内容，用户仅会多看一眼副标题

不要过分坚持副标题固定的格式——保证他们的相关性和兴趣。你也可以让副标题包含关键词，这样可以有效利用搜索引擎，让它带来读者。

9.人们大都只浏览网页的小部分内容

如果在用户浏览的时候提供信息使他们尽快锁定目标，就可以把这一点发展成为你的优势。突出某些部分或者创建项目列表使网页信息容易找到和阅读。

10.简短的段落相对于长段落来说有更好的表现力

网页信息是为大多数强调快速浏览的无联网用户提供的。除非上下文的衔接要求，保持信息由简短的段落和句式组成，例如这个电子商务网站的产品介绍。

11.根据视觉锁定，一栏格式比多栏格式拥有更好的表现力

别让过多的信息把网站来访者淹没。大多数情况下，简洁更具力量。多栏内容容易被用户忽视，我们需要消除这些干扰。

12.网页顶部和左边的广告更能吸引眼球

如需要在网站植入广告，试图使他们融入网页的左上部，这样他们才能吸引到最大的视觉注意力。当然，用户仅仅会注意到这些广告，这并不意味着他们会用鼠标点击。所以不要为了提高广告的注意力而牺牲原有的网站设计。

13.将广告放置与最佳内容一旁也可以提升注意力

如果想要提升广告的可视性和点击率，可以将其设置于最能引起人兴趣的内容一旁，整合进网页的设计里。这样，用户既可以找到所需的内容，你也能提升广告的效益。

14.在各种测试中，人们阅读文字广告最为专心

正如上面提到的，一般的互联网用户不会花费太多时间用于查看那些一眼就能看出是广告的内容。这就是文字广告表现出众的原因。他们并没有分散注意力，而是与网页的其它部分内容融为一体，这让他们减少了对读者的视觉刺激，也使这一广告形式获得成功的阅读率。

15.越大的图像吸引越多的注意力

如果要在网页中使用图片，那越大越好。人们更倾向于查看那些能够清楚地看到细节和获取信息的图像。要保证你所用的图片与文章内容相关，否则它更容易被忽视。大多数读者都拥有高速的连接速度，所以请放心在你的网站上使用那些较大体积的图片。

16.干净、清晰的特写图片能吸引更多的视觉注意

可能那些抽象的艺术图片会让你的网站看起来很有味道，但是他们并不会吸引多少读者的注意力。如果你需要使用到这些图片，请确保所用图片的清晰以及其表达内容的简单可读性。必须注意的是，那些与真实的“人”相关的图片比所谓的模特图片更为“优秀”。

17.标题能吸引眼球

浏览网页时，读者能发现的第一内容是标题。确保网页的所有相关链接畅通和有效，以让读者顺利的通过网站进一步搜索。

18.用户花费大量时间察看按钮和菜单

所以，你需要花费额外的时间维护你的精心设计。毕竟，他们不仅吸引了读者的眼球，更是网站设计的重要组成要素。

19.表单格式可以延长读者的注意时间

分解内容和段落，大量使用表单形式来表现你的文章，可以保证读者的浏览率。使用数字和其它标记符号来突出文章的重要内容，会让网站更容易浏览，用户更快的找到所需的信息。

20.避免呈现大块的文本

研究显示，一般的网络浏览者不会花费时间去阅读大块的文本，无论他们有多重要或写得多好。因此，必须把这些大文本分解为若干小段落。突出重要的地方，放置点击的按钮也可以提高用户的注意力。

21.格式可以吸引注意力

在文中使用粗体、大写、彩体、下划线可以帮助用户获取正文所表达的最主要的信息。使用时需要谨慎，因为过多的使用会使你的网页难以阅读，把读者吓跑。

22.利用好空白

尽管把网页的每寸空间都填满这个想法十分诱人，但事实上让网站留出部分剩余更为不错。网站的过量信息会把用户淹没，同时他们也会忘记所提供的大部分的内容。所以保持网页的简洁，给读者预留出一些视觉空间来供读者休息。

23.放置于网页顶部，导航工具的作用将更好的发挥

理想情况下，你不会满足于当读者打开你的网站时仅浏览初始页，而是希望他们浏览翻阅，察看其它感兴趣的内容。将导航器置于网页顶部，就可以让用户通过使用这个工具轻松的找到所需的目标内容。

数学是优美的. 听上去有点奇怪? 当我第一次开始设计的时候，我确信如此。数学如此刻板乏味。你可能会惊讶的发现，最美观的设计，艺术作品，物体，甚至人都有数学上的共同点。尤其是黄金分割，也被称为神之比例，希腊字母表示其为 Φ (phi). 本教程会剖析一个网站的布局，以及如何对其黄金分割

网页骨架

这些是web页面的主要元素。有很多不同的方法去组织它们，但是这种布局也许是最常用的。

Container

所有的web页面都用一个container，主要是为了同一个目的：去包含一些页面元素，然而这个方法实现各有不同。例如，body标签或者是最常用的div。甚至于过去常用的table（不要使用table作为你的container，这是一个破方法）。想想container作为你房子的外墙，里面包含卧室，厨房，起居室等等。

container的类型:
Liquid: 根据浏览器宽度填充。
Fixed: 指定的宽度，并不会根据浏览器宽度改变。

Header

header并不真的是一个特定的元素，尽管某些人会认为它是。它更多是用在涉及到你放置你的logo，导航栏，tagline的web页面顶层的地方。许多人更愿意把这些元素包含在一个div里以方便使页面样式和内容分离。header会被视为一个container，所以它有两种类型选择，就是上文提到的 liquid 或 fixed 。

Logo

你的logo是你的身份和品牌。最常用的是把logo放在你header的左上角。我们的阅读习惯是，从左往右，从上至下，所以你的log应该放在访问者第一眼能看到的地方。

Navigation

页面导航是最重要的元素之一;你的访问者需要用它来使用你的站点。 它应该是容易被找到且易用的，这就是为什么大多数的人把它放在header部分，最少也是在页面顶端附近的原因。

 navigation类型:
Horizontal: 水平显示，被称为‘navigation’
Vertical: 垂直显示，被称为‘menu’

Main Content

每个人都（应该）知道，内容才是王道！当人们来参观你的站点，这是他们想看的主要元素。它应该是web页面的焦点，所以参观者才能快速找到他们想要的。

Sidebar

sidebar是放置你次要内容的元素，像一些广告，站点搜索，订阅链接(RSS, Twitter, Email, 等), 联系方法等。这个元素不是必需的，尽管右很多站点用它。它大多数是放在右边的，但是你也能把它放在左边或者两边，只要不扰乱主要内容的浏览就行。网站使用横向或纵向导航，sidebar往往是用纵向导航。

Footer

web页面的尾部总会有一个页脚，让您的访客知道他已经到达了你web页面的结束部分。和header一样，footer也不是一个特殊的元素 。在你的页脚里包含版权，法律声明以及主要的联系方式。包含一些重要的链接是个好主意，比如home page, contact page, 等. 有些网站用这个区域提供一些相关材料或者其他重要信息。

“Whitespace”

你可能有强烈的愿望去填充这些页面上的空白，但是请不要这么做。“空白”也是相当重要的。你可以看看NetTuts网站是如何有效的使用空白区域的，创建了页面平衡给人一个好的感觉。
以上是web页面的骨架，现在我们来看如何黄金分割这些元素。

黄金分割和使用网格（Grids）

还记得之前我说数学是美丽的吗？我们认为视觉的吸引力是基于比例的（比如，黄金分割）。几千年来，艺术家，设计师，建筑师等都有意无意的在使用了一个共同的比例来增加他们作品的美感。这个神奇的数字是什么呢？ 1.62 (实际是 1.618…) 我不会说这个数字的起源，但是我会告诉你如何使用它。

使用黄金分割是非常简单的。比如你像找到你主要内容和sidebar列表的宽度。你将使用你内容区域总的宽度除以 1.62. 然后得到555.55px. 我们不需要那么精确，所以我们就用555px。现在你就知道你的主要内容元素是555px的宽度，你的sidebar是345px。看看多么容易？！

但是等等先，乐趣不止于此！你也可以应用黄金分割到其他元素的宽度和高度。

Using Grids

如果你和大多数的人一样，不想每次都抱着个计算器来计算这个黄金比率。那么最简单的方法就是用grid。所以你需要做的就是把你的宽度或是高度分成三分。

要产生更详细的gird，只需要继续三等分就行。如果你读了前一篇文章“与Blueprint CSS框架的亲密接触”的话，你会看到Blueprint CSS框架用了一个详细的gird系统。 不仅仅是gird设计更容易更快，而且它也创建了一个美观的布局。如果你还没有使用gird设计，那么这是一个很好的尝试机会。你可以为fireworks，photoshops或者其他软件从 http://960.gs下载grid模板。

正如你看到的，NetTuts很好的遵循了黄金比率。顶端三分之一的网页再次分成了三分，非常接近黄金比率。难怪NetTuts的设计是如此吸引人！

如果你要做一个新的设计，我严重推荐你找一些流行的站点，评价他们的布局，以及如何应用黄金比率和gird。然后花一些时间去实践使用黄金分割，并在你的布局上面使用gird。

简介

　　这是一篇介绍网页设计原则的文章。在互联网迅速发展的今天，各种web 2.0网站竞争激烈，你死我亡。Jini, DHTML等复杂新技术被预言为没有前途，而看上去简单的metadata, XML, CSS获得了显著的突破进展。同时，或繁复或单纯的网页设计流派相互对立却同时成功。为了更好的理解这一切，BusinessWeek.com调查了时下网络精英，总结出这2008年设计者赖以生存的网页设计10大戒律。

　　互联网一直在改变，BusinessWeek.com与一群专家总结出了如今的网页设计师必须遵守的规则。（Matt Vela）
　　互联网一出现就体现了其强大的威力，它不仅改变了人们的工作方式，甚至改变了人们的约会方式。可以说，它让世界玩儿了一回过山车，把所有人都玩儿晕了。微软、网景以及其他公司开始了浏览器的竞争，网络标准的竞争也在展开。同时，随着Facebook、Flickr和YouTube的兴起，网络更注重集体智慧和社会化。从腾飞到萧条到再次腾飞，资金疯狂地流通着，互联网产业的发展似乎看不到尽头。
　　网络同时也吸引了宗教传播者、理论家等等，他们中很多人都预言互联网将会出现新的技术——Jini、DHTML及其他——然而没有一个兴起。但是，那些看似简单的技术——元数据、XML、CSS——都获得了突破性的进展。网页设计的发展从HotWired的闹腾到Google的应用一直在不断地持续者，有时看起来是对立的，但却彻底改变了互联网。
　　为了让事情更明了，BusinessWeek.com游说了许多互联网上杰出的人物一起总结网页设计的一些规范。参与者有互联网理论家，Don Norman，Nielsen Norman Group的合作者，NYTimes.com的设计总监，Khoi Vinh和John Maeda，Rhode Island设计学校的总裁当选人等。这十条2008年网页设计戒律是从我们的调查中总结出来的。所有贡献者的列表会在文末给出。

1、不要滥用Flash
　　Adobe公司的这项动画技术让互联网变得更为强大，从Nike公司非常夸张的首页动画到众多广告商使用的网页Banner。但是这项技术非常容易被滥用，过多的动画不仅没有实用性而且还会拖慢用户的网页浏览器。

2、不要让广告遮挡了网站内容
　　的确，广告对网站的生存来说是至关重要的，但研究表明，弹出广告和整页的广告一旦遮挡了网站内容，那它们的效用会大打折扣，同时也会影响读者是否会再来光顾。一个能够根据读者的要求进行伸缩的广告会更合适一些。

3、不要让网页看起来杂乱无章
　　网页是一个大杂烩，但缺乏合理结构的网站往往会使信息的浏览变得非常困难。Amazon.com在设计过程中将网页层次的清晰度作为最重要的标准。

4、不要过渡使用玻璃反射效果
　　苹果公司经常会设计出一些很漂亮的效果。但有些专家称，该公司在其所有产品的照片下添加玻璃反射效果，这一做法并不值得广泛采用，因为这种设计元素早就已经用滥了。

5、不要在公司名称中增减字母
　　如今，兴起了一种流行的网站命名方法，但这种方法却越变越奇怪。许多网站在命名的时候不是给单词添加多个元音就是故意去掉一些。如Flickr，Smibs，Meebo等。这些名字的确容易记忆，但注定是要过时的。

6、要适应改变
　　设计者们说，如今除了要察觉到网络带宽的变化外，普通文本也在悄悄兴起。诸如Craigslist等主流网站正在引领着这个潮流，同时像Coudal Partners和John gruber著名的Daring Fireball博客也代表了时代潮流的前沿。

7、要给人留下深刻印象
　　网站只是看上去漂亮已经不怎么管用了。像Facebook和YouTube之类的网站用内容和功能来吸引用户。创建网站最关键的是吸引并保留住用户的注意力。

8、要使网站社会化
　　Web2.0已经渗透到了方方面面。MySpace和了司的网站只是追随了潮流，让用户在网站内进行交流和交互。如今的设计者有在各类网站中加入了相同的元素，如广告、在线办公软件等等。

9、使用已被证实有效的技术
　　维基百科、YouTube、Facebook及同类网站已经成了网民生活的一部分。将这些元素融入网站可以保持和用户的接触，从而提供他们所熟悉的功能。

10、内容才是王道
　　虽然这句话已经是陈词滥调了，但仍然是非常重要的。网站设计得非常漂亮固然可以吸引眼球，但始终掩盖不了网站内容的匮乏。

原本打算庆祝：2003年儿童节
拒绝原因：太幼稚

原本打算庆祝：香烟问世150周年
拒绝原因：政治上欠妥

原本打算庆祝：植入式广告（Product Placement）发明50周年
拒绝原因： 星巴克给的钱太少

原本打算庆祝：Google 箴言“不做坏事”提出5周年
拒绝原因：太自恋

原本打算庆祝：几年荷兰画家蒙德里安(以抽象几何图案等为特点的) 诞辰130周年
拒绝原因：太抽象

原本打算庆祝：版权法案（Copyright Act）成立90周年
拒绝原因：使用©符号涉嫌侵权

原本打算庆祝：任天堂红白机成立20周年
拒绝原因：宠物鸭协会严正抗议

原本打算庆祝：Googol（一个1后边跟100个0）提出65周年
拒绝原因：太极客

原本打算庆祝：纪念艺术家M.C. Escher的草稿之一
拒绝原因：太恐怖

原本打算庆祝：庆祝JPEG图片压缩算法提出20周年
拒绝原因：压缩损失太严重

最近很多电子商务网站在登陆页面上放置了大量信息。而他们“汗牛充栋”的逻辑很简单：信息越多，用户越多。不巧的是，网上购物的人总是很挑剔。

Jacob Nielson 报导说网络用户在挑选和购买的过程中，变得越来越急躁。他们不会根据分类或产品介绍，花时间到网上查找信息，大部分人更愿意使用方便的搜索引擎。如果用户找不到他想要的，这笔交易就告吹。

这就使得简洁的网页设计成为关键，特别是你需要销量的时候，它能让用户更快地找到资讯。如果一个网页充斥着大量无用的文本、widget或无关的产品，那么这个网页可以说已经作废了。

不过，有些电子商务网站恰恰相反。他们喜欢搞“多点开花”，以图给潜在的用户尽可能多的选择，在网页上添加了许多无用的信息、广告和无关的产品。而不是清楚的一个网页一件产品。

更少的产品意味着更多的关注

许多网络公司可能忘记了一条电子商务的基本规则：网络购物越简单越好。可以在亚马逊点几下鼠标就买到的DVD，谁也不想驾车跑几公里外去买。如果购物的过程简单快捷，顾客甚至不会介意多花点钱或多等些时间。

苹果公司已经完全掌握了极少主义艺术网页设计。如果你打开他们的主页，只会看到三样东西：
   * 一个简单的顶部导航
   * 主体部分的一件产品
   * 在倒影部分的产品相关链接
除了标准的页脚导航，整个主页仅由这三个部分组成。以下是点击一件产品进入的网页（以iPhone为例）。

在产品页面，你第一眼就能了解这个网页是关于什么的：iPhone。产品本身占据了大部分的页面，周围是新 iPhone 的特点和一些应用程序。但更重要的是，我们要了解这个网页上没有什么：
   * 无关的产品
   * 无关的侧边栏广告
   * 过多的重复
   * 混乱的排版

苹果公司用一个舒适的页面展示了足够多的信息。展示大量的信息没有错，只要让它看起来并不多。这样你同样可以看到所有的信息，链接和图片排列在 iPhone 的周围，同样发挥了作用。网页上没有任何无聊的广告或无用的其它产品的信息。

这儿有一组经过实践考验的方法，任何设计师或网页开发者都可以学去，免得糟糕的页面布局把顾客赶走。

只有你需要的：简单的网页设计中最重要的一个方面就是，只展示你要卖的产品。但这不是说你不能向用户展示大量的信息。你只需要确定用户想了解更多的信息。苹果大量使用“Learn more”链接达到这一点。

减少点击次数：顾客到达想要的页面点击次数越少，对你来说可能的回报就越高。可别让顾客劈荆斩棘去买你的产品。

“奶奶”规则：如果你的奶奶（或任何年老的人）可以通过你的网站了解如何购买产品，那么产品被购买的几率就很大。无用的信息会很快把你的奶奶搞晕的。

减少分栏：你每增加一个分栏，显示内容的空间就少一截。顾客不想要的东西占据了太多的版面，这就无法强调主要的产品。

尽量减少操作菜单：展示产品应当避免无关的干扰，推动顾客购买的进程。顾客在选购时都希望尽可能少的思考，要让顾客有更多思考的空间并专注于购买的过程。

保持整洁：一个干净的设计可以让访问者心情愉悦。多花点时间确保你的网页布局美观，这样才会有回头客。

作为设计者应该从顾客的角度审视网页设计。你会在自己设计的网站上购物吗？

其它优秀的电子商务设计实例

Bell.ca 只使用了很少的色彩来展示品牌，而给浏览者的操作菜单只有主导航栏。注意设计者是如何安置这么多不同的菜单——购物导航，还要同时照顾到私人和企业客户。网页不仅不凌乱，反而显得简洁明快，提供了很多菜单，但并没有迫使浏览者一一浏览查找。同时也要注意到顶部的产品导航设计得有多聪明，我想没有谁还会选错产品了吧。

Shoeguru.ca 展示了一个完全以用户和产品为中心的设计。似乎产品本身就是一名推销员。网页上除了产品毫无其它无关的东西；甚至连导航菜单都“少得可怜”。

Etsy 在主页上放置了如此多的信息却丝毫不显凌乱，简直是网页布局的样板。Etsy 的产品目录很繁杂，但优秀的设计使其显得轻松朴实。事实证明，一个实用性的主页也可以有很好的商业效果。

Crupress 是一个文雅的图书网站，没有什么娱乐成分。主页上有大量的文本，并没有搅乱用户的思绪。顶部的导航很醒目，但也只需要瞟一眼就能了解。所有的设计元素水乳交融。

Tokyocube 是个有趣时髦的销售日本产品的小网站。网站没有浪费宝贵的空间来介绍产品，而是把他们摆放在屏幕的右侧。网站使用大量的留白使得用户能够快速清晰地欣赏产品。谁也忍不住要点击几个玩偶好好瞧瞧。

Furious Tees 相对前面几个网站更注重图形设计，主要有两点作用：
   * 体现网站活泼的基调
   * 清楚的显示所有的衬衫只卖19.99美元

访问者也不会忘了 Furious Tees 是卖什么的，产品不都在面前吗？把产品都放在主页对于那些销售新奇产品的网站特别有益，因为通常人们都不会去找这些东西。

但是把产品都集中放在主页上，很容易把布局搞乱。Furious Tees 很好地避免了这些问题。他们把关注都集中在 T-shirt 和风趣的设计上，没有在网页上放任何侧边栏或是广告。

Basecamp (37 Signals)

论混合不同种类信息来销售产品，恐怕没有比 37 Signal 的项目管理工具 Basecamp 更牛B的了。但网页上的信息数量恰到好处。每个词语、每个图片都经过权衡。如果没有足够的信息，用户不会浪费时间去理解产品；太多的信息用户也无法招架。

得当的顶部背景色彩和公司徽标，使得下面的主体部分更引人注目。他们将各种不同的媒体融合在一起的同时，还留出大量的空白，使得用户不会一下子被繁杂的文本、图片搞晕。

最后的总结

每个网站都会要求不同类型的布局、图样和文章以便销售产品。但作为设计者有些事半功倍的办法：
   * 权衡每个词语
   * 删去没用的元素
   * 使用雅致的色彩并大胆留白
   * 控制访问者每一次看到的信息数量

记住，网上购物的人总是很挑剔。他们不会磨磨蹭蹭地挑选商品，而会使用搜索引擎搜索关键词来找到他们想要的。如果他们不喜欢看到的网页，对不起，拜拜。对于网站来说，只能用一个不大的界面来吸引这些潜在客户。一个雅致的、整洁的设计可以将关注集中到产品上（而不是其它任何东西），并帮助顾客更快地找到他们想要的。