基于眼动实验的智能手表页面设计研究

Research on the Design of Smartwatch Pages Based on Eye Movement Experiments

摘要: 本研究旨在探究用户对不同设计风格的智能手表主界面的偏好及不同界面的信息搜索效率，为智能手表的用户体验优化与界面设计提供实证依据与理论指导。采用眼动追踪实验与主观评价相结合的方法，针对四种不同的智能手表页面进行分析，研究结果表明，蜂窝状的页面风格更受用户喜爱。在搜索效率上，图标以规则的网格4 × 4排列的页面能加快用户的图标定位速度。该研究为基于用户视觉认知效率的设计评估提供了有效方法，其结论对智能手表及小型移动设备的界面设计具有直接的实践参考价值。

Abstract: This study aims to explore users’ preferences for different design styles of smartwatch home screens and the information search efficiency of different interfaces, providing empirical evidence and theoretical guidance for the optimization of user experience and interface design of smartwatches. By combining eye-tracking experiments with subjective evaluations, four different smartwatch page styles were analyzed. The research results show that the honeycomb-style page is more favored by users. In terms of search efficiency, the page with icons arranged in a regular 4 × 4 grid can accelerate users’ icon location speed. This study provides an effective method for design evaluation based on users' visual cognitive efficiency, and its conclusions have direct practical reference value for the interface design of smartwatches and small mobile devices.

1. 引言

智能手表的设计核心在于通过轻量化交互模式，将传统“用户的主动性”行为模式转化为“机器的主动性”行为模式[1]，从而提升用户体验。随着人们生活水平的不断提高，精神生活越来越丰富，智能手表的使用者也在不断增多，智能手表的交互设计与UI界面需兼顾小屏幕的物理限制和用户的高效需求，其应用场景从健康监测、运动追踪扩展到信息通知、移动支付等领域，逐渐融入用户的日常生活，智能手表的交互设计的重要性日益凸显。然而，智能手表的交互设计面临独特挑战：屏幕尺寸受限、移动性强、情境敏感度高。因此，如何优化智能手表的交互设计与UI页面，提升用户体验，成为学术界和工业界关注的焦点。

界面布局作为信息呈现的关键载体，直接影响用户的视觉认知效率与操作体验流畅性，一个好的界面布局需要考虑信息的优先级、可视化的层次结构、元素的大小和位置等[2]。合理的布局能够帮助用户快速理解和适应界面，提高用户的操作效率和信息获取能力。传统依赖主观问卷的评估方法难以捕捉用户无意识的视觉行为规律，而眼动追踪技术通过记录注视轨迹、扫视路径等客观数据，为揭示界面设计的认知机制提供了全新视角。

2. 实验设计与过程

2.1. 实验设计

随着智能手表等小型电子设备的普及，有限的屏幕尺寸与用户日益增长的信息需求之间的矛盾愈发显著。为优化智能手表的用户体验，本研究聚焦于探索用户更偏好的界面布局，并分析不同布局对用户视觉搜索效率的影响。具体而言，实验分为两部分：第一部分是界面布局偏好研究，第二部分是视觉搜索效率测试，界面布局偏好研究是评估用户对不同智能手表布局的接受度和使用偏好，注视总持续时间长短反应了对象对主体的吸引程度，时间越长该位置越能引起主体的注意，时间越短表示对主体的吸引力越弱[3]可以通过注视总持续时间反应出用户对于不同界面布局的喜好程度；视觉搜索效率测试是通过记录被试者定位目标图标的首次注视时间(First Fixation Time)，被试对目标的首次注视时间越短，说明目标更容易被识别[4]可以通过首次注视时间量化不同布局对视觉认知效率的影响。

2.2. 自变量水平

通过去线下实体店以及在互联网上搜索并整理知名品牌销量排名较高的智能手表，分析出四种不同类型的首页布局作为四种布局自变量，分别是蜂窝网格布局、规则网格布局以及两种不规则网格布局。蜂窝网格布局的图标以六边形或圆形排列，从表盘中心向周围应用呈放射状分布，规则网格布局类似于智能手机的图标排列方式，应用以规则的网格(如3 × 3、4 × 4)排列；其中一种不规则网格布局为靠近屏幕中线的应用比屏幕边缘的应用更大一些；另一种不规则布局为第一、四列的应用与第二、三列的应用错开。现有的智能手表表盘分为圆形和方形，其中方形表盘的屏幕尺寸常见范围为1.3英寸~1.9英寸，以iwatch se 40 mm为例，视网膜显示屏尺寸为324 × 394像素，按照这个尺寸比例进行研究。

不同类型的布局里面图标个数也不同，为了实验更加合理，需要控制变量，要把图标数量统一，最后把四种布局的页面图标数量都统一为16个，蜂窝网格布局因为其对称性，设置了17个图标，如图1。

Figure 1. Shows four different page layouts

图1. 四种不同的页面布局

图标的分布分为靠近屏幕中间和屏幕边缘两种，在测试图标的搜索速度时应考虑该因素，因此选择了靠近屏幕中心的睡眠图标以及靠近边缘的音乐图标进行测试，睡眠图标和音乐图标为两个图标自变量。

2.3. 实验被试

实验对象人数为46人，其中有2名产品设计教师，44名有接触过智能手表的大学生，其中男生22人，女生24人，在实验前已告知实验对象实验要求，所有实验对象均无高度近视、色盲、色弱等，不会对实验结果有干扰。

2.4. 实验材料

为了让眼动实验更加真实，将之前做好的四种不同的布局图片处理在智能手表中，在实验时，让实验对象直接观看带有手表的不同布局图片，按顺序排列好，将背景设置成灰色，尽可能的减少背景对实验的影响，并且画出兴趣区域(Areas of Interest, AOI)，兴趣区域编号与样本编号一致，下图分别依次是布局一、布局二、布局三、布局四，如图2所示。

2.5. 实验设备

本次实验实验设备采用HTC的专业VR眼镜套装VIVE Pro Eye (P130)，AMOLED90HZ显示屏,2880 × 1600组合像素，搭载SRanipal Runtime眼动追踪技术。采用北京津发的Ergo LAB人机环境同步及平台系统软件进行VR眼动实验设计、数据采集以及AOI兴趣区域设置，并记录所有参与实验的被试观看样本的视觉行为。

2.6. 实验流程

实验在独立房间内进行，房间内亮度适宜，眼动仪提前进行地面校准，减少误差，使眼动设备处于准备状态，被试人员依次进入实验室，实验组织者为其调整眼动设备并告知被测试者实验要求和目的，

Figure 2. Shows four types of page AOI

图2. 四种页面AOI

实验开始之前检查实验室环境，避免有其他噪音吸引被试的注意，在熟悉实验室环境后，在眼动仪前坐好，调整舒服的坐姿，并带上眼动设备，眼动设备调试好后即可开始实验。

眼动实验分为两个部分。第一部分被试依次观看四种不同页面排版刺激，顺序随机不重复，单个刺激呈现20秒；第二部分明确给出指令“请找到某一个图标”并依次呈现不同的页面，每幅实验图片的呈现时间为5秒，指令图片呈现时间为3秒。为了实验的严谨性，同时设置了李克特量表问卷，在被试人员眼动实验结束之后，通过问卷进行主观打分，整个实验总时长约为5分钟。

3. 实验数据处理

结束实验后，将眼动数据导出，制作成excel表格导入SPSS进行分析。实验一每个被试有4个自变量，即四种不同的风格布局，通过对注视总持续时间进行重复测量方差分析；实验二有8个变量，对应2图标类型 × 4风格布局，使用对首次注视时间的重复测量方差的方法进行分析，从而得出更受大家喜爱的风格布局以及针对不同布局不同图标的搜索速度，同时分别针对两个不同图标自变量进行单独分析，以下是对注视总持续时间与首次注视时间的重复测量方差分析过程。

3.1. 注视总持续时间

Mauchly球形度检验结果显示，测试次数(W = 0.472, χ² = 32.837, p < 0.001)、图标布局(W = 0.251, χ² = 60.502, p < 0.001)及其交互效应(W = 0.019, χ² = 165.349, p < 0.001)均违反了球形假设，因此采用Huynh-Feldt校正后的结果进行统计分析。如表1所示。

重复测量方差分析显示：图标布局的主效应显著(F = 30.82, p < 0.001, 偏η² = 0.407)，表明不同图标布局对注视总持续时间有显著影响。测试次数的主效应不显著(F = 0.91, p = 0.412, 偏η² = 0.020)，说明测量时间点不影响结果。测试次数与图标布局的交互效应显著(F = 6.13, p < 0.001, 偏η² = 0.120)，表明图标布局的效果随测试时间点不同而变化。如表2所示。

Table 1. Total fixation duration Mauchly sphericity test

表1. 注视总持续时间Mauchly球形度检验

Mauchly 球形度检验^a
测量：MEASURE_1
主体内效应	Mauchly W	近似卡方	自由度	显著性	Epsilon^b
					格林豪斯–盖斯勒	辛–费德特	下限
测试次数	0.472	32.837	5	<0.001	0.672	0.703	0.333
图标布局	0.251	60.502	5	<0.001	0.623	0.649	0.333
测试次数 * 图标布局	0.019	165.349	44	<0.001	0.484	0.542	0.111

Table 2. Intra-subject effect test of total fixation duration

表2. 注视总持续时间主体内效应检验

主体内效应检验
测量：MEASURE_1
源		III类平方和	自由度	均方	F	显著性	偏Eta平方
测试次数	辛–费德特	2.623	2.110	1.243	0.907	0.412	0.020
图标布局	辛–费德特	506.688	1.947	260.295	30.821	<0.001	0.407
测试次数 * 图标布局	辛–费德特	270.619	4.876	55.500	6.129	<0.001	0.120

通过Bonferroni校正的多重比较分析显示，四种图标布局在用户持续总注视时间上存在显著差异(F = 30.82, p < 0.001)。持续总注视时间作为界面设计有效性的重要指标，时长越长表明界面元素越能吸引用户注意力。布局1与布局2：均值差 = 1.647，p < 0.001，95% CI [0.918, 2.377]，布局1与布局3：均值差 = 2.009，p < 0.001，95% CI [1.214, 2.804]，布局1与布局4：均值差 = 2.002，p < 0.001，95% CI [1.121, 2.882]，布局2与布局3：均值差 = 0.362，p = 0.480，95% CI [−0.196, 0.919]，布局2与布局4：均值差 = 0.354，p = 0.760，95% CI [−0.274, 0.983]，布局3与布局4的比较：均值差 = −0.007，p = 1.000，95% CI[-0.286, 0.272]，结论：布局1与所有其他布局均存在极其显著的差异，且布局1显著高于布局234，布局2、布局3、布局4三者之间没有显著差异。如表3所示。

这个成对比较结果完美的印证了主体内效应检验中发现的及其显著的布局主效应(p < 0.001, 偏η² = 0.407)。它清晰的揭示了这种显著差异的来源：布局1明显优于其他三个布局，而其他三个布局彼此相当。

Table 3. Pairwise comparison of total fixation duration

表3. 注视总持续时间成对比较

成对比较
测量：MEASURE_1
(I)图标布局	(J)图标布局	平均值差值(I-J)	标准误差	显著性^b	差值的95%置信区间^b
					下限	上限
1	2	1.647^*	0.264	<0.001	0.918	2.377
	3	2.009^*	0.288	<0.001	1.214	2.804
	4	2.002^*	0.319	<0.001	1.121	2.882
2	1	−1.647^*	0.264	<0.001	−2.377	−0.918
	3	0.362	0.202	0.480	−0.196	0.919
	4	0.354	0.228	0.760	−0.274	0.983
3	1	−2.009^*	0.288	<0.001	−2.804	−1.214
	2	−0.362	0.202	0.480	−0.919	0.196
	4	−0.007	0.101	1.000	−0.286	0.272
4	1	−2.002^*	0.319	<0.001	−2.882	−1.121
	2	−0.354	0.228	0.760	−0.983	0.274
	3	0.007	0.101	1.000	−0.272	0.286

热点图中热点区域的颜色深浅代表被试者对该区域注视时间的长短，从红色到绿色即颜色由深到浅，能够反映被试者的注意力分配和对信息的关注度[5]。热点图也显示出布局1明显优于布局2、布局3、布局4，得出结论：用户更加偏好蜂窝状的布局1，布局1更受用户欢迎，如图3。

Figure 3. Hotspot Map

图3. 热点图

3.2. 首次注视时间

采用Mauchly球形度检验评估重复测量设计的假设条件。对于违反球形假设的效应(布局主效应及交互效应)，使用Huynh-Feldt校正结果进行分析；Mauchly检验显示：布局主效应显著违反球形假设(W = 0.499, p < 0.001)，采用Huynh-Feldt校正(ε = 0.725，图标主效应符合球形假设(W = 1.000，布局与图标的交互效应边际性违反球形假设(W = 0.770, p = 0.044)，采用Huynh-Feldt校正(ε = 0.903)。如表4所示。

Table 4. Sphericity test of the first fixation time

表4. 首次注视时间球形度检验

Mauchly 球形度检验^a
测量：MEASURE_1
主体内效应	Mauchly W	近似卡方	自由度	显著性	Epsilon^b
					格林豪斯–盖斯勒	辛–费德特	下限
布局	0.499	30.371	5	<0.001	0.691	0.725	0.333
图标	1.000	0.000	0	.	1.000	1.000	1.000
布局 * 图标	0.770	11.417	5	0.044	0.848	0.903	0.333

采用2 (图标类型) × 4 (布局)重复测量方差分析，以首次注视时间为因变量。对违反球形假设的布局主效应采用Huynh-Feldt校正。主体内效应检验显示：布局主效应显著(F = 9.69，p < 0.001，偏η² = 0.177)，表明不同布局对首次注视时间有显著影响。图标主效应显著(F = 5.79，p = 0.020，偏η² = 0.114)，但效应量较小，如表5所示。

Table 5. Intra-subject effect test of the first fixation time

表5. 首次注视时间主体内效应检验

主体内效应检验
测量：MEASURE_1
源		III类平方和	自由度	均方	F	显著性	偏Eta平方
布局	假设球形度	4.153	3	1.384	9.687	<0.001	0.177
	格林豪斯–盖斯勒	4.153	2.073	2.004	9.687	<0.001	0.177
	辛–费德特	4.153	2.175	1.910	9.687	<0.001	0.177
	下限	4.153	1.000	4.153	9.687	0.003	0.177
图标	假设球形度	0.666	1	0.666	5.793	0.020	0.114
	格林豪斯–盖斯勒	0.666	1.000	0.666	5.793	0.020	0.114
	辛–费德特	0.666	1.000	0.666	5.793	0.020	0.114
	下限	0.666	1.000	0.666	5.793	0.020	0.114

基于Bonferroni校正的多重比较分析，四种布局在首次注视时间(首次注视时间越短，视觉吸引效果越好)上呈现显著差异模式。结合先前主体内效应检验结果(布局主效应显著F = 9.69, p < 0.001)，Bonferroni校正显示：布局3首次注视时间显著短于布局1 (Δ = 240 ms, p = 0.007)和布局2 (Δ = 271 ms, p = 0.002)，布局4显著优于布局1 (Δ = 109 ms, p = 0.035)和布局2 (Δ = 140 ms, p = 0.006)，布局3与4无显著差异(Δ = 131 ms, p = 0.214)，如表6所示。

3.3. 问卷分析

在眼动实验结束后让被试人员进行问卷填写，共46分问卷，被试根据自己的偏好分别对四种不同的

Table 6. Pairwise comparison of the first fixation time

表6. 首次注视时间成对比较

成对比较
测量：MEASURE_1
(I)布局	(J)布局	平均值差值(I-J)	标准误差	显著性^b	差值的95%置信区间^b
					下限	上限
1	2	0.031	0.047	1.000	−0.099	0.160
	3	−0.240^*	0.069	0.007	−0.431	−0.050
	4	−0.109^*	0.038	0.035	−0.213	−0.005
2	1	−0.031	0.047	1.000	−0.160	0.099
	3	−0.271^*	0.071	0.002	−0.467	−0.075
	4	−0.140^*	0.039	0.006	−0.248	−0.031
3	1	0.240^*	0.069	0.007	0.050	0.431
	2	0.271^*	0.071	0.002	0.075	0.467
	4	0.131	0.061	0.214	−0.036	0.299
4	1	0.109^*	0.038	0.035	0.005	0.213
	2	0.140^*	0.039	0.006	0.031	0.248
	3	−0.131	0.061	0.214	−0.299	0.036

界面布局进行打分，问卷采用李克特量表中的5分量表法，分数为1表示“非常不喜欢”，分数为2表示“比较不喜欢”，分数为3表示“一般”，分数为4表示“比较喜欢”，分数为5表示“非常喜欢”，以下是问卷数据。

界面布局	布局一	布局二	布局三	布局四
平均分数	4	3.15	3.54	3.65

关于用户最喜欢的页面布局在问卷中也有体现，其中图片一对应布局一，图片二对应布局二，图片三对应布局三，图片四对应布局四，有大约52%的人更喜欢布局一，数据如图4。

Figure 4. Questionnaire data

图4. 问卷数据

通过问卷的综合分析，布局一的平均分数为4，比其他布局的平局分都要高，大约一半的人都更喜欢布局一，结合眼动数据说明蜂窝状的布局一是更受用户欢迎的。

4. 实验结论

本研究基于眼动追踪技术，针对智能手表界面设计了四款不同风格的页面布局，并通过浏览任务与搜索任务两项实验，综合主客观数据，对用户的视觉偏好与搜索效率进行了定量与定性分析。主要得出以下结论。

在视觉偏好与整体吸引力方面：页面布局一(蜂窝网格状设计)在持续总注视时间和主观满意度评分上均表现最佳，说明该布局在视觉美观性、信息组织的逻辑性与整体和谐度方面更贴近用户的审美预期与认知习惯，因而获得更高的情感偏好。

在搜索效率与功能性方面：页面布局三与布局四(采用4 × 4规则排列)在搜索任务中的首次注视时间显著更短，表明这两种布局有助于用户更快定位目标图标，搜索效率更高。这主要归因于其规整的排列方式缩短了视觉搜索路径，便于视线快速扫描。

本研究表明，智能手表界面的“好设计”需同时兼顾情感化设计与功能化设计。最受用户偏好的布局一并非搜索效率最高的设计。因此，设计决策应基于产品的核心目标：若产品旨在提供情感化设计，可优先采用布局一风格；若产品强调功能性与效率，则布局三或四的风格更为适宜。

同时，本研究也存在一定局限性。首先，样本数量与结构有限，结论在不同用户群体(如不同年龄层或数字素养水平)中的适用性有待进一步验证。此外，研究未涵盖复杂任务情境(如多步骤操作或压力状态下的交互行为)，未来可拓展相关场景以增强结论的全面性。

5. 结语

本研究通过眼动实验揭示了智能手表界面中视觉偏好与搜索效率之间的权衡关系，为“以用户为中心”的设计提供了实证依据。从认知心理学角度来看，蜂窝布局可能因符合格式塔原理中的“闭合”与“相似性”原则而更具美感，但也因其不规则性增加了视觉搜索的认知负荷；而规则网格布局则通过结构对齐与规律排布，更贴合“前注意阶段”的视觉处理机制，从而提升搜索效率。

未来的界面设计可探索融合美学与功能优势的混合布局方案，例如在蜂窝布局中引入局部规则排列，或在规则网格中融入适度视觉分组与图形化元素，以在保持一定美学特征的同时优化信息查找效率。后续研究可进一步扩大样本规模，结合多维度生理指标(如心率变异性、皮电反应等)与主观反馈，深入评估用户在不同任务复杂度下的认知负荷与情感体验，从而为可穿戴设备的人机交互设计提供更系统、精准的指导。

基金项目

第十六届研究生创新基金项目“基于眼动追踪技术的产品界面交互设计”(项目编号：CX2024214)。此论文由武汉工程大学研究生基金资助。

NOTES

^*第一作者。

^#通讯作者。