A couple of weeks ago, SpaceX Crew Dragon launched from Kennedy Space Center to transport astronauts Robert L. Behnken and Douglas G. Hurley to the ISS. Lots of things were revolutionary about this launch, but the one that caught my attention was that astronaut’s main UI was a set of touchscreens. So I decided to try and see if I could piece it together from existing footage.

几周前，SpaceX乘员龙号从肯尼迪航天中心发射升空，将宇航员罗伯特·L·本肯和道格拉斯·赫尔利运送到国际空间站。 这次发射有很多革命性的东西，但是引起我注意的是，宇航员的主要用户界面是一组触摸屏。 因此，我决定尝试看看是否可以从现有素材中将其组合在一起。

Previously, control panels were a set of buttons, switches and knobs pretty far from what we saw last May.

以前，控制面板是一组按钮，开关和旋钮，与我们去年五月看到的情况相去甚远。

Inspired by Andrew Goodlad and his work with the Tesla Model 3’s controls, I decided that I wanted to do the same for the Crew Dragon. First I had to gather as much footage from inside the ship as I could find. The problem was that most of it was outdated or was from previous iterations. Crew Dragon’s final design was hard to find or was too pixelated to understand. Luckily I found some really cool videos by Everyday Astronaut and Discovery that were a great reference to work from.

受安德鲁·古德莱德(Andrew Goodlad)及其在特斯拉Model 3控制器上的工作的启发，我决定对乘员龙进行同样的操作。 首先，我必须从船内收集尽可能多的镜头。 问题在于它大部分已经过时或来自以前的迭代。 船员龙的最终设计很难找到，或者太像素化而无法理解。 幸运的是，我发现了Everyday Astronaut和Discovery的一些非常酷的视频，这些视频非常有用。

The first section I assembled was the button panel below the screens. The ship has 5 different panels: the first one is the Command panel; the second is the Power panel; the third one is the Pyro panel; the fourth one apparently has some entry commands (was the hardest one to find footage of) and the last one is another Command panel.

我组装的第一部分是屏幕下方的按钮面板。 该船有5个不同的面板：第一个是Command面板；第二个是Command面板。 第二个是电源面板； 第三个是Pyro面板； 显然，第四个是一些输入命令(是最难找到素材的输入命令)，最后一个是另一个“命令”面板。

Once the panels were done, I began working on the screens. The first thing I did was to assemble the global navigation menu. All screens share a 5 section navigation. My assumption is that astronauts can navigate by tapping on each of the options. The sections are not labelled, so I had to piece together a menu shot and a screen shot to compose a full screen.

面板完成后，我开始在屏幕上工作。 我要做的第一件事是组装全局导航菜单。 所有屏幕共享一个5节导航。 我的假设是，宇航员可以通过点击每个选项进行导航。 这些部分没有标签，因此我不得不拼凑菜单画面和屏幕截图以组成全屏。

After that, one of the easiest screens was the docking screen. I found this really cool simulator by SpaceX where you can try and dock the Crew Dragon to the ISS. I played with it a few times (found it pretty hard by the way) to understand how it works in real life. This was the only screen where I had that chance so I went all in. Though it’s a bit different from the final design, it was helpful to define sizes and relations inside the screen.

之后，最简单的屏幕之一就是停靠屏幕。 我发现SpaceX 这款非常酷的模拟器 ，您可以在其中尝试将Crew Dragon停靠到ISS。 我玩了几次(顺便发现它很难)，以了解它在现实生活中的工作原理。 这是我唯一有机会的屏幕，所以我全力以赴。尽管它与最终设计有所不同，但在屏幕内部定义尺寸和关系很有帮助。

The next screen I assembled was the cabin audio settings. It was hard to find good pictures from inside the cabin, so I used a still frame from Everyday Astronaut’s video and with a bit of Photopea magic I could isolate individual seats. The speakers are a vector illustration done in Figma.

我组装的下一个屏幕是机舱音频设置。 很难从机舱内部找到好的照片，所以我使用了每天宇航员录像带中的静止画面，并结合了一些Photopea魔术，可以隔离单个座位。 扬声器是在Figma中完成的矢量图。

After that screen was done, I assembled the navigation view. It’s a dashboard of sorts, composed by a side menu with different sections for easier navigation, a top bar with real-time indicators and a globe where real time trajectories are shown. At this point, I had most styles already defined so I was moving rather fast. The only one left for the first version was the testing screen. It’s not the fanciest one but it’s a pretty big deal because apparently tests in the Crew Dragon have zero-fault tolerance. Which means that in the scenario something goes wrong, the launch is cancelled.

完成该屏幕后，我组装了导航视图。 它是一种仪表板，由具有不同部分的侧菜单(用于更轻松地导航)，带有实时指示器的顶部栏和显示实时轨迹的地球仪组成。 此时，我已经定义了大多数样式，因此我的动作相当快。 第一个版本剩下的唯一一个是测试屏幕。 这不是最奇特的选择，但意义重大，因为显然在乘员龙中进行的测试具有零故障容忍度。 这意味着在出现问题的情况下，启动将被取消。

最终设计 (Final Design)

That’s what the final design looks like. To top it all off, I added some interactions so we can play around and navigate across some of the screens.

这就是最终设计的样子。 最重要的是，我添加了一些交互功能，以便我们可以在某些屏幕上浏览和浏览。

Anyways, here’s the link to the prototype, feel free to play around and let me know what you think! Right now you can navigate between the different sections using the bottom left tabs and also navigate between the different seats in the audio settings. There were barely any animations shown in the launch footage so it’s all built on my assumptions. I’m planning to add more stuff in the coming days.

无论如何， 这是原型的链接 ，可以随意玩转，让我知道您的想法！ 现在，您可以使用左下方的标签在不同部分之间导航，也可以在音频设置的不同席位之间导航。 发射镜头中几乎没有显示任何动画，因此所有动画均基于我的假设。 我计划在未来几天内添加更多内容。

Also, here’s the link to download a full res image of the final design.

另外， 这是下载最终设计的完整分辨率图像的链接 。

If you or someone you know are hiring, let me know! I’m looking for a job as Product Designer. Let’s connect on twitter and here’s my portfolio on Notion.

如果您或您认识的人正在招聘，请告诉我！ 我正在寻找产品设计师的工作。 让我们在Twitter上连接，这是我在Notion上的投资组合 。