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上的投資組合 。