ZD小课堂！作品集必备热点专题｜眼动追踪技术

设计学科考研&保研，都需要大量的理论基础知识储备，尤其对于注重学科交叉创新探索的院校，要求我们掌握设计+技术的多元认知面与专业技能。 如果忽视了技术基础知识学习的重要性，就会导致我们制作交互设计项目漏洞百出，达不到专业要求。

本篇推文将为大家介绍 眼动追踪技术（Eye-Tracking Technology）。 这是一种用于测量和记录人眼运动和注视点的技术，可以通过追踪用户的眼动行为，获取用户在视觉注意力、认知负荷以及交互意图等方面的实时数据， 也是制作交互类作品集非常常见的技术。!Image:: 01眼动追踪技术的基本原理

眼动追踪最直接的技术价值，是能让你获得用户在屏幕上注视位置的屏幕坐标。从技术上讲，眼动仪由 一个识别眼睛瞳孔的摄像头组成。摄像头的位置可以是固定的，通常位于屏幕下方或上方，也可以是可穿戴的，即附在用户眼睛附近，例如在某些眼镜或护目镜的框架上（如下图所示）。

眼动追踪技术主要依赖于以下几种方法来捕捉和分析眼球运动——1、基于视频的追踪利用摄像头捕捉眼睛图像，通过图像处理算法识别瞳孔位置和眼动方向。

2、红外反射法使用红外光照射眼睛，通过反射光点的位置变化来确定视线方向。

3、电生理方法如眼电图（EOG），通过记录眼睛周围的电活动来推测眼动。

1、瞄准和操控设备运用眼动追踪技术，可根据用户的视线定位瞄准装置（准星），同时通过用其他技术/设备，以按钮、手势、语音的放手来执行操作（选择、射击、删除等）。用户视线也可用于操控设备，但是当用户需要环顾四周时，需要一个离合装置来启用/禁用操控功能。

2、为残疾人提供帮助眼动仪设备可以让人们控制类似鼠标的界面，而无需移动双手，帮助残疾人士大幅降低完成日常简易任务的难度。

眼动追踪技术帮助八岁儿童上学

3、用户研究眼动追踪技术也可用于分析用户看什么、看多久以及观看顺序，来评估网页的可用性和用户体验。在用户研究中通常会使用眼动仪等相关设备分析用户关注注视目标对象的时间（经常以热力图的形式累积显示）、识别感兴趣区域（ROI）或尝试追踪视线路径（ROI遍历的时间顺序）。

眼动追踪技术用于用户体验研究

1、用户界面设计与评估眼动追踪软件产品-Oculid

这是一个关于眼动追踪软件Oculid的重新设计案例。 Oculid是一款用于用户研究的专业软件,包含移动端应用和桌面端控制面板两个部分。 移动端用于 采集用户的眼动数据,而桌面端则用于研究人员查看和分析这些数据。这个设计项目的主要目标是提升软件的可用性和用户友好度,因为原始版本在 导航和信息呈现方面 存在一些困扰用户的问题。

设计团队采用了 定性研究方法,与目标用户(设计师、研究员和营销专家)进行A/B测试,收集用户反馈。测试结果显示,新设计获得了积极评价,用户认为新版本"更容易理解"、"导航更清晰",且图标设计更好地传达了眼动追踪软件应有的专业性和可信度。

这个案例很好地展示了 如何通过利用眼动技术，以系统的设计思维和用户研究来优化复杂专业软件的交互体验。

2、增强现实与虚拟现实

Eye Tracking in VR: A Case Study

这是一个名为"Missing"的VR悬疑交互叙事项目项目, 它巧妙地将心理健康主题与创新交互技术相结合。 在体验过程中,用户需要探索失踪者Eleanor Parker的房间寻找线索。

与传统VR项目不同的是,该项目运用了眼动追踪技术, 使环境能够对使用者的视线做出响应。 项目以第一人称视角带给用户沉浸式的体验,让我们能够真实地体会到一个有心理健康问题者的生活状态。

这个案例采用了眼动追踪技术作为核心交互方式,准确捕捉和记录用户视线移动轨迹。 在VR环境中,当用户探索房间时,系统会实时追踪其视线焦点,并据此触发相应的环境反馈。

不同于传统的手柄操作, 眼动追踪更符合人类自然的探索行为模式。此外,项目还结合了交互 叙事的方法,通过细节的空间布置和环境反馈,逐步揭示故事情节和主角的心理状态。!Image用户视角场景

3、辅助技术EyeGaze Edge

Eyegaze公司与NASA合作开发了一套名为"Eyegaze Edge"的系统, 主要服务于因脑损伤、中风或疾病而无法说话的人群。这个系统 通过追踪用户的眼球运动来实现人机交互,让用户可以通过眼睛的移动来操控电脑、进行交流,甚至控制轮椅。该技术的核心原理是 利用红外线反射和图像处理软件来精确定位用户眼睛注视的屏幕位置。

Eyeworld 可与电脑、手机和平板电脑集成， 使 Eyegaze 相机可用作外接鼠标和键盘， 几乎能让残章人士使用所有电脑功能，它可让用户在线聊天、发布到社交媒体、发送电子邮件、短信或拨打电话。

此外，还可以 通过一页一目了然的专用按钮控制，使用 Amazon Echo 和 Google Home 更改房间照明、调整恒温器设置以及操作其他环境控制。

1、设置追踪器

在 Windows 上安装眼动仪软件（Tobii Eye Tracking Core Software）：https://tobiigaming.com/getstarted

套件内含驱动程序和用于校准追踪器的软件（您必须在一定时间内注视屏幕上的各个点）。套件内还包含一个小游戏用于演示。

2、连接追踪器

我们希望获得用户在屏幕上随时间变化所注视的坐标，即坐标流。Augusto Est 提供了一个 Windows 程序，用于将眼动仪的数据发布到网络端口。从以下网址下载整个软件包——查看链接 ↗

为了我们【获得用户在屏幕上随时间变化所注视的坐标】的目的，你只需要从“GazeTrackEyeXGazeStream”文件夹启动以下可执行文件：

GazeTrackEyeXGazeStream.exe

如果你启动它并且 Tobii 追踪器已连接，应该会看到一个控制台，其中的数据滚动下来。

该数据也通过 UDP 在端口 11000 上传输，格式如下

111.123;211.555

这些是屏幕上当前视线位置的 x/y 坐标。在某些国家/地区（例如德国），您会遇到逗号而不是句号的问题，这会导致 Augusto Est 的 Processing 程序在这些国家/地区失败（只需使用下面的代码即可）。除坐标外，还会根据是否检测到用户发送以下两个令牌：

NotPresentPresent

（若此方法行不通，可问下AI）

3、与处理连接

启动Processing 3并导入名为UDP 的库（在菜单 Sketch > 导入库 > 添加库... 中）。此库允许在计算机上的特定端口上监听 UDP 网络消息。确保你的 Tobii 追踪器已连接（USB）并且已启动GazeTrackEyeXGazeStream.exe 并看到控制台中滚动显示的坐标。

现在，你可以使用以下代码来捕获注视数据并显示注视光标等。请注意，以下使用平滑来使信号更稳定。你可以调整平滑变量，其中 0 表示无平滑，接近 1 的值表示极端平滑。平滑度越高（接近 1），时间滞后越高，即光标落后于你的注视。

解释import hypermedia.net.*;UDP udp;float x = 0;float y = 0;float smoothing = 0.7;boolean isPresent = false;void setup() { udp = new UDP(this, 11000); // connection on port 11000 udp.listen(true); fullScreen(); textSize(24);}void draw() { background(0); stroke(255); noFill(); ellipse(x, y, 40, 40); line(x-20, y, x+20, y); line(x, y-20, x, y+20); // show info fill(255); text("smoothing: " + smoothing, width - 200, 100);}// This is called by the UDP connection each time// a message is receivedvoid receive( byte[] data, String ip, int port ) { data = subset(data, 0, data.length-2); String message = new String(data); // Parse gaze coordinates int pos = message.indexOf(";"); if (pos > -1) { String[] xs = message.substring(0, pos).split("[,.]"); String[] ys = message.substring(pos+1).split("[,.]"); float x1 = Float.parseFloat(xs[0]); float y1 = Float.parseFloat(ys[0]); x = smoothing * x + (1 - smoothing) * x1; y = smoothing * y + (1 - smoothing) * y1; } if (message.startsWith("Pres")) { isPresent = true; } if (message.startsWith("NotPres")) { isPresent = false; }}

你应该看到类似这样的内容：

4、凝视按钮

传统按钮的工作分为两个步骤：1.用户将光标置于按钮上方2.用户点击鼠标按钮

凝视（与手势一样）需要替换第二步。一种技术是使用超时（也称为停留时间），即如果凝视的位置在按钮上方停留了一定时间（超时），则触发按钮。TimeoutButton在 Processing 中我们编写这样的类：

class TimeoutButton { int x; int y; int w; int h; float timeout;boolean inside; int startFrame; int showPress = 0; float secInside = -1;TimeoutButton(int x, int y, int w, int h, float timeout) { this.x = x; this.y = y; this.w = w; this.h = h; this.timeout = timeout; }void render() {// white after pressed if (showPress > 0) { fill(255); showPress--; } else { fill(100); } noStroke(); rect(x, y, w, h);// show progress in red if (secInside > 0 && showPress <= 0) { fill(255,0,0); rect(x, y, secInside/timeout * w, h); } }void update(float xp, float yp) { if (xp >= x && xp <= x + w && yp >= y && yp <= y + h) { if (inside) { secInside = (float(frameCount - startFrame)) / frameRate; if (secInside > timeout) { startFrame = frameCount; pressed(); } } else { inside = true; startFrame = frameCount; } } else { inside = false; secInside = -1; } }void pressed() { showPress = 10; secInside = -1; }}

现在我们可以创建按钮并在 draw() 中更新它们：

解释UDP udp;float x = 0;float y = 0;float smoothing = 0.7;boolean isPresent = false;ArrayList<TimeoutButton> buttons = new ArrayList<TimeoutButton>();void setup() { udp = new UDP(this, 11000); // connection on port 11000 udp.listen(true); fullScreen(); textSize(24); buttons.add(new TimeoutButton(300,300,300,200,1)); buttons.add(new TimeoutButton(800,500,200,200,2)); buttons.add(new TimeoutButton(1000,200,100,100,.5));}void draw() { background(0);// handle buttons for (TimeoutButton b: buttons){ b.render(); b.update(x, y); }// draw cursor stroke(255); noFill(); ellipse(x, y, 40, 40); line(x-20, y, x+20, y); line(x, y-20, x, y+20);// show info fill(255); text("smoothing: " + smoothing, width - 200, 100); }void receive( byte[] data, String ip, int port ) { data = subset(data, 0, data.length-2); String message = new String(data);// Parse gaze coordinates int pos = message.indexOf(";"); if (pos > -1) { String[] xs = message.substring(0, pos).split("[,.]"); String[] ys = message.substring(pos+1).split("[,.]"); float x1 = Float.parseFloat(xs[0]); float y1 = Float.parseFloat(ys[0]); x = smoothing * x + (1 - smoothing) * x1; y = smoothing * y + (1 - smoothing) * y1; } if (message.startsWith("Pres")) { isPresent = true; } if (message.startsWith("NotPres")) { isPresent = false; }}

你应该会看到三个按钮，每个按钮的超时时间都不同。每个按钮的停留时间都以红色显示。