Tom Johnson 是一名位于亞特蘭大的產(chǎn)品設(shè)計師那伐，更多精彩內(nèi)容可訪問他的博客專欄 。
本文謹獻給設(shè)計師/汽車愛好者蕉鸳。
文章細分了第一款大眾市場觸摸屏電動汽車特斯拉 Model 3 的儀表板控制和界面的細節(jié)骇扇。從特斯拉的UI設(shè)計我們可以看出特斯拉的長期戰(zhàn)略，以及他們對未來無人駕駛的態(tài)度间坐。
拉至文章底部獲取?Figma 源文件灾挨，以及原型交互鏈接。
其他資源分享：
創(chuàng)業(yè)公司絕對不會告訴你他們在用的工具們
我們需要像當初PS轉(zhuǎn)Sketch一樣眶诈，用Figma進行設(shè)計嗎涨醋？
本文閱讀時間：約6分鐘。
特斯拉 Model 3
從一開始逝撬，我就一直在關(guān)注特斯拉 Model 3 的傳奇故事浴骂。去年通過測試駕駛了特斯拉S型，就愛上了它如何操控駕駛宪潮、以及敏銳的客戶體驗調(diào)整溯警。
我發(fā)現(xiàn)自己也迷上了“經(jīng)濟實惠”版本的前景，所以追蹤看了每一次 Model 3 的宣布狡相。
概念很酷梯轻，但是我不相信特斯拉真的會在把汽車推向消費者時，把儀表板放倒尽棕≡簦“現(xiàn)在可能很酷，但市場營銷人員或消費者不會接受，這應該只是一個概念伊诵〉グ螅” 我這么認為著。
但是....我錯了曹宴。
沒有旋鈕搂橙。
沒有空調(diào)通風口。
也沒有打開手套箱的手柄笛坦。
他們將所有一切都收在了汽車中間的觸摸屏上区转。
特斯拉的消息嚇得寶寶緊緊抱住了自己。
Model 3 確實有四個車輪和一個汽車形狀的車身版扩，這是與大多數(shù)汽車相似的地方废离。
但我想知道特斯拉如何隱藏車窗里的對于汽車的所有控制權(quán)，所以我開始在網(wǎng)上搜索關(guān)于用戶界面的所有信息资厉。
過了一段時間厅缺，我終于遇到了一位名叫 Andrew Goodlad 的設(shè)計師的一個項目，這個設(shè)計師根據(jù)新聞發(fā)布會再現(xiàn)了特斯拉 Model 3 的用戶界面宴偿，以及汽車內(nèi)部的搖搖晃晃的 YouTube 視頻湘捎。他做了一個原型。
為什么我決定重新創(chuàng)建用戶界面
他的原型很酷窄刘，但靜態(tài)圖像還不足以滿足我的好奇心窥妇。我想分析這些零部件，并確切地了解特斯拉如何設(shè)計其瘋狂的新車儀表板......以及為什么娩践。
我開始從圖像中重建特斯拉 Model 3 UI活翩。我制作了圖標，采樣顏色翻伺，設(shè)計了一個自定義的地圖框視圖材泄，將 Figma 組件，開關(guān)吨岭，按鈕等所有東西拼湊在一起拉宗。
我在 Figma 做了大部分的設(shè)計工作：
這是可點擊的原型交互：
我從 Model 3 UI 中了解到了什么
這輛車不是為完美的駕駛體驗而設(shè)計的。
Whattt???
對辣辫，你沒有看錯旦事。
特斯拉 Model 3 是一款設(shè)計時不考慮駕駛員的汽車。并且是故意的急灭。
沒有旋鈕姐浮、幾乎沒有方向盤。你必須點擊屏幕打開擋風玻璃刮水器葬馋。（有一個控制臺杠桿可以打開它們卖鲤，但頻率是通過屏幕控制的肾扰。）
你必須點擊一個屏幕來打開手套箱。你必須點擊一個屏幕打開緊急制動扫尖。（這也是自動的白对，但手動應用程序似乎在設(shè)置中。）
對一個司機來說换怖，這個聽起來是不是很糟糕？他們不能再依靠純粹的本能和肌肉記憶來操縱自己的汽車蟀瞧。
但我不認為特斯拉這樣做只是前衛(wèi)沉颂，他們這樣做，是在為沒有司機的世界做好準備悦污。
為乘坐體驗而設(shè)計的車
在 UI 中铸屉，一個接一個的因素都告訴了我一切：屏幕分辨率。
這輛車本來可以像垂直的屏幕一樣切端，就像S型和X型一樣彻坛，但是它沒有。相反踏枣，Model 3 的長寬比為 8：5昌屉，分辨率約為 1920x1200px。
WHY茵瀑？
我們來看间驮，底部控件是 120px 高。
1200 - 120 = 1080马昨。
1920 × 1080竞帽。
這是一個高清電視啊，盆友們鸿捧。
高清電視向我們表明屹篓，特斯拉用他們的中央控制臺來看東西，而不是讓你去駕駛汽車匙奴。這個 Bad Boy 將是無人駕駛的未來堆巧。
這不是一個奇怪的儀表板車，而是一個移動的客廳饥脑。
當法規(guī)和技術(shù)到位的時候恳邀，看電影就沒有比在車中間更好的位置了（微笑）。
下面讓我們看看用戶界面
以下是 UI 不同部分的截圖灶轰。
途中駕駛模式
值得注意的是谣沸，儀表板在駕駛員的手臂長度范圍內(nèi)，并且在駕駛員的外圍視野內(nèi)笋颤。對于右駕市場來說乳附，這個視野很容易被翻轉(zhuǎn)内地。
停放模式
看起來 Model 3 上有很多潛在的交互。例如赋除，當你停車時阱缓，只適用于停車的控制器才會出現(xiàn)。
快速設(shè)置
在這款車上有很多設(shè)置举农，但是看起來你可以配置一個快速控制的部分荆针，以便查看最常用的功能。但也可能這些是自動填充的颁糟。
音樂控制
似乎有一個明確的專輯而不是單獨的歌曲航背。不知這個車上會有多少聲音控制。
特斯拉與蘋果
最近棱貌，我正在重新審視 Steve Jobs 推出的 iPhone 的主題演講玖媚，想到 Model 3 和 iPhone 有著明顯的相似之處。
都沒有物理按鈕婚脱。
喬布斯向觀眾展示了業(yè)界所有其他主流智能手機今魔，iPhone 最大的革新就是沒有物理鍵盤。
所以我們?yōu)槭裁床灰酝瑯拥姆绞娇创嚹卣厦常窟@與蘋果放棄鍵盤時有什么不同错森？
或許你會說，那是一部電話惹想，這是一輛車问词。交互方式和用例明顯不同。
但是軟件可以更新嘀粱。物理按鈕不能獲得空中修復激挪。它們無法改進，它們無法改變锋叨。畢竟垄分，這個想法現(xiàn)在看起來也不是那么瘋狂了。
瓜田君的話
想當年娃磺，iPhone 作為高端智能機薄湿，讓普通消費者們望而卻步。但幾年后偷卧，人人一手 iPhone 機乃是平常豺瘤。
不久的將來，當無人駕駛汽車得到市場的廣泛認可和普及后听诸，相信設(shè)計師們的職業(yè)頭銜又會多一條細分：無人駕駛汽車 App UI 設(shè)計師坐求。
特斯拉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
更多精彩內(nèi)容，下期再見晌梨。
喜歡就點個贊唄 d(^_^o)
西瓜設(shè)計研究所
互聯(lián)網(wǎng)創(chuàng)業(yè) | UI設(shè)計 | 開發(fā)資源 |教程
未經(jīng)授權(quán)請勿轉(zhuǎn)載桥嗤，煩請留言獲刃肫蕖（侵權(quán)必究）
? uirush.com
