1、学号： 上海海事大学本科生毕业设计（论文）基于眼动追踪的 CYOS 系统界面优化学 院： 物流学院专 业： 物流工程班 级： 工物 姓 名: 指导教师: 完成日期： 年 月 摘 要集装箱堆场生产信息系统是对堆场内集装箱业务的管理，它关系到集装箱进场出场的关键信息和业务处理等，和码头的任务安排信息。集装箱堆场生产信息系统的使用效率是对集装箱业务处理效率的体现。本论文针对集装箱堆场生产系统的业务操作界面进行了优化。 本论文首先对于基于约束的用户界面描述方法进行简单介绍，对 CYOS 系统业务的分类以及约束的建立，构造组件树，优化 CYOS 系统的主界面。然后邀请 10 位实验者进行优化前后 CYO
2、S 界面的操作，多项眼动参数的测定和搜集。得到最能说明实验者操作效率的若干眼动参数（眨眼，注视） 。通过对优化前传统菜单，优化前快捷菜单和优化后界面的眼动参数的比较，对优化前后的效率和疲劳进行分析，得出结论。关键词：集装箱堆场生产信息系统 ，约束，眼动参数，效率 AbstractContainer Yard information Operating System is inside the container yard management of the business, it is related to the appearance of container entering the k
3、ey information and business processes, etc., and dock the task of scheduling information. Container Yard production efficiency in use of information systems is a manifestation of the container business processing efficiency. .In this thesis, according to the “constraint-based user interface descript
4、ion“, a brief introduction on the CYOS Systems business segment as well as the establishment of constraints, structural component tree, optimizing CYOS systems main screen. Inviting 10 people to optimize the operation CYOS interface update, a number of eye movement parameters determination and colle
5、ction. Get best describes operational efficiency experimenter certain eye movement parameters (blink, fixation), through the optimization of former traditional menus, shortcut menus before optimization and optimization of the interface after the eye movement parameters of comparison, the efficiency
6、and fatigue before and after optimization analysis,draw conclusions.Key words: Container Yard information Operating System，Constraint ，Eye movement parameters， Efficiency目 录1.绪论 .11.1 背景和意义 .11.2 国内外研究状况 .21.3 研究内容和目标 .31.4 技术路线 .41.5 本章小结 .42.CYOS 系统主界面优化设计和理论依据 .52.1 基于约束的用户界面描述方法概述 .52.2 研究工具 .10
7、2.3 本章小结 .103.基于约束的用户界面描述方法设计 CYOS 优化界面 .113.1 CYOS 业务的分类 .113.2 组件约束的确定 .123.3 界面组件树的确定 .133.4 组件位置序号的计算 .153.5 组件相对父节点坐标的计算 .163.6 本章小结 .184.CYOS 系统实验设计 .194.1 实验目的 .194.2 实验设备 .194.3 实验设计方案 .204.4 本章小结 .215.CYOS 系统优化前后界面的眼动数据分析 .225.1 数据介绍与数据筛选 .225.2 数据整理 .235.3 CYOS 界面优化前后眼动数据的分析与比较 .245.4 本章小结
8、 .336.总结与展望 .346.1 论文总结 .346.2 展望 .34致 谢 .36参考文献 .36附录一 .38上海海事大学本科生毕业设计（论文）11.绪论对于 CYOS 物流系统而言，是一个整体的集装箱码头进场，提箱，海关检验，出场等一系列过程的计划和实施的过程，需要详细的计划和规划，比较紧凑，在操作的过程中，因为流程较多，在选择所需的界面时会花费一定的时间去寻找路径，因此 CYOS 系统的用户操作界面的布局，是否符合业务逻辑显得尤为重要,用户在操作时的眼动数据能够客观反映操作员的操作状态，对提高用户操作软件时的效率有着重要的作用。1.1 背景和意义1.1.1 背景随着产品屏幕操作的不
9、断普及，用户界面已经融入我们的日常生活。一个良好设计的用户界面，可以大大提高工作效率，使用户从中获得乐趣，减少由于界面问题而造成用户的咨询与投诉，减轻客户服务的压力，减少售后服务的成本。因此，用户界面设计对于任何产品/服务都极其重要。 界面是软件与用户交互的最直接的层，界面的形象就如同人的面孔，具有吸引用户的直接优势，所以界面的好坏决定用户对产品的第一印象。界面元素所要达到的设计目的是让最终用户能够获得美感、提高工作效率、易于操作使用系统。设计符合用户思维习惯、操作习惯的界面能给用户带来轻松感受和成功的感觉，同时能够引导用户自己完成相应的操作，起到向导的作用。1.1.2 意义通过问卷调查的方式
10、，抽样调查 34 位同学操作 CYOS 系统的使用情况，发现有 48%的同学觉得 CYOS 系统的逻辑顺序不够清晰， 47%的同学在寻找功能按钮时需要花一定时间较慢的找到，更有 32%的同学在寻找功能按钮时，会觉得眼睛疲劳，需要花一定的时间去寻找功能按键。因此，对于 CYOS 系统主界面的优化有着重要的意义，通过理清 CYOS 主界面的业务逻辑顺序，能够大大提升用户的操作效率以及降低用户的用眼疲劳。在本论文中，将通过对实验者操作 CYOS 时眼动参数的分析，深入了解到整个 CYOS操作过程，通过操作者操作优化前后界面的眼动参数的对比及分析，来验证优化后界面的使用效率的提升。上海海事大学本科生毕
11、业设计（论文）21.2 国内外研究状况1.2.1 软件用户界面（UI）研究现状随着产品屏幕操作的不断普及，用户界面已经融入我们的日常生活。一个良好设计的用户界面，可以大大提高工作效率，使用户从中获得乐趣，减少由于界面问题而造成用户的咨询与投诉，减轻客户服务的压力，减少售后服务的成本。因此，用户界面设计对于任何产品/服务都极其重要。目前在国内 UI 还是一个相对陌生的词，即便是一些设计人员也对这个词不太了解。我们经常看到一些招聘广告写着：招聘界面美工、界面美术设计师等等。这表明在国内对 UI的理解还停留在美术设计方面，认为 UI 的工作只是 描边画线，缺乏对用户交互的重要性的理解；另一方面在软件
12、开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而 UI 仅仅是次要的辅助，这点在人员的比例与待遇上可以表现出来。在国外，用户界面设计人员有了一个新的称谓：Information Architecture，信息建筑师。它不仅仅是指美工，而是具有心理学、软件工程学、设计学等综合知识的人。1.2.2 基于模型的用户界面设计目前在研究设计用户界面时大多采用的是一些模型和编程软件的代码进行程序化设计，Ulrich Gellert， Ana Daniela Cristea1介绍了一些 UI 元素，包括类别：动作，选择，布局，复杂的图形和整合。每个 UI 元素将用一个例子说明，使
13、用静态或动态的变换方式进行用户界面的建模和设计。姚芳 4给出了参数化界面设计模式的定义，对已有的展示风格进行了分类和参数设计。结合了基于模型的界面开发方法和界面设计模式的思想，充分考虑用户对界面布局的需求，设计并实现了平台无关的界面原型。王善岭 5建立了基于人机界面布局匹配度的优纯数学模型；采用遗传算法对人机界面布局问题进行了优化。1.2.3 基于人机交互的用户界面设计随着手机，电脑，MP3 等电子产品的崛起，用户体验的感受越来越受到重视，因此仅仅模式化的用户界面，仅仅满足于功能的使用已经不能满足客户以及企业的需求，需要进行界面的实用性优化和效率等优化。在国内，陆敏 8总结了软件界面设计的风格
14、及趋势，分析现代设计美学理论及趋势，并通过实际案例分析以及作者的具体设计应用验证论文中阐述的理论方法，从而论证基于人机工程的软件界面设计方法的正确性和指导性。鹿旭东，万建成 12针对用户，考虑界面的布局展示对用户心理造成的影响，按照用户的需求进行建模和设计。中国科学研究生院的樊银亭，滕东兴和杨海燕 13，针对适应界面缺乏自主学习用户交互历史、难以根据用户经验有效预上海海事大学本科生毕业设计（论文）3测用户意图的现状， 基于认知心理学相关理论，提出了基于经验感知的自适应用户界面模型。倪亦泉，程景云 14在人机交互的研究上发现针对不同用户，不同交互方式，不同交互设备时需要考虑很多因素来进行设计，由
15、此研究了人机交互模型进行试验和测试。1.2.4 基于眼动追踪的界面优化在眼动追踪方面的研究较为少，近几年才开始有人开始研究人的某些动作会反应一定的规律，眼睛的反应是最能直接反应用户的某些兴趣，和一些当前的状态。刘青和薛澄岐 15为解决因界面而造成的整体系统效率低下的问题, 以认知学为理论基础, 提出将眼动跟踪技术运用于界面可用性检测. 从眼动路径、热度、信息量、任务用时和注视频率等方面对新旧界面进行实验, 以定量实验方法评估新旧界面的优劣。ChingI Wu16研究发现眼睛跟踪测量中可以看出，作为促进学习领域。眼动追踪可以直接与计算机和应用相关软件，通过界面即时反馈到学习者或教师。换句话说，通
16、过眼球运动教学反馈系统，计算机的界面可以直接引导学习者观看关键领域，以促进学生的能力解决问题。从上述国内外研究现状来看，尽管这些用户界面的布局都有各自的特点，有传统的模型建立，也有用户交互设计的模型，都是以软件编程的代码进行界面优化。在实际应用上还是或多或少存在一些问题，在目前的软件界面设计方面，还比较欠缺用户体验这一个步骤，眼动仪的实验能够跟踪实验者的视线，标出用户在界面上停滞时间较长的区域，但是眼动追踪的实验只能依靠数据来验证实验的可靠性，需要通过对眼动参数进行分析。本论文针对CYOS操作效率的问题，提出优化界面，根据人机工程学中人视线转移的规律，依靠眼动追踪实验对优化前后的界面进行分析和
17、验证。1.3 研究内容和目标1.3.1 主要研究内容本文首先通过同学对优化前的 CYOS 系统流程的操作，并用眼动仪 smarteye pro 5.9 进行操作过程中的眼动参数采集，对各个业务过程中眼动数据的分析，同时结合有关文献和经验，以及人机工程学中眼睛的相关研究，提出界面逻辑顺序的改进方案，然后利用基于约束的用户界面描述方法，建立用户界面的“组件树” ，构造用户界面的约束模型，计算出新界面的布局，通过 PB 进行编程。邀请同学进行优化前后 CYOS 界面的操作，采集整个业务过程的眼动数据，并进行整理，然后对优化前后采集的眼动数据进行比较分析，结合使用效率对新界面进行评估。上海海事大学本科
18、生毕业设计（论文）41.3.2 研究目标本文从问卷调查出发，以 CYOS 系统主界面的业务逻辑顺序为关键点，根据基于约束的用户界面的描述方法设计优化界面，利用眼动数据为数据支持，结合生理学和人机工程学相关知识，利用 powerbuilder11.5 软件开发 CYOS 系统新的主界面，以 EXCEL 进行数据分析比较，对优化前后的界面就行比较和验证优化前后使用效率的变化。1.4 技术路线如图 1.1，为本文技术路线图 问 卷 调 查理 论 依 据 CYOS界 面 优 化眼 动 实 验 理 论 依 据实 验 设 计试 验 数 据数 据 处 理结 论 与 建 议数 据 提 取数 据 分 析 比较数
19、 据 筛 选图 1.1 技术路线1.5 本章小结本章主要简要介绍集装箱堆场信息系统的业务，用户界面的发展，依靠眼动追踪优化用户界面的优势，对当今用户界面设计的理论和存在的问题进行了综述，提出现有研究的不足，引出本文所要研究的内容以及技术路线。上海海事大学本科生毕业设计（论文）52.CYOS 系统主界面优化设计和理论依据2.1 基于约束的用户界面描述方法概述基于约束的用户界面描述方法通过对用户界面制定一些约束条件，按照一定的计算方法描述用户界面的一种方法。它把界面和程序分开，使界面的设计更直观化，可视化。一个图形用户界面是由组件和约束构成的，各组件间存在着复杂的约束，可以把这些复杂的约束看做一种
20、树形的结构，称为结构树。约束可分为抽象约束和空间约束。空间约束比较简单，它直白的描述了组件与组件之间的相对位置。抽象约束的描述比较复杂，需要针对不同的种类进行不同的转换，最终转化为空间约束。基于约束的用户界面的描述方法就是以界面中组件间的各种约束为基础，通过相互之间的约束关系将孤立的抽象交互对象联系起来，描述了一个完整的用户界面。2.1.1 约束的概念约束是数据属性的一种特性，用于限制该数据的一些属性，以满足某种要求。在设计用户界面各组件的位置时，也必须加以约束，否则这个界面将变得杂乱无章，没有实际意义。其实在进行用户界面设计时，已经在不知不觉中使用了多种约束，但更多的是一些规则，没有提升到约
21、束的高度来看待，如尺寸大小，左边对齐等。而这些都是某种约束的体现，一个用户界面中存在着各种各样的约束，有空间中位置坐标等约束，也有业务逻辑顺序等较为抽象的约束，所有的这些约束作用在各个组件之间，在一定的情况下，限制了用户界面中的各个组件的属性（如位置坐标，大小等） ，组成了一个有规则，有规律的用户界面。总结起来，约束总体上可分为空间约束和抽象约束。空间约束比较直观简单，而抽象约束则比较复杂和抽象，抽象约束主要包括有业务逻辑约束、几何约束和依赖性约束。上海海事大学本科生毕业设计（论文）6UI空间约束抽象约束组件属性风格业务逻辑约束依赖性约束几何约束图 2.1 用户界面约束分解图2.1.2 空间约
22、束的表示方法空间约束指各个组件在空间上相互位置坐标关系的约束。如“A 在 B 的左边” ， “C 在D 的上边”等。空间约束的描述直接和简单，可以用四个线性空间约束来描述空间的约束：Left-of，Right-of ，Above，Below。其实只需要用两个线性空间约束就可以描述各个组件的相互位置，用 left-of 来描述各个组件间水平方向的位置关系，用 Above 来描述竖直方向上的位置关系。2.1.3 抽象约束及表示方法抽象约束是指各个组件之间存在着不能直观的看到的某种约束，如逻辑约束或强制性绑定等。它比较抽象不容易用公式或者符号来说明，而是需要相互的说明来完整的表达一种约束。如由 A 能够推出 B，则表达了 A 是能够说明 B 的一个原因，同时也暗含需要得出 B，则一定需要 A。用户界面设计中两个连续的操作步骤，例开具发票和结算费用就存在着这种约束。抽象约束的种类有很多，在描述的时候比较复杂困难，在用户界面中主要可总结为业务逻辑约束、几何约束和依赖性约束。业务逻辑约束：根据业务的需要，将某些组件进行分类组合，组成一个不可割的业务整体。这些组件可以完成一个相对较完整的功能。几何约束： 指组件间的尺寸、大小，对齐关系的约束。依赖性约束： 指一个组件与另一个组件有依赖性的描述，两者在一起能有一定的实际的意义，能够描述一定的内容和逻辑。
