如果你是一個設計師/汽車愛好者， 那麼這篇文章是寫給你的。 我已經細分了第一款大眾市場觸控式螢幕電動車Tesla Model 3的儀錶板控制和介面細節。
線上體驗：https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=497%3A14050
從一開始， 我就一直在關注Tesla Model 3的各種消息。 去年通過測試駕駛Tesla Model S， 我深深的愛上了這種全新的駕駛體驗， 從駕駛到交互都讓我耳目一新， 我發現自己已經迷上了這個“經濟實惠”的特斯拉版本。 或許你們中的很多人也已經和我一樣體驗了特斯拉的產品之後， 就會更加關注特斯拉Model 3的每一個新聞或官方聲明， 並會去網上尋找有關這個新車資訊的所有技術和設計細節。
有一個很酷的概念那就是把儀錶盤放棄， 但是我我真的不相信特斯拉準備會把汽車推向消費者的時候把儀錶板去掉。 “現在可能很酷， 但市場行銷人員或消費者不會讓這種情況發生，
然而...我的點頭是錯的， 他們真的把儀錶板這種反人類的設計捨棄了。
旋鈕也沒有了。
空調通風口也看不到了。
或者打開手套箱的手柄。
相反， 他們將所有這些都集成安裝在汽車中央的觸控式螢幕上，
這件事有所不同
我非常想知道特斯拉如何將眾多的汽車控制權集成並整合到這塊螢幕上， 於是我開始在互聯網上搜索關於這款車使用者介面的所有資訊。 過了一段時間， 我終於遇到了一位名叫Andrew Goodlad 的設計師的一個項目， 我想這個設計師從新聞發佈會上再現了特斯拉模型3的使用者介面， 並做了一個原型和所包括的一切內容。
為什麼我決定重新創建使用者介面
他設計的原型很酷， 但靜態圖像的方式還不足以滿足我的好奇心。 我想分析這些不同的元件， 並確切地瞭解特斯拉如何設計其瘋狂的新車交互面板......當然， 更想知道為什麼這麼設計。
所以...我使用CSS Peeper下載了所有螢幕的jpegs 檔
然後我把它們粘貼到Figma
......然後， 毫不猶豫地， 我開始從圖像中重建Tesla Model 3 UI。 我製作了圖示， 採樣的顏色， 設計了一個自訂的地圖框視圖 ， 拼湊在一起Figma元件，開關，按鈕以及所需要的一切。 當我還是一個孩子的時候，每個星期天邊看動漫邊畫畫，像小時候一樣，我通過跟蹤別人的工作來完成新的挑戰。 如果說史努比和兔八哥教我如何繪製，也許在這裡這些圖片會説明我跨越製作汽車交互介面的挑戰。
我在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
我從Model 3 UI設計中學到了什麼
這輛車不是為完美的駕駛體驗而設計的
什麼???
是。 這確實是我想說的。
特斯拉Model 3是一款設計時不考慮駕駛員的汽車，而且是故意為之。
沒有任何旋鈕，就差把方向盤也去掉。在大部分操作中，你都需要通過觸屏去實現。你必須點擊螢幕打開擋風玻璃上的刮水器，之前作為駕駛員形成的所有習慣都要重新推翻在這塊螢幕上通過交互進行實現，這對於老司機來說聽起來簡直是一個災難？ 他們不能再依靠純粹的本能和肌肉記憶來操縱自己的汽車了。
但是我不認為特斯拉這樣做只是為了前衛或者炫技的冒險行為，他們這樣做是在為將來無人駕駛（沒有司機）的世界做好準備。
Model 3為搭乘體驗（而非駕駛）而設計
在UI中設計中，一個個設計項目告訴了我一切：螢幕解析度至關重要。
這輛車本來可以像垂直的螢幕一樣，就像S型和X型一樣，但是並沒有這麼設計沒有。 相反Model 3的長寬比為8：5，解析度約為1920x1200px。 為什麼這很重要？
底部（固定）控制項是120px高。
1200-120 = 1080。
1920×1080，這真的是一個高清電視。
高清晰的螢幕解析度表明，特斯拉要用他們的中央控制螢幕觀看視頻，而不是駕駛汽車。 我認為這是無人駕駛的未來。 這不是一個有著奇怪顯示幕的汽車，而是一個移動的家庭影院。 不過從實現到普及是一個漫長的過程，從法規到技術成熟還為時尚早，但不得不說看電影的時候選擇車中間位置真的很不錯。
當然，我並不是Elon Musk的得力助手，這些只是我的猜測和自己的想法。 所以，如果你們覺得我是錯的，你們可以按照自己的想法去做。
打破UI去分析使用者介面
以下是UI截圖展示給大家
駕駛模式 - 路線導航介面
連結位址如下：https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=37%3A2923值得注意的是，整個交互顯示介面位於駕駛員的手臂長度範圍內，並位於駕駛員的週邊視野內。
泊車模式 介面
連結位址如下：https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=497%3A14002看起來Model 3有很多情景感知元素， 例如，當您停車時，只有適用於停車的控制器才會出現，它真的很聰明。
快速設置介面
連結位址如下：https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=178%3A1567在這款車上有很多設置任務，但是看起來您可以通過配置一個快速控制控制項來完成，來設置最常用的功能。
音樂控制介面
連結位址如下：https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=497%3A14050
似乎這款車內置音樂明確強調專輯而不是單獨的歌曲，所以我想這輛車的音樂存儲量會很大，也會有更豐富的聲控模式。
最後的思考
我發現Model 3的設計和最初約伯斯發佈第一款iPhone時候的場景非常類似，沒有任何實體按鈕，所有操控和交互都通過觸控式螢幕來實現，約伯斯向觀眾展示了當時手機行業所有其他主流智慧手機，及時當時雜亂、 固定的物理鍵盤還沒有完全過時 。 但是如果今天有人要用帶有物理鍵盤的手機接打電話，他們很可能會被人笑話。
為什麼我們不以同樣的方式看待汽車呢？ 為什麼我們或者看到一輛汽車中有一個集成的交互顯示介面會猶豫不敢嘗試呢？ 這與蘋果放棄實體鍵盤時有什麼不同？
我知道你們會說什麼，那是一部電話，這是一輛車，他們的對話模式和使用場景明顯不同。
但是軟體可以更新，物理按鈕不能無線維修。他們不能隨時的改變來適應新的可能。
Tom Johnson文章地址：https://blog.figma.com/what-teslas-model-3-ui-reveals-about-its-vision-for-the-future-eb01a75ae979
補充一些關鍵交互介面
Model 3 的 HMI 設計是一種簡潔但很完整的設計，設計和交互邏輯非常清晰，所有的功能集成在這塊螢幕上並不顯得擁擠或雜亂，而是呈現了一種少即是多的簡潔美感。Model 3 的內飾和交互設計對汽車行業可以算一次顛覆式創新，車內除了方向盤上兩個多維滾輪和方向盤後的兩個擋杆之外，所有的控制操作、資訊展示都集成在了儀錶台正中間的螢幕上。沒有 HUD，傳統儀錶統統捨棄，方向盤、操控顯示幕和上貫通式的空調出風口，營造出了現代、簡潔明快的設計氛圍，也呈現出了一種高度一體化的概念，對汽車HMI設計有很高的參考價值。
轉自 汽車HMI
拼湊在一起Figma元件，開關，按鈕以及所需要的一切。 當我還是一個孩子的時候，每個星期天邊看動漫邊畫畫，像小時候一樣，我通過跟蹤別人的工作來完成新的挑戰。 如果說史努比和兔八哥教我如何繪製，也許在這裡這些圖片會説明我跨越製作汽車交互介面的挑戰。我在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
我從Model 3 UI設計中學到了什麼
這輛車不是為完美的駕駛體驗而設計的
什麼???
是。 這確實是我想說的。
特斯拉Model 3是一款設計時不考慮駕駛員的汽車，而且是故意為之。
沒有任何旋鈕，就差把方向盤也去掉。在大部分操作中，你都需要通過觸屏去實現。你必須點擊螢幕打開擋風玻璃上的刮水器，之前作為駕駛員形成的所有習慣都要重新推翻在這塊螢幕上通過交互進行實現，這對於老司機來說聽起來簡直是一個災難？ 他們不能再依靠純粹的本能和肌肉記憶來操縱自己的汽車了。
但是我不認為特斯拉這樣做只是為了前衛或者炫技的冒險行為，他們這樣做是在為將來無人駕駛（沒有司機）的世界做好準備。
Model 3為搭乘體驗（而非駕駛）而設計
在UI中設計中，一個個設計項目告訴了我一切：螢幕解析度至關重要。
這輛車本來可以像垂直的螢幕一樣，就像S型和X型一樣，但是並沒有這麼設計沒有。 相反Model 3的長寬比為8：5，解析度約為1920x1200px。 為什麼這很重要？
底部（固定）控制項是120px高。
1200-120 = 1080。
1920×1080，這真的是一個高清電視。
高清晰的螢幕解析度表明，特斯拉要用他們的中央控制螢幕觀看視頻，而不是駕駛汽車。 我認為這是無人駕駛的未來。 這不是一個有著奇怪顯示幕的汽車，而是一個移動的家庭影院。 不過從實現到普及是一個漫長的過程，從法規到技術成熟還為時尚早，但不得不說看電影的時候選擇車中間位置真的很不錯。
當然，我並不是Elon Musk的得力助手，這些只是我的猜測和自己的想法。 所以，如果你們覺得我是錯的，你們可以按照自己的想法去做。
打破UI去分析使用者介面
以下是UI截圖展示給大家
駕駛模式 - 路線導航介面
連結位址如下：https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=37%3A2923值得注意的是，整個交互顯示介面位於駕駛員的手臂長度範圍內，並位於駕駛員的週邊視野內。
泊車模式 介面
連結位址如下：https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=497%3A14002看起來Model 3有很多情景感知元素， 例如，當您停車時，只有適用於停車的控制器才會出現，它真的很聰明。
快速設置介面
連結位址如下：https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=178%3A1567在這款車上有很多設置任務，但是看起來您可以通過配置一個快速控制控制項來完成，來設置最常用的功能。
音樂控制介面
連結位址如下：https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=497%3A14050
似乎這款車內置音樂明確強調專輯而不是單獨的歌曲，所以我想這輛車的音樂存儲量會很大，也會有更豐富的聲控模式。
最後的思考
我發現Model 3的設計和最初約伯斯發佈第一款iPhone時候的場景非常類似，沒有任何實體按鈕，所有操控和交互都通過觸控式螢幕來實現，約伯斯向觀眾展示了當時手機行業所有其他主流智慧手機，及時當時雜亂、 固定的物理鍵盤還沒有完全過時 。 但是如果今天有人要用帶有物理鍵盤的手機接打電話，他們很可能會被人笑話。
為什麼我們不以同樣的方式看待汽車呢？ 為什麼我們或者看到一輛汽車中有一個集成的交互顯示介面會猶豫不敢嘗試呢？ 這與蘋果放棄實體鍵盤時有什麼不同？
我知道你們會說什麼，那是一部電話，這是一輛車，他們的對話模式和使用場景明顯不同。
但是軟體可以更新，物理按鈕不能無線維修。他們不能隨時的改變來適應新的可能。
Tom Johnson文章地址：https://blog.figma.com/what-teslas-model-3-ui-reveals-about-its-vision-for-the-future-eb01a75ae979
補充一些關鍵交互介面
Model 3 的 HMI 設計是一種簡潔但很完整的設計，設計和交互邏輯非常清晰，所有的功能集成在這塊螢幕上並不顯得擁擠或雜亂，而是呈現了一種少即是多的簡潔美感。Model 3 的內飾和交互設計對汽車行業可以算一次顛覆式創新，車內除了方向盤上兩個多維滾輪和方向盤後的兩個擋杆之外，所有的控制操作、資訊展示都集成在了儀錶台正中間的螢幕上。沒有 HUD，傳統儀錶統統捨棄，方向盤、操控顯示幕和上貫通式的空調出風口，營造出了現代、簡潔明快的設計氛圍，也呈現出了一種高度一體化的概念，對汽車HMI設計有很高的參考價值。
轉自 汽車HMI