互聯(lián)網(wǎng)產(chǎn)品動(dòng)態(tài)語(yǔ)義交互設(shè)計(jì)及設(shè)計(jì)結(jié)果驗(yàn)證

張子涵

(東北林業(yè)大學(xué)，黑龍江 哈爾濱 150040)

相比于傳統(tǒng)的語(yǔ)義符號(hào)，動(dòng)態(tài)語(yǔ)義元素本身具有更加自然的動(dòng)感效果，可以使用戶在操作產(chǎn)品時(shí)獲得更加良好的交互體驗(yàn)?；趧?dòng)態(tài)語(yǔ)義理論的互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)，有助于設(shè)計(jì)出更加符合用戶行為習(xí)慣、進(jìn)一步優(yōu)化用戶操作體驗(yàn)的產(chǎn)品，顯著降低用戶的操作成本，在競(jìng)爭(zhēng)日益激烈、更新?lián)Q代頻繁的互聯(lián)網(wǎng)產(chǎn)品市場(chǎng)中，有助于提高產(chǎn)品的競(jìng)爭(zhēng)力?；诖?，探究將動(dòng)態(tài)語(yǔ)義技術(shù)應(yīng)用到互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中的可行性方法，并且對(duì)設(shè)計(jì)結(jié)果進(jìn)行可靠性驗(yàn)證，成為現(xiàn)階段互聯(lián)網(wǎng)產(chǎn)品開(kāi)發(fā)設(shè)計(jì)中關(guān)注的焦點(diǎn)。

1 基于動(dòng)態(tài)語(yǔ)義的產(chǎn)品交互設(shè)計(jì)

1.1 測(cè)試插件及測(cè)試平臺(tái)的需求設(shè)計(jì)

在開(kāi)始動(dòng)態(tài)語(yǔ)義交互設(shè)計(jì)前，必須要全面了解該產(chǎn)品的用戶需求場(chǎng)景。在此基礎(chǔ)上，逐項(xiàng)列出每個(gè)需求場(chǎng)景中的操作步驟，并根據(jù)操作步驟的指示意圖匹配可用的動(dòng)態(tài)語(yǔ)義符號(hào)。除了簡(jiǎn)化設(shè)計(jì)流程外，后期該產(chǎn)品投入使用后也能帶給用戶良好的使用體驗(yàn)。在用戶測(cè)試產(chǎn)品中，主要分析了3 種需求，即核心需求、激勵(lì)需求、其他需求；在用戶測(cè)試平臺(tái)中，主要分析了4 種需求，分別是統(tǒng)計(jì)分析、用例管理、任務(wù)管理和任務(wù)發(fā)布，具體內(nèi)容如表1 所示。

表1 測(cè)試插件及測(cè)試平臺(tái)的需求分析

以用戶測(cè)試平臺(tái)設(shè)計(jì)為例，這里的用戶主要是指產(chǎn)品線質(zhì)量工程師，他們的需求分析如下：(1)統(tǒng)計(jì)分析。收集產(chǎn)品線相關(guān)的數(shù)據(jù)，并且以可視化圖形的方式呈現(xiàn)，方便用戶對(duì)產(chǎn)品功能測(cè)試效果進(jìn)行分析。(2)用例管理。用戶通過(guò)調(diào)用Case 功能，對(duì)用例執(zhí)行增加、刪除、修改、查看、錄入、導(dǎo)出等一系列操作。用例管理主要是通過(guò)按鈕操作完成，可執(zhí)行的動(dòng)態(tài)語(yǔ)義符號(hào)包括單擊、長(zhǎng)按等。(3)任務(wù)管理。用戶可實(shí)時(shí)查看任務(wù)進(jìn)程、執(zhí)行情況，并且可終止正在進(jìn)行的任務(wù)。根據(jù)反饋信息查看任務(wù)執(zhí)行效果，判斷被測(cè)試的功能是否達(dá)到了產(chǎn)品設(shè)計(jì)的預(yù)期。(4)任務(wù)發(fā)布。用戶在建立任務(wù)后，可手動(dòng)發(fā)布或者設(shè)定時(shí)間自動(dòng)發(fā)布任務(wù)。

1.2 對(duì)“參與測(cè)試”功能的交互設(shè)計(jì)

以用戶測(cè)試插件中的“參與測(cè)試”為例，對(duì)該功能的交互設(shè)計(jì)流程及技術(shù)要點(diǎn)展開(kāi)分析。交互設(shè)計(jì)共分為兩個(gè)核心步驟，即進(jìn)入任務(wù)執(zhí)行和執(zhí)行用例。

1.2.1 進(jìn)入任務(wù)執(zhí)行

點(diǎn)擊插件圖標(biāo)后，進(jìn)入到功能面板頁(yè)。頁(yè)面內(nèi)容包括“個(gè)人主頁(yè)”、“排行榜”、“任務(wù)推薦”、“參與測(cè)試”4 個(gè)模塊。點(diǎn)擊“參與測(cè)試”后，彈出任務(wù)執(zhí)行方式，有“單步執(zhí)行”、“整體執(zhí)行”兩種，選擇整體執(zhí)行后進(jìn)入到執(zhí)行面板頁(yè)。交互界面如圖1 所示。

圖1 進(jìn)入任務(wù)執(zhí)行/獲得任務(wù)交互圖

1.2.2 執(zhí)行用例

在用例執(zhí)行期間，用戶可隨時(shí)點(diǎn)擊“PASS”按鈕或“FALL”按鈕，查看執(zhí)行實(shí)際結(jié)果與預(yù)期結(jié)果。如果兩者之間差異明顯，說(shuō)明當(dāng)前設(shè)計(jì)方案存在缺陷，需要根據(jù)反饋信息重新優(yōu)化設(shè)計(jì)。在用例執(zhí)行期間，如果該用例包含多個(gè)執(zhí)行步驟，可通過(guò)左滑切換至上一步驟，或右滑進(jìn)入到下一步驟。另外，在用例執(zhí)行期間，如果兩個(gè)及以上的用例之間存在相互關(guān)系，(例如需要執(zhí)行某一用例才能繼續(xù)開(kāi)始下一用例)，這種情況下可以將暫時(shí)不需要執(zhí)行的用例“隱藏”起來(lái)。當(dāng)需要執(zhí)行時(shí)，在通過(guò)隱藏執(zhí)行面板解除隱藏，這樣既保證了界面簡(jiǎn)潔，同時(shí)又不影響正常執(zhí)行用例。當(dāng)然，如果多個(gè)用例之間并不存在關(guān)聯(lián)，則可以選擇直接跳過(guò)不需要執(zhí)行的用例。當(dāng)所有用例執(zhí)行完畢后，點(diǎn)擊“退出測(cè)試”即可回到主界面。用例的跳過(guò)和退出交互設(shè)計(jì)界面如圖2 所示。

圖2 跳過(guò)用例與退出執(zhí)行交互圖

2 互聯(lián)網(wǎng)產(chǎn)品動(dòng)態(tài)語(yǔ)義的交互設(shè)計(jì)

2.1 人機(jī)交互開(kāi)發(fā)設(shè)計(jì)

以插件形式存在的客戶端，可以看作是獨(dú)立于手機(jī)應(yīng)用的第三方模塊。為了使插件和應(yīng)用內(nèi)容可以在手機(jī)屏幕上同時(shí)顯示，同時(shí)又互不干擾，因此在設(shè)計(jì)時(shí)要保證插件界面小而透明，并且支持用戶自定義移動(dòng)。其中，圖標(biāo)是插件的入口，采用懸浮式設(shè)計(jì)，用戶可任意改變圖標(biāo)的位置。除了圖標(biāo)外，為了優(yōu)化人機(jī)交互體驗(yàn)，還需要在插件內(nèi)部設(shè)計(jì)功能面板頁(yè)、注冊(cè)登錄彈窗、任務(wù)推薦彈窗等內(nèi)容，滿足用戶的操作需要。由于界面風(fēng)格比較相似，因此在設(shè)計(jì)時(shí)可以抽象出共同的基類，并使用面向?qū)ο蟮木幊谭椒?，將各種界面的共同點(diǎn)封裝成統(tǒng)一的類，簡(jiǎn)化設(shè)計(jì)流程。程序開(kāi)發(fā)基于Android平臺(tái)，視圖元素(如動(dòng)畫(huà)、顏色等)由XML 定義，邏輯代碼用Java 編寫(xiě)。模塊結(jié)構(gòu)如圖3 所示。

圖3 模塊結(jié)構(gòu)及關(guān)聯(lián)關(guān)系

根據(jù)操作方式的不同，事件模塊包括了點(diǎn)擊事件、滑動(dòng)事件兩種類型。其中點(diǎn)擊事件由系統(tǒng)定義，又可分為點(diǎn)擊、長(zhǎng)按；而滑動(dòng)事件支持用戶自定義，通過(guò)跟蹤滑動(dòng)方向、滑動(dòng)長(zhǎng)度、滑動(dòng)線形等進(jìn)行識(shí)別。界面模塊主要涵蓋了系統(tǒng)界面、自定義界面兩種類型。系統(tǒng)提供的界面布局比較單一，只能滿足基本的系統(tǒng)操作要求。而自定義界面則方便用戶根據(jù)使用需求進(jìn)行界面的靈活布局，包括添加按鈕等界面元素，或更改彈窗的形式、尺寸等。業(yè)務(wù)模塊提供了網(wǎng)絡(luò)連接、數(shù)據(jù)傳輸和存儲(chǔ)等功能。該模塊并不直接對(duì)用戶開(kāi)放，用戶需要從界面處獲取信息、執(zhí)行操作。然后操作指令到達(dá)業(yè)務(wù)模塊后作出響應(yīng)，實(shí)現(xiàn)人機(jī)交互。工具模塊是整個(gè)系統(tǒng)中的底層結(jié)構(gòu)，其作用是為系統(tǒng)中其他模塊提供基本服務(wù)，如判斷用戶是否具備操作權(quán)限、判斷本地網(wǎng)絡(luò)連接是否正常等。

2.2 視覺(jué)設(shè)計(jì)

視覺(jué)設(shè)計(jì)除了要達(dá)到美化頁(yè)面的效果，在優(yōu)化用戶的產(chǎn)品使用體驗(yàn)等方面也有積極影響?；谝曈X(jué)設(shè)計(jì)規(guī)范的界面交互設(shè)計(jì)主要包含三項(xiàng)內(nèi)容：

2.2.1 插件顯示設(shè)計(jì)。顯示字體提供18px、36px 等5 種字號(hào)，支持根據(jù)場(chǎng)景、任務(wù)的不同靈活選擇合適大小的字體。在實(shí)際操作中用于顯示功能按鈕的文字，使用較大的36px 字號(hào)，保證功能按鈕更加醒目，并且有助于防止用戶誤操作；而詳細(xì)描述任務(wù)的文字，使用較小的18px，節(jié)約界面空間。另外還提供了6 種不同顏色的字體，分別適用于標(biāo)題、正文，或者功能按鈕等。視覺(jué)設(shè)計(jì)中的插件字體設(shè)計(jì)規(guī)范如圖4 所示。

圖4 插件字體設(shè)計(jì)圖示

2.2.2 布局設(shè)計(jì)。本次設(shè)計(jì)產(chǎn)品以插件形式存在于被測(cè)應(yīng)用中，因此在布局設(shè)計(jì)時(shí)要遵循以下兩點(diǎn)基本要求：第一是插件不能覆蓋應(yīng)用，插件與應(yīng)用的操作要相互獨(dú)立；第二是插件要有一定的透明度，當(dāng)插件懸浮與應(yīng)用之上時(shí)，不能對(duì)應(yīng)用內(nèi)容造成遮擋、覆蓋。插件圖標(biāo)透明度設(shè)計(jì)為80%，底色為#ffffff，主色為#d1d1d1。可支持在手機(jī)屏幕左側(cè)或右側(cè)?？?。打開(kāi)插件后，功能面板的底色為#2e85b7，設(shè)計(jì)透明度為90%；功能按鈕的底色為#ffffff，設(shè)計(jì)透明度為30%。面板為手機(jī)屏幕劇中展示，與手機(jī)屏幕邊緣距離均為20px。

2.2.3 控件設(shè)計(jì)。插件的主要控件有3 種，分別是按鈕、符號(hào)、彈層。其中，按鈕又可分為登錄與退出按鈕、結(jié)果反饋按鈕、隱藏操作按鈕等。以登錄按鈕為例，文字采用36px，未選中狀態(tài)下透明度為80%，選中狀態(tài)下透明度為50%。符號(hào)又可分為進(jìn)度條、加載條等。以進(jìn)度條為例，數(shù)字采用36px，顏色為2e85b7，彈層主要是隱藏操作彈層。

3 動(dòng)態(tài)語(yǔ)義交互設(shè)計(jì)結(jié)果驗(yàn)證

3.1 構(gòu)建交互設(shè)計(jì)方案的層次結(jié)構(gòu)

基于交互設(shè)計(jì)方案構(gòu)建層次結(jié)構(gòu)，是進(jìn)行設(shè)計(jì)方案一致性檢驗(yàn)和模糊評(píng)價(jià)的必要前提。劃分為3 個(gè)層次，分別是目標(biāo)層、準(zhǔn)則層和措施層，整個(gè)層次結(jié)構(gòu)如圖5 所示。

圖5 交互設(shè)計(jì)方案的層次結(jié)構(gòu)

3.2 交互設(shè)計(jì)方案的評(píng)價(jià)

本文選擇模糊評(píng)價(jià)方法，對(duì)交互設(shè)計(jì)結(jié)果的可靠性進(jìn)行驗(yàn)證。但是在模糊評(píng)價(jià)之前，需要開(kāi)展一致性檢驗(yàn)，以確保各元素的重要度具有協(xié)調(diào)性，防止出現(xiàn)A 比B 重要，B 比C 重要，而C 又比A 重要的矛盾情況。選擇上文圖5 中的準(zhǔn)則層進(jìn)行一致性驗(yàn)證，驗(yàn)證方法采用1-9 標(biāo)度法(見(jiàn)表2)。

表2 1-9 標(biāo)度法

參照1-9 標(biāo)度表，建立不同層級(jí)之間各個(gè)因素相較于上一層級(jí)的判斷矩陣。以圖5 中的A 目標(biāo)層和B 準(zhǔn)則層為例，B 對(duì)A 的判斷矩陣如表3 所示。

表3 B-A 判斷矩陣

在設(shè)計(jì)方案的一致性檢驗(yàn)中，如果判斷矩陣中出現(xiàn)B1重要程度超過(guò)B2，B2 重要程度超過(guò)B3，而B(niǎo)3 重要程度又超過(guò)B1 的矛盾情況，則說(shuō)明該設(shè)計(jì)方案是無(wú)效的。結(jié)合表3數(shù)據(jù)可知，該判斷矩陣未出現(xiàn)此類矛盾，并且驗(yàn)證結(jié)果表明判斷矩陣的一致性比率均低于0.1，滿足一致性要求，在此基礎(chǔ)上開(kāi)始模糊評(píng)價(jià)。具體方法為：挑選11 名互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)領(lǐng)域的專家，分別對(duì)動(dòng)態(tài)語(yǔ)義指導(dǎo)下的交互設(shè)計(jì)方案進(jìn)行模糊評(píng)價(jià)。評(píng)價(jià)對(duì)象為上文圖5 中的措施層，評(píng)價(jià)分為“優(yōu)、良、中、差”4 種。評(píng)價(jià)結(jié)束后，得到評(píng)語(yǔ)集{優(yōu)，良，中，差}。實(shí)際評(píng)價(jià)結(jié)果為：

C1：8 人為優(yōu)，3 人為良；

C2：7 人為優(yōu)，3 人為良，1 人為中；

C3：4 人為優(yōu)，4 人為良，3 人為中。

根據(jù)專家評(píng)分結(jié)果構(gòu)建評(píng)價(jià)決策矩陣(R)：

然后引入權(quán)重系數(shù)(A)，與評(píng)價(jià)決策矩陣進(jìn)行合成預(yù)算得到最終的模糊評(píng)價(jià)結(jié)果(B)：

綜合一致性檢驗(yàn)結(jié)果與模糊評(píng)價(jià)結(jié)果，本次基于動(dòng)態(tài)語(yǔ)義的互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計(jì)方案有效并可靠，評(píng)價(jià)結(jié)果無(wú)差評(píng)，總體優(yōu)秀。

4 結(jié)論

互聯(lián)網(wǎng)時(shí)代，基于智能手機(jī)的產(chǎn)品開(kāi)發(fā)周期進(jìn)一步縮短，互聯(lián)網(wǎng)產(chǎn)品的競(jìng)爭(zhēng)更加激烈。雖然產(chǎn)品迭代速度較快，但是并非所有新產(chǎn)品都能夠被用戶所接受。在產(chǎn)品開(kāi)發(fā)設(shè)計(jì)中，運(yùn)用動(dòng)態(tài)語(yǔ)義交互設(shè)計(jì)可以顯著提升產(chǎn)品操作體驗(yàn)，并且降低了用戶對(duì)新產(chǎn)品操作的學(xué)習(xí)成本。因此這類互聯(lián)網(wǎng)產(chǎn)品更容易獲得用戶的青睞，也更容易取得市場(chǎng)競(jìng)爭(zhēng)優(yōu)勢(shì)?；趧?dòng)態(tài)語(yǔ)義理論開(kāi)展互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計(jì)時(shí)，應(yīng)重點(diǎn)做好用戶測(cè)試插件、用戶測(cè)試平臺(tái)的需求分析，在了解需求的前提下進(jìn)一步開(kāi)發(fā)產(chǎn)品的功能。對(duì)設(shè)計(jì)方案還要進(jìn)行模糊評(píng)價(jià)，判斷最終設(shè)計(jì)結(jié)果的有效性、可靠性是否達(dá)到預(yù)期。如果未能達(dá)到理想預(yù)期，還需要根據(jù)反饋信息、評(píng)價(jià)結(jié)果不斷優(yōu)化設(shè)計(jì)，直到得到滿意的最終設(shè)計(jì)方案。