基于頁面交互機制的瀏覽器整體架構(gòu)設計

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

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

關(guān)鍵詞： 交互機制； 瀏覽器； 框架設計； 體驗度

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

瀏覽器指的是能夠運行在計算機、平板、手機等終端的軟件，用戶通過它能夠獲得網(wǎng)站服務器或者文件系統(tǒng)內(nèi)的文件，并以這些文件產(chǎn)生一定的交互[1]。瀏覽器是人們獲得網(wǎng)絡資訊的一個重要窗口[2?3]。隨著網(wǎng)絡技術(shù)的迅速崛起，各瀏覽器開發(fā)廠商對于市場的爭奪也日趨激烈[4?5]。隨著網(wǎng)絡技術(shù)的不斷發(fā)展，交互式技術(shù)（VR）也得到了快速提高，并在娛樂、軍事航天、醫(yī)學等領域得到了廣泛的應用[6]。在瀏覽器領域，用戶體驗度不佳的問題已經(jīng)成為制約瀏覽器繼續(xù)發(fā)展的一個重要因素，相關(guān)研究表明，其主要原因正是瀏覽器開發(fā)者忽略了瀏覽器界面交互式體驗設計[7]。因此，如何加強用戶對瀏覽器的使用體驗，已經(jīng)成為當前瀏覽器設計領域中的一個研究熱點，受到了越來越多的關(guān)注[8?9]。

為了提高瀏覽器的交互性，提出一種基于界面交互機制的瀏覽器整體框架設計方法。對瀏覽器在交互式體驗中存在的問題進行總結(jié)，挖掘出用戶對交互式瀏覽器的需求。設計出實現(xiàn)頁面交互機制瀏覽器的實現(xiàn)步驟。測試結(jié)果表明，相對于傳統(tǒng)的瀏覽器，基于頁面交互機制的瀏覽器在用戶體驗度方面具有更大的優(yōu)勢。

1 交互式瀏覽器的訪問控制

1.1 交互式瀏覽器訪問對象的劃分

為了避免瀏覽器中無關(guān)聯(lián)的對象對交互機制產(chǎn)生干擾，將瀏覽器中的對象劃分為頁面對象、站點對象和瀏覽器對象。

設置為頁面對象，頁面對象反映的是頁面屬性，這些屬性主要有頁面創(chuàng)建時間、頁面來源等。

設置為站點對象，站點對象反映的是來源于同一站點的頁面構(gòu)成的集合，其中表示同一站點中全部頁面的數(shù)目。

設置為瀏覽器對象，瀏覽器對象反映的是來源于同一或者不同站點的頁面構(gòu)成的集合。

1.2 交互式瀏覽器安全標簽的設置

設置交互式瀏覽器中的安全標簽為，安全屬性集為，則互動式瀏覽器對頁面對象的信任值的計算方法為：

式中：為對頁面對象的信任值；表示頁面對象為實例時的信任值；表示頁面對象為非實例對象時的信任值；表示頁面對象的權(quán)值；表示實例對象；表示實例對象的安全屬性權(quán)值；表示非實例對象。

交互式瀏覽器中頁面對象的安全屬性權(quán)重的計算方法如下：

（1） 將瀏覽器中頁面對象的所有屬性按照重要程度進行排序，獲得一個比較矩陣：

式中：表示一個安全屬性與自己相比較的重要值；表示屬性與屬性重要性的比較結(jié)果。

利用下式對比較矩陣進行規(guī)范化處理：

利用下式獲得交互式瀏覽器中頁面對象的最終權(quán)值

根據(jù)上面闡述的方法，能夠?qū)换ナ綖g覽器頁面中的對象進行劃分，并賦予不同的安全權(quán)重，從而避免了交互式瀏覽器中無關(guān)聯(lián)的對象對交互機制產(chǎn)生干擾，為交互式瀏覽器的設計提供了基礎。

2 頁面交互機制的瀏覽器設計方法

2.1 瀏覽器信息數(shù)據(jù)的可視化設計

此階段能夠?qū)g覽器中信息數(shù)據(jù)進行可視化處理，將抽象的信息用直觀、形象的方式表達出來，從而加深用戶對瀏覽器中信息的理解和認識。瀏覽器信息的可視化過程如圖1所示。

瀏覽器中存在著海量的景區(qū)信息，要實現(xiàn)這些景區(qū)信息的可視化，就要根據(jù)抽象信息的數(shù)據(jù)進行可視化編碼。景區(qū)信息屬性的數(shù)據(jù)主要有數(shù)值型（如景區(qū)的大?。?、類別（如景區(qū)的功能）、順序型（如推薦指數(shù)）。各種信息的數(shù)據(jù)都需要經(jīng)過過濾，從而抑制冗余數(shù)據(jù)，以減少用戶搜索的時間成本。在瀏覽器的顯示范圍內(nèi)，景區(qū)坐標數(shù)據(jù)的描述必須簡單明了。景區(qū)信息數(shù)據(jù)經(jīng)過過濾之后，興趣景區(qū)（Point of Interest，POI）的標簽應該包含4種基本信息：景區(qū)名稱、景區(qū)類別、景區(qū)星級和景區(qū)距離。

2.2 交互式瀏覽器的設計

瀏覽器交互式設計能夠?qū)g覽器中多個離散的數(shù)據(jù)視圖進行有效連接，并引導用戶實現(xiàn)交互式行為。交互式瀏覽器的設計過程比較復雜，用戶在使用瀏覽器的過程中需要不斷與瀏覽器界面進行各種互動式交流，同時用戶的感受也會發(fā)生復雜的變化。交互式瀏覽器的界面設計如圖2所示。

圖2（a）表示一個交互式瀏覽器的交互界面（即數(shù)據(jù)視圖），圖2（b）表示瀏覽器中的一個交互事件，其中，實線內(nèi)的部分表示用戶在瀏覽器中訪問的步驟，虛線內(nèi)的部分表示用戶對訪問內(nèi)容的再次訪問。當用戶根據(jù)實現(xiàn)引導的信息完成訪問的最后一步時，在感知層面上就相當于完成了一個熱點訪問的過程。與傳統(tǒng)的瀏覽器設計方法不同，交互式瀏覽器的設計需要層層遞進、逐漸深入地進行交互式設計，以引導交互式空間的轉(zhuǎn)換。以景區(qū)為例，這樣設計可以實現(xiàn)從多個景區(qū)到單一景區(qū)、從整體到局部、從局部到細節(jié)進行多次轉(zhuǎn)變，在交互式瀏覽器中景區(qū)信息不斷被過濾和刷新，用戶的體驗也會逐漸真實、豐富。

在交互式瀏覽器設計的過程中，需要引入“敏感度”這一概念。敏感度（S）能夠反映信息在空間中的移動與移動過程中發(fā)生的交互行為，其定義為：其中SM（敏感度移動）表示信息在空間中的移動，SI（敏感度交互）表示信息在移動過程中產(chǎn)生的交互行為。當用戶在瀏覽景區(qū)信息時，可以將興趣景區(qū)信息中的某項標簽當作SM，景區(qū)的圖標能夠告訴用戶點擊標簽可以實現(xiàn)的SI。由于在信息的可視化階段對用戶的興趣信息進行了合理的編碼，因此交互過程能夠讓用戶實現(xiàn)“先看再去”的策略。若缺少敏感度信息，用戶則無法實現(xiàn)“先看再去”的這種策略。由于敏感度的設計方法支持用戶的訪問和再訪問，因此允許用戶對已訪問的內(nèi)容進行再次訪問，對于用戶深入了解訪問信息是十分重要的。

此外，在交互式瀏覽器設計的過程中，還要保持界面中視覺像素的完整性。如果在交互式操作的過程中出現(xiàn)了視覺像素的缺失，將會影響用戶對交互式瀏覽器的體驗效果。同時，還需要使瀏覽器的界面保持顯示風格的統(tǒng)一，以避免用戶分散注意力，增加瀏覽成本。

2.3 交互式瀏覽器的迭代設計

為了避免交互式瀏覽器出現(xiàn)設計缺陷，使用戶獲得更好的交互式體驗，需要對交互式瀏覽器進行迭代設計。迭代設計的過程共分為兩個步驟，分別為“一次迭代設計”和“二次迭代設計”。

（1） 一次迭代設計

交互式瀏覽器的一次迭代設計的交互界面如圖3所示。

在用戶檢索視圖中進行了如下設計：

首先，使用輸入框搜索信息時，信息過濾功能會自動運行虛擬鍵盤，多個操作控件同時出現(xiàn)在界面中會增加界面的復雜程度，為了避免這種情況，需要利用虛擬按鈕的連接方式將這些控件隱藏到二級菜單中；其次，采用環(huán)狀漸變的淺色作為界面的背景色；最后，采用綠白兩色扁平化的圖標作為景區(qū)類型的按鈕樣式。對界面背景簡化設計能夠降低瀏覽器界面對用戶視覺的干擾，提高用戶瀏覽的效率?？紤]到瀏覽器顯示屏幕尺寸的限制，為了降低用戶誤操作的概率，需要在瀏覽器的顯示界面中增加方向羅盤指示器，使用戶在瀏覽景區(qū)時對自身的地理位置有清晰的認識，滿足用戶對交互式瀏覽器的需求。

（2） 二次迭代設計

由于用戶希望了解除景區(qū)名稱和距離之外的其他信息，因此在進行二次迭代設計中對興趣景區(qū)詳細信息的介紹進行進一步補充。交互式瀏覽器的二次迭代設計如圖4所示。在頂部顯示的文字框中，第一行的文字為興趣景區(qū)的名稱以及位置信息，第二行文字為該景區(qū)的門票價格、景區(qū)星級信息。文字框右側(cè)的按鈕為景區(qū)導航視圖。右側(cè)下角的圖示表示用戶搜索范圍內(nèi)的景區(qū)，半透明圓弧狀區(qū)域為用戶搜索的區(qū)域。

3 測試結(jié)果與分析

為了驗證基于頁面交互機制瀏覽器的可用性，需要進行一次測試。測試的目的就是為了檢驗交互式瀏覽器能否滿足用戶的要求。測試的標準依據(jù)的是國標ISO9241中有關(guān)認知工作量的描述。它由用戶在使用瀏覽器時的體驗（包括識別、理解、記憶、交流等活動）構(gòu)成。體驗度的高低關(guān)系著用戶使用瀏覽器時消耗的成本（包括時間成本、物質(zhì)成本、注意力等），是對瀏覽器效率的度量。對用戶體驗度的考量能夠檢驗瀏覽器的交互效率。

3.1 實驗對象與方法

實驗機的硬件配置：CPU為Intel 酷睿i5 6500 3.2 GHz，4核八線程；內(nèi)存為8 GB DDR4 2 133 MHz；操作系統(tǒng)為Windows 7旗艦版 64位；采用50M光纖寬帶速率進行網(wǎng)絡數(shù)據(jù)傳輸。在交互式瀏覽器測試中采用當前IT領域中較為流行的歐洲航天局（European Space Agency）的任務負載指數(shù)量表（Task Load Index Scale，TLX）進行用戶的體驗度測試，TLX量表包括6個方面，分別為：腦力消耗（Mental Consumption，MC）、體力消耗（Energy Consumption，EC）、時間消耗（Time Consumption，TC）、努力程度（Effort，EF）、麻煩性評價（Trouble Evaluation，TE）和受挫程度（FrustrationLevel，F(xiàn)R）。量表中的每一項都有詳細的文字解釋，并用一條刻度為10 的直線表示，調(diào)查對象根據(jù)自身的實際體驗選擇在某一項的直線上不同的刻度進行標記，然后將6項對總的評分進行排序（即賦予權(quán)重），這6項的平均權(quán)重乘以10即為調(diào)查對象體驗的總得分。圖5分別表示對各項權(quán)重的排序，以及用戶體驗度的總得分。

調(diào)查對象共25人，是從普通成年人群中隨機抽取的，調(diào)查對象的年齡分布在22～32歲，平均年齡為25歲，男女比例為1312，均未參加過此類測試。每一名參加測試的人員均須完成瀏覽器中4個系統(tǒng)的2項任務。第一個任務就是瀏覽指定景區(qū)內(nèi)某景點的全貌，第二個任務是瀏覽指定景區(qū)詳細信息中的天氣情況。每項任務的總耗時控制在5 min以內(nèi)，被測試人員完成2項任務消耗的時間和正確率都要進行記錄。為了驗證交互式瀏覽器的顯示效果，選取一款不具備交互功能的普通瀏覽器進行對比測試。

3.2 測試結(jié)果分析

任務1的測試結(jié)果如表1所示。

從表1中任務1的測試結(jié)果可知，交互式瀏覽器具備傳統(tǒng)瀏覽器不具備的特點，即瀏覽指定景區(qū)內(nèi)某景點的全貌，與傳統(tǒng)瀏覽器中由文字和圖片構(gòu)成的跳轉(zhuǎn)網(wǎng)頁鏈接的方式相比，交互式瀏覽器對于抽象數(shù)據(jù)的表達更直觀，便于用戶在空間維度上對景區(qū)進行更深的理解。表1中的數(shù)據(jù)還能表明，在傳統(tǒng)的瀏覽器中，對于景區(qū)全貌可視化使用的是簡單的網(wǎng)頁鏈接或者簡單的文字圖片組合，在交互的過程中缺乏連貫性，從而增加了對用戶理解的干擾，加重了用戶的受挫感，用戶必須耗費更多的時間才能完成任務目標。這2項數(shù)值的增加也會造成腦力消耗的增加，從而全面拉高了各項的分值。而交互式瀏覽器則能避免傳統(tǒng)瀏覽器的缺點。

任務2的測試結(jié)果如表2所示。從表2中的數(shù)據(jù)能夠得知，由于交互式瀏覽器采用迭代的設計方法，用戶在搜索興趣信息時很容易跳轉(zhuǎn)到分類信息列表的視圖中。與傳統(tǒng)的瀏覽器相比，交互式瀏覽器能夠在單一的場景中獲得更多的信息。由此可見，用戶在使用交互式瀏覽器時產(chǎn)生的任務負載明顯低于傳統(tǒng)瀏覽器，這表明用戶能夠獲得更高的體驗度，這在很大程度上能夠降低用戶使用瀏覽器的成本，從而提高交互的效率。

4 結(jié) 語

針對傳統(tǒng)瀏覽器存在人機交互體驗較差的問題，提出一種基于頁面交互機制的瀏覽器整體框架設計方法。測試結(jié)果表明，相對于傳統(tǒng)的瀏覽器，基于頁面交互機制的瀏覽器能夠為用戶提供更好的交互式體驗，取得了令人滿意的效果。

參考文獻

[1] 杜曉宇.基于瀏覽器的氣象再分析平臺通用架構(gòu)及組件設計[J].成都信息工程學院學報，2014，29（4）：370?375.

[2] 汪浩，田豐，張文俊.基于WebGL的交互平臺設計與實現(xiàn)[J].電子測量技術(shù)，2015（8）：119?122.

[3] 楊迎，孫振業(yè)，許俊良.基于B/S網(wǎng)絡構(gòu)架的科技資源調(diào)度可靠性研究[J].科技通報，2015，31（8）：189?191.

[4] 來勇臣，葉舟，張芳芳.基于B/S架構(gòu)的遠程醫(yī)學電子病歷瀏覽器設計[J].中國數(shù)字醫(yī)學，2014，9（6）：5?7.

[5] 顏菲.折疊式內(nèi)容可關(guān)聯(lián)的瀏覽器設計與實現(xiàn)[J].現(xiàn)代電子技術(shù)，2016，39（10）：69?72.

[6] 樊嘉辰，葉德建，劉新.面向智能電視的易用瀏覽器設計[J].計算機應用與軟件，2015（6）：94?98.

[7] 王彩霞.基于C#的瀏覽器設計與實現(xiàn)[J].新余學院學報，2014（6）：26?28.

[8] 韓朝帥，潘恩超，劉瑞起，等.基于云計算的裝備保障系統(tǒng)架構(gòu)研究[J].計算機測量與控制，2016，24（3）：103?105.

[9] 姚瑤，王戰(zhàn)紅，石磊.基于頁面聚類的Web概念化模型研究[J].科學技術(shù)與工程，2014，14（25）：272?276.