改进网站设计提供的有意的建议

所属分类: 网页制作 / HTML/Xhtml 阅读数: 1192
收藏 0 赞 0 分享

科学设计你的网站网页:来自 Eye-Tracking研究的23节必修课——Christina Laun
在网络设计领域关于Eye-Tracking的研究十分火爆,但是如何把这些研究结果转变为具体可行的设计来运作依旧是个难点。以下就是一些来自于Eye-Tracking研究结果的窍门,可以为改进你的网站设计提供些意见:
1.对比图像,文字更具吸引力
与你所认为的相反,在浏览一个网站的时候,能够直接吸引用户目光的并不是图像。大多数通过偶然点击进入你的网站的用户,他们是来寻觅信息的而不是图像。因此,保证你的网站设计凸现出最重要的信息板块,这才是设计的首要原则。
2.眼球的第一运动聚焦于网页的左上角
用户浏览网页的这一习惯应该在意料之中,毕竟左上部为主要操作中心这一点为大多数重要的计算机应用程序的设计所采用。在你构建网站考虑网站设计时,应该尽量保持这一格式。要知道,如果你希望保持个人特色,搭建一个成功的网站,你就必须尊重用户们的习惯。
3.用户浏览网页时,首先观察网页的左上部和上层部分,之后再往下阅读,浏览右边的内容
用户普遍的浏览方式呈现出“F”的形状 。保证网站内容的重要要素集中于这些关键区域,以此确保读者的参与。在此放置头条,副题,热点以及重要文章,这样可以吸引到读者进行阅读。
4.读者会忽视横幅广告
研究表明,读者常忽视大部分的横幅广告——尽管你以此维持网站生计——视线往往只停留几分之一秒。如果你想通过广告挣钱,那么必须创新你的广告位以及合理配置网站广告形式。
5.花哨的字体和格式被忽视
为什么呢?那是因为用户会认为这些是广告,并非他们所需要的信息。事实上,研究表明用户很难在充满大量颜色的花哨字体格式里寻找到所需的信息,因为视觉线索告诉他们把这些忽略吧。保持网站的清爽,不要因为华而不实的表面,让重要的信息被忽略。
6.用数词来代替数字
如果使用数词取代数字的罗列,读者会发现在你的网站可以很容易地发现真实的资料。要知道,你是写给那些将第一次浏览你的网站的读者,所以,让他们容易发现他们所需的信息,让他们感兴趣。
7.字体大小影响浏览行为
想改变人们对你的网页的看法吗?改变网页字体的大小。大的字体刺激浏览,而小一些的字体则提高焦点阅读量。根据你的需要,合理配置两者的比例。
8.遇到感兴趣的内容,用户仅会多看一眼副标题
不要过分坚持副标题固定的格式——保证他们的相关性和兴趣。你也可以让副标题包含关键词,这样可以有效利用搜索引擎,让它带来读者。
9.人们大都只浏览网页的小部分内容
如果在用户浏览的时候提供信息使他们尽快锁定目标,就可以把这一点发展成为你的优势。突出某些部分或者创建项目列表使网页信息容易找到和阅读。
10.简短的段落相对于长段落来说有更好的表现力
网页信息是为大多数强调快速浏览的无联网用户提供的。除非上下文的衔接要求,保持信息由简短的段落和句式组成,例如 这个电子商务网站 的产品介绍。
#p#
11.根据视觉锁定,一栏格式比多栏格式拥有更好的表现力
别让过多的信息把网站来访者淹没。大多数情况下,简洁更具力量。多栏内容容易被用户忽视,我们需要消除这些干扰。
12.网页顶部和左边的广告更能吸引眼球
如需要在网站植入广告,试图使他们融入网页的左上部,这样他们才能吸引到最大的视觉注意力。当然,用户仅仅会注意到这些广告,这并不意味着他们会用鼠标点击。所以不要为了提高广告的注意力而牺牲原有的网站设计。
13.将广告放置与最佳内容一旁也可以提升注意力
如果想要提升广告的可视性和点击率,可以将其设置于最能引起人兴趣的内容一旁,整合进网页的设计里。这样,用户既可以找到所需的内容,你也能提升广告的效益。
14.在各种测试中,人们阅读文字广告最为专心。
正如上面提到的,一般的互联网用户不会花费太多时间用于查看那些一眼就能看出是广告的内容。这就是文字广告表现出众的原因。他们并没有分散注意力,而是与网页的其它部分内容融为一体,这让他们减少了对读者的视觉刺激,也使这一广告形式获得成功的阅读率。
15.越大的图像吸引越多的注意力
如果要在网页中使用图片,那越大越好。人们更倾向于查看那些能够清楚地看到细节和获取信息的图像。要保证你所用的图片与文章内容相关,否则它更容易被忽视。大多数读者都拥有高速的连接速度,所以请放心在你的网站上使用那些较大体积的图片。
16.干净、清晰的特写图片能吸引更多的视觉注意
可能那些抽象的艺术图片会让你的网站看起来很有味道,但是他们并不会吸引多少读者的注意力。如果你需要使用到这些图片,请确保所用图片的清晰以及其表达内容的简单可读性。必须注意的是,那些与真实的“人”相关的图片比所谓的模特图片更为“优秀”。
17.标题能吸引眼球
浏览网页时,读者能发现的第一内容是标题。确保网页的所有相关链接畅通和有效,以让读者顺利的通过网站进一步搜索。
18.用户花费大量时间察看按钮和菜单
所以,你需要花费额外的时间维护你的精心设计。毕竟,他们不仅吸引了读者的眼球,更是网站设计的重要组成要素。
19.表单格式可以延长读者的注意时间
分解内容和段落,大量使用表单形式来表现你的文章,可以保证读者的浏览率。使用数字和其它标记符号来突出文章的重要内容,会让网站更容易浏览,用户更快的找到所需的信息。
20.避免呈现大块的文本
研究显示,一般的网络浏览者不会花费时间去阅读大块的文本,无论他们有多重要或写得多好。因此,必须把这些大文本分解为若干小段落。突出重要的地方,放置点击的按钮也可以提高用户的注意力。
21.格式可以吸引注意力
在文中使用粗体、大写、彩体、下划线可以帮助用户获取正文所表达的最主要的信息。使用时需要谨慎,因为过多的使用会使你的网页难以阅读,把读者吓跑。
22.利用好空白
尽管把网页的每寸空间都填满这个想法十分诱人,但事实上让网站留出部分剩余更为不错。网站的过量信息会把用户淹没,同时他们也会忘记所提供的大部分的内容。所以保持网页的简洁,给读者预留出一些视觉空间来供读者休息。
23.放置于网页顶部,导航工具的作用将更好的发挥
理想情况下,你不会满足于当读者打开你的网站时仅浏览初始页,而是希望他们浏览翻阅,察看其它感兴趣的内容。将导航器置于网页顶部,就可以让用户通过使用这个工具轻松的找到所需的目标内容。
更多精彩内容其他人还在看

网页注释在IE中产生文字溢出

实验代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti
收藏 0 赞 0 分享

HTML教程:定义列表

原文:http://andymao.com/andy/post/104.html 上一节:有序列表 写完“无序列表”和“有序列表”之后已经有人和我说这两篇看得没什么意思。这两篇文章如果只以单向读取的形式阅读那么的确是没什
收藏 0 赞 0 分享

HTML教程:有序列表

原文:http://andymao.com/andy/post/103.html 上一节:无序列表 信息有时候是无序归纳的,有的却有着明确的顺序,在上一篇也提到了。那么简单的来想一下身边有哪些事物是有先后顺序的:操作步骤、排行榜、书目录……
收藏 0 赞 0 分享

HTML教程:无序列表

原文:http://andymao.com/andy/post/102.html 段落已经讲完了,那么一些基本的应用方式也讲了一些,那么是否已经应用了呢?当然应用可以更为丰富,那么这些就需要自己在实际工作中不断的摸索与思考,然后创新并总结得出新的应用形式。当然了段落不能当作
收藏 0 赞 0 分享

HTML网页制作的强大8条技巧

  虽然现在有许多网页制作工具能让您轻松地完成工作,但如果使用HTML则可以得到更大控制权,下面介绍几个小技巧。   1。使用<tt>,<i>,<br>语句来控制文字排版比用<pre>好得多。 如: <tt>实用
收藏 0 赞 0 分享

网页表格分割线去除方法

网页表格分割线去除方法。 其实上面的三个表格都有三行三列,隐藏分隔线的诀窍在于rules,察看这三个表格的源代码,我们可以看到<TABLE>标签中都有rules。它有三个参数(cols,rows,none),当rules=cols时,表格会隐藏纵向的分隔线,这
收藏 0 赞 0 分享

blockquote标记应用注意

关于语义化,不是一句两句就能说明白的,而且现在也没有一个官方的很严格的定义。关于<blockquote>没有争议的是: 1.引用一段较长的文字 2.可以使用cite标签或者属性 问题是<blockquote>引用的文字必须使用块级元素将他
收藏 0 赞 0 分享

网页表格表框制作技巧

网页表格表框制作技巧。 -------------------------------------------------------------------------------- 表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不
收藏 0 赞 0 分享

HTML其实就是学习几个重要标记的应用

《这将是一场革命》一文出来以后。得到业界大伙的认同,当然与此同时也得到部分来自内部与外部的挑衅,不过的更加多的是更多人来寻问每一个点的细节。今晚回家很早就睡了,半夜在一个梦中醒来,梦里正在和小学的同学玩一个游戏——“The Next&rdquo
收藏 0 赞 0 分享

移动端专用的meta标签设置大全

不知道有没有人觉得,html的meta标签描述的头部信息特别多,下面这篇文章主要给大家分享介绍了关于移动端专用的meta设置的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多