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

特斯拉交互布局分析

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

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

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

細(xì)分功能匯總

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

特斯拉交互布局尺寸分析

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

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

特斯拉交互特點(diǎn)分析

1. 場(chǎng)景化設(shè)計(jì)

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

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

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

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

3. 降低層級(jí)

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

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

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

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

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

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

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

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

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

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

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

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