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

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

關(guān)鍵詞： 交互機(jī)制； 瀏覽器； 框架設(shè)計(jì)； 體驗(yàn)度

中圖分類(lèi)號(hào)： TN915?34； TP393.09 文獻(xiàn)標(biāo)識(shí)碼： A 文章編號(hào)： 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 引 言

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

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

1 交互式瀏覽器的訪問(wèn)控制

1.1 交互式瀏覽器訪問(wèn)對(duì)象的劃分

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

設(shè)置為頁(yè)面對(duì)象，頁(yè)面對(duì)象反映的是頁(yè)面屬性，這些屬性主要有頁(yè)面創(chuàng)建時(shí)間、頁(yè)面來(lái)源等。

設(shè)置為站點(diǎn)對(duì)象，站點(diǎn)對(duì)象反映的是來(lái)源于同一站點(diǎn)的頁(yè)面構(gòu)成的集合，其中表示同一站點(diǎn)中全部頁(yè)面的數(shù)目。

設(shè)置為瀏覽器對(duì)象，瀏覽器對(duì)象反映的是來(lái)源于同一或者不同站點(diǎn)的頁(yè)面構(gòu)成的集合。

1.2 交互式瀏覽器安全標(biāo)簽的設(shè)置

設(shè)置交互式瀏覽器中的安全標(biāo)簽為，安全屬性集為，則互動(dòng)式瀏覽器對(duì)頁(yè)面對(duì)象的信任值的計(jì)算方法為：

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

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

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

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

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

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

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

2 頁(yè)面交互機(jī)制的瀏覽器設(shè)計(jì)方法

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

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

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

2.2 交互式瀏覽器的設(shè)計(jì)

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

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

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

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

2.3 交互式瀏覽器的迭代設(shè)計(jì)

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

（1） 一次迭代設(shè)計(jì)

交互式瀏覽器的一次迭代設(shè)計(jì)的交互界面如圖3所示。

在用戶檢索視圖中進(jìn)行了如下設(shè)計(jì)：

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

（2） 二次迭代設(shè)計(jì)

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

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

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

3.1 實(shí)驗(yàn)對(duì)象與方法

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

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

3.2 測(cè)試結(jié)果分析

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

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

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

4 結(jié) 語(yǔ)

針對(duì)傳統(tǒng)瀏覽器存在人機(jī)交互體驗(yàn)較差的問(wèn)題，提出一種基于頁(yè)面交互機(jī)制的瀏覽器整體框架設(shè)計(jì)方法。測(cè)試結(jié)果表明，相對(duì)于傳統(tǒng)的瀏覽器，基于頁(yè)面交互機(jī)制的瀏覽器能夠?yàn)橛脩籼峁└玫慕换ナ襟w驗(yàn)，取得了令人滿意的效果。

參考文獻(xiàn)

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

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

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

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

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

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

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

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

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