基于眼动分析的触屏手机界面设计研究

2022-03-27 08:28:52 | 浏览次数：

打开文本图片集

摘要：触屏手机最主要的操作平台是用户界面。文章通过眼动实验，对视線跟踪技术参数进行分析，测试用户对于手机界面主题元素、图标、文本、导航工具的使用习惯和喜好，使触屏手机界面操作更便捷、更人性化。观察用户感兴趣的界面所具备的特征，结果表明，主题明确的界面、个性化的图标设计以及符合人机工学和满足人机交互功能的界面更受到用户的青睐。

关键词：用户界面；界面图标；视线跟踪

检索：

中图分类号：TB472 文献标志码： A 文章编号：1008-2832（2014）05-0122-03

A Study on the Design of the Interface of Touch screen Mobile Phones Based on Eye Movement Analysis

GAO Lei ，WANG Hong-ge（ corresponding author）

（Art and Design College，Tianjin University of Science & Technology， Tianjin 300457，China）

Abstract ：User interface is the main operational platform of touch screen mobile phones. Analysis of the parameters of eyesight tracking techniques and test of the habits and favor of users for the element， icon， text and guiding tool were performed based on the eye movement experiment. An observation was done on the characteristic of interface which users are interested in and the results showed that interface with specific theme，personalized icon and interface which accord with human-computer engineering and meet with human-computer interaction attracts more users.

Key words ：user interface； interface icon； eyesight tracking

Internet ：

一、引言

触屏手机最主要的操作平台是用户界面，手机界面是用户感知、认知的虚拟化媒介，具有符号化、数字化、图像化的表现形式。当今的设计，更关注用户体验，良好的用户体验不仅是视觉上的，还有听觉和触觉，以及人机交互方面等。在触屏手机用户界面中，人机界面设计和交互方面的研究，占有十分重要的地位。本研究通过眼动实验，对视线跟踪技术参数进行分析，测试用户对于手机界面主题元素、图标、文本、导航工具的喜爱程度，对首个注视点、注视时长等数据进行分析，研究出用户浏览的兴趣区以及使用习惯，从而更好的指导手机界面设计。

二、眼动实验

（一）实验目标与技术手段

本次眼动实验的对象是某高校在校生，其中男生3人，女生4人，平均年龄22岁，所有被试者双眼裸眼视力或矫正视力正常，符合实验要求。

实验仪器：Tobii眼动仪，T60 Eye Tracker。

实验条件：选取了35张图片进行测试，包括不同风格的手机界面设计、含有语意的图标、文本字体图片、交互模式图片等等。还配有视频、问卷调查测试、交互操作体验。清晰的反映被试者情感诉求与使用习惯。

技术框架：眼动做为重要的技术手段，通过对视线跟踪技术参数进行分析，得出被试者对什么样的界面设计更感兴趣，什么样的交互模式更方便快捷，不会有使用障碍的问题。

（二）实验内容

以七张刺激图片为例，通过眼动参数进行用户测试分析。对于用户喜欢的不同风格的主题界面、图标设计、闹钟设置、文本设计、版面设计进行了讨论。图1是模仿汽车仪表盘的科技风格手机界面，黑色的主体背景，红橙色的仪表盘设计，界面明暗对比强烈，富有金属质感和科技感。图2是充满童趣的卡通风格主题界面。图3是折纸风格的手机界面，画面清新、自然，带给人不同的感受。驶向星迹的列车手机界面，独特之处在于每一个图标都是用不同的星座来代替，表现了浩瀚的宇宙星空，带来了愉悦的感官体验（图4）。

1.注视点长度（Fixation Length），一是通过观察有次序的注视落点，可以看出被试者对手机界面的视觉关注点及兴趣区所在。二是视觉跟踪轨迹，记录注视点在界面感兴趣区域之间的转换。注视点序列连结起来，可以画出被试者的视觉轨迹，它能最具体、最直观和最全面地体现眼动轨迹的时空特征。注视点长度越长，表明对某个刺激材料越有兴趣，关注度越高。

2.首个注视点的注视时间（First Fixation Duration），这个统计指标计算的是在兴趣区出现的第一个注视点的持续时间，也是用户衡量界面布局合理性、人机交互功能便捷性的一个重要标准。在眼动实验中，注视持续时间用来检验被试者对手机界面刺激材料的兴趣度。

3.注视点个数统计（Fixation Count），每一次注视称为一个注视点，注视次数是指浏览界面时注视点的总数量。注视次数累加越多，表明被试者对界面某个区域越关注。

在表中通过对四种不同风格主题界面的注视点长度、首个注视点的注视时间、注视点个数的对比，总结出科技风格的界面主题比较受男性用户的青睐，被试者对模仿汽车仪表盘锁频主界面的关注度要高于图标设计，整个界面设计富有金属质感、速度感、机械科技感。充满了时尚、现代气息。而卡通、折纸风格比较受女性的喜爱。卡通、折纸类型的界面设计用色鲜艳、跳跃，图标设计活泼可爱，视觉给人一种明快欢乐的感受，对女性用户有很强的吸引力。图4这种趣味性、个性鲜明的界面充满了奇思妙想，给用户一种全新的体验。

图5是设置闹钟的操作界面，普通手机是点击按键进行设置；图中手机界面则是模拟滚筒的形式来调节时间，只需要轻轻滑动手指和控制滑动速度来调整时间，这种设计特殊之处在于进行了一些习惯动作的行为模拟，让用户觉得自然亲切。用户体验感深刻，具有良好的实用性。

苹果手机的文本界面：手机界面的字体大小是有限的，而人的手指是比较粗、厚的，尤其是男性用户，很容易不小心按错字母。当用户进行文本输入时，默认的字体比较小，这时候将手指放在文本上，会出现一个放大镜把文字放大，用户就能清晰的看到屏幕上的文字了（图6）。

图7是人浏览手机界面时眼动跟踪测试的记录。眼动仪生成的热点图，使用不同颜色来显示参与者对图像的关注度和对某个区域的视线停留时间。图片上红色、黄色、绿色，表示用户关注度。红色是表示注视时间最长的区域，关注度高。黃色次之，绿色最少，期间有很多过度层次。从这张热点图可以看出，关注点最多的是页面的左上角内容，在以后的设计中要把重点内容放在左上角。

三、实验结果分析

（一）主题明确与风格独特

图标、文本文字、图表、布局设计等元素构成了触屏手机界面设计。界面设计首先要考虑的是主题明确。界面主题风格具有多样性，不同的主题可以传递给用户不同的感受，也可以是用户自身的反馈。界面图标、版式布局设计要与界面主题一致，好的图标设计给人提供了信息指代、视觉享受、人机交互等方面的帮助。不仅传达了信息，还带给人视觉和精神上的享受。

其次，给用户带来强烈视觉冲击力的界面设计，需要具备独特的风格和艺术形式。界面的风格特征，我们既要参考以往的审美规律，也要善于捕捉时代潮流，创造出优秀的作品。同时，界面设计要不同于其他界面，有自己独特的亮点。新颖、个性的界面很容易吸引到用户的目光，从而加快信息的传播。

因此，拥有一个清晰的界面设计主题和元素，准确的定位，是设计时首先考虑的因素。风格独特、个性鲜明的界面也能使人眼前一亮，为界面设计加分。

（二）易于操作

界面设计是满足用户功能需要的前提下，在使用过程中产生愉悦的心理。界面是和用户之间交流的媒介，不是每个用户都能熟悉的操作界面，一般来说，操作方式要有准确、良好的提示和引导。

实验结论：用户在执行文本操作时，确保文本的可识别性并降低用户操作的概率，这就对文本设计提出了更高的要求。一般而言，在手机界面设计中，字体的大小要与手机屏幕的大小比例协调，通常使用宋体8～11号较为美观。而对于触屏界面而言，使用时存在视线遮挡的情况，所以，在手指触摸文本时，可以将文字用放大镜放大和偏移。

由此可见，一个好的界面设计，操作应该是用户占主导地位，产品是为用户服务的，而不是感觉产品限制了用户操作，让用户有良好的体验感，这是可用性原则的核心。

（三）符合人机工学

如何使触屏手机界面操作更便捷、具有多样性，也是设计师需要考虑的重要问题。眼动仪生成的热点图，结果显示人浏览界面材料时注意力是集中在左上角区域。如用户在这个区域的首个注视次数是9次，明显高于其他区域。从上到下，从左到右，注意力是依次分散的（图7）。因此，在设计时也应遵循这一原则，把最重要的信息、图像放在左上角，人的视觉对左上角灵敏度占35%，因此，设计者应考虑把重要信息和视觉停留点安排在注视价值最高的视觉区域，使整个界面主题一目了然。合理的布局对于触屏手机界面的版式设计尤为关键。合理的，流畅的布局能使视线融会贯通，也能快速的帮助用户找到所需要的内容。

导航模式，通过对用户目标的分析，明白用户所需要的“下一步”，将有用的导航信息筛选在当前界面上。所以导航图标的位置应醒目、易识别。智能化设置模式例如照相机功能，当不方便按“拍照”键时，可以设置语音命令拍照。智能滚动设置，注视屏幕时倾斜头或设备向上或向下，手机就会自动滚动列表，翻动网页、页面等。设计师对这些元素进行组合排列，明显的图标放在醒目的区域，清晰的告诉用户有效的操作信息，让用户知道如何操作，而不是让用户一点点的尝试。

结语

当今社会信息技术的快速发展，触屏手机不再只是沟通的媒介。人机交互模式将向多维交互的方向发展。界面设计的人性化，根本目的是探索用户在人机交互方面的不同需求，从而实现人机交流的愉悦体验。通过眼动实验，对视线跟踪技术参数的分析，总结出触屏手机界面设计时需要注意的几方面：用户在使用手机时最先看到的是界面，因此界面主题定位要明确统一，风格独特新颖。针对不同年龄、性别的用户，设计出不同人群喜爱的界面。易于操作，用户使用时体验感、可用性强，没有使用障碍的问题。符合人机工程学，并且关注人机交互功能的使用。虚拟现实和多维用户界面设计的快速发展，能满足用户精神上的审美与人性化的互动，是触屏手机界面设计未来发展的趋势。