Jenny XieFigma 编辑
飞行员依赖飞行中软件来导航航线、查看空中交通、避开湍流等。为了将更多动态原型引入用户测试,Lufthansa Systems 转向了 Figma Make。
分享 Lufthansa Systems 如何用 Figma Make 为驾驶舱原型制作逼真地图
Pank JuvekarLufthansa 首席产品设计师
Kristjan GombocLufthansa 设计主管当你为飞行员设计飞行导航软件时,风险很高——事实上,它们真的在 35,000 英尺高空翱翔。在 Lufthansa Systems,团队设计 Lido 的 Pilot Apps,运行在安装在驾驶舱内的 iPad 上,引导飞行员和副驾驶在 250 多个机场从起飞到降落。应用的核心是一张动态地图,需要在不显得杂乱的情况下显示关于飞行路径、各种程序、天气和机场地图的关键信息。然而,构建感觉像真实事物的原型一直是一个持续的挑战。
去年,Lufthansa Systems 开始尝试 使用 Figma Make 从传达复杂行为到拓展想法的边界,ServiceNow、Ticketmaster 和 Affirm 的产品经理正在使用 Figma Make 来推进原型设计。
产品团队用 Figma Make 更快建立信念的 3 种方式
大多数人听到“航空公司软件”,就会想到座椅靠背屏幕。你们在 Lufthansa Systems 实际构建什么?
Kristjan G.我们构建飞行员和副驾驶在驾驶舱中使用的软件,主要运行在安装在左右两侧的 iPad 上。我们的 Lido 产品套件覆盖整个飞行生命周期,从飞行计划到滑行、起飞、飞行中操作、降落和监控。超过 100,000 名飞行员每天使用我们的 Lido Pilot Apps 安全高效地飞行他们的航线。
Pank J.地图是我们 Pilot Apps 的关键元素。它 packed 了航空数据,如航路、航点、紧急情况下的备降机场和湍流层,以便飞行员提高情境意识。还有机场移动地图(AMM),引导飞行员从停机位到跑道。


为飞行员作为最终用户构建产品是什么感觉?
Kristjan G.在我之前的公司,接触最终用户一直是个挑战。在这里,我们与他们合作之紧密令人难以置信。今年我们已经进行了 100 多次飞行员会话,大多是远程的。我们还有面对面研讨会,每位产品设计师每年至少参加一次观察飞行。这意味着他们可以坐在驾驶舱里,在常规飞行中进行观察研究。
好消息是,飞行员对自己的工作非常热情,喜欢解释他们在做什么以及如何做。他们总是给我们提供宝贵的反馈。
困难的部分是,你必须成为专家才能与专家交谈。如果你走进驾驶舱问新手问题,你会失去他们。你需要能够说他们的语言,并对他们正在做的事情有很好的理解。如果你问切中要害的问题,这些互动会非常富有成果。
Pank J.我们从内部专家那里学到很多,比如前飞行员和空中交通管制员。我在这里快七年了,每天仍然学到新东西。学习曲线很陡。
你们服务数百家航空公司。你们如何为它们所有的特殊需求进行设计?
Pank J.我们很少只为一位客户设计,即使他们向我们提出请求。我们会把想法展示给另外 10 家,以避免这种偏见。航空公司因地区、短途与长途以及它们运营的机队而异。我们拥抱不同航空公司的视角,同时不偏离最终目标。
Kristjan G.我们的软件建立在每家航空公司自己的技术设置和操作程序之上。每个客户请求或内部想法都是一场平衡游戏:这个行业痛点的规模有多大?我们是否有能力令人满意地解决它?考虑到我们的技术和监管限制,我们至少能做些什么来开始为客户带来价值?
这些是我们每周都会进行的讨论,而且并不总是容易。有时我们会搁置一些事情,因为设计和开发过程表明,我们现在能构建的解决方案还不够好。
为什么制作地图原型一直如此具有挑战性?
Pank J.我们应用中的地图是动态的,但我们的设计原型过去并不总是动态的。我们从 Sketch 到 XD 再到 Framer,试图获得动态地图,而 Framer 并不容易让所有人使用。所以我们主要依赖静态设计和手动原型制作。你可以给飞行员看截图,他们会给你反馈,但感觉不像真实的东西。
你们是如何开始尝试 Figma Make 的?
Pank J.去年在内部黑客松 Innovation Week 期间,在 Make 的早期,我想知道我们能否将动态地图放入原型中。我们从一个内部构建的网页版地图开始,使用 Mapbox 这个自定义地图平台作为基础层,共享与 iPad 应用相同的数据。起初,我们尝试了那个网页版的 API,然后是一个开放链接,两者与 Make 配合得都相当好。我们可以使用一张看起来和表现得接近我们应用中地图的动态地图。
从那里,我将我们的顶栏、底栏和图层图标带入 Make。能够简单地从 Figma 文件复制粘贴设计直接到 Figma Make 从今天起,Make kits 和 Make attachments 将上下文引入 Figma Make,让原型从真实组件、数据和约束条件出发。
在 Figma Make 中借助更多上下文和更强控制力进行构建
能够直接从 Figma 文件复制粘贴设计到 Figma Make,让一切变得极其简单直观。“能够直接从 Figma 文件复制粘贴设计到 Figma Make,让一切变得极其简单直观。”
你需要在那张地图上展示复杂的空中交通数据。你如何把它呈现出来?
Pank J.在我们的地图上显示交通信息,让飞行员拥有更强的态势感知能力,并最终有助于提升安全性。在初步研究之后,我们开始为此制作原型,但要真实地呈现如此多的动态信息变得相当具有挑战性。这感觉像是 Make 的又一个绝佳用例。于是,我将 Make 连接到 OpenSky Network——一个向用户展示不同航路上示例交通数据的应用——并让它只在我们模拟位置 500 海里范围内显示示例飞机标记。点击一架飞机,你就能看到飞行员告诉我们他们想要的信息:呼号、机型、速度、相对于你的高度、出发地和目的地。它立刻让人感觉更贴近实际。当我们展示给飞行员时,他们立刻就理解了。
随后飞行员要求标记采用不同大小,就像他们在航班追踪应用中看到的那样。我让 Make 将美国联邦航空管理局(FAA)的飞机重量等级应用到图标上:超级、重型、大型、小型。令人着迷的是,仅凭几个关键词,Make 就理解了我想要做什么,而无需我提供更多信息。一架 Embraer 195 现在显示得比一架 Boeing 737 更小。迭代变得更快了。
你们能测试哪些以前无法测试的内容?
Pank J.任何依赖动态交互的内容。我们能够找到交通信息应当出现而不使地图显得杂乱的缩放级别,因为我们可以放大和缩小,飞行员也能告诉我们预期的缩放比例行为。与我的制图师同事 Agata 一起,我们还能试验不同类型的地图,比如 AMM,其中跑道上的飞机在起飞那一刻会切换颜色。这是一项将地面交通与空中交通区分开的监管要求,而你确实需要亲眼看到它发生。飞行轨迹甚至作为实验的副产品出现了。它们并非计划之中,却为我们带来了全新一轮反馈。
我们一次又一次地回到飞行员那里,全程都无需触碰实现代码。我们的应用用 SwiftUI 构建,我们无法每次都直接在那里做实验,所以提前进行这种探索意味着开发者拿到的东西经过了更充分的思考。
在使用 Make 的过程中,有没有某个“顿悟”时刻?
Pank J.有几个。Make 通过 API 凭证轻松连接到开源和第三方平台,甚至包括我们面向开发者的内部平台。更大的惊喜是,你可以向 Make 寻求建议,而不只是给它指令。它会提出多种方案,通常按复杂度排序:简单、中等或困难。这使它更像一个协作思考伙伴,而不只是一个原型制作工具。
[Figma Make] 更像一个协作思考伙伴,而不只是一个原型制作工具。“[Figma Make] 更像一个协作思考伙伴,而不只是一个原型制作工具。”
Make 在汉莎系统公司的采用情况如何?
Pank J.它感觉很直观。我们用应用框架和动态地图构建了模板,这样其他设计师就可以开始实验。现在有几个其他设计团队也在使用 Make,我们互相交流关于动态原型和复杂业务逻辑的想法,而这些原本需要许多额外页面。地图在我们的 Web、iPad 和桌面应用中处于核心地位,因此这引起了广泛共鸣。
Kristjan G.我们无法代表所有设计团队发言,但我们看到越来越多设计师使用 Make 开发 Lido——以至于有些项目完全只用 Make。最大的好处是在处理复杂界面时,比如地图交互,或展示特定业务逻辑或应用行为的重数据 UI,这些原本很难制作原型和测试。当然,我们仍有一些成长中的阵痛,但我们相信这些会随着时间推移得到解决。
对于其他为专家设计产品的团队,你们有什么建议?
Kristjan G.投入于深厚的领域知识,并让自己经常接触用户。我们的设计师和开发者都是狂热的航空爱好者,我们大多数产品负责人和其他内部专家都会驾驶飞机。上手门槛很高,但正因如此,你才能与用户进行真正的对话,解决有意义的问题。
对汉莎系统公司而言,风险并未改变:飞行员仍然需要在 35,000 英尺高空获得清晰可靠的信息。改变的是团队能多早将逼真、数据驱动的原型呈现在他们面前。借助 Figma Make,Pank、Kristjan 和他们的团队可以在写下任何一行生产代码之前,一次又一次地与飞行员一起测试想法。

Jenny Xie 是一位关注设计、科技与文化的作家和编辑。她此前曾担任 Figma 的内容策略师以及 Dwell 的执行编辑。她是小说《Holding Pattern》的作者。
网站TwitterInstagramLinkedIn