車機的界面組件，該怎么用

就和人體內的器官各司其職能讓不同的細胞更好地工作一樣，車機界面的交互反饋組件也承擔著類似的責任，以不同的承載形式確保內容更好地展現。

現在的車機用的比較多的交互組件形式主要有三種：抽屜、折疊面板和彈窗。其實每一種形式都大有門道。

抽屜的使用習慣？

(資料圖片僅供參考)

像主界面下拉出來的通知中心，從屏幕邊向右拉出的側邊欄，再加上跟手呼出的動效展示，它們的使用感受是不是和我們拉開抽屜的感覺很像？

按照我們平時在抽屜里收納東西的習慣，放進去的東西一般都是比較瑣碎、無關聯、不緊急但有需要時又能以最快速度拿到的，這些負一屏的應用場景也是如此。主要作用是補充、可編輯便捷功能，提高生活用車場景效率。

功能界面由需要用戶主動喚起，上面集成的功能可以沒有關聯性，功能屬性也沒有明確的約束，同時用戶也可以自定義選擇放哪些、放多少。

蔚來ET5

另外，這些浮層面板上的功能容許兩個層級的存在，比如涉及到呈現內容相對較多的功能，對應的圖標可以鏈接到更小層級的功能頁面進行展示。

比如情景模式、音場調節、氛圍燈等功能如果放在上面，需要點進二級菜單用戶才可以更精確地進行使用。

使用抽屜的好處在于我們可以停留在任意應用界面或者主界面打開并使用上面的功能，需要使用時劃拉一下就能快速找到。

并且收回順序一般也是按照抽屜打開的順序層層收回，操作流程不容易出現中斷。

因此，評判浮層面板是否好用的標準也顯而易見，比如喚起的動效展示、集成的功能是否支持自定義，功能圖標的易識別性，界面以及圖標尺寸的統一性等。

當然，“抽屜把手”——視覺引導也很重要，關于同事過了兩個月才發現蔚來車機主界面的側邊欄這個例子都快被我用爛了。

總之，在進行相關的交互設計時，“視覺引導”和“操作引導”至少擇其一才能保證它的可發現性。

極狐阿爾法S HI版

為了保證功能的直觀性和易用性，目前車企們也都在不約而同地努力簡化層級，所以像座椅調節、空調等使用頻率特別高的功能一般都會被單獨拎出來直接放在主界面上。

折疊面板多重要？

而為了保證主界面簡潔的畫面效果，這些被單獨拎出來的功能就會被集成在現在車機幾乎必備的卡片欄或是Dock欄上，它們其實是折疊面板的一種類型。

理想L9

折疊面板是讓界面干凈整潔的手段之一，只保留最重要的信息進行展示，隱藏的次要信息內容會整合成一個新的二級頁面。

它的主要作用是給內容做歸類劃分，更好地展示詳細信息，同時提高用戶的屏幕操作效率。

比如音樂的卡片欄第一眼看上去一般只有當前歌曲以及操作按鍵，導航卡片欄保留搜索框和收藏地點的分類引導，用戶可以直接使用，必要時點開就可以看到全部的功能界面。

也有一些車機玩出了更多花樣，比如Flyme Auto的Smart Bar、鴻蒙OS的空調無級調節和高合Hiphi Z OS的MiniBar等等。

Smart Bar會在你打開應用回到主界面或是打開多個應用后，用上個應用的關鍵信息對當前正在使用的應用進行視覺提示。比如你打開音樂后又打開導航，Smart Bar會呈現音樂功能的相關信息。

Flyme Auto

鴻蒙OS主界面空調的無級調節大家也都很熟悉了，這也是現在很多車機效仿的對象，它的使用形式和高合Hiphi Z OS的MiniBar的功能是有些相似性的。

高合將Hiphi Bot解鎖、空調、風量以及音量的調節都做成了視覺引導邊邊的形式，可以直接上手調節，所有場景可用，同時也幾乎沒有占屏面積。

另外一種常見的折疊面板形式主要應用于設置頁面，它也容許存在更多層級，由設計師的層級分類來決定，會有在第一層級介紹的下方再嵌套一個折疊面板的情況。在一般情況下新的折疊面板會默認收起。

當然，折疊面板的功能也是需要用戶主動喚起的。從用戶實際操作的角度來看，在比較小的層級菜單里也不建議重復嵌套折疊面板，畢竟這在某種意義上增加了新的層級，也不太符合相關頁面的排布屬性。

令我印象比較深刻的就是極狐阿爾法S車機里的折疊面板了，它在“設置”頁面的相關設計上犯了2個錯誤點。

極狐阿爾法S HI版

第一點是基于它本身高度比較窄的長屏，操作邏輯應該盡量以橫向為主，事實上它也確實是這樣設計的，但在設置界面的第一行層級下嵌套的折疊面板尺寸比較小，采用豎向瀏覽操作的形式是不夠方便的。

第二點在于，由于子面板上的內容也比較多導致面板高度比屏幕還長，這時它選擇采用直瀑式瀏覽的形式與整個大頁面是分離出來的，這與我們的視覺習慣也是有點違和的。整個折疊面板跟手流動的的視覺體驗會更舒適一些。

因此它也在操作上給了Plan B：點擊屏幕最下面的功能名稱，它會自動向上跳出一行。但在這樣長窄的屏幕上重復如此操作也會容易使用戶失去耐心。

不難看出特殊的屏幕尺寸對于操作邏輯的設計往往是更難的，折疊面板也是三種交互形式中與其關聯度最高的一種，它也成為評價車機好用程度的關鍵標準之一。

彈窗的不可替代性？

當車機接收到OTA通知的時候，相關內容會直接在界面彈出提醒用戶。沒錯，這種類似對話框的交互形式就是第三種常用交互組件：彈窗。它的主要作用也是給內容作補充說明，同時在警告之類的關鍵信息提示方面具有不可替代的作用。

彈窗的交互場景就比較廣了，可以是系統觸發，可以由用戶主動喚起，也可以由用戶間接觸發。

由系統觸發的功能界面往往是比較關鍵的任務類型，例如前面提到的OTA通知，或者車輛突發故障提醒，它希望用戶優先處理緊急事務，但又不想中斷原本的操作流程時，彈窗就成了最合適的方式。既能引起注意，又能避免頁面的跳轉。

理想L9

由用戶主動喚起的彈窗界面也有很多，但多數為普通功能。比如阿維塔車機主頁上的音量調節功能、理想L9上的模式切換功能、鴻蒙系統中更小的層級功能顯示形式等。

問界M5

由用戶使用功能間接觸發喚起彈窗的場景目前是比較少的。發生頻率比較高的是座椅調節后系統彈窗詢問是否需要記憶坐姿的功能，多數車都有，但不同車機彈窗的位置會有一些差別 。

將彈窗作為普通功能的承載組件時，需要盡量選擇內容篇幅少、體量小的功能，更注重可識別性。

寫在最后

這三種交互組件在某些維度具有相似性，但在某些場景都有各自的不可替代性，兩兩之間也可以進行搭配組合使用，不同車機在使用邏輯上也會有自己對于某種交互組件的偏愛。

理想L9

比如理想、捷尼賽思、大眾ID系列的車機就比較偏愛對于卡片欄的應用，保證了操作的直觀性。

再比如鴻蒙OS的特點就很鮮明，信息展示夠簡潔，只有一層抽屜，沒有引入側邊欄。

問界M5

它在層級的分類展示上明顯偏愛折疊面板結合彈窗的形式，比如車輛設置和主頁右下角的音量調節界面。拿音量調節來說，用戶可以先在折疊面板調節當前音量，點擊旁邊的小標會在屏幕中央出現彈窗，可以進行所有的音量調節。

其實如果按照用戶場景、信息內容篇幅和優先級、屏幕形式和尺寸等關鍵要素對這三種交互組件進行匹配，至少在車機的使用邏輯上是不會出錯的。

不過需要注意的是，車機同類型功能界面的組件不可以混淆使用不同組件，要保持用戶的慣性思維和交互反饋的一致性。

最近Flyme Auto的實車體驗視頻實實在在火了，但網友們也對這套車機系統褒貶不一，我想關鍵原因也是出在了這里吧。