起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識特斯拉Model 3用戶界面詳解（含UI交互源文件分享）
本文謹獻給設計師/汽車愛好者。
文章細分了第一款大眾市場觸摸屏電動汽車特斯拉 Model 3 的儀表板控制和界面的細節。從特斯拉的UI設計我們可以看出特斯拉的長期戰略，以及他們對未來無人駕駛的態度。
拉至文章底部獲取?Figma 源文件，以及原型交互鏈接。
特斯拉 Model 3
從一開始，我就一直在關注特斯拉 Model 3 的傳奇故事。去年通過測試駕駛了特斯拉S型，就愛上了它如何操控駕駛、以及敏銳的客戶體驗調整。
我發現自己也迷上了“經濟實惠”版本的前景，所以追蹤看了每一次 Model 3 的宣布。
概念很酷，但是我不相信特斯拉真的會在把汽車推向消費者時，把儀表板放倒?！艾F在可能很酷，但市場營銷人員或消費者不會接受，這應該只是一個概念?！?我這么認為著。
但是….我錯了。
沒有旋鈕。
沒有空調通風口。
也沒有打開手套箱的手柄。
他們將所有一切都收在了汽車中間的觸摸屏上。
Sans Buttons
特斯拉的消息嚇得寶寶緊緊抱住了自己。
Model 3 確實有四個車輪和一個汽車形狀的車身，這是與大多數汽車相似的地方。
但我想知道特斯拉如何隱藏車窗里的對于汽車的所有控制權，所以我開始在網上搜索關于用戶界面的所有信息。
過了一段時間，我終于遇到了一位名叫 Andrew Goodlad 的設計師的一個項目，這個設計師根據新聞發布會再現了特斯拉 Model 3 的用戶界面，以及汽車內部的搖搖晃晃的 YouTube 視頻。他做了一個原型。
為什么我決定重新創建用戶界面
他的原型很酷，但靜態圖像還不足以滿足我的好奇心。我想分析這些零部件，并確切地了解特斯拉如何設計其瘋狂的新車儀表板……以及為什么。
我開始從圖像中重建特斯拉 Model 3 UI。我制作了圖標，采樣顏色，設計了一個自定義的地圖框視圖，將 Figma 組件，開關，按鈕等所有東西拼湊在一起。
我在 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 有著明顯的相似之處。
都沒有物理按鈕。
喬布斯2007年的 iPhone 演講
喬布斯向觀眾展示了業界所有其他主流智能手機，iPhone 最大的革新就是沒有物理鍵盤。
所以我們為什么不以同樣的方式看待汽車呢？這與蘋果放棄鍵盤時有什么不同？
或許你會說，那是一部電話，這是一輛車。交互方式和用例明顯不同。
但是軟件可以更新。物理按鈕不能獲得空中修復。它們無法改進，它們無法改變。畢竟，這個想法現在看起來也不是那么瘋狂了。
瓜田君的話
想當年，iPhone 作為高端智能機，讓普通消費者們望而卻步。但幾年后，人人一手 iPhone 機乃是平常。
不久的將來，當無人駕駛汽車得到市場的廣泛認可和普及后，相信設計師們的職業頭銜又會多一條細分：無人駕駛汽車 App UI 設計師。
特斯拉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 是一名位于亞特蘭大的產品設計師。
翻譯、重編：瓜田君
來源：http://www.jianshu.com/p/2081fb5b30cb
本文由 @西瓜設計研究所 授權發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自特斯拉官網
很酷，謝謝樓主的制作和上傳！PS：點贊失敗。。。bug
這世界很酷