基于頁面交互機制的瀏覽器整體架構設計

胡州明+彭柏+趙永彬+楊帆+金成明

摘 要： 為了提高瀏覽器的人機交互性，提高用戶使用瀏覽器的體驗度，提出一種基于頁面交互機制的瀏覽器整體框架設計方法。對交互式瀏覽器頁面中的對象進行劃分，并賦予不同的安全權重，從而避免交互式瀏覽器中無關聯的對象對交互機制產生干擾。將用戶對交互式瀏覽器的需求轉換為任務列表，將存在聯系的子任務設計為交互視圖，將抽象的信息數據用數據視圖表達，利用迭代式交互設計方法將離散的數據視圖相關聯。測試結果表明，相對于傳統的瀏覽器，基于頁面交互機制的瀏覽器能夠為用戶提供更好的交互式體驗，效果令人滿意。

關鍵詞： 交互機制； 瀏覽器； 框架設計； 體驗度

中圖分類號： 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.