數(shù)字印刷媒體終端設(shè)備的UI設(shè)計(jì)與實(shí)現(xiàn)

江靜嵐，佘俊偉，楊展鵬

（1.柳州鐵道職業(yè)技術(shù)學(xué)院，柳州 545616；2.廣西民族大學(xué)相思湖學(xué)院，南寧 530008）

0 引言

數(shù)字印刷是一種將圖文信息通過(guò)網(wǎng)絡(luò)直接傳送到數(shù)碼印刷機(jī)的新型印刷技術(shù)。隨著印刷業(yè)的迅猛發(fā)展，數(shù)字印刷媒體終端設(shè)備也隨之產(chǎn)生。印刷品是媒介，是廣告的載體，主要用于展示印刷品的信息，控制印刷品的整體布局。數(shù)字印刷媒體終端設(shè)備的UI設(shè)計(jì)也就是人機(jī)交互、操作邏輯、界面美觀的整體界面設(shè)計(jì)，人機(jī)交互界面的設(shè)計(jì)與實(shí)現(xiàn)在印刷工作人員和終端設(shè)備之間形成了一個(gè)雙向交互的橋梁，用戶可以通過(guò)操控終端界面，完成組合文字、添加圖形、控制印刷進(jìn)程等處理任務(wù)以及管理功能。目前中國(guó)的數(shù)字印刷媒體終端設(shè)備界面正處于發(fā)展期，為了滿足不同用戶的不同要求，需要在運(yùn)行終端建立多個(gè)服務(wù)內(nèi)容，并設(shè)置多個(gè)方面的技術(shù)標(biāo)準(zhǔn)。與此同時(shí)中國(guó)印刷行業(yè)中，運(yùn)行設(shè)備界面的設(shè)計(jì)也呈現(xiàn)出網(wǎng)絡(luò)化、智能化的發(fā)展趨勢(shì)，對(duì)媒體終端設(shè)備的功能性和美觀性提出了更高的要求。然而從目前的發(fā)展情況來(lái)看，中國(guó)媒體終端設(shè)備界面設(shè)計(jì)主要針對(duì)的是視聽(tīng)媒體，且研究成果普遍存在成本高、用戶滿意度低、容錯(cuò)性能差的問(wèn)題，因此需要以數(shù)字印刷媒體終端作為研究對(duì)象，以滿足用戶需求為目標(biāo)，實(shí)現(xiàn)對(duì)終端設(shè)備的UI設(shè)計(jì)。

1 數(shù)字印刷媒體終端設(shè)備UI設(shè)計(jì)

在終端設(shè)備特性的支持下，依據(jù)操作人員的視覺(jué)特性以及印刷操作的基本步驟習(xí)慣，逐步細(xì)化界面元素，具體的終端設(shè)備UI設(shè)計(jì)模式如圖1所示。

在設(shè)備界面設(shè)計(jì)過(guò)程中加入多個(gè)元素進(jìn)行量化分析，間接的提升設(shè)備UI設(shè)計(jì)結(jié)果的可用性。另外在設(shè)計(jì)終端顯示界面時(shí)，不僅要考慮成本和美觀性，還要將顯示界面在實(shí)際操作中的復(fù)雜程度考慮其中，因此要求UI設(shè)計(jì)遵循高頻率操作優(yōu)先、容錯(cuò)以及操作簡(jiǎn)單合理的原則。

1.1 構(gòu)建數(shù)字印刷用戶認(rèn)知模型

針對(duì)數(shù)字印刷設(shè)備的使用用戶可以分為初級(jí)用戶、中級(jí)用戶和高級(jí)用戶三種類(lèi)型，其中初級(jí)用戶也就是新手用戶，缺少使用數(shù)字印刷終端設(shè)備的經(jīng)驗(yàn)，因此在設(shè)計(jì)人機(jī)界面時(shí)應(yīng)盡可能符合大多數(shù)終端設(shè)備的規(guī)則，減少學(xué)習(xí)的時(shí)間和負(fù)擔(dān)，降低操作錯(cuò)誤的發(fā)生概率。對(duì)于中級(jí)用戶而言，基本了解了數(shù)字印刷設(shè)備的基本操作規(guī)律和運(yùn)行特點(diǎn)，可以完成一般的印刷工作任務(wù)。而高級(jí)用戶不僅了解對(duì)印刷設(shè)備的基本操作，同時(shí)也了解印刷終端設(shè)備的內(nèi)部工作原理和結(jié)構(gòu)。在UI設(shè)計(jì)過(guò)程中需要考慮上述多種用戶的應(yīng)用需求，遵循引導(dǎo)性、視覺(jué)嚴(yán)謹(jǐn)性原則，保證UI界面的操作專(zhuān)業(yè)化特征。用戶認(rèn)知能力受到信息量和信息質(zhì)量、經(jīng)驗(yàn)、環(huán)境以及目標(biāo)的影響，同時(shí)在數(shù)字印刷用戶界面中，用戶的認(rèn)知對(duì)操作行為的影響又取決于需求的場(chǎng)景，用戶界面中的認(rèn)知過(guò)程如圖2所示。

圖2 用戶界面認(rèn)知流程圖

用戶界面中的用戶情景認(rèn)知是情境感知推理的主要依據(jù)，同時(shí)也是對(duì)用戶體驗(yàn)研究的主要參考。從圖2中可以看出，數(shù)字印刷媒體終端設(shè)備界面中的用戶認(rèn)知可以分為用戶情境與對(duì)用戶認(rèn)知起到影響作用的需求場(chǎng)景兩個(gè)部分，針對(duì)不同的類(lèi)型的用戶建立相應(yīng)的角色模型。在用戶認(rèn)知模型中實(shí)現(xiàn)對(duì)用戶需求的分析，用戶的需求包括操作用戶、終端設(shè)備、應(yīng)用環(huán)境的行為關(guān)系需要，從功能性和非功能性?xún)蓚€(gè)部分得出用戶需求分析結(jié)果，并以滿足用戶需求為目的，完成終端設(shè)備的界面設(shè)計(jì)。

1.2 設(shè)備界面布局設(shè)計(jì)

結(jié)合數(shù)字印刷用戶認(rèn)知模型對(duì)用戶需求的分析結(jié)果，綜合應(yīng)用造型要素和形式原則，將圖形、顏色、排版、字體等元素進(jìn)行科學(xué)合理的規(guī)劃，實(shí)現(xiàn)對(duì)數(shù)字印刷媒體終端設(shè)備界面布局的設(shè)計(jì)。根據(jù)用戶在不同操作區(qū)域手部運(yùn)動(dòng)的方向和距離對(duì)操作效率的影響，同時(shí)平衡操作舒適性和操作頻率之間的關(guān)系，將數(shù)字印刷媒體終端設(shè)備的信息輸入界面設(shè)置在機(jī)器右側(cè)區(qū)間[30°，60°]內(nèi)為宜，操作速率和操作方向之間的關(guān)系如圖3所示。

圖3 操作速率和操作方向的關(guān)系圖

另外良好的UI設(shè)計(jì)還需要考慮用戶實(shí)現(xiàn)印刷任務(wù)的操作流程與設(shè)備的交互動(dòng)作問(wèn)題，有利于用戶完成印刷任務(wù)，并得到良好的用戶體驗(yàn)。

1.2.1 設(shè)定界面尺寸

明確硬件設(shè)備型號(hào)，根據(jù)印刷紙張鎖定界面尺寸。最終界面尺寸的設(shè)定結(jié)果為：

式中ηq和ηc分別表示的是人體尺寸分位數(shù)和功能修正量。

1.2.2 界面圖形設(shè)計(jì)

對(duì)圖像進(jìn)行高光、柔化、羽化、添加浮雕等處理，在提升圖像表現(xiàn)效果的同時(shí)增多圖像細(xì)節(jié)。根據(jù)人類(lèi)工效學(xué)理論，界面圖標(biāo)盡量使用形象圖標(biāo)，且圖標(biāo)比例滿足如下關(guān)系式：

其中Sprospects和Sbackground對(duì)應(yīng)的是圖標(biāo)前景和背景的面積。

1.2.3 選擇界面顏色

數(shù)字印刷媒體終端設(shè)備的界面顏色可分為前景色和背景色兩部分。為了防止用戶操作印刷機(jī)時(shí)底圖的干擾，使其難以分辨，應(yīng)盡量保證前景色的對(duì)比度，前景色對(duì)用戶敏感，背景色對(duì)用戶不敏感，色調(diào)應(yīng)適當(dāng)越軟越好。因此，對(duì)于景物的選擇，藍(lán)、紅、綠、黃、黑比較合適，而黃、黑、藍(lán)、綠、白等景物比較適合選擇；在使用這些顏色時(shí)，色彩的飽和度要達(dá)到100%。

1.2.4 界面字體與排版

選用常用的宋體、楷體等字體，緩解操作人員出現(xiàn)視覺(jué)擁擠的現(xiàn)象。增加字距和字距有利于提高操作人員的閱讀效率，將界面字體控制在[13pt，24pt]之間，字距應(yīng)保持在2.0～6.0pt內(nèi)。

1.3 加設(shè)設(shè)備動(dòng)態(tài)菜單

動(dòng)態(tài)菜單的設(shè)計(jì)解決了傳統(tǒng)界面印刷操作列表不可變的缺陷，實(shí)現(xiàn)媒體的交互與呈現(xiàn)。印刷設(shè)備動(dòng)態(tài)菜單可以分為基本菜單和頻道菜單兩個(gè)部分，其中基礎(chǔ)菜單說(shuō)明了數(shù)字印刷媒體終端設(shè)備的型號(hào)以及當(dāng)前運(yùn)行狀態(tài)，設(shè)備可以通過(guò)檢測(cè)是否存在印刷任務(wù)以及印刷任務(wù)的完成進(jìn)程，確定當(dāng)前的運(yùn)行狀態(tài)，并通過(guò)基本動(dòng)態(tài)菜單輸出。若基本動(dòng)態(tài)菜單顯示設(shè)備處于運(yùn)行狀態(tài)，則鎖定當(dāng)前菜單欄，無(wú)法添加新的印刷任務(wù)。而頻道動(dòng)態(tài)菜單主要用來(lái)顯示數(shù)字印刷媒體終端設(shè)備的使用功能，例如查看、排版、打印等。

1.4 設(shè)定數(shù)字印刷媒體終端設(shè)備面板控件

主面板控件設(shè)定的目的是為界面實(shí)現(xiàn)人機(jī)交互功能提供觸發(fā)接口，在UI設(shè)計(jì)中設(shè)計(jì)人機(jī)交互的方式包括直接觸屏、鼠標(biāo)觸發(fā)以及鍵盤(pán)觸發(fā)三種。其中直接觸屏需要利用終端硬件設(shè)備上的屏幕，通過(guò)溫感和壓感檢測(cè)，確定用戶的觸屏位置，并執(zhí)行相應(yīng)的印刷操作。而鼠標(biāo)觸發(fā)和鍵盤(pán)觸發(fā)，必須注冊(cè) KeyDown事件，檢測(cè)所按按鈕的 ASCII值，并做出行動(dòng)判斷?！癒eyRepeat”指連續(xù)發(fā)生諸如按住按鈕不放等事件的注冊(cè)。接下來(lái)是各個(gè)控件的“ValueChange”事件，表1中顯示了其具體設(shè)置。

表1 主面板控件注冊(cè)參數(shù)表

1.5 實(shí)現(xiàn)終端設(shè)備界面人機(jī)交互功能

在設(shè)計(jì)的靜態(tài)UI界面上，利用設(shè)定的面板控件，實(shí)現(xiàn)人機(jī)交互功能。首先在靜態(tài)界面上生成用戶手指到界面虛擬手指的運(yùn)動(dòng)映射，通過(guò)用戶手指位置的實(shí)時(shí)跟蹤，得到對(duì)應(yīng)的界面觸屏位置，獲得用戶的交互指令信息。以界面上發(fā)射器的位置為虛擬空間的坐標(biāo)原點(diǎn)，發(fā)射器接電源的一側(cè)指向用戶，得出用戶的實(shí)際操作空間和生成的虛擬操作空間，如圖4所示。

圖4 實(shí)際操作空間與虛擬操作空間示意圖

運(yùn)用計(jì)算機(jī)圖形學(xué)矩陣變換，實(shí)現(xiàn)兩個(gè)空間之間的相互轉(zhuǎn)換。通過(guò)數(shù)字印刷媒體終端設(shè)備顯示器上的壓感與溫感設(shè)備，確定操作用戶手指的實(shí)際觸碰位置，結(jié)合兩個(gè)空間的映射關(guān)系，得出虛擬空間中的相應(yīng)位置。若得出的位置坐標(biāo)與控件的設(shè)定位置重合，則觸發(fā)該控件，執(zhí)行相應(yīng)的交互任務(wù)。然而在界面人機(jī)交互過(guò)程中，用戶可能會(huì)出現(xiàn)在屏幕上觸碰但不點(diǎn)擊的情況，因此在面板控件控制的同時(shí)，還需要嵌入一個(gè)碰撞檢測(cè)程序。碰撞檢測(cè)的目的是檢測(cè)印刷界面虛擬場(chǎng)景中不同物體之間是否發(fā)生碰撞，以及碰撞的具體參數(shù)，以此來(lái)判斷是否存在交互觸發(fā)指令。確定參與碰撞的幾何形狀，檢查幾何形狀之間分離的時(shí)間點(diǎn)，若時(shí)間點(diǎn)上交集為空，則判定未發(fā)生碰撞事件，即無(wú)交互輸入指令。在完成指令觸發(fā)和碰撞檢測(cè)后，按照觸發(fā)和碰撞位置執(zhí)行任務(wù)，包括啟動(dòng)印刷、暫停印刷、印版更換、墨量控制等，由此完成終端設(shè)備界面人機(jī)交互操作。

1.6 數(shù)字印刷媒體終端設(shè)備界面渲染輸出

根據(jù)印刷媒體終端顯示設(shè)備傳達(dá)界面的設(shè)計(jì)結(jié)果以及機(jī)器的運(yùn)行狀態(tài)，界面分別從視覺(jué)、聽(tīng)覺(jué)和觸覺(jué)三個(gè)方面進(jìn)行渲染輸出，其中視覺(jué)也就是包含布局、色彩、形狀、文字等內(nèi)容的靜態(tài)圖像輸出，聽(tīng)覺(jué)則根據(jù)印刷任務(wù)的完成情況發(fā)出相應(yīng)的提示音，而觸覺(jué)輸出就是在硬件設(shè)備的支持下，保證面板控件程序的正常運(yùn)行。采用樹(shù)形的數(shù)據(jù)結(jié)構(gòu)管理UI場(chǎng)景及組成場(chǎng)景的節(jié)點(diǎn)，在渲染不同節(jié)點(diǎn)時(shí)設(shè)置不同的渲染狀態(tài)，具體的渲染過(guò)程如圖5所示。

圖5 數(shù)字印刷媒體終端設(shè)備界面渲染流程圖

采用界面場(chǎng)景選取、投影剔除和隱藏面剔除等方法，提高了渲染效率，避免了不必要的渲染模型，同時(shí)忽略不會(huì)被渲染的幾何體。另外分別從目標(biāo)亮度、環(huán)境照明以及屏面尺寸等方面，約束輸出參數(shù)。根據(jù)印刷媒體終端的操作習(xí)慣，將屏面輸出尺寸控制在1080×640以上。輸出界面只要保證足夠亮度和對(duì)比度即可，因此設(shè)置輸出界面目標(biāo)亮度的默認(rèn)值為65cd/m2。

2 對(duì)比實(shí)驗(yàn)分析

以測(cè)試數(shù)字印刷媒體終端設(shè)備的UI設(shè)計(jì)效果為目的，設(shè)計(jì)對(duì)比實(shí)驗(yàn)，并分別從多個(gè)方面測(cè)試UI設(shè)計(jì)結(jié)果在數(shù)字印刷媒體終端設(shè)備上的應(yīng)用優(yōu)勢(shì)。

2.1 選擇數(shù)字印刷媒體終端設(shè)備

實(shí)驗(yàn)選擇JP4P550V數(shù)字印刷機(jī)作為媒體終端設(shè)備，從外觀上看該設(shè)備自帶一個(gè)顯示屏，能夠支持UI設(shè)計(jì)結(jié)果的運(yùn)行。選擇的印刷終端設(shè)備的工作流程可以分為印前設(shè)置、印刷中和印后處理三個(gè)步驟，上述三個(gè)步驟通過(guò)給紙模塊、印刷模塊、收紙模塊協(xié)同完成，每個(gè)模塊元件都需要自動(dòng)化控制，同時(shí)也需要在觸摸屏UI界面中得以實(shí)現(xiàn)的部分。

2.2 配置UI設(shè)計(jì)與實(shí)現(xiàn)環(huán)境

UI設(shè)計(jì)方法的開(kāi)發(fā)工具包括Cocos Code IDE、Adobe Illustrator、Mysql數(shù)據(jù)庫(kù)和Tomcat服務(wù)器，且要求選擇的數(shù)字印刷媒體終端設(shè)備能夠支持網(wǎng)絡(luò)訪問(wèn)。開(kāi)發(fā)工具中Cocos Code IDE主要用來(lái)作為數(shù)字印刷虛擬空間的集成開(kāi)發(fā)環(huán)境，包括印刷程序的編碼、調(diào)試和發(fā)布功能。Adobe Illustrator為一個(gè)圖形處理工具，可以實(shí)現(xiàn)圖像和文字的處理，在實(shí)驗(yàn)中主要用來(lái)調(diào)整打印任務(wù)對(duì)象，保證印刷內(nèi)容格式相同。另外Mysql數(shù)據(jù)庫(kù)為實(shí)驗(yàn)提供充足的印刷數(shù)據(jù)。

2.3 設(shè)置實(shí)驗(yàn)對(duì)比項(xiàng)與測(cè)試指標(biāo)

為了凸顯UI設(shè)計(jì)結(jié)果的運(yùn)行優(yōu)勢(shì)，實(shí)驗(yàn)分別設(shè)置了傳統(tǒng)的UI設(shè)計(jì)方法和基于數(shù)字媒體藝術(shù)的UI設(shè)計(jì)方法作為實(shí)驗(yàn)的兩個(gè)對(duì)比方法。實(shí)驗(yàn)分別從UI設(shè)計(jì)成果的交互功能和應(yīng)用性能兩個(gè)方面進(jìn)行量化測(cè)試，在交互功能測(cè)試過(guò)程中，準(zhǔn)備多個(gè)印刷任務(wù)，并明確印刷的尺寸、色彩等參數(shù)，通過(guò)對(duì)數(shù)字印刷媒體終端設(shè)備界面的操作，觀察設(shè)計(jì)結(jié)果與預(yù)期結(jié)果之間的一致性，若一致則判定該次交互任務(wù)成功完成，否則判定印刷失敗，因此交互功能的運(yùn)行成功率，即為UI設(shè)計(jì)結(jié)果功能的測(cè)試指標(biāo)。而界面設(shè)計(jì)結(jié)果的應(yīng)用性能，也就是UI設(shè)計(jì)方法在數(shù)字印刷媒體終端設(shè)備上的運(yùn)行情況，具體測(cè)試指標(biāo)為用戶體驗(yàn)滿意度。由于數(shù)字印刷機(jī)的操作對(duì)于用戶有一定的系統(tǒng)知識(shí)要求，因此在用戶滿意度的測(cè)試過(guò)程中，將用戶分為專(zhuān)業(yè)組和非專(zhuān)業(yè)組兩個(gè)部分，測(cè)試總?cè)藬?shù)為300人，進(jìn)而得出更加精準(zhǔn)的測(cè)試結(jié)果。

2.4 準(zhǔn)備交互任務(wù)數(shù)據(jù)

實(shí)驗(yàn)中的交互任務(wù)數(shù)據(jù)包括啟動(dòng)印刷指令、印刷布局調(diào)整指令、印刷色彩調(diào)整指令、印刷數(shù)量設(shè)置指令、暫停印刷指令等。數(shù)字印刷內(nèi)容均來(lái)自Mysql數(shù)據(jù)庫(kù)，利用通信網(wǎng)絡(luò)在印刷媒體終端和數(shù)據(jù)庫(kù)之間形成連接，并得出批量印刷數(shù)據(jù)，如圖6所示。

圖6 批量字印刷文件列表

2.5 實(shí)驗(yàn)過(guò)程與結(jié)果分析

為了保證UI設(shè)計(jì)方法的絕對(duì)獨(dú)立性，在三臺(tái)型號(hào)相同的終端設(shè)備上，分別將三種UI設(shè)計(jì)方法導(dǎo)入其中，并得出相應(yīng)的交互操作界面，其中設(shè)計(jì)方法的界面設(shè)計(jì)結(jié)果如圖7所示。

圖7 數(shù)字印刷媒體終端設(shè)備交互界面

將準(zhǔn)備的印刷任務(wù)導(dǎo)入其中，并按照?qǐng)D8界面設(shè)置數(shù)字印刷參數(shù)。

圖8 數(shù)字印刷參數(shù)設(shè)置界面

在實(shí)驗(yàn)過(guò)程中分別對(duì)成功運(yùn)行次數(shù)進(jìn)行統(tǒng)計(jì)，得出交互功能的測(cè)試結(jié)果如表1所示。

表1 數(shù)字印刷媒體終端設(shè)備界面交互功能測(cè)試結(jié)果

通過(guò)對(duì)表1中數(shù)據(jù)的分析可以得出，三種UI設(shè)計(jì)方法下，交互功能的運(yùn)行成功率分別為94.3%、97.7%和99.4%，由此可見(jiàn)設(shè)計(jì)的終端結(jié)果交互功能更優(yōu)。

以調(diào)查問(wèn)卷的方式，整合專(zhuān)業(yè)和非專(zhuān)業(yè)兩個(gè)部分的目標(biāo)用戶，得出用戶滿意度統(tǒng)計(jì)結(jié)果，如表2所示。

表2 用戶體驗(yàn)滿意度調(diào)查統(tǒng)計(jì)表

從表2中可以看出，應(yīng)用三種UI設(shè)計(jì)結(jié)果對(duì)應(yīng)的用戶體驗(yàn)滿意度分別為89.1%、93.8%和98.8%，且在數(shù)字印刷媒體終端設(shè)備上應(yīng)用設(shè)計(jì)的界面，表示不滿意的用戶更少。

3 結(jié)語(yǔ)

綜上所述，通過(guò)對(duì)數(shù)字印刷媒體終端設(shè)備進(jìn)行UI設(shè)計(jì)和實(shí)現(xiàn)，能夠在一定程度上降低印刷操作的復(fù)雜性，為印刷工作提供便利的同時(shí)，提升數(shù)字印刷設(shè)備的工作效率。然而在對(duì)比實(shí)驗(yàn)中僅對(duì)界面的交互性能和用戶滿意度進(jìn)行統(tǒng)計(jì)測(cè)試，未考慮UI設(shè)計(jì)成本，針對(duì)這一點(diǎn)還需要在今后的研究中進(jìn)一步完善。