基于页面交互机制的浏览器整体架构设计

胡州明+彭柏+赵永彬+杨帆+金成明

摘 要： 为了提高浏览器的人机交互性，提高用户使用浏览器的体验度，提出一种基于页面交互机制的浏览器整体框架设计方法。对交互式浏览器页面中的对象进行划分，并赋予不同的安全权重，从而避免交互式浏览器中无关联的对象对交互机制产生干扰。将用户对交互式浏览器的需求转换为任务列表，将存在联系的子任务设计为交互视图，将抽象的信息数据用数据视图表达，利用迭代式交互设计方法将离散的数据视图相关联。测试结果表明，相对于传统的浏览器，基于页面交互机制的浏览器能够为用户提供更好的交互式体验，效果令人满意。

关键词： 交互机制； 浏览器； 框架设计； 体验度

中图分类号： TN915?34； TP393.09 文献标识码： A 文章编号： 1004?373X（2017）15?0059?05

Abstract： In order to improve the human?computer interactivity of the browser， and promote the user experience degree of the browser， a browser overall architecture design method based on page interaction mechanism is put forward. The objects in the page of the interactive browser are divided， and given different security weights to avoid the interference of the unrelated object in interactive browser on the interaction mechanism. The user demand for interactive browser is converted into the task list. The related subtasks were designed for the interactive view. The abstract information data is expressed in data view. The iterative and interactive design method is used to associate the discrete data views. The test results show that， in comparison with the traditional browser， the browser based on page interaction mechanism can provide better interactive experience for users， and has satisfied effect.

Keywords： interaction mechanism； browser； framework design； experience degree

0 引 言

瀏览器指的是能够运行在计算机、平板、手机等终端的软件，用户通过它能够获得网站服务器或者文件系统内的文件，并以这些文件产生一定的交互[1]。浏览器是人们获得网络资讯的一个重要窗口[2?3]。随着网络技术的迅速崛起，各浏览器开发厂商对于市场的争夺也日趋激烈[4?5]。随着网络技术的不断发展，交互式技术（VR）也得到了快速提高，并在娱乐、军事航天、医学等领域得到了广泛的应用[6]。在浏览器领域，用户体验度不佳的问题已经成为制约浏览器继续发展的一个重要因素，相关研究表明，其主要原因正是浏览器开发者忽略了浏览器界面交互式体验设计[7]。因此，如何加强用户对浏览器的使用体验，已经成为当前浏览器设计领域中的一个研究热点，受到了越来越多的关注[8?9]。

为了提高浏览器的交互性，提出一种基于界面交互机制的浏览器整体框架设计方法。对浏览器在交互式体验中存在的问题进行总结，挖掘出用户对交互式浏览器的需求。设计出实现页面交互机制浏览器的实现步骤。测试结果表明，相对于传统的浏览器，基于页面交互机制的浏览器在用户体验度方面具有更大的优势。

1 交互式浏览器的访问控制

1.1 交互式浏览器访问对象的划分

为了避免浏览器中无关联的对象对交互机制产生干扰，将浏览器中的对象划分为页面对象、站点对象和浏览器对象。

设置为页面对象，页面对象反映的是页面属性，这些属性主要有页面创建时间、页面来源等。

设置为站点对象，站点对象反映的是来源于同一站点的页面构成的集合，其中表示同一站点中全部页面的数目。

设置为浏览器对象，浏览器对象反映的是来源于同一或者不同站点的页面构成的集合。

1.2 交互式浏览器安全标签的设置

设置交互式浏览器中的安全标签为，安全属性集为，则互动式浏览器对页面对象的信任值的计算方法为：

式中：为对页面对象的信任值；表示页面对象为实例时的信任值；表示页面对象为非实例对象时的信任值；表示页面对象的权值；表示实例对象；表示实例对象的安全属性权值；表示非实例对象。

交互式浏览器中页面对象的安全属性权重的计算方法如下：

（1） 将浏览器中页面对象的所有属性按照重要程度进行排序，获得一个比较矩阵：

式中：表示一个安全属性与自己相比较的重要值；表示属性与属性重要性的比较结果。

利用下式对比较矩阵进行规范化处理：

利用下式获得交互式浏览器中页面对象的最终权值

根据上面阐述的方法，能够对交互式浏览器页面中的对象进行划分，并赋予不同的安全权重，从而避免了交互式浏览器中无关联的对象对交互机制产生干扰，为交互式浏览器的设计提供了基础。

2 页面交互机制的浏览器设计方法

2.1 浏览器信息数据的可视化设计

此阶段能够将浏览器中信息数据进行可视化处理，将抽象的信息用直观、形象的方式表达出来，从而加深用户对浏览器中信息的理解和认识。浏览器信息的可视化过程如图1所示。

浏览器中存在着海量的景區信息，要实现这些景区信息的可视化，就要根据抽象信息的数据进行可视化编码。景区信息属性的数据主要有数值型（如景区的大小）、类别（如景区的功能）、顺序型（如推荐指数）。各种信息的数据都需要经过过滤，从而抑制冗余数据，以减少用户搜索的时间成本。在浏览器的显示范围内，景区坐标数据的描述必须简单明了。景区信息数据经过过滤之后，兴趣景区（Point of Interest，POI）的标签应该包含4种基本信息：景区名称、景区类别、景区星级和景区距离。

2.2 交互式浏览器的设计

浏览器交互式设计能够将浏览器中多个离散的数据视图进行有效连接，并引导用户实现交互式行为。交互式浏览器的设计过程比较复杂，用户在使用浏览器的过程中需要不断与浏览器界面进行各种互动式交流，同时用户的感受也会发生复杂的变化。交互式浏览器的界面设计如图2所示。

图2（a）表示一个交互式浏览器的交互界面（即数据视图），图2（b）表示浏览器中的一个交互事件，其中，实线内的部分表示用户在浏览器中访问的步骤，虚线内的部分表示用户对访问内容的再次访问。当用户根据实现引导的信息完成访问的最后一步时，在感知层面上就相当于完成了一个热点访问的过程。与传统的浏览器设计方法不同，交互式浏览器的设计需要层层递进、逐渐深入地进行交互式设计，以引导交互式空间的转换。以景区为例，这样设计可以实现从多个景区到单一景区、从整体到局部、从局部到细节进行多次转变，在交互式浏览器中景区信息不断被过滤和刷新，用户的体验也会逐渐真实、丰富。

在交互式浏览器设计的过程中，需要引入“敏感度”这一概念。敏感度（S）能够反映信息在空间中的移动与移动过程中发生的交互行为，其定义为：其中SM（敏感度移动）表示信息在空间中的移动，SI（敏感度交互）表示信息在移动过程中产生的交互行为。当用户在浏览景区信息时，可以将兴趣景区信息中的某项标签当作SM，景区的图标能够告诉用户点击标签可以实现的SI。由于在信息的可视化阶段对用户的兴趣信息进行了合理的编码，因此交互过程能够让用户实现“先看再去”的策略。若缺少敏感度信息，用户则无法实现“先看再去”的这种策略。由于敏感度的设计方法支持用户的访问和再访问，因此允许用户对已访问的内容进行再次访问，对于用户深入了解访问信息是十分重要的。

此外，在交互式浏览器设计的过程中，还要保持界面中视觉像素的完整性。如果在交互式操作的过程中出现了视觉像素的缺失，将会影响用户对交互式浏览器的体验效果。同时，还需要使浏览器的界面保持显示风格的统一，以避免用户分散注意力，增加浏览成本。

2.3 交互式浏览器的迭代设计

为了避免交互式浏览器出现设计缺陷，使用户获得更好的交互式体验，需要对交互式浏览器进行迭代设计。迭代设计的过程共分为两个步骤，分别为“一次迭代设计”和“二次迭代设计”。

（1） 一次迭代设计

交互式浏览器的一次迭代设计的交互界面如图3所示。

在用户检索视图中进行了如下设计：

首先，使用输入框搜索信息时，信息过滤功能会自动运行虚拟键盘，多个操作控件同时出现在界面中会增加界面的复杂程度，为了避免这种情况，需要利用虚拟按钮的连接方式将这些控件隐藏到二级菜单中；其次，采用环状渐变的浅色作为界面的背景色；最后，采用绿白两色扁平化的图标作为景区类型的按钮样式。对界面背景简化设计能够降低浏览器界面对用户视觉的干扰，提高用户浏览的效率。考虑到浏览器显示屏幕尺寸的限制，为了降低用户误操作的概率，需要在浏览器的显示界面中增加方向罗盘指示器，使用户在浏览景区时对自身的地理位置有清晰的认识，满足用户对交互式浏览器的需求。

（2） 二次迭代设计

由于用户希望了解除景区名称和距离之外的其他信息，因此在进行二次迭代设计中对兴趣景区详细信息的介绍进行进一步补充。交互式浏览器的二次迭代设计如图4所示。在顶部显示的文字框中，第一行的文字为兴趣景区的名称以及位置信息，第二行文字为该景区的门票价格、景区星级信息。文字框右侧的按钮为景区导航视图。右侧下角的图示表示用户搜索范围内的景区，半透明圆弧状区域为用户搜索的区域。

3 测试结果与分析

为了验证基于页面交互机制浏览器的可用性，需要进行一次测试。测试的目的就是为了检验交互式浏览器能否满足用户的要求。测试的标准依据的是国标ISO9241中有关认知工作量的描述。它由用户在使用浏览器时的体验（包括识别、理解、记忆、交流等活动）构成。体验度的高低关系着用户使用浏览器时消耗的成本（包括时间成本、物质成本、注意力等），是对浏览器效率的度量。对用户体验度的考量能够检验浏览器的交互效率。

3.1 实验对象与方法

实验机的硬件配置：CPU为Intel 酷睿i5 6500 3.2 GHz，4核八线程；内存为8 GB DDR4 2 133 MHz；操作系统为Windows 7旗舰版 64位；采用50M光纤宽带速率进行网络数据传输。在交互式浏览器测试中采用当前IT领域中较为流行的欧洲航天局（European Space Agency）的任务负载指数量表（Task Load Index Scale，TLX）进行用户的体验度测试，TLX量表包括6个方面，分别为：脑力消耗（Mental Consumption，MC）、体力消耗（Energy Consumption，EC）、时间消耗（Time Consumption，TC）、努力程度（Effort，EF）、麻烦性评价（Trouble Evaluation，TE）和受挫程度（FrustrationLevel，FR）。量表中的每一项都有详细的文字解释，并用一条刻度为10 的直线表示，调查对象根据自身的实际体验选择在某一项的直线上不同的刻度进行标记，然后将6项对总的评分进行排序（即赋予权重），这6项的平均权重乘以10即为调查对象体验的总得分。图5分别表示对各项权重的排序，以及用户体验度的总得分。

调查对象共25人，是从普通成年人群中随机抽取的，调查对象的年龄分布在22～32岁，平均年龄为25岁，男女比例为1312，均未参加过此类测试。每一名参加测试的人员均须完成浏览器中4个系统的2项任务。第一个任务就是浏览指定景区内某景点的全貌，第二个任务是浏览指定景区详细信息中的天气情况。每项任务的总耗时控制在5 min以内，被测试人员完成2项任务消耗的时间和正确率都要进行记录。为了验证交互式浏览器的显示效果，选取一款不具备交互功能的普通浏览器进行对比测试。

3.2 测试结果分析

任务1的测试结果如表1所示。

从表1中任务1的测试结果可知，交互式浏览器具备传统浏览器不具备的特点，即浏览指定景区内某景点的全貌，与传统浏览器中由文字和图片构成的跳转网页链接的方式相比，交互式浏览器对于抽象数据的表达更直观，便于用户在空间维度上对景区进行更深的理解。表1中的数据还能表明，在传统的浏览器中，对于景区全貌可视化使用的是简单的网页链接或者简单的文字图片组合，在交互的过程中缺乏连贯性，从而增加了对用户理解的干扰，加重了用户的受挫感，用户必须耗费更多的时间才能完成任务目标。这2项数值的增加也会造成脑力消耗的增加，从而全面拉高了各项的分值。而交互式浏览器则能避免传统浏览器的缺点。

任务2的测试结果如表2所示。从表2中的数据能够得知，由于交互式浏览器采用迭代的设计方法，用户在搜索兴趣信息时很容易跳转到分类信息列表的视图中。与传统的浏览器相比，交互式浏览器能够在单一的场景中获得更多的信息。由此可见，用户在使用交互式浏览器时产生的任务负载明显低于传统浏览器，这表明用户能够获得更高的体验度，这在很大程度上能够降低用户使用浏览器的成本，从而提高交互的效率。

4 结 语

针对传统浏览器存在人机交互体验较差的问题，提出一种基于页面交互机制的浏览器整体框架设计方法。测试结果表明，相对于传统的浏览器，基于页面交互机制的浏览器能够为用户提供更好的交互式体验，取得了令人满意的效果。

参考文献

[1] 杜晓宇.基于浏览器的气象再分析平台通用架构及组件设计[J].成都信息工程学院学报，2014，29（4）：370?375.

[2] 汪浩，田丰，张文俊.基于WebGL的交互平台设计与实现[J].电子测量技术，2015（8）：119?122.

[3] 杨迎，孙振业，许俊良.基于B/S网络构架的科技资源调度可靠性研究[J].科技通报，2015，31（8）：189?191.

[4] 来勇臣，叶舟，张芳芳.基于B/S架构的远程医学电子病历浏览器设计[J].中国数字医学，2014，9（6）：5?7.

[5] 颜菲.折叠式内容可关联的浏览器设计与实现[J].现代电子技术，2016，39（10）：69?72.

[6] 樊嘉辰，叶德建，刘新.面向智能电视的易用浏览器设计[J].计算机应用与软件，2015（6）：94?98.

[7] 王彩霞.基于C#的浏览器设计与实现[J].新余学院学报，2014（6）：26?28.

[8] 韩朝帅，潘恩超，刘瑞起，等.基于云计算的装备保障系统架构研究[J].计算机测量与控制，2016，24（3）：103?105.

[9] 姚瑶，王战红，石磊.基于页面聚类的Web概念化模型研究[J].科学技术与工程，2014，14（25）：272?276.