视线流及热区对网页设计的影响.pdfVIP

视线流及热区对网页设计的影响 一、关于视线流及热区的几种理论 1.1 对角热点（古腾堡图表 ） 古腾堡图表是一种对线平衡的设计理念源于约翰内 斯·古腾堡。 他提出，人们浏览页面或布局的时候，视线都 趋向于从上到下，从左到右的眼动规律。左上角为起始，右 下角为结束。所以报纸的标题，杂志的标题，网站的 LOGO 等重要的信息都是放置在右上角这个位置。 1.2 F 型热区 尼尔森.杰克博通过眼动实验，将网页中的浏览热点可视 化后呈现出类似 F 形的图案。这种浏览行为有三个特征： 1. 用户首先会在内容区的上部进行横向浏览。 2. 用户视线下移一段距离后在小范围内再次横向浏览。 3. 最后用户会在内容区的左侧做快速的纵向浏览 有时候，在这三个过程之后，还会在底部有横向浏览的 热点，使得整个浏览热区图看上去更像 E 而不是 F 。也有时 候，用户浏览时只反应了上述的行为 1 和行为 3，使得浏览 热区图像一个倒写的 L 。但从所有数据整体上来看，用户的 屏幕浏览热区图还是较一致地反应出了 F 图像。在不同性质 的页面F 的形状略有不同，如： 1.一般性的网站： 2. 电子商务型的网站： 3.搜索性的网站：（Google 搜索） 1.3 大学生网页浏览视线流 （中心热点） 人类工效学专家通过眼动仪，在研究了大学生在浏 览网页时的注视范围以及注视时长后，得出以下结论： 用户在屏幕上浏览不同区域时，表现出不同的偏好，如 图： 数字表示的是偏好程度，实验表明，1 表示最热区域， 依次类推。 二、 国外社交网络个人主页面热点分析 EyeTrackShop 近日发布了一份分析报告，显示了在各 大社交网站中，个人信息页面被浏览时候的热点分部情况。 这项研究使用网络摄像头记录下了 30 个参与者在浏览 各个社交网站个人信息页面时候的眼动情况(进入页面后 10 秒内的数据) 。记录下的数据包括：页面上的哪些内容被重点 “关照”到，以及用户浏览页面各主要区域的先后顺序。被调 查的社交网站包括：Facebook ，Google+，LinkedIn ，Flickr ， Youtube ，Klout ，Reddit ，Digg ，Tumblr，Twitter，StumbleUpon 和 Pinterest 。 1、个人信息页面的头像很重要。 在 Facebook ，Klout 和 StunbleUpon 中，头像是该页面最吸引浏览者注意的地方 2 、你认识的朋友的头像也会获得相当的关注度。浏览 者会查看该页面上你朋友的小头像图片。 3、内容越靠上，获得的关注度越大。这一点在 Pinterest ， Digg 和 Facebook 上有很明显的反映。但是在 Twitter 和 Youtube 上则稍好一点。 浏览顺序 4. 在浏览顺序方面都是从中间开始浏览，再有中间向左 右扩张，再到上方。如图： 三、眼动研究对网页设计的二十三条建议 1.对比图像，文字更具吸引力 2.眼球的第一运动聚焦于网页的左上角 3.遵循 F 型浏览模式。 4.读者会忽视横幅广告 5.花哨的字体和格式被忽视 6.用数词来代替数字 7.字体大小影响浏览行为 8.副标题要提起用户兴趣 9.人们大都只浏览网页的小部分内容 10.简短的段落相对于长段落来说有更好的表现力 11.根据视觉锁定，一栏格式比多栏格式表现力更好 12.网页顶部和左边的广告更能吸引眼球 13.将广告放置与最佳内容一旁也可以提升注意力 14.在各种测试中，人们阅读文字广告最为专心。 15.越大的图像吸引越多的注意力 16.干净、清晰的特写图片能吸引更多的视觉注意 17.标题能吸引眼球 18.用户花费大量时间察看按钮和菜单 19.表单格式可以延长读者的注意时间 20.避免呈现大块的文本 21.格式可以吸引注意力 22.利用好空间 23.放置于网页顶部，导航工具的作用将更好的发挥