互聯(lián)網(wǎng)產(chǎn)品動態(tài)語義交互設計及設計結(jié)果驗證

張子涵

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

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

1 基于動態(tài)語義的產(chǎn)品交互設計

1.1 測試插件及測試平臺的需求設計

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

表1 測試插件及測試平臺的需求分析

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

1.2 對“參與測試”功能的交互設計

以用戶測試插件中的“參與測試”為例，對該功能的交互設計流程及技術要點展開分析。交互設計共分為兩個核心步驟，即進入任務執(zhí)行和執(zhí)行用例。

1.2.1 進入任務執(zhí)行

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

圖1 進入任務執(zhí)行/獲得任務交互圖

1.2.2 執(zhí)行用例

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

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

2 互聯(lián)網(wǎng)產(chǎn)品動態(tài)語義的交互設計

2.1 人機交互開發(fā)設計

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

圖3 模塊結(jié)構及關聯(lián)關系

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

2.2 視覺設計

視覺設計除了要達到美化頁面的效果，在優(yōu)化用戶的產(chǎn)品使用體驗等方面也有積極影響。基于視覺設計規(guī)范的界面交互設計主要包含三項內(nèi)容：

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

圖4 插件字體設計圖示

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

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

3 動態(tài)語義交互設計結(jié)果驗證

3.1 構建交互設計方案的層次結(jié)構

基于交互設計方案構建層次結(jié)構，是進行設計方案一致性檢驗和模糊評價的必要前提。劃分為3 個層次，分別是目標層、準則層和措施層，整個層次結(jié)構如圖5 所示。

圖5 交互設計方案的層次結(jié)構

3.2 交互設計方案的評價

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

表2 1-9 標度法

參照1-9 標度表，建立不同層級之間各個因素相較于上一層級的判斷矩陣。以圖5 中的A 目標層和B 準則層為例，B 對A 的判斷矩陣如表3 所示。

表3 B-A 判斷矩陣

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

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

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

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

根據(jù)專家評分結(jié)果構建評價決策矩陣(R)：

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

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

4 結(jié)論

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