特斯拉Model 3使用者介面詳解(含UI互動原始檔分享)

西瓜設計研究所發表於2017-11-20
作者:Tom Johnson   |  翻譯、重編:所長瓜田君
Tom Johnson 是一名位於亞特蘭大的產品設計師,更多精彩內容可訪問他的部落格專欄

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

文章細分了第一款大眾市場觸控式螢幕電動汽車特斯拉 Model 3 的儀表板控制和介面的細節。從特斯拉的UI設計我們可以看出特斯拉的長期戰略,以及他們對未來無人駕駛的態度。

拉至文章底部獲取 Figma 原始檔,以及原型互動連結。

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


特斯拉 Model 3

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

我發現自己也迷上了“經濟實惠”版本的前景,所以追蹤看了每一次 Model 3 的宣佈。

概念很酷,但是我不相信特斯拉真的會在把汽車推向消費者時,把儀表板放倒。“現在可能很酷,但市場營銷人員或消費者不會接受,這應該只是一個概念。” 我這麼認為著。

但是....我錯了。

沒有旋鈕
沒有空調通風口
也沒有開啟手套箱的手柄

他們將所有一切都收在了汽車中間的觸控式螢幕上。

特斯拉Model 3使用者介面詳解(含UI互動原始檔分享)


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

Model 3 確實有四個車輪和一個汽車形狀的車身,這是與大多數汽車相似的地方。
但我想知道特斯拉如何隱藏車窗裡的對於汽車的所有控制權,所以我開始在網上搜尋關於使用者介面的所有資訊。

過了一段時間,我終於遇到了一位名叫 Andrew Goodlad 的設計師的一個專案,這個設計師根據新聞釋出會再現了特斯拉 Model 3 的使用者介面,以及汽車內部的搖搖晃晃的 YouTube 視訊。他做了一個原型。


為什麼我決定重新建立使用者介面

他的原型很酷,但靜態影象還不足以滿足我的好奇心。我想分析這些零部件,並確切地瞭解特斯拉如何設計其瘋狂的新車儀表板......以及為什麼。

我開始從影象中重建特斯拉 Model 3 UI。我製作了圖示,取樣顏色,設計了一個自定義的地圖框檢視,將 Figma 元件,開關,按鈕等所有東西拼湊在一起。

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

特斯拉Model 3使用者介面詳解(含UI互動原始檔分享)


這是可點選的原型互動:

特斯拉Model 3使用者介面詳解(含UI互動原始檔分享)


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

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

Whattt???

對,你沒有看錯。

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

沒有旋鈕、幾乎沒有方向盤。你必須點選螢幕開啟擋風玻璃刮水器。(有一個控制檯槓桿可以開啟它們,但頻率是通過螢幕控制的。)
你必須點選一個螢幕來開啟手套箱。你必須點選一個螢幕開啟緊急制動。(這也是自動的,但手動應用程式似乎在設定中。)

對一個司機來說,這個聽起來是不是很糟糕?他們不能再依靠純粹的本能和肌肉記憶來操縱自己的汽車。

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


為乘坐體驗而設計的車

在 UI 中,一個接一個的因素都告訴了我一切:螢幕解析度。

這輛車本來可以像垂直的螢幕一樣,就像S型和X型一樣,但是它沒有。相反,Model 3 的長寬比為 8:5,解析度約為 1920x1200px。

WHY?

我們來看,底部控制元件是 120px 高。

1200 - 120 = 1080。
1920 × 1080。

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

特斯拉Model 3使用者介面詳解(含UI互動原始檔分享)

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

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

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


下面讓我們看看使用者介面

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

途中駕駛模式

特斯拉Model 3使用者介面詳解(含UI互動原始檔分享)

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


停放模式

特斯拉Model 3使用者介面詳解(含UI互動原始檔分享)

看起來 Model 3 上有很多潛在的互動。例如,當你停車時,只適用於停車的控制器才會出現。


快速設定

特斯拉Model 3使用者介面詳解(含UI互動原始檔分享)

在這款車上有很多設定,但是看起來你可以配置一個快速控制的部分,以便檢視最常用的功能。但也可能這些是自動填充的。


音樂控制

特斯拉Model 3使用者介面詳解(含UI互動原始檔分享)

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


特斯拉與蘋果

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

都沒有物理按鈕。

特斯拉Model 3使用者介面詳解(含UI互動原始檔分享)

賈伯斯向觀眾展示了業界所有其他主流智慧手機,iPhone 最大的革新就是沒有物理鍵盤。

所以我們為什麼不以同樣的方式看待汽車呢?這與蘋果放棄鍵盤時有什麼不同?

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

但是軟體可以更新。物理按鈕不能獲得空中修復。它們無法改進,它們無法改變。畢竟,這個想法現在看起來也不是那麼瘋狂了。


瓜田君的話

想當年,iPhone 作為高階智慧機,讓普通消費者們望而卻步。但幾年後,人人一手 iPhone 機乃是平常。

不久的將來,當無人駕駛汽車得到市場的廣泛認可和普及後,相信設計師們的職業頭銜又會多一條細分:無人駕駛汽車 App UI 設計師。


特斯拉Model 3 UI分享


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


西瓜設計研究所

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

未經允許請勿轉載,煩請留言獲取授權
© 西瓜設計研究所


相關文章