本文謹(jǐn)獻(xiàn)給設(shè)計(jì)師/汽車愛好者。

文章細(xì)分了第一款大眾市場觸摸屏電動汽車特斯拉 Model 3 的儀表板控制和界面的細(xì)節(jié)。從特斯拉的UI設(shè)計(jì)我們可以看出特斯拉的長期戰(zhàn)略，以及他們對未來無人駕駛的態(tài)度。

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

特斯拉 Model 3

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

我發(fā)現(xiàn)自己也迷上了“經(jīng)濟(jì)實(shí)惠”版本的前景，所以追蹤看了每一次 Model 3 的宣布。

概念很酷，但是我不相信特斯拉真的會在把汽車推向消費(fèi)者時(shí)，把儀表板放倒?！艾F(xiàn)在可能很酷，但市場營銷人員或消費(fèi)者不會接受，這應(yīng)該只是一個(gè)概念?！?我這么認(rèn)為著。

但是….我錯(cuò)了。

沒有旋鈕。

沒有空調(diào)通風(fēng)口。

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

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

Sans Buttons

特斯拉的消息嚇得寶寶緊緊抱住了自己。

Model 3 確實(shí)有四個(gè)車輪和一個(gè)汽車形狀的車身，這是與大多數(shù)汽車相似的地方。

但我想知道特斯拉如何隱藏車窗里的對于汽車的所有控制權(quán)，所以我開始在網(wǎng)上搜索關(guān)于用戶界面的所有信息。

過了一段時(shí)間，我終于遇到了一位名叫 Andrew Goodlad 的設(shè)計(jì)師的一個(gè)項(xiàng)目，這個(gè)設(shè)計(jì)師根據(jù)新聞發(fā)布會再現(xiàn)了特斯拉 Model 3 的用戶界面，以及汽車內(nèi)部的搖搖晃晃的 YouTube 視頻。他做了一個(gè)原型。

為什么我決定重新創(chuàng)建用戶界面

他的原型很酷，但靜態(tài)圖像還不足以滿足我的好奇心。我想分析這些零部件，并確切地了解特斯拉如何設(shè)計(jì)其瘋狂的新車儀表板……以及為什么。

我開始從圖像中重建特斯拉 Model 3 UI。我制作了圖標(biāo)，采樣顏色，設(shè)計(jì)了一個(gè)自定義的地圖框視圖，將 Figma 組件，開關(guān)，按鈕等所有東西拼湊在一起。

我在 Figma 做了大部分的設(shè)計(jì)工作：

Figma 源文件

這是可點(diǎn)擊的原型交互：

原型交互

我從 Model 3 UI 中了解到了什么

這輛車不是為完美的駕駛體驗(yàn)而設(shè)計(jì)的。

Whattt???

對，你沒有看錯(cuò)。

特斯拉 Model 3 是一款設(shè)計(jì)時(shí)不考慮駕駛員的汽車。并且是故意的。

沒有旋鈕、幾乎沒有方向盤。你必須點(diǎn)擊屏幕打開擋風(fēng)玻璃刮水器。（有一個(gè)控制臺杠桿可以打開它們，但頻率是通過屏幕控制的。）

你必須點(diǎn)擊一個(gè)屏幕來打開手套箱。你必須點(diǎn)擊一個(gè)屏幕打開緊急制動。（這也是自動的，但手動應(yīng)用程序似乎在設(shè)置中。）

對一個(gè)司機(jī)來說，這個(gè)聽起來是不是很糟糕？他們不能再依靠純粹的本能和肌肉記憶來操縱自己的汽車。

但我不認(rèn)為特斯拉這樣做只是前衛(wèi)，他們這樣做，是在為沒有司機(jī)的世界做好準(zhǔn)備。

為乘坐體驗(yàn)而設(shè)計(jì)的車

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

這輛車本來可以像垂直的屏幕一樣，就像S型和X型一樣，但是它沒有。相反，Model 3 的長寬比為 8：5，分辨率約為 1920x1200px。

WHY？

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

1200 – 120 = 1080。

1920 × 1080。

這是一個(gè)高清電視啊，盆友們。

高清電視向我們表明，特斯拉用他們的中央控制臺來看東西，而不是讓你去駕駛汽車。這個(gè) Bad Boy 將是無人駕駛的未來。

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

當(dāng)法規(guī)和技術(shù)到位的時(shí)候，看電影就沒有比在車中間更好的位置了（微笑）。

下面讓我們看看用戶界面

以下是 UI 不同部分的截圖。

途中駕駛模式

非常類似于手機(jī)用戶界面

值得注意的是，儀表板在駕駛員的手臂長度范圍內(nèi)，并且在駕駛員的外圍視野內(nèi)。對于右駕市場來說，這個(gè)視野很容易被翻轉(zhuǎn)。

停放模式

所有的干線和控制器都在觸摸屏上

看起來 Model 3 上有很多潛在的交互。例如，當(dāng)你停車時(shí)，只適用于停車的控制器才會出現(xiàn)。

快速設(shè)置

方向盤上的設(shè)置

在這款車上有很多設(shè)置，但是看起來你可以配置一個(gè)快速控制的部分，以便查看最常用的功能。但也可能這些是自動填充的。

音樂控制

音樂播放界面

似乎有一個(gè)明確的專輯而不是單獨(dú)的歌曲。不知這個(gè)車上會有多少聲音控制。

特斯拉與蘋果

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

都沒有物理按鈕。

喬布斯2007年的 iPhone 演講

喬布斯向觀眾展示了業(yè)界所有其他主流智能手機(jī)，iPhone 最大的革新就是沒有物理鍵盤。

所以我們?yōu)槭裁床灰酝瑯拥姆绞娇创嚹兀窟@與蘋果放棄鍵盤時(shí)有什么不同？

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

但是軟件可以更新。物理按鈕不能獲得空中修復(fù)。它們無法改進(jìn)，它們無法改變。畢竟，這個(gè)想法現(xiàn)在看起來也不是那么瘋狂了。

瓜田君的話

想當(dāng)年，iPhone 作為高端智能機(jī)，讓普通消費(fèi)者們望而卻步。但幾年后，人人一手 iPhone 機(jī)乃是平常。

不久的將來，當(dāng)無人駕駛汽車得到市場的廣泛認(rèn)可和普及后，相信設(shè)計(jì)師們的職業(yè)頭銜又會多一條細(xì)分：無人駕駛汽車 App UI 設(shè)計(jì)師。

特斯拉Model 3 UI分享

Figma?源文件：https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3

原型交互：https://www.figma.com/proto/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?scaling=contain&node-id=37%3A2923

作者：Tom Johnson，Tom Johnson 是一名位于亞特蘭大的產(chǎn)品設(shè)計(jì)師。

翻譯、重編：瓜田君

來源：http://www.jianshu.com/p/2081fb5b30cb

本文由 @西瓜設(shè)計(jì)研究所 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自特斯拉官網(wǎng)