特斯拉Model 3用戶界面詳解（含UI交互源文件分享）

做者：Tom Johnson   |  翻譯、重編：所長瓜田君

Tom Johnson 是一名位於亞特蘭大的產品設計師，更多精彩內容可訪問他的 博客專欄。

本文謹獻給設計師/汽車愛好者。

文章細分了第一款大衆市場觸摸屏電動汽車特斯拉 Model 3 的儀表板控制和界面的細節。從特斯拉的UI設計咱們能夠看出特斯拉的長期戰略，以及他們對將來無人駕駛的態度。

拉至文章底部獲取 Figma 源文件，以及原型交互連接。

本文閱讀時間：約6分鐘。

特斯拉 Model 3

從一開始，我就一直在關注特斯拉 Model 3 的傳奇故事。去年經過測試駕駛了特斯拉S型，就愛上了它如何操控駕駛、以及敏銳的客戶體驗調整。

我發現本身也迷上了「經濟實惠」版本的前景，因此追蹤看了每一次 Model 3 的宣佈。

概念很酷，可是我不相信特斯拉真的會在把汽車推向消費者時，把儀表板放倒。「如今可能很酷，但市場營銷人員或消費者不會接受，這應該只是一個概念。」 我這麼認爲着。

可是....我錯了。

沒有 旋鈕。

沒有 空調通風口。

也沒有 打開手套箱的手柄。

他們將全部一切都收在了汽車中間的觸摸屏上。

特斯拉的消息嚇得寶寶牢牢抱住了本身。

Model 3 確實有四個車輪和一個汽車形狀的車身，這是與大多數汽車類似的地方。

但我想知道特斯拉如何隱藏車窗裏的對於汽車的全部控制權，因此我開始在網上搜索關於用戶界面的全部信息。

過了一段時間，我終於遇到了一位名叫 Andrew Goodlad 的設計師的一個項目，這個設計師根據新聞發佈會再現了特斯拉 Model 3 的用戶界面，以及汽車內部的搖搖晃晃的 YouTube 視頻。他作了一個原型。

爲何我決定從新建立用戶界面

他的原型很酷，但靜態圖像還不足以知足個人好奇心。我想分析這些零部件，並確切地瞭解特斯拉如何設計其瘋狂的新車儀表板......以及爲何。

我開始從圖像中重建特斯拉 Model 3 UI。我製做了圖標，採樣顏色，設計了一個自定義的地圖框視圖，將 Figma 組件，開關，按鈕等全部東西拼湊在一塊兒。

我在 Figma 作了大部分的設計工做：

這是可點擊的原型交互：

我從 Model 3 UI 中瞭解到了什麼

這輛車不是爲完美的駕駛體驗而設計的。

Whattt???

對，你沒有看錯。

特斯拉 Model 3 是一款設計時不考慮駕駛員的汽車。而且是故意的。

沒有旋鈕、幾乎沒有方向盤。你必須點擊屏幕打開擋風玻璃刮水器。（有一個控制檯槓桿能夠打開它們，但頻率是經過屏幕控制的。）

你必須點擊一個屏幕來打開手套箱。你必須點擊一個屏幕打開緊急制動。（這也是自動的，但手動應用程序彷佛在設置中。）

對一個司機來講，這個聽起來是否是很糟糕？他們不能再依靠純粹的本能和肌肉記憶來操縱本身的汽車。

但我不認爲特斯拉這樣作只是前衛，他們這樣作，是在爲沒有司機的世界作好準備。

爲乘坐體驗而設計的車

在 UI 中，一個接一個的因素都告訴了我一切：屏幕分辨率。

這輛車原本能夠像垂直的屏幕同樣，就像S型和X型同樣，可是它沒有。相反，Model 3 的長寬比爲 8：5，分辨率約爲 1920x1200px。

WHY？

咱們來看，底部控件是 120px 高。

1200 - 120 = 1080。

1920 × 1080。

這是一個高清電視啊，盆友們。

高清電視向咱們代表，特斯拉用他們的中央控制檯來看東西，而不是讓你去駕駛汽車。這個Bad Boy 將是無人駕駛的將來。

這不是一個奇怪的儀表板車，而是一個移動的客廳。

當法規和技術到位的時候，看電影就沒有比在車中間更好的位置了（微笑）。

下面讓咱們看看用戶界面

如下是 UI 不一樣部分的截圖。

途中駕駛模式

值得注意的是，儀表板在駕駛員的手臂長度範圍內，而且在駕駛員的外圍視野內。對於右駕市場來講，這個視野很容易被翻轉。

停放模式

看起來 Model 3 上有不少潛在的交互。例如，當你停車時，只適用於停車的控制器纔會出現。

快速設置

在這款車上有不少設置，可是看起來你能夠配置一個快速控制的部分，以便查看最經常使用的功能。但也可能這些是自動填充的。

音樂控制

彷佛有一個明確的專輯而不是單獨的歌曲。不知這個車上會有多少聲音控制。

特斯拉與蘋果

最近，我正在從新審視 Steve Jobs 推出的 iPhone 的主題演講，想到 Model 3 和 iPhone 有着明顯的類似之處。

都沒有物理按鈕。

喬布斯向觀衆展現了業界全部其餘主流智能手機，iPhone 最大的革新就是沒有物理鍵盤。

因此咱們爲何不以一樣的方式看待汽車呢？這與蘋果放棄鍵盤時有什麼不一樣？

或許你會說，那是一部電話，這是一輛車。交互方式和用例明顯不一樣。

可是軟件能夠更新。物理按鈕不能得到空中修復。它們沒法改進，它們沒法改變。畢竟，這個想法如今看起來也不是那麼瘋狂了。

瓜田君的話

想當年，iPhone 做爲高端智能機，讓普通消費者們望而卻步。但幾年後，人人一手 iPhone 機乃是日常。

不久的未來，當無人駕駛汽車獲得市場的普遍承認和普及後，相信設計師們的職業頭銜又會多一條細分：無人駕駛汽車 App UI 設計師。

特斯拉Model 3 UI分享

Figma 源文件： www.figma.com/file/OIVSH9…

原型交互： www.figma.com/proto/OIVSH…

更多精彩內容，下期再見。

西瓜設計研究所

UI素材 | 網站設計 | 開發資源 | 教程

未經容許請勿轉載，煩請留言獲取受權

© 西瓜設計研究所