觸控式航海模擬器人機交互系統優化設計

符 斌，任鴻翔，李小濤

(大連海事大學 航海動態仿真和控制交通行業重點實驗室，遼寧 大連 116026)

觸控式航海模擬器人機交互系統優化設計

符 斌，任鴻翔，李小濤

(大連海事大學 航海動態仿真和控制交通行業重點實驗室，遼寧 大連 116026)

觸控操作便捷高效，已成為下一代船舶駕駛臺操控的趨勢，為適應實船操控的發展，提高船員培訓效率，節約培訓成本，減少硬件人機交互系統損耗的目的，在航海模擬器中很有必要開發觸控式人機交互系統。以V.Dragon-4000 型航海模擬器硬件人機交互系統為參考，采用 WPF 框架搭建軟件人機交互系統界面，運用 C# 語言后臺編寫邏輯實現交互功能。優化設計的觸控式人機交互系統操作靈敏、形象逼真，且可以根據操作需要改變界面大小，經接入到航海模擬器進行檢驗，可以替代硬件人機交互系統在航海模擬器中使用。與原有交互系統進行比較，該交互系統可以提高航海模擬器的運行效率。

航海模擬器；人機交互系統；觸控操作；模塊化；邏輯關系

0 引 言

根據 STCW78/95 公約及其馬尼拉修正案關于使用模擬器進行的適任評估和持續熟練程度的訓練要求，船舶操縱模擬器在船員培訓及評估方面的地位更加突出[1 – 2]。另外，在港口和航道的開發應用、通航論證及事故調查分析等方面，船舶操縱模擬器也有著廣泛的應用[3 – 4]。然而，目前船舶操縱模擬器人機交互方式仍然采用半仿真設備的形式，操縱人員使用實物操作面板對模擬器進行操作，操作方式比較陳舊。

原有的軟件式人機交互系統基于 MFC 框架開發而成，可以通過鼠標點擊軟面板的方式實現交互，也可以利用半仿真硬件面板的按鍵操作實現，前者利用鼠標操作不夠靈活，且不能根據操作需要改變界面大小，后者利用按鍵操作硬件設備容易老化。隨著電子觸控技術的成熟和觸摸屏幕價格的降低，觸控電子產品越來越多[5]，觸控操作界面友好、反應靈敏，已成為下一代船舶駕駛臺操控的趨勢，因此，很有必要在模擬器中用軟件觸控式人機交互系統取代硬件交互系統，從而提高航海模擬器的使用效率。

1 傳統船舶操縱模擬器人機交互面板組成及功能

以 V.Dragon-4000 型航海模擬器為例，其硬件人機交互系統主要由 13 個交互單元組成，部分原有軟件式交互系統如圖 1 所示。操作人員通過操縱不同的交互單元來操控相應的航行設備（車、舵、錨、纜、拖輪的操作；航行燈及信號燈的操作；各種聲號的操作；航行輔助信息顯示等），操作時選擇不同的控制選項，集成電路將該選項的電平信號傳入到微機處理器后轉化成相應的控制指令傳入到模擬器的數據接口，進而控制船舶的航行狀態，在鍵入選項的同時，電路板上的燈管發出相應的燈光變化提示操作人員當前已選擇的指令。

2 觸控式人機交互界面的設計

2.1 用戶體驗設計

用戶體驗包括信息架構、內容文本、視覺設計、交互設計等[6]。人機交互界面的用戶體驗，包含了用戶的主觀感受、動機、價值觀等方面。好的人機交互界面便于理解且操作簡單，使用戶在使用時能感到愉快，提高使用效率。同時，在界面設計中要考慮人的喜好和使用習慣，使界面設計中有更多人們所期望的元素，實現人機完美結合。如果人機界面和用戶之間一對一的交互方式并不方便或者不令人愉快，那么這一缺陷會毀掉整個系統的性能。

船舶操縱模擬器的用戶主要是海事院校的老師、學生以及參加培訓評估的社會船員。這些用戶群體存在年齡、學歷及航海實踐經歷的差別等。充分考慮了這些差別，結合航海操作實踐，借鑒手機觸屏的交互方式，完成觸控式人機交互界面用戶體驗設計。如操作界面之間采用滑動觸摸屏的方式進行翻頁切換；在觸摸屏上做拉伸縮放手勢實現界面大小的變化等。交互界面背景顏色選取淡藍色，有助于用戶在長時間進行操作時減緩視力疲勞；按鈕報警閃爍提示顏色選取紅色，有助于引起操作人員的注意力，起到較好的警示作用。

2.2 總體設計方案

模擬器人機交互系統是操縱人員使用最多的設備，人機交互界面的設計有三大原則，分別是：保持界面的一致性、提供信息反饋和界面操作的便捷性[7]。觸控式人機交互系統設計主要從界面布局、風格設計和功能實現 3 個方面來增強人機交互界面的友好性和靈活性，使用戶在使用觸控式人機交互界面時能夠通過熟悉的半仿真操作面板來使用新產品。整體設計流程如圖 2 所示。

觸控式人機交互系統采用模塊化的設計思想[8]，將模擬器整個人機交互系統劃分為若干基本功能控制單元，再將各個控制單元進行有機組合。如圖 3 所示，將整個人機交互系統拆分為 4 個模塊，每個模塊框架下有相應的操作單元。在程序設計的過程中，每個單元獨立編譯成 DLL（動態鏈接庫），然后通過引用DLL 將基本功能單元引入到相應的模塊框架中[9]。此方法利于每個基本功能單元獨立運行，并且可以避免當某個控制單元出現錯誤時而導致整個人機交互系統故障，利于故障的排查和程序的修改。

2.3 實現

2.3.1 開發平臺及開發語言

觸控式人機交互系統是在 Microsoft .NET Framework 4.5 環境下，在 Visual Studio 2013 開發平臺上，采用 WPF（Windows Presentation Foundation）技術，使用XAML 和 C# 程序設計語言開發。

WPF 具有強大的圖形用戶控制功能和多種編程模式，適于多種數據訪問接口，方便模擬器的系統集成與數據傳輸。采用 WPF 技術設計人機交互系統需要使用 XAML 和 C# 程序設計語言，XAML 語言用于觸控式人機交互系統界面布局和外觀設計，該方法可使系統界面根據操作需求進行拉伸縮放而不出現變形。C#語言用于實現觸控式航海模擬器人機交互系統的復雜邏輯控制，將輸入指令數據寫入到相應的事件函數中，在觸發指令時供模擬器數據接口訪問。這種前臺界面代碼和后臺邏輯代碼的分離，使得系統在運行時不容易出現錯誤[10 – 12]。

2.3.2 技術細節

1）按鈕的實現。在 App.xaml 中編寫自定義用戶Button 控件模板，在模板中分層次放 2 個矩形，利用Banding 將最底層矩形的填充色與按鈕背景色（Background）和前景色（Foreground）相綁定，運用 Path 復合路徑生成的代碼作為按鈕的 Content 屬性來顯示按鈕上的圖形[13]，同時在邏輯層寫入點擊事件。最后完成按鈕的效果，即點擊按鈕時邊框和表面字體發生顏色的變化。

2）旋鈕的實現。在項目里添加用戶控件（User-Control），創建旋鈕（Knob）控件，給自定義旋鈕添加旋轉的依賴屬性，利用極坐標的計算方法來計算旋鈕旋轉的角度。旋鈕在創建時將 Canvas.Background 屬性設置為圖片路徑，將所需圖片放入，旋鈕可以設置為有極（轉動 360 °）和無極（循環轉動）的 2 種轉動方式，通過手勢在觸屏上控制旋轉操作旋鈕轉動。

3）LED 數碼管的實現。在 WPF 中用自定義用戶控件來制作 LED 數碼管，通過定義了此控件的依賴屬性[10]，并將模擬器的數據接口與其輸出顯示值綁定，能達到硬件 LED 數碼管的顯示效果。

4）船形的實現。利用 WPF 中 Path 復合路徑的方法，在窗體中繪制光滑的船形圖[13]。

5）進度條的實現。創建自定義進度條，運用Blend 設計器設計進度條外觀，并定義了其所需要的依賴屬性[10]，并且將進度條所要顯示的數據與該依賴屬性綁定，從而來滿足動態的顯示效果。

2.3.3 與船舶操縱模擬器的接口實現

船舶操縱模擬器的開放接口由 C++ 語言編寫而成，由于觸控式人機交互系統開發采用 C# 語言編寫，是一種托管代碼，編譯生成微軟的中間語言，而模擬器的接口 C++ 代碼編譯生成本地機器碼，這 2 種語言實現對接就存在一定的困難。具體實現方法為：在交互界面的 C# 中使用托管 C++ 接口，調用本地 C++ 的類和函數，同時通過托管 C++ 程序集嵌套模擬器本地C++ 編譯的機器碼，與模擬器接口構成了混合體，實現了和模擬器接口對接。

2.3.4 人機交互界面實現

根據整體設計方案，將側推、車舵、螺距操作進行有機組合，利用側推控制單元操作船舶旋轉，實驗中通過對該人機交互系統進行操作，操作指令與模擬器數據接口進行傳輸，船舶可以實現旋轉運動，界面設計效果如圖 4 所示。界面上的按鈕、旋鈕、LED 數碼管等的交互按照技術細節中的實現方法，結合船舶操縱模擬器的具體要求，完成交互功能。

Tug Control 控制單元由 14 個拖輪位置點選擇按鈕（在船形四周的按鈕）、4 個拖輪馬力控制按鈕、7 個拖輪速度控制按鈕、確認按鈕、釋放拖輪按鈕及船形和角度選擇按鈕等組成。

界面背景色選擇為藍色，每個按鈕的基礎顏色為黃色，當被觸發后顏色變為綠色或紅色。每個按鍵按下后的邏輯關系如圖 5 所示。Tug Control 控制單元的實現效果如圖 6 所示，其余 12 個交互單元實現具有類似效果。

面板觸控邏輯關系說明如下。初始狀態時只有位置按鈕可操作（黃色），操作人員點擊位置按鈕選擇拖輪的位置，隨后可選擇拖輪馬力、速度、拖輪作用角度（左 90 °～右 90 °）之后，最后點擊 YES 鍵進行確認，完成一條拖輪的操作。當有拖輪位置鍵被選中時，按下彈起 LET GO，該位置上的拖輪被釋放，按下彈起 ALL LET GO 按鈕時，所有位置點上的拖輪被釋放。

2.4 與原有模擬器人機交互方式比較

原有的半仿真式人機交互界面分布在綜合船橋的各個部位，操作人員對某控制單元操作時需要在船橋的操縱臺上找到相應的交互面板，在一定程度上分散操作人員的注意力。并且交互界面上的實體控件會隨著操作次數的疊加而產生老化，容易出現操作不靈敏的故障。

原有基于 MFC 開發的對話框式的人機交互界面（見圖 7 ），通過鼠標點擊和鍵盤輸入進行交互，鼠標是非直接的輸入方式，操作平臺和輸出界面是分離的，交互速度也較慢，鼠標移動的方向和顯示屏上光標移動的方向不能體現操作時的控件的變化過程，使交互枯燥乏味，影響整個系統的性能。并且界面比較單一，不夠形象生動，交互界面大小固定，缺乏靈活性。

觸控式人機交互系統交互操作在觸摸屏上進行，可以將所有交互界面集中放置在一起操作，根據操作需求進行控制單元之間的切換和改變界面的大小。由人機交互界面實現效果圖可以看出，交互界面是參照實體控件外觀設計的，保留了原有操作邏輯，可以模擬實體控件的操作反應過程；與此同時，在界面顏色搭配及布局上做出相應的改變，開發出的圖形用戶界面生動形象，交互時帶給操作人員良好的視覺效果，在一定程度上實現人機的完美結合。

3 結 語

觸控式航海模擬器人機交互系統是對 V.Dragon-4000 型航海模擬器人機交互系統的交互方式的改變。突出的特點是采用模塊化的編程思想，利用目前較為流行的圖形多媒體交互技術（WPF），開發出了在觸摸屏上進行交互操作的人機交互界面。本觸控式人機交互系統操作靈敏、形象逼真，可根據操作人員的需求任意調整界面的位置和大小，方便靈活。經實驗測試，優化設計的觸控式人機交互系統可以替代電路板式人機交互系統在航海模擬器中使用。

[ 1 ]趙月林, 方文治, 王逢辰. 新的《STCW》公約對航海模擬器的要求[J]. 大連海事大學學報. 1996, 22(04): 6–10.

ZHAO Yue-lin, FANG Wen-zhi, WANG Feng-chen. Requirement on marine simulator by the revised STCW[J]. Journal of Dalian Maritime University. 1996, 22(04): 6–10.

[ 2 ]金一丞, 尹勇. STCW公約馬尼拉修正案下的航海模擬器發展戰略[J]. 中國航海. 2012, 35(3): 5–10.

JIN Yi-cheng, YIN Yong. Development Strategy of Marine Simulator in Light of the Manila Amendmernts to STCW Convention[J]. Navigation of China. 2012, 35(3): 5–10.

[ 3 ]范濟秋. 模擬器在航海教育與培訓中的應用[J]. 航海教育研究, 2007(增刊): 103–104.

FAN Ji-qiu. Application of simulator in maritime education and training[J]. Maritime Education Research, 2007(Supplement): 103–104.

[ 4 ]史方敏, 孫峰. 航海模擬器在航海技能訓練中的應用[J]. 航海教育研究. 2011, (02): 65–68.

SHI Fang-min, SUN Feng. Marine simulator application in navigation skills training[J]. Maritime Education Research, 2011, (02): 65–68.

[ 5 ]呂明, 呂延. 觸摸屏的技術現狀、發展趨勢及市場前景[J].機床電器, 2012, (3): 4–7.

LV Ming, LV Yan. The technology current situation and developing tendency and market of touch –screen[J]. Machine Tool Electric Apparatus, 2012, (3): 4–7.

[ 6 ]單筱秋. 淺議人機交互界面研發中的用戶體驗設計[J]. 南京藝術學院學報, 2013, (6): 181–183.

SHAN Xiao-qiu. Shallow discuss user experience design of HCI interface development[J]. Journal of Nanjing College of Art, 2013, (6): 181–183.

[ 7 ]胡杰明. 數碼產品人機交互界面研究[J]. 包裝工程, 2014, 35(18): 61–63.

HU Jie-ming. Human-computer interaction interface of digital products[J]. Packaging Engineering, 2014, 35(18): 61–63.

[ 8 ]張偉. 基于模塊化的船舶控制臺設計[J]. 自動化與儀器儀表, 2013(4): 66–68.

ZHANG Wei. Design of ship console based on Modularization[J]. Automation & Instrumenttation, 2013(4): 66–68.

[ 9 ]齊立波, Watson. C#入門經典(第6版)[M]. 北京: 清華大學出版社, 2014.

QI Li-bo, Watson. C# entry classic (Sixth edition)[M]. Beijing: Tsinghua University Press, 2014.

[10]劉鐵錳. 深入淺出WPF[M]. 北京: 中國水利水電出版社, 2010.

LIU Tie-meng. Layman WPF[M]. Beijing: China Water Conservancy and Hydropower Publishing House, 2010.

[11]王鑫, 鄧宏彬. 基于WPF技術的無人機地面指揮控制站的設計與實現[Z]. 重慶: 2014: 102–110.

WANG Xin, DENG Hong-bin. Design and implementation of UAV Ground console station based on WPF Technology[Z]. Chongqi: 2014: 102–110.

[12]李方芳, 趙旭東, 盧偉文, 等. 基于WPF的通用可配置式教員控制臺軟件引擎研發[J]. 系統仿真學報, 2013, 25(8): 1761–1765.

LI Fang-wei, ZHAO Xu-dong, Lu Wei-wen, et al. Development of All-purpose and Configurable IOS Software Engine Based on WPF[J]. Journal of System Simulation, 2013, 25(8): 1761–1765.

[13]孟冬梅, 張洪定. 基于Expression Blend 4中文版WPF和Silverlight項目設計基礎[M]. 北京: 清華大學出版社, 2011.

Optimal design of touch-sensitive human-computer interaction of ship maneuvering simulator

FU Bin, REN Hong-xiang, LI Xiao-tao
(Key Laboratory of Marine Simulation and Control for Ministry of Communications, Dalian Maritime University, Dalian 116026, China)

Touch operation is convenient and efficient, it has become the trend of next generation of ship bridge manoeuvre. In order to adapt the development of ship operation, improve crew training efficiency, save training costs and reduce ullage of hardware human-computer interaction, it is necessary to exploit a touch-sensitive human-computer interaction of ship maneuvering simulator. Reference to the hardware human-computer interaction of V.Dragon-4000 ship maneuvering simulator, built the User Interface of software human-computer interaction by using WPF framework, and achieved the interactive function by using C# Language to write the background logical program. The operation to the exploitative touch-sensitive human-computer interaction is sensitive, the display is vivid and can be changed the size of interface according operation need. It is proven by combined it with ship maneuvering simulator that it can be used in ship maneuvering simulator to replace hardware human-computer interaction. Which can improve the operational efficiency of ship maneuvering simulator after compared with primary human-computer interaction.

ship maneuvering simulator；human-computer interaction；touch operation；modularization；logical relationship

TP391

A

1672 – 7619(2017)06 – 0110 – 05

10.3404/j.issn.1672 – 7619.2017.06.022

2016 – 07 – 20；

2016 – 10 – 20

國家863課題資助項目(2015AA016404)；海洋公益性行業科研專項資助項目(201505017-4)；交通運輸部應用基礎研究資助項目(2015329225240)；中央高校基本科研業務費資助項目(3132016324)

符斌(1991 – )，男，碩士研究生，主要研究方向為人工智能、虛擬現實。