SVG矢量圖模擬渲染效果繪制飛機(jī)開(kāi)關(guān)圖解

張叢遠(yuǎn)

DOI：10.16660/j.cnki.1674-098X.2101-5640-4828

摘? 要：本文分析了未來(lái)電子飛行手冊(cè)中飛機(jī)面板插圖的需求特點(diǎn)，以及在飛行類(lèi)手冊(cè)中插入開(kāi)關(guān)圖標(biāo)來(lái)替代純文字描述對(duì)于航空安全的積極意義。介紹了如何用Adobe Illustrator軟件制作SVG格式矢量圖，結(jié)合濾鏡功能的技術(shù)來(lái)繪制飛機(jī)飛行類(lèi)手冊(cè)開(kāi)關(guān)插圖，獲得接近渲染圖的高美觀度、接近矢量圖的高清晰度和低數(shù)據(jù)量，提升客戶(hù)體驗(yàn)的同時(shí)提高飛行手冊(cè)插圖長(zhǎng)期更改維護(hù)的效率。

關(guān)鍵詞：飛行類(lèi)手冊(cè)? 面板插圖? SVG? 飛機(jī)開(kāi)關(guān)

中圖分類(lèi)號(hào)：V19 ? ? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A? ? ? ? ? ? ? ? ? ?文章編號(hào)：1674-098X（2021）03（c）-0012-05

Drawing Aircraft Switch Diagram by SVG Vector Graph Simulation Rendering Effect

ZHANG Congyuan

（Shanghai Aircraft Customer Service Co.，Ltd.， Shanghai， 200241 China）

Abstract： This paper analyses the characters of control panel figure in future electronic flight manual， and the positive significance for flight safety to insert switch symbols replacing pure text description. It introduces how to use Adobe Illustrator software to make SVG vector diagram， combine with filter function to paint switch figure of aircraft flight manual， which can obtain high beauty like rendering， achieve high legibility and low data size like vector diagram. Those world enhance customer experience and efficiency of flight manual figures long term maintenance.

Key Words： Flight manual; Control panel figure; SVG; Aircraft switch

飛行類(lèi)手冊(cè)是飛行員學(xué)習(xí)飛機(jī)系統(tǒng)、掌握特定機(jī)型操作知識(shí)的教科書(shū)，也是飛行員在空中處置應(yīng)急情況時(shí)的重要參考，提升飛行類(lèi)手冊(cè)的查詢(xún)、讀取效果對(duì)于航空安全有著重要意義。

目前已有部分航空公司開(kāi)始使用電子飛行手冊(cè)替代傳統(tǒng)的紙質(zhì)手冊(cè)，這是一種能夠向飛行機(jī)組提供各種手冊(cè)、文件、航圖、航行通告和氣象資料等航行信息的電子設(shè)備[1]。航空界電子閱讀的普及對(duì)插圖等多媒體素材提出了更高的要求，插圖不能只是無(wú)數(shù)像素點(diǎn)構(gòu)成的靜態(tài)圖片，需要更加精致美觀、傳達(dá)更多信息、適應(yīng)更多電子化的應(yīng)用需求。

飛機(jī)駕駛艙中，信息呈現(xiàn)形式直接影響到飛行員的信息獲取，研究表明優(yōu)化信息呈現(xiàn)形式可有效降低飛行員工作負(fù)荷，從而避免飛行員判斷失誤造成航空事故[2]。行業(yè)中曾發(fā)生過(guò)案例：韓亞214航班事故報(bào)告稱(chēng)“波音手冊(cè)中相關(guān)的描述不清晰，加上飛行員訓(xùn)練不足，導(dǎo)致了誤操作”。部分飛行器主制造商已在新機(jī)型手冊(cè)里采用圖標(biāo)描述形式替代純文字描述，可以為飛行學(xué)員留下更強(qiáng)的感性認(rèn)知。飛行員讀取更加直觀，減少讀取和操作的時(shí)間，也降低操作錯(cuò)誤的可能。

1? 制作思路

1.1 面板圖標(biāo)特點(diǎn)

未來(lái)電子化飛行時(shí)代，電子飛行手冊(cè)換版將采用XML代碼形式交付。飛行員等用戶(hù)需要查閱手冊(cè)時(shí)，會(huì)使用機(jī)載EFB設(shè)備在線(xiàn)下載或讀取本地XML文件，系統(tǒng)會(huì)將源代碼發(fā)布成電子手冊(cè)版面[1]（類(lèi)似于瀏覽網(wǎng)頁(yè)的原理）。

因此插入開(kāi)關(guān)圖標(biāo)跟普通插圖有很大的區(qū)別：

數(shù)量大：一架飛機(jī)共有100多個(gè)開(kāi)關(guān)，每個(gè)開(kāi)關(guān)還有兩三種不同的狀態(tài)，部分內(nèi)容在一個(gè)頁(yè)面里包含數(shù)十個(gè)開(kāi)關(guān)狀態(tài)描述。

尺寸?。簣D標(biāo)尺寸不宜過(guò)大，否則行距過(guò)大，幅面空白過(guò)多，影響閱讀體驗(yàn)。

清晰度要求高：在圖標(biāo)尺寸小的同時(shí)，還要保證開(kāi)關(guān)上的字符和指示燈可以清晰閱覽，要求圖片有高清晰度。

以上三點(diǎn)都會(huì)導(dǎo)致數(shù)據(jù)量極大增加。若數(shù)據(jù)量過(guò)于龐大，則會(huì)導(dǎo)致瀏覽客戶(hù)端卡滯、內(nèi)容刷新緩慢、圖片顯示不出來(lái)，不僅影響用戶(hù)體驗(yàn)，還可能延誤飛行員空中應(yīng)急處置。

1.2 圖標(biāo)繪制要求

某型號(hào)飛機(jī)駕駛艙面板上共有常用開(kāi)關(guān)250多個(gè)，按照制造采用的元件分類(lèi)可分為：按壓開(kāi)關(guān)56個(gè)、帶保護(hù)蓋的按壓開(kāi)關(guān)24個(gè)、旋轉(zhuǎn)開(kāi)關(guān)25個(gè)、撥動(dòng)開(kāi)關(guān)10個(gè)、帶保護(hù)蓋的撥動(dòng)開(kāi)關(guān)3個(gè)、各類(lèi)旋鈕70多個(gè)、各類(lèi)按鍵100多個(gè)，另有推力桿、襟縫翼手柄等特殊外形的操作對(duì)象。同一開(kāi)關(guān)在手冊(cè)中要展示兩種以上的不同檔位和指示燈狀態(tài)，同一型號(hào)不同架次的飛機(jī)面板布局也會(huì)有區(qū)別。其中采用相同元件制造的開(kāi)關(guān)互相間只存在以下兩點(diǎn)區(qū)別：開(kāi)關(guān)周?chē)臉?biāo)識(shí)字符和開(kāi)關(guān)上的狀態(tài)指示燈。所以素材庫(kù)中的素材必須以“允許二次編輯”的文件形式保存，開(kāi)關(guān)主體元件的圖像素材可以方便地引用、拼接至不同的圖片里，從而幫助制圖人員較為容易地形成不同架次、不同場(chǎng)景的插圖，消除重復(fù)工作量并保證統(tǒng)一性。

通過(guò)以上的分析得知，面板開(kāi)關(guān)的圖標(biāo)繪制有以下四大要求：

（1）幅面較小的圖片放大后可保證關(guān)鍵信息的清晰度。

（2）可通過(guò)光影元素傳達(dá)空間立體感，以培養(yǎng)感性認(rèn)知和情景意識(shí)，提升飛行操作品質(zhì)[3]。

（3）文件數(shù)據(jù)量盡量小，保證飛行員本地發(fā)布順暢。

（4）可方便地進(jìn)行二次修改和引用拼接。

2? 圖像文件格式選擇

矢量圖格式有CGM、DWG等，如圖1，只存儲(chǔ)點(diǎn)、線(xiàn)、面、文字的元素屬性，樣條曲線(xiàn)的節(jié)點(diǎn)數(shù)據(jù)，并且每個(gè)圖形元素不論尺寸只包含兩套顏色數(shù)據(jù)——輪廓色和填充色，因此矢量文件數(shù)據(jù)量小，可以無(wú)限放大始終保持清晰，是工程文件插圖格式的首選。但矢量圖色彩較單一，不論是線(xiàn)稿還是上色圖，都無(wú)法包含光影、材質(zhì)等細(xì)節(jié)信息，圖像沒(méi)有立體感，與實(shí)物相聯(lián)系需要在腦中進(jìn)行一定程度的轉(zhuǎn)化。用在飛行手冊(cè)匯中不僅客戶(hù)閱讀體驗(yàn)較差，而且無(wú)法形成直接有效的感性認(rèn)知，對(duì)于飛行員在緊急情況下參考飛行手冊(cè)會(huì)產(chǎn)生不利影響。

位圖是由無(wú)數(shù)有顏色的像素點(diǎn)集合形成的彩色圖像，格式有JPG、PNG等，如圖2。對(duì)三維數(shù)模進(jìn)行渲染得到的位圖能夠傳達(dá)優(yōu)質(zhì)的立體感和表面材質(zhì)等細(xì)節(jié)信息，包含復(fù)雜的光影，視覺(jué)效果最好。但位圖文件數(shù)據(jù)中存儲(chǔ)了所有像素點(diǎn)的位置和顏色信息，分辨率越高則圖像越清晰，數(shù)據(jù)量越龐大。渲染后的位圖無(wú)法解決文件數(shù)據(jù)量和清晰度之間的矛盾關(guān)系。

為解決上述問(wèn)題，本文原創(chuàng)作圖方法，在矢量圖上手動(dòng)繪制光影濾鏡的形式，如圖3，保證視覺(jué)效果的同時(shí)控制文件數(shù)據(jù)量大小。選用SVG格式，可以在圖片文件中同時(shí)保有矢量圖和位圖元素，并且SVG作為一種較為通用的圖像格式，能夠被多種圖像處理軟件和閱讀軟件支持，普通的IE瀏覽器通過(guò)安裝相關(guān)插件也能夠在保留矢量特征的前提下發(fā)布SVG格式圖片。

用上述3種作圖工藝分別做了試做樣品，并編寫(xiě)方案評(píng)價(jià)表（見(jiàn)表1）對(duì)三套方案做對(duì)比分析：

綜合考慮清晰度、美觀度、長(zhǎng)期修改便捷等元素，選擇第三套工藝方案。

3? 繪圖技術(shù)

根據(jù)第三套工作方案“矢量圖疊加濾鏡”的工作原理，如圖4，制訂面板開(kāi)關(guān)插圖的繪制原則：

采用矢量元素繪制大面積色塊，可有效降低圖像數(shù)據(jù)量;

采用濾鏡和位圖元素手動(dòng)描繪光影效果，能得到高美觀度;

采用矢量元素繪制字符等關(guān)鍵信息，可保證關(guān)鍵信息放大后的清晰度，又能保證未來(lái)可二次編輯。

基于上述原則，制訂以下飛機(jī)面板繪制技術(shù)方法：

（1）選用Adobe Illustrator軟件作為制圖的主要工具，部分光影元素的處理采用Photoshop軟件做加工[4]，再疊加到Illustrator的SVG文件中。

（2）Illustrator軟件色彩模式有兩種，RGB和CMYK。RGB一般描述顯示器、掃描儀、照相機(jī)等設(shè)備的顏色，CMYK適用于彩色打印或印刷設(shè)備[5]，針對(duì)駕駛艙顯示設(shè)備的應(yīng)用需求須采用RGB模式進(jìn)行繪制[6]。利用軟件內(nèi)的矢量圖工具繪制圖像中占比最大的色塊，例如面板開(kāi)關(guān)的底板和基本造型[7]。

（3）強(qiáng)調(diào)立體感，可針對(duì)陰影、高光、指示燈擴(kuò)散光等少量局部元素，利用Adobe Illustrator軟件中的漸變上色工具、模糊工具、透明度設(shè)置等功能繪制[8]。

（4）考慮到要將數(shù)據(jù)量降到最低，應(yīng)減少數(shù)據(jù)量大的濾鏡運(yùn)用。規(guī)則形狀的模糊用漸變功能實(shí)現(xiàn)，由中心白色漸變至透明，單個(gè)元素?cái)?shù)據(jù)量比模糊工具減小了6倍。

（5）不規(guī)則輪廓形狀的模糊采用邊緣模糊，內(nèi)部鏤空并填充矢量元素，減少模糊元素的使用面積。單個(gè)元素?cái)?shù)據(jù)量比模糊工具減小了1倍。

（6）反射材質(zhì)的反射率、反射模糊率同樣取決于材質(zhì)的光滑程度，即材質(zhì)越光滑，反射就越強(qiáng)烈，反射模糊率就越低，高光就越明顯[8]。通過(guò)調(diào)整高光的漸變色變化率控制反光質(zhì)感，可以表現(xiàn)出不同的材質(zhì)，例如明暗漸變色的劇烈變化可以體現(xiàn)金屬質(zhì)感，如圖5。柔和的漸變加上透明度調(diào)節(jié)，可以模擬玻璃質(zhì)感，如圖6。

（7）對(duì)于光影條件復(fù)雜的圖像，可在Adobe Illustrator軟件中做多層光影疊加，或通過(guò)Photoshop軟件繪制，然后以較低的分辨率輸出無(wú)背景的PNG格式圖片元素，再插入到SVG格式文件中。

（8）開(kāi)關(guān)周?chē)臉?biāo)識(shí)字符和開(kāi)關(guān)上的字符型指示燈，采用矢量元素書(shū)寫(xiě)，并在SVG文件中保持文字字符的形式，宋體或Arial等常用的字體可保證圖片中的文字在不同軟件中發(fā)布的通用性，并且后期二次修改時(shí)只需要更改文字內(nèi)容，尺寸、字體、顏色默認(rèn)與先前一致。若將文字轉(zhuǎn)化為圖形，雖然能保證該元素可被不同軟件識(shí)別，但不便于后期引用修改，每次改寫(xiě)文字都需要重新書(shū)寫(xiě)并調(diào)整文字的尺寸、字體、顏色。

（9）運(yùn)用“模塊化”思想，模板中所有非關(guān)鍵元素全部實(shí)施“編組”，并且“鎖定”，僅留“指示燈”和“字符”供后期修改編輯。通過(guò)“模塊化”，各類(lèi)燈光效果元素也可獨(dú)立修改為“燈亮”和“燈滅”狀態(tài)（見(jiàn)圖1）。

4? 批量生產(chǎn)

模板繪制完成后，從模板庫(kù)里按需選取各類(lèi)型的開(kāi)關(guān)模板，并修改成適用于各專(zhuān)業(yè)的獨(dú)特開(kāi)關(guān)。

圖標(biāo)繪制各種完成后，為了更好地服務(wù)于飛行員的閱讀，還應(yīng)從實(shí)際應(yīng)用場(chǎng)景評(píng)估使用效果，將繪制完成的圖標(biāo)導(dǎo)入手冊(cè)中，訂立可視化評(píng)估標(biāo)準(zhǔn)，包括外觀符合度（造型、材質(zhì)、顏色）、狀態(tài)辨識(shí)度（指示燈、字符、指向、檔位）等，通過(guò)紙質(zhì)打印及電子瀏覽等不同形式，評(píng)估視覺(jué)效果，并提出改進(jìn)意見(jiàn)。

（1）帶保護(hù)蓋的按壓開(kāi)關(guān)（見(jiàn)圖8）。

提出意見(jiàn)：指示燈被遮擋，不易看清。

解決措施：

保護(hù)蓋不透明度調(diào)整為40%;

調(diào)整圖層，指示燈在保護(hù)蓋上方;

字符不嚴(yán)格按照真實(shí)位置描繪，而是向上移動(dòng)避開(kāi)干擾;

指示燈字符加粗。

（2）圓頭撥動(dòng)開(kāi)關(guān)（見(jiàn)圖9）。

提出意見(jiàn)：縮小后，指向不易看清。

解決措施：

撥動(dòng)開(kāi)關(guān)凸頭拉長(zhǎng)，超出外圈;

撥動(dòng)開(kāi)關(guān)色系調(diào)為乳白色;

刪除部分陰影元素;

調(diào)節(jié)高光元素形狀，提高亮度。

（3）平頭撥動(dòng)開(kāi)關(guān)（見(jiàn)圖10）。

提出意見(jiàn)：檔位指向不易看清，且造型有偏差。

解決措施：

用新的視線(xiàn)角度重畫(huà);

改變顏色形成反差;

增加開(kāi)關(guān)厚度和底桿細(xì)節(jié);

增強(qiáng)細(xì)節(jié)處的光影表現(xiàn)。

5? 工作成果

目前研究成果已應(yīng)用到實(shí)際生產(chǎn)中，采用這項(xiàng)技術(shù)在飛行手冊(cè)中插入250幅開(kāi)關(guān)圖標(biāo)，數(shù)據(jù)增量?jī)H6.5兆，每個(gè)開(kāi)關(guān)平均30kb。

提升控制板類(lèi)插圖長(zhǎng)期修改維護(hù)的效率，單幅修改時(shí)間1h降至5min。

6? 結(jié)語(yǔ)

科技進(jìn)步提升了生活和工作質(zhì)量，也對(duì)服務(wù)類(lèi)產(chǎn)品提出了更高的用戶(hù)體驗(yàn)要求。未來(lái)電子飛行手冊(cè)普及后，勢(shì)必要在其中融入豐富的多媒體展示形式，許多新的多媒體技術(shù)都急需手冊(cè)編制人員去掌握和開(kāi)發(fā)。同時(shí)也應(yīng)看到，飛機(jī)構(gòu)型多變、插圖數(shù)量繁多、不同手冊(cè)間聯(lián)動(dòng)困難……這些因素都使得編制人員任務(wù)繁重，素材管理千頭萬(wàn)緒。探尋新技術(shù)用于提升產(chǎn)品質(zhì)量和客戶(hù)體驗(yàn)的同時(shí)，也有必要應(yīng)用新技術(shù)、新方法來(lái)提升工作效率和管理質(zhì)量。

本文介紹的矢量圖加濾鏡的繪制方法，可以模擬渲染圖的高美觀度，同時(shí)獲得接近矢量圖的高清晰度和低數(shù)據(jù)量，為飛行員提供感性認(rèn)知，加深學(xué)習(xí)印象。同時(shí)此項(xiàng)技術(shù)成果也可應(yīng)用于更多領(lǐng)域，比如，飛機(jī)的電子飛行模擬軟件，提升軟件的畫(huà)面質(zhì)量、運(yùn)行流? ? 暢度。

參考文獻(xiàn)

[1] 鄧月蓮，施華剛.東航開(kāi)啟全機(jī)隊(duì)“無(wú)紙化駕駛艙”時(shí)代[J].空運(yùn)商務(wù)，2016（8）：7.

[2] 李淵恒.采用系統(tǒng)工程方法的飛行機(jī)組操作手冊(cè)編寫(xiě)與控制淺談[J].科技創(chuàng)新導(dǎo)報(bào)，2017，14（17）：176-178.

[3] 趙麟.基于人的因素的駕駛艙資源管理[J].管理工程師，2020，25（3）：61-66.

[4] 胡勇.風(fēng)電場(chǎng)無(wú)功補(bǔ)償容量配置及優(yōu)化運(yùn)行研究[J].中國(guó)設(shè)備工程，2020（23）：129-130.

[5] 昝貴府.數(shù)字印刷高精度色彩管理[J].印刷雜志，2016（9）：9-12.

[6] 褚江萍.民機(jī)駕駛艙顯示色彩人為因素初步評(píng)估算法[J].航空計(jì)算技術(shù)，2017，47（6）：93-96.

[7] 廖志強(qiáng).基于MAPublisher的地圖快速更新機(jī)制研究[J].測(cè)繪與空間地理信息，2020，43（7）：88-92，96，100.

[8] 陳少英.SVG中數(shù)據(jù)挖掘與應(yīng)用[J].電子技術(shù)與軟件工程，2020（21）：131-133.