SVG矢量图模拟渲染效果绘制飞机开关图解
DOI：10.16660/jki.1674-098X.2101-5640-4828
SVG矢量图模拟渲染效果绘制飞机开关图解①
张丛远
（上海飞机客户服务有限公司  上海  200241）
摘  要：本文分析了未来电子飞行手册中飞机面板插图的需求特点，以及在飞行类手册中插入开关图标来替代纯文字描述对于航空安全的积极意义。介绍了如何用Adobe Illustrator软件制作SVG格式矢量图，结合滤镜功能的技术来绘制飞机飞行类手册开关插图，获得接近渲染图的高美观度、接近矢量图的高清晰度和低数据量，提升客户体验的同时提高飞行手册插图长期更改维护的效率。
关键词：飞行类手册  面板插图  SVG  飞机开关
中图分类号：V19 文献标识码：A                  文章编号：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 f light manual, and the positive significance for f light 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 f light 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 f light manual figures long term maintenance.
Key Words: Flight manual; Control panel figure; SVG; Aircraft switch
飞行类手册是飞行员学习飞机系统、掌握特定机型操作知识的教科书，也是飞行员在空中处置应急情况时的重要参考，提升飞行类手册的查询、读取效果对于航空安全有着重要意义。
目前已有部分航空公司开始使用电子飞行手册替代传统的纸质手册，这是一种能够向飞行机组提供各种手册、文件、航图、航行通告和气象资料等航行信息的电子设备[1]。航空界电子阅读的普及对插图等多媒体素材提出了更高的要求，插图不能只是无数像素点构成的静态图片，需要更加精致美观、传达更多信息、适应更多电子化的应用需求。
飞机驾驶舱中，信息呈现形式直接影响到飞行员的信息获取，研究表明优化信息呈现形式可有效降低
飞行员工作负荷，从而避免飞行员判断失误造成航空事故[2]。行业中曾发生过案例：韩亚214航班事故报告称“波音手册中相关的描述不清晰，加上飞行员训练不足，导致了误操作”。部分飞行器主制造商已在新机型手册里采用图标描述形式替代纯文字描述，可以为飞行学员留下更强的感性认知。飞行员读取更加直观，减少读取和操作的时间，也降低操作错误的可能。
1  制作思路
1.1 面板图标特点
未来电子化飞行时代，电子飞行手册换版将采用XML代码形式交付。飞行员等用户需要查阅手册时，会使用机载EFB设备在线下载或读取本地XML文件，系统会将源代码发布成电子手册版面[1]（类似于浏览网页的原理）。
因此插入开关图标跟普通插图有很大的区别：
①作者简介：张丛远（1989—），男，硕士，工程师，研究方向为飞行类手册分析与编写。
数量大：一架飞机共有100多个开关，每个开关还有两三种不同的状态，部分内容在一个页面里包含数十个开关状态描述。
尺寸小：图标尺寸不宜过大，否则行距过大，幅面空白过多，影响阅读体验。
清晰度要求高：在图标尺寸小的同时，还要保证开关上的字符和指示灯可以清晰阅览，要求图片有高清晰度。
以上三点都会导致数据量极大增加。若数据量过于庞大，则会导致浏览客户端卡滞、内容刷新缓慢、图片显示不出来，不仅影响用户体验，还可能延误飞行员空中应急处置。1.2 图标绘制要求
某型号飞机驾驶舱面板上共有常用开关250多个，按照制造采用的元件分类可分为：按压开关56个、带保护盖的按压开关24个、旋转开关25个、拨动开关10个、带保护盖的拨动开关3个、各类旋钮70多个、各类按键100多个，另有推力杆、襟缝翼手柄等特殊外形的操作对象。同一开关在手册中要展示两种以上的不同档位和指示灯状态，同一型号不同架次的飞机面板布局也会有区别。其中采用相同元件制造的开关互相间只存在以下两点区别：开关周围的标识字符和开关上的状态指示灯。所以素材库中的素材必须以“允许二次编辑”的文件形式保存，开关主体元件的图像素材可以方便地引用、拼接至不同的图片里，从而帮助制图人员较为容易地形成不同架次、不同场景的插图，消除重复工作量并保证统一性。
通过以上的分析得知，面板开关的图标绘制有以下四大要求：
(1)幅面较小的图片放大后可保证关键信息的清晰度。
(2)可通过光影元素传达空间立体感，以培养感性认知和情景意识，提升飞行操作品质[3]。
(3)文件数据量尽量小，保证飞行员本地发布顺畅。
(4)可方便地进行二次修改和引用拼接。
2  图像文件格式选择
矢量图格式有CGM、DWG等，如图1，只存储点、线、面、文字的元素属性，样条曲线的节点数据，并且每个图形元素不论尺寸只包含两套颜数据——轮廓和填充，因此矢量文件数据量小，可以无限放大始终保持清晰，是工程文件插图格式的首选。但矢量图彩较单一，不论是线稿还是上图，都无法包含光影、材质等细节信息，图像没有立体感，与实物相联系需要在脑中进行一定程度的转化。用在飞行手册汇中不仅客户阅读体验较差，而且无法形成直接有效的感性认知，对于飞行员在紧急情况下参考飞行手册会产生不利影响。
位图是由无数有颜的像素点集合形成的彩图像，格式有JPG、PNG等，如图2。对三维数模进行渲染得到的位图能够传达优质的立体感和表面材质等细节信息，包含复杂的光影，视觉效果最好。但位图文件数据中存储了所有像素点的位置和颜信息，分辨率越高则图像越清晰，数据量越庞大。渲染后的位图无
图1  CGM矢量图图2  位图（数模渲染
）图4  矢量图叠加滤镜原理
图3  SVG叠加滤镜
法解决文件数据量和清晰度之间的矛盾关系。
为解决上述问题，本文原创作图方法，在矢量图上手动绘制光影滤镜的形式，如图3，保证视觉效果的同时控制文件数据量大小。选用SVG格式，可以在图片文件中同时保有矢量图和位图元素，并且SVG作为一种较为通用的图像格式，能够被多种图像处理软件和阅读软件支持，普通的IE浏览器通过安装相关插件也能够在保留矢量特征的前提下发布SVG格式图片。
用上述3种作图工艺分别做了试做样品，并编写方案评价表（见表1）对三套方案做对比分析：
综合考虑清晰度、美观度、长期修改便捷等元素，选择第三套工艺方案。
3  绘图技术
复韵母表图片>医学家根据第三套工作方案“矢量图叠加滤镜”的工作原理，如图4，制订面板开关插图的绘制原则：
采用矢量元素绘制大面积块，可有效降低图像数据量；
采用滤镜和位图元素手动描绘光影效果，能得到高美观度；
采用矢量元素绘制字符等关键信息，可保证关键
图5  金属质感的模拟图8  带保护盖的按压开关图9  圆头拨动开关
图6  玻璃质感的模拟
图7  模块化的灯光效果
图10  平头拨动开关
信息放大后的清晰度，又能保证未来可二次编辑。
基于上述原则，制订以下飞机面板绘制技术方法：
（1）选用Adobe Illustrator软件作为制图的主要工具，部分光影元素的处理采用Photoshop软件做加工[4]，再叠加到Illustrator的SVG文件中。
（2）Illustrator软件彩模式有两种，RGB和CMYK。RGB一般描述显示器、扫描仪、照相机等设备的颜，CMYK适用于彩打印或印刷设备[5]，针对驾驶舱显示设备的应用需求须采用RGB模式进行绘制[6]。利用软件内的矢量图工具绘制图像中占比最大的块，例如面板开关的底板和基本造型[7]。
（3）强调立体感，可针对阴影、高光、指示灯扩散光等少量局部元素，利用Adobe Illustrator软件中的渐变上工具、模糊工具、透明度设置等功能绘制[8]。
（4）考虑到要将数据量降到最低，应减少数据量大的滤镜运用。规则形状的模糊用渐变功能实现，由中心白渐变至透明，单个元素数据量比模糊工具减小了6倍。
（5）不规则轮廓形状的模糊采用边缘模糊，内部镂空并填充矢量元素，减少模糊元素的使用面积。单个元素数据量比模糊工具减小了1倍。
抖音最火2020九宫格图片
（6）反射材质的反射率、反射模糊率同样取决于材质的光滑程度，即材质越光滑，反射就越强烈，反射模糊率就越低，高光就越明显[8]。通过调整高光的渐变变化率控制反光质感，可以表现出不同的材质，例如明暗渐变的剧烈变化可以体现金属质感，如图5。柔和的渐变加上透明度调节，可以模拟玻璃质感，如图6。
（7）对于光影条件复杂的图像，可在A d o b e Illustrator软件中做多层光影叠加，或通过Photoshop软件绘制，然后以较低的分辨率输出无背景的PNG格式图片元素，再插入到SVG格式文件中。
（8）开关周围的标识字符和开关上的字符型指示灯，采用矢量元素书写，并在SVG文件中保持文字字符的形式，宋体或Arial等常用的字体可保证图片中的文字在不同软件中发布的通用性，并且后期二
次修改时只需要更改文字内容，尺寸、字体、颜默认与先前一致。若将文字转化为图形，虽然能保证该元素可被不同软件识别，但不便于后期引用修改，每次改写文字都需要重新书写并调整文字的尺寸、字体、颜。
（9）运用“模块化”思想，模板中所有非关键元素全部实施“编组”，并且“锁定”，仅留“指示灯”和“字符”供后期修改编辑。通过“模块化”，各类灯光效果元素也可独立修改为“灯亮”和“灯灭”状态(见图1)。
4  批量生产
模板绘制完成后，从模板库里按需选取各类型的开关模板，并修改成适用于各专业的独特开关。
图标绘制各种完成后，为了更好地服务于飞行员的阅读，还应从实际应用场景评估使用效果，将绘制完成的图标导入手册中，订立可视化评估标准，包括外
技术路线制图工具数据量清晰度美观度作图时间
绘图人员技术
你的样子罗大佑要求
CGM 矢量图ISOdraw
软件
小
所有元素
可无限放大
保持清晰
低
初绘30min
修改5min
(仅修改关键信息)
较低
基础线条和
上
位图(数模渲染图)3ds Max
ProE
等渲染软件
大
随清晰度提
高增大
受限于开关
图标尺寸，
清晰度较低
高
中国年文化
初绘1h
修改1h
(每次修改都要重
复渲染)
较低
赋材质、打
光等渲染方法
相对固定
SVG矢量图叠加滤镜Adobe
Illustrator
软件
较小
控制滤镜的
使用，数据量
趋于矢量图
关键元素
用矢量形式
可无限放大
保持清晰
高
初绘2h
修改5min
(仅修改关键字符)
高
光影元素形
状不固定、上
复杂，多滤
镜叠加灵活运
用
表1  方案评价表
观符合度（造型、材质、颜）、状态辨识度（指示灯、字符、指向、档位）等，通过纸质打印及电子浏览等不同形式，评估视觉效果，并提出改进意见。
（1）带保护盖的按压开关（见图8）。
提出意见：指示灯被遮挡，不易看清。
解决措施：
保护盖不透明度调整为40%；
调整图层，指示灯在保护盖上方；
字符不严格按照真实位置描绘，而是向上移动避开干扰；
指示灯字符加粗。
（2）圆头拨动开关（见图9）。
提出意见：缩小后，指向不易看清。
解决措施：
拨动开关凸头拉长，超出外圈；
拨动开关系调为乳白；
删除部分阴影元素；
调节高光元素形状，提高亮度。
（3）平头拨动开关（见图10）。
提出意见：档位指向不易看清，且造型有偏差。
解决措施：
荷兰鼠用新的视线角度重画；
改变颜形成反差；
增加开关厚度和底杆细节；
增强细节处的光影表现。
5  工作成果
目前研究成果已应用到实际生产中，采用这项技术在飞行手册中插入250幅开关图标，数据增量仅6.5兆，每个开关平均30kb。
提升控制板类插图长期修改维护的效率，单幅修改时间1h降至5min。
6  结语
科技进步提升了生活和工作质量，也对服务类产品提出了更高的用户体验要求。未来电子飞行手册普及后，势必要在其中融入丰富的多媒体展示形式，许多新的多媒体技术都急需手册编制人员去掌握和开发。同时也应看到，飞机构型多变、插图数量繁多、不同手册间联动困难……这些因素都使得编制人员任务繁重，素材管理千头万绪。探寻新技术用于提升产品质量和客户体验的同时，也有必要应用新技术、新方法来提升工作效率和管理质量。
本文介绍的矢量图加滤镜的绘制方法，可以模拟渲染图的高美观度，同时获得接近矢量图的高清晰度和低数据量，为飞行员提供感性认知，加深学习印象。同时此项技术成果也可应用于更多领域，比如，飞机的电子飞行模拟软件，提升软件的画面质量、运行流 畅度。
参考文献
[1] 邓月莲，施华刚.东航开启全机队“无纸化驾驶舱”时
代[J].空运商务,2016(8):7.
[2] 李渊恒.采用系统工程方法的飞行机组操作手册编
写与控制浅谈[J].科技创新导报,2017,14(17):176-178.
[3] 赵麟.基于人的因素的驾驶舱资源管理[J].管理工程
师,2020,25(3):61-66.
[4] 胡勇.风电场无功补偿容量配置及优化运行研究[J].
中国设备工程,2020(23):129-130.
[5] 昝贵府.数字印刷高精度彩管理[J].印刷杂
志,2016(9):9-12.
[6] 褚江萍.民机驾驶舱显示彩人为因素初步评估算
法[J].航空计算技术,2017,47(6):93-96.
[7] 廖志强.基于MA Publisher的地图快速更新机制
研究[J].测绘与空间地理信息,2020,43(7):88-92,96,100.
[8] 陈少英.SVG中数据挖掘与应用[J].电子技术与软件
工程,2020(21):131-133.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。