汽車交互專題！全方位解讀特斯拉Model 3中控大屏交互布局

今天我們來聊一聊特斯拉最新的車型 Model 3的中控大屏，這是一塊具有標(biāo)志性意義的中控設(shè)計。Model 3 的HMI堪稱是對汽車行業(yè)的一個顛覆性作品，車內(nèi)采用了極簡的內(nèi)飾設(shè)計基本取消的硬件按鈕操作，甚至在所有車上都是標(biāo)配的汽車儀表都不復(fù)存在了。所有功能操作幾乎都匯集到了車內(nèi)的中控大屏上。所有的操作只需要在大屏上點一下、劃一下就能很快地操作完成。

特斯拉交互布局分析

Model 3 的交互設(shè)計把15寸屏幕整體分成了三塊區(qū)域：快捷菜單區(qū)域，行車信息區(qū)域，內(nèi)容切換區(qū)域。

• 快捷菜單區(qū)域是快捷功能的操作入口，這些快捷功能的內(nèi)容都會以浮窗的形式在右側(cè)內(nèi)容展示區(qū)臨時展示。并且這些彈窗都不會直接全部覆蓋右側(cè)內(nèi)容展示區(qū)域，而是只會默認(rèn)覆蓋底部的一部分。
• 行車信息區(qū)域是駕車相關(guān)的數(shù)據(jù)信息，也就是承載原有的方向盤下的汽車儀表內(nèi)容。這些數(shù)據(jù)的優(yōu)先級非常高不會被其他內(nèi)容所遮蓋，例如車速，檔位，自動駕駛狀態(tài)等信息。
• 內(nèi)容切換區(qū)域默認(rèn)顯示地圖路況信息，把路況導(dǎo)航的重要度提升到了最高，同時也把地圖路況定義為桌面背景，其他快捷功能都會在這個區(qū)域以浮層的臨時形式展現(xiàn)。

Model 3 的交互設(shè)計默認(rèn)展示了安全駕車相關(guān)的內(nèi)容，多媒體娛樂相關(guān)的內(nèi)容都以浮窗的形式展現(xiàn)。例如音樂模塊默認(rèn)只會展示少量的音樂信息，如果需要查看和操作更多信息需要做兩次點擊的操作才能全部展開。這種交互布局方式很好的體現(xiàn)了車載HMI的功能需求和場景需求。

細(xì)分功能匯總

• 快捷菜單區(qū)域，負(fù)責(zé)常用的空調(diào)、座椅調(diào)節(jié)入口，以及車輛控制、多媒體等功能入口。
• 行車信息區(qū)域，左承擔(dān)了傳統(tǒng)「儀表屏」的功能，顯示車速相關(guān)所有信息，ADAS相關(guān)信息，并且集成了后置攝像頭、語音指令、充電設(shè)置甚至手動雨刮器的入口。
• 內(nèi)容切換區(qū)域，則是多媒體信息顯示的區(qū)域，包括音樂、電話等。

特斯拉交互布局尺寸分析

特斯拉Model 3的車載中控大屏整體尺寸為1920*1200px，是一塊名副其實的超大操作屏幕。底部菜單欄的標(biāo)準(zhǔn)高度為120px，這樣的菜單高度能夠更好的在行車過程中點擊。

整體高度1200px減去菜單欄高度120px，內(nèi)容高度為1080px。也就是說整體的內(nèi)容區(qū)域為1920*1080px，剛好跟標(biāo)準(zhǔn)的視頻比例一致，這個尺寸是不是為娛樂視頻準(zhǔn)備的還有待考證。

特斯拉交互特點分析

1. 場景化設(shè)計

根據(jù)場景設(shè)置功能和內(nèi)容展示，同一個功能在不同場景下顯示的內(nèi)容也不相同，盡量滿足當(dāng)前場景下的功能需求。例如，娛樂多媒體功能，在駕駛過程中，導(dǎo)航功能相對重要，所以只顯示歌曲名稱、專輯的封面與少部分相關(guān)操作。用戶往上滑動，顯示相對多娛樂功能，占據(jù)一半屏幕。再往上滑動，顯示更多娛樂內(nèi)容。這種場景化設(shè)計思路是Model 3最重要的設(shè)計思路。

2. 可視化操作設(shè)計

可視化的操方式，空調(diào)的風(fēng)向可通過向上、平行、向下、向左、向右的滑動實時的控制出風(fēng)口。它通過軟件可視化方式來實現(xiàn)跟家里的操作一致，具有趣味性，有效地降低了用戶的學(xué)習(xí)成本，提高產(chǎn)品的使用效率。

這種可視化的操作方式比起硬件操作更加的靈活有趣。

3. 降低層級

Tesla Model 3 界面設(shè)計首先默認(rèn)展示跟安全駕駛相關(guān)的內(nèi)容，其他功能內(nèi)容都以模態(tài)窗口、浮窗的方式展示，盡可能的降低操作界面的層級，使用完成即收起內(nèi)容，最大程度提高產(chǎn)品使用效率。因為車載UI特殊的行業(yè)屬性和功能需求，注定了必須要以安全駕駛為核心，其他娛樂功能為輔助。這個前提也就決定了它的操作層級必須要做到最低。

4. 自定義內(nèi)容

Model 3這次的設(shè)計可以自定義設(shè)置菜單功能選項，盡可能的滿足不同用戶的個性化需求，工具欄其中部分功能對用戶開放，用戶可以根據(jù)自己的使用習(xí)慣就行自定義產(chǎn)品功能位置。例如，可以自定義將微信應(yīng)用設(shè)置到快捷菜單中。這種設(shè)計也體現(xiàn)了特斯拉追求人性化設(shè)計的理念。

5. 減少硬件操作（有好有壞）

這次的Model 3的設(shè)計中最大的設(shè)計理念就是盡量的拋棄物理按鍵的操作，比如空調(diào)的溫度風(fēng)向的設(shè)置、雨刷、汽車前蓋、后蓋、車內(nèi)飾的存物箱、天窗等開與關(guān)。所有的設(shè)置操作都放置在了中控大屏之中。這也許是今后HMI的一個大的趨勢。當(dāng)然也有看法是說，由于成本問題導(dǎo)致縮減了硬件設(shè)施，關(guān)于這些爭論只能拭目以待了。

Tesla Model 3的HMI設(shè)計是汽車行業(yè)的革命性產(chǎn)品，其對HMI的設(shè)計思路有了極大地提升。注重場景化設(shè)計，有限安全駕駛的功能需求并且合理的設(shè)計了交互方式。值得汽車UI行業(yè)的設(shè)計師仔細(xì)研究學(xué)習(xí)。

歡迎關(guān)注作者的微信公眾號：

「汽車UI設(shè)計好文」

• 《UI丨重塑車載用戶體驗之儀表盤的重設(shè)計》
• 《讓用研落地！重塑車載用戶體驗之為司機(jī)焦慮而設(shè)計》
• 《汽車UI界面怎么做？來看特斯拉和Apple Carplay等高手的案例！》
• 《向著下一個時代進(jìn)發(fā)！酷炫的汽車儀表盤UI設(shè)計合集》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備： http://hao.uisdc.com