简明现代魔法 -> web设计理念 -> 来自Eye-Tracking研究的23节必修课



Eye-tracking studies arehot in the web design world, but it can be hard to figure out how to translate the results of these studies into real design implementations. These are a few tips from eye-tracking studies that you can use to improve the design of your webpage.


Text attracts attention before graphics. Contrary to what you might think, the first thing users look at on a website isn’t the images. Most casual users will be coming to your site looking for information, not images, so make sure your website is designed so that the most important parts of your text are what is most prominent.

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

Initial eye movement focuses on the upper left corner of the page. It shouldn’t be surprising that users look at webpages in this way, as most computer applications are designed with the top left hand side as the main focus. You can do your website a favor by keeping this format in mind when creating a design. Remember, while you want to have a personal style, you have to keep the habits of your readers in mind if you want your site to be successful.

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

Users initially look at the top left and upper portion of the page before moving down and to the right. Users were found to generally scan webpages in the shape of an ‘F’. Make sure the important elements of your content are located in these key areas to keep readers engaged. Place headlines, subheadlines, bullet points, and highlighted text along these lines so readers will be enticed to read further.

用户浏览网页时,首先观察网页的左上部和上层部分,之后再往下阅读,浏览右边的内容。 用户普遍的浏览方式呈现出“F”的形状。保证网站内容的重要要素集中于这些关键区域,以此确保读者的参与。在此放置头条,副题,热点以及重要文章,这样可以吸引到读者进行阅读。

Readers ignore banners. Ads may be the bread and butter of your site, but studies have shown that readers largely ignore banner ads, often focusing for only a fraction of a second. If you’re trying to make money from ads, you need to be creative in your ad placement or in the types of ads you have on your site.

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

Fancy formatting and fonts are ignored. Why? Because users assume they are ads and don’t have the information they need. In fact, studies showed that users had difficulty finding information in large colored letters formatted in this way because visual clues told them to ignore it. Keep your site streamlined and not so shiny that important elements will be glossed over.

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

Show numbers as numerals. Readers will find it much easier to find factual information on your site if you use numerals instead of writing out numbers. Remember, you’re writing for readers that are going to be primarily scanning your site, so make it easier for them to find what they need and keep them interested.

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

Type size influences viewing behavior. Want to change how people look at your page? Change the size of your font. Smaller fonts increase focused viewing behavior while larger fonts encourage scanning. Depending on your needs, you may want more of one than the other.

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

Users only look at a sub headline if it interests them. Don’t put in subheadlines just to stick to a particular format–make sure that they are relevant and interesting. You can also help yourself out by making sure they include keywords that will bring search engines to your site.

遇到感兴趣的内容,用户仅会多看一眼副标题。 不要过分坚持副标题固定的格式——保证他们的相关性和兴趣。你也可以让副标题包含关键词,这样可以有效利用搜索引擎,让它带来读者。

People generally scan lower portions of the page. You can use this to your advantage if you give readers something to latch onto when they’re scanning your page. Highlight certain sections or create bulleted lists so information is easy to find and read on your page.

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

Shorter paragraphs perform better than long ones. Information on your page should be designed for the short attention span of most Internet users. Keep paragraphs and sentences short unless context mandates otherwise, such as descriptions of products on an e-commerce sites.

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

One-column formats perform better in eye-fixation than multi-column formats. Don’t overwhelm visitors to your site with too much information. Simpler really is better in some cases. Multiple columns will more than likely by ignored by users, so eliminate clutter from the get-go.

根据视觉锁定,一栏格式比多栏格式拥有更好的表现力。 别让过多的信息把网站来访者淹没。大多数情况下,简洁更具力量。多栏内容容易被用户忽视,我们需要消除这些干扰。

Ads in the top and left portions of a page will receive the most eye fixation. If you’re going to place ads on your site, try integrating them into the top left portion of your page, as those will get the most visual attention. Of course, just because readers see them there doesn’t mean they’ll click on them, so don’t sacrifice design just to gain some extra visibility.

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

Ads placed next to the best content are seen more often. If you want to get your ads seen and hopefully clicked on, incorporate them into your design in a way that places them near the most interesting elements of your content. Users will still be able to find what they need, but you’ll gain an advantage in advertising.

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

Text ads were viewed mostly intently of all types tested. Like we said earlier, the average Internet user generally doesn’t waste much time looking at things that immediately appear to be ads. That’s why text ads perform so much better. They aren’t distracting and blend in with the rest of the content on the page, making them less visually irritating to the reader and ultimately more successful.

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

Bigger images get more attention. If you are going to use images on your page, bigger is better. People are more interested in an image where they can see details and information clearly. Just make sure that any image you are using is particularly relevant to your text, otherwise it will most likely be ignored. Most readers have high-speed connections these days so don’t be afraid to stick a few larger photos on your Web host.

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

Clean, clear faces in images attract more eye fixation. While they might look good with your design, abstract and artsy photos aren’t going to garner much reader attention. If you’re using photos with people in them, make sure they are clear, easy to read shots. It should also be noted that photos with “real” people, not models, perform better.

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

Headings draw the eye. One of the first things readers have been found to look at on a webpage are headlines. Make sure yours are unobstructed by other items on the page and that they are engaging enough to draw the reader into looking further through your site.

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

Users spend a lot of time looking at buttons and menus. Because of this, you’ll want to put in some extra time making sure that yours are well-designed. After all, they not only draw a lot of eye fixation, they are one of the most important elements of your site.

用户花费大量时间察看按钮和菜单。 所以,你需要花费额外的时间维护你的精心设计。毕竟,他们不仅吸引了读者的眼球,更是网站设计的重要组成要素。

Lists hold reader attention longer. One way you can break up the paragraphs in your content and keep users looking through your site is to make frequent use of a list format for your articles. Use numbers or bullet points to highlight important information within your content. It will make your site more scannable and easier for users to find the information that they’re looking for.

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

Large blocks of text are avoided. Studies have shown that that your average Web visitor isn’t going to take the time to study large blocks of text no matter how informative or well-written they might be. Because of this, you need to break up these larger blocks of text into smaller paragraphs. Highlighting specific areas and pulling out bullet points can also help to keep user attention.

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

Formatting can draw attention. To keep users from skipping over the main and most important points in your content use bold, capitalized, italicized, colored, and underlined text. Use these things judiciously however, as too much will make your page hard to read and send readers away.

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

White space is good. While it might be tempting to put something in every corner of your page, it’s actually better to leave some of your site free of any text. Sites with too much going on tend to overwhelm users and they ignored a large part of the content. So keep things simple and allow some visual open space for readers to rest their eyes.

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

Navigation tools work better when placed at the top of the page. Ideally, you don’t want readers to just look at the initial page they came to on your site, you want them to stick around and look at other interesting things as well. You can help send them in the right direction by making your navigation easy to find and use by placing it at the top of the page.

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





copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们