对眼动模型的深度剖析

北京/UI设计师/3年前/17849浏览
对眼动模型的深度剖析

眼部运动轨迹,即眼动模型是我们作为设计师必须掌握的理论,它有利于我们对界面信息层级的处理,即框架层。

     又见面了,之前我在公众号上发表过基础的眼动模型文章,本篇文章是眼动模型2.0研究文档,在之前的文章中加入了一些新的内容。如果你还没有看过1.0基础篇,那么建议先去看——【对眼动模型的认知(点击)


       说起眼动模型,不得不提起眼动仪。

       现代眼动仪的结构一般包括四个系统,光学系统,瞳孔中心坐标提取系统,视景与瞳孔坐标迭加系统和图像与数据的记录分析系统。   

       眼动有三种基本方式:注视,眼跳和追随运动。

       利用眼动仪进行心理学研究常用的资料或参数主要包括:注视点轨迹图,眼动时间,眼跳方向的平均速度,时间和距离,瞳孔大小和眨眼。


       那么什么是眼动模型?

       眼动仪用于记录人在处理视觉信息时的眼动轨迹特征,广泛用于注意、视觉、阅读等领域的研究。 以人们的视觉运动顺序为路径,绘制出的视觉轨道图即为眼动模型。


       这里回顾了过去10年中一系列眼动研究的结论,我们可以发现即使设计发生变化,基本的扫描行为仍然保持不变。

       1.常规展示网页      

在具有不同内容单元格的页面上,人们经常以割草机的方式处理这些单元格:它们从左上角的单元格开始,向右移动直到该行的末尾,然后向下移动到下一行,向左移动直到该行的开始,再向下移动到下一行,依此类推。

(此图案的名称命为割草机,其灵感来自割草机有条不紊地在草地上来回扫动的方式。割草机从草坪的一侧移到另一侧,然后翻转相反的方向修剪下一行中的草。)       

 

       但我们的视线有上图的路径那么规整吗?答案是否定的。

 这是真实的用户眼动模型,虽然看起来没有那么有序,但我们仔细观察,可以发现用户的视线顺序仍然是以割草机的方式浏览。

这里要注意,我们以上所说的是单元格信息较为规整的网页。



       2. 复杂的SERP(搜索结果页面)

       用户浏览SERP的线性度要比以前低得多,现代SERP的丰富多样的布局导致了一种新模式的发展:弹球模式。在弹球模式中,用户以高度非线性的路径浏览结果页面,在结果和SERP功能之间跳动。

       我们来看下图的路径概览。



当你看懂了以上的弹球模式。你应该能想象出真实页面浏览情况。

一位参与者正在寻找肉毒杆菌毒素的价格信息。她搜索了罗利·波托克斯。这个编号的热力图显示了她在14秒内的所有注视,形成了弹球状。(4秒内观察158个点 — 这种浏览速度速度是正常的。)


那么我们再来扩展一下,什么是SERP?

       Search Engine Results Pages (SERP) 指的是谷歌搜索中非自然排名的搜索结果的页面。可能是广告,可能是视频,可能是图片等等 ,总结起来只有2种——付费推广和自然搜索。

       什么是非自然推广?就是付费推广的一些信息,或者谷歌本身推广的一些信息。



虽然信息的形式多种多样,但一些事情是不变的。

1. 浏览的趋势

       人们仍然主要浏览而不是阅读。阅读页面上的所有文本,即使是阅读大多数文本,仍然极为罕见。


       虽然用户确实浏览了整个内容,但他们也从来不会完美的线性阅读内容。他们仍然在页面上跳转,跳过某些内容,回溯以阅读跳过的内容以及重新阅读已经浏览的内容。


2.浏览模式

    我总结出来的浏览方式,它几乎涵盖了人们所有的阅读习惯,分别是:

  • F模式

  • 夹心蛋糕图案

  • 斑点图案

  • 承诺模式

  • 详尽的审查模式

  • 绕过模式

  • 锯齿形

  • 顺序模式

  • 瞬吸模式

       这么多模式的衍生,都是基于割草机模式和弹跳模式。当你能深刻了解这两种模式时,你就已经掌握了眼动模型。


       说了这么多,那么关于实际工作的一些界面设计呢?

  1. 1.人们会优先浏览更大的元素。

  2. 2.人们会优先浏览色彩更为鲜艳的元素。

  3. 3.人们会优先浏览具有对比色,互补色元素。

  4. 4.遇到强烈的互补色,且色彩比值接近1:1时,人们会第一时间注意到,但很快会转移视线。

  5. 5.人们会优先浏览留白较多的元素。

  6. 6.人们会优先浏览组成更为丰富的元素。


      但我们要注意的是,以上理论仅在相对情况下成立,即没有其余变量的干扰。我们在设计界面时,往往用到以上1-2条定律即可,切不可滥用,造成画面混乱。



151
Report
|
12
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
字体设计
Homepage recommendation
相关收藏夹
红动中国广场舞
红动中国广场舞
红动中国广场舞
红动中国广场舞
作品收藏夹
红动中国素材网
红动中国素材网
红动中国素材网
红动中国素材网
作品收藏夹
大家都在看
Log in