---
title: "用Eye-Tracking改进网站设计(转)"
url: "https://yjyj.net/learn/1174.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2009-06-11T22:44:12+08:00"
updated_at: "2009-06-11T22:44:12+08:00"
categories: "招数学习"
tags: "CSS布局技巧, 前端开发实战, 网页视觉设计"
summary: "这篇文章把 Eye-Tracking 研究结论翻成可落地的网站设计原则：用户先看左上角、偏爱标题与短段落、会忽略横幅广告和花哨排版。适合想提升网页可读性、内容曝光和广告布局效率的人直接照着改。"
source: "生猛大蝦 (https://yjyj.net)"
---

# 用Eye-Tracking改进网站设计(转)

> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/learn/1174.html) · 作者：小 虾 · 发布时间：2009-06-11

## 30 秒核心看点 (TL;DR)

- 用户浏览网页有明显“F”型路径，左上与上方内容最先被看到。
- 短段落、清晰标题、列表化信息，比大块文本更利于快速扫读。
- 广告与图片要融入内容区，清爽排版和相关性比花哨更重要。

在网络设计领域关于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.放置于网页顶部，导航工具的作用将更好的发挥** 理想情况下，你不会满足于当读者打开你的网站时仅浏览初始页，而是希望他们浏览翻阅，察看其它感兴趣的内容。将导航器置于网页顶部，就可以让用户通过使用这个工具轻松的找到所需的目标内容。

## 延伸问答与排错指南 (FAQ)

### Eye-Tracking 对网页设计最实用的结论是什么？
最实用的是：用户不会平均浏览整页，而是优先看左上、上方和左侧关键区域。设计时应把标题、核心信息、重点链接放在这些位置，并用短段落、列表和清晰层级降低阅读成本。

### 为什么横幅广告和花哨字体常常没效果？
因为用户会把它们识别成“干扰信息”并快速跳过。研究里提到，横幅广告常被忽视，花哨字体也容易被当成广告。更好的做法是让广告或重点信息融入版面，同时保持页面清爽、可读。

### 想提升网页可读性，应该怎么改版？
优先做三件事：把重要内容前置到左上和首屏；把长文本拆成短段落、加副标题和列表；减少多栏和复杂装饰，改用清晰标题、适度字号和相关图片，让用户一眼找到重点。

---
更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)