通过研究视线轨迹改良设计

星期天 07.02.2006 - Posted in 工作分享, - 3,228 views
此研究报告来自名古屋市立大学芸術工学部的木本晴夫教授,整理了部分文字和图片。 视线跟踪技术早期主要应用于心理学研究、助残等领域,后来才被应用于图像压缩及人机交互和可用性工...

此研究报告来自名古屋市立大学芸術工学部木本晴夫教授,整理了部分文字和图片。

视线跟踪技术早期主要应用于心理学研究、助残等领域,后来才被应用于图像压缩及人机交互和可用性工程。从用户注视信息中:

  1. 推断人们感兴趣或引起注意的内容
  2. 通过所注视的对象可得到其指代对象
  3. 暗示对象之间的关系

能否自发、自觉地使用视觉导向的设计方法,并根据视觉路径走向排列关键信息,这是区别专业与业余网页设计师的一个重要依据。

视线轨迹

视线经过的所有关注点可以连接成一条完整的路径,即视觉轨迹。

02_124533_002.jpg

A. 左右移动优先于上下移动(文字左右书写的情况)
B. 在同一背景区域移动
C. 移向醒目的地方
D. 向底部移动的可能性小

视线焦点

打开一个新的网页,我们的视线首先会聚焦在网页中最引人注意的那一点上,即视线焦点。

02_124546_003.jpg

E. 上面配置一个eye-catcher会导致难于解读
F. 中央配置了eye-catcher时视线不稳定
G. 右上配置了eye-catcher时视线不稳定
H. 点对称时视线流向稳定

改良设计的例子

02_124512_001.jpg

对“改良前”的设计建议:
1. 左上配置eye-catcher并强调
2. 横向整列排列图片,统一背景
3. 做成点对称

視線追跡装置をチラシのレイアウトデザインに応用する
http://www.sda.nagoya-cu.ac.jp/kimoto/ncu/yamauti_eyemark/eyemark_recorder.html
用鼠标模拟视线跟踪技术
http://blog.csdn.net/henrybai/archive/2005/07/01/409249.aspx

蓝色经典 http://www.blueidea.com/design/doc/2006/3701.asp

链接到 http://home.rexsong.com/20060702/research-eyemark-improved-design/

© 一叶千鸟(转载请留原文链接,更新于2009年08月30日22点)

3条评论 发表»

ASX says:

比较初级~呵呵

jackyshe says:

“E. 上面配置一个eye-catcher会导致难于解读 ”这句什么意思?为什么会导致难于阅读?

“ASX* [ 2006-07-03 00:02:28 ]
比较初级~呵呵 ”

ASX兄能提供些更多的资料吗?感觉这些东西很有意思。

hongxiaowan says:

和我一样,封了trackback?
http://cn.hongxiaowan.com/43.htm

发表评论

Spammer必读