推薦閱讀

這或許是所有智能座艙體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)都在關(guān)注的重要時刻，因?yàn)樗麄冇瓉砹艘粋€強(qiáng)大的對手，一個懂車/懂用戶/懂體驗(yàn)/懂設(shè)計(jì)的對手，一個大家陌生而又熟悉的對手。

說起來我也算是資深的魅友。大學(xué)剛畢業(yè)的時候省吃儉用買了第一代 MiniPlayer，在那個 MP3 都是筒狀柱狀物品的時代，全彩屏+觸控操作且薄薄一片的機(jī)身，即便是放到現(xiàn)在這個時代它的外觀設(shè)計(jì)也不過時。而魅族的 MP3 在我初入社會的那幾年，公交里，地鐵上，孤獨(dú)上下班的身影里總有它的陪伴。而在沉寂了一段時間后，魅族也帶著他們最新系列的產(chǎn)品，重回市場一線，也重新回到了大眾的視野。

最早聽說魅族要做車機(jī)，我是興奮的。因?yàn)樵邝茸迨謾C(jī)里，他們的 Flyme 系統(tǒng)就是以卓越的軟件交互和精美的 UI 視覺成名著稱的，而現(xiàn)在安卓 OS 里最好用的 ColorOS 設(shè)計(jì)負(fù)責(zé)人，也來自于魅族。因此我有理由相信，一家重視用戶體驗(yàn)設(shè)計(jì)的公司來做車機(jī)，一定不負(fù)眾望。而從之前的預(yù)熱里透露出來的幾張截圖，幾個動畫，已經(jīng)證實(shí)了我的想法，或許是業(yè)內(nèi)交互視覺最好的車機(jī)系統(tǒng) - FlymeAuto，他來了。

站在體驗(yàn)設(shè)計(jì)的專業(yè)角度，我會從 FlymeAuto 的交互和視覺上來給大家做一些“不一樣的”解讀。希望能解構(gòu)出他們的設(shè)計(jì)思路，也希望在這樣的解構(gòu)中加深我對智能座艙界面設(shè)計(jì)的認(rèn)知和理解。

FlymeAuto 的設(shè)計(jì)初衷，是通過建立人與人、人與物、物與物之間的互聯(lián)互通，同時期望與手機(jī)端聯(lián)動和應(yīng)用流轉(zhuǎn)，實(shí)現(xiàn)多終端及全場景的沉浸式融合體驗(yàn)。從我的理解來看，魅族在建立一套更合理的車機(jī)信息布局邏輯，更創(chuàng)新的座艙交互體驗(yàn)以及擬物化空間體驗(yàn)，通過他們擅長的 UI 視覺設(shè)計(jì)/動效設(shè)計(jì)以及硬件調(diào)校能力，將自己在手機(jī)軟件領(lǐng)域數(shù)十年的積累一并投入，打造國內(nèi)第一梯隊(duì)的座艙體驗(yàn)設(shè)計(jì)。

一、Interactive：人機(jī)交互設(shè)計(jì)

1. 可切換的桌面模式

FlymeAuto 提供市面上主流的壁紙模式/車輛場景以及地圖導(dǎo)航模式自定義切換。毫不夸張的說，這應(yīng)該是全球首家支持三模式界面切換和自定義的車機(jī)，滿足各類用戶的需求，你需要的模式我都有。如果說對這個模式切換還有更高要求的話，車機(jī)能通過地理位置及用戶使用習(xí)慣進(jìn)行自主切換，例：上下班出門時段自動切換為地圖模式，回到家駐車以后切換為車輛模式，停車休息變?yōu)楸诩埬Ｊ降鹊?，就更智能化了?/p>

2. 高度自定義的卡片及 Dock 欄

在這三種模式下的快捷卡片，用戶都可以自定義展示內(nèi)容/排序和刪除。同時除了卡片可自定義，Dock 欄上的入口也根據(jù)需要自己增刪減。在互聯(lián)網(wǎng)時代，網(wǎng)站或者 APP 通過大數(shù)據(jù)算法可以實(shí)現(xiàn)千人千面的信息推送，讓每個人看到的界面根據(jù)自己的瀏覽習(xí)慣而不同。在 FlymeAuto 里，則可以通過更自由的功能模塊定制，讓用戶變成自己車機(jī)的產(chǎn)品經(jīng)理，根據(jù)自己的喜好，定義自己想展示的界面和功能入口。

快捷卡片自定義

Dock 欄空調(diào)功能自定義

Dock 欄應(yīng)用區(qū)域自定義

3. 扁平化的信息邏輯

從信息結(jié)構(gòu)層級上來說，車輛設(shè)置菜單的信息結(jié)構(gòu)非常扁平化，用戶不需要被淹沒在復(fù)雜的二級甚至三級菜單里，點(diǎn)開設(shè)置一步就能直達(dá)功能操作界面，提高了操作效率，也避免了在行車過程中因?yàn)檎覍?nèi)容而使得眼睛離開視線正前方產(chǎn)生的潛在危險場景。當(dāng)然還有更多的內(nèi)容設(shè)置劃分緯度是否合理，功能命名是否簡單直白易懂，我目前還未體驗(yàn)到，有待實(shí)踐的檢驗(yàn)。

4. SmartBar

FlymeAuto 在人機(jī)交互上的另一大創(chuàng)新，就是在 Dock 欄上首創(chuàng)了 SmartBar，這或許也是首創(chuàng)了吧（手動狗頭）。它激活了傳統(tǒng)車機(jī)里固化的控制欄，將一個類似 iPhone 靈動島的功能放在了這里，承載展示各類后臺臨態(tài)信息及入口的功能，未來還會根據(jù)車輛的狀態(tài)進(jìn)行實(shí)時切換，做到真正 Smart（小）且 Smart（智能）。

5. 更靈活的窗口模式

大家如果有印象的話，還記得我在理想 L 系車機(jī)重構(gòu)的文章里提到過，關(guān)于單一場景下的多任務(wù)狀態(tài)信息處理。在 FlymeAuto 上，他們用“小窗口”解決了這個問題。窗口可以懸浮在界面左側(cè)或者右側(cè)，窗口的內(nèi)容可以是車載 APP，也可以是手機(jī) APP。從交互邏輯上看，既不干擾當(dāng)前的信息操作，也能夠多任務(wù)呈現(xiàn)，提升了大屏幕下車機(jī)操作的效率。

6. 無需學(xué)習(xí)成本的全局手勢和自然手勢

左滑返回 / 下拉出現(xiàn)負(fù)一屏幕 / 三指縮放返回桌面。這些在移動設(shè)備上的通用手勢能力，在車機(jī)上也得到了繼承。沒有任何的學(xué)習(xí)成本，習(xí)慣操作 Pad 的同學(xué)用起來會更順手。在傳統(tǒng)手勢的基礎(chǔ)上，F(xiàn)lymeAuto 還加入了自然手勢交互，比心收藏 / 旋轉(zhuǎn)手勢調(diào)整音量等，讓車內(nèi)交互除了觸摸和語音之外，觸摸手勢和隔空手勢的可用性也加強(qiáng)。

二、Visual：視覺語言塑造

除了在人機(jī)交互上有上述的優(yōu)點(diǎn)外，F(xiàn)lymeAuto 在視覺上也嘗試打造一套獨(dú)特的風(fēng)格。從設(shè)計(jì)表現(xiàn)手法上來說更符合當(dāng)下的設(shè)計(jì)審美趨勢。我總結(jié)出來有幾下幾點(diǎn)：

1. 扁平化界面設(shè)計(jì)

很多人看到 FlymeAuto 第一眼，覺得舒適 / 順眼，但又說不上來哪里好看。視覺設(shè)計(jì)的審美評判，是一個系統(tǒng)工程，是圖標(biāo)，色彩和字體之間相互關(guān)聯(lián)又相輔相成的。去除掉復(fù)雜光影和質(zhì)感的卡片，搭配簡潔的線性扁平化圖標(biāo)，再配合中性飽和度的黑白灰配色，以及界面之間的柵格化標(biāo)準(zhǔn)和留白，讓整體界面呈現(xiàn)出來干凈整潔和美觀。這幾點(diǎn)說起來不難，但要真正每一點(diǎn)都兼顧到，設(shè)計(jì)團(tuán)隊(duì)沒有豐富的軟件行業(yè) UI 沉淀積累，是很難做到的。

2. 品牌元素的表達(dá)

很多人可能不知道，搭載在領(lǐng)克 08 上的這套 FlymeAuto，整體界面的配色以及 UI 細(xì)節(jié)，都是根據(jù) 08 這臺車型量身定制的。從“車輛”圖標(biāo)上的造型，到每一個圖標(biāo)的斷點(diǎn)設(shè)計(jì)，再到整體偏向于銳利的直角設(shè)計(jì)，都源自于領(lǐng)克 THE NEXT DAY 概念設(shè)計(jì)。將品牌的符號烙印進(jìn)車機(jī)里，這也是設(shè)計(jì)團(tuán)隊(duì)的用心之處。

3. 視覺規(guī)則的一致性

一個好的界面，除了有符合審美趨勢的視覺風(fēng)格，還有一個重要的原則就是“一致性”。我們往往見到的反面教材就是圖標(biāo)大小不一，當(dāng)前狀態(tài)的指示顏色不統(tǒng)一，界面選擇的組件長得不一樣等等，這些視覺設(shè)計(jì)上的“低級錯誤”，在系統(tǒng)級的 UI 設(shè)計(jì)上是絕對不允許存在的。因此由手機(jī) ROM 團(tuán)隊(duì)來設(shè)計(jì)車機(jī)系統(tǒng)，這樣的一致性問題是肌肉記憶，是刻在骨子里的規(guī)則，不會出錯，也不應(yīng)該出錯。

而關(guān)于質(zhì)感的表達(dá)，在 FlymeAuto 上也有著自己的規(guī)則。操作類的按鈕/控件是輕質(zhì)感 / 界面層級是磨砂玻璃質(zhì)感 / 而表示車輛功能演示的動畫及插圖，則是重質(zhì)感。不同的視覺功能屬性匹配不同的設(shè)計(jì)質(zhì)感表達(dá)，讓界面層次錯落但不會凌亂，界面布局之間有了節(jié)奏感。

4. 視覺情感化

最后，在好看好用的界面上，賦予一定的情感化設(shè)計(jì)，會讓界面生動起來。FlymeAuto 里的“節(jié)日壁紙”、“如然體驗(yàn)”和“情景空間”里的視覺，就是在美觀和一致性的基礎(chǔ)上，錦上添花，讓界面看起來更生動，也更有意義。

三、Motion：動態(tài)擬真觸達(dá)

智能座艙界面，是一個動態(tài)體驗(yàn)的過程。因此除了靜態(tài)的人機(jī)交互以及界面 UI 以外，我認(rèn)為 FlymeAuto 在動態(tài)及聲光效上開創(chuàng)了一個車內(nèi)設(shè)計(jì)先河。最為明顯的案例就是早期放出來的休憩模式視頻，車門聯(lián)動界面動效再到氛圍燈，是一個很完整的動態(tài)擬真效果展示。好的設(shè)計(jì)往往不是面面俱到，而是在一個不經(jīng)意的瞬間打動你，而這些微小的動畫細(xì)節(jié)，就是那個打動你的地方。

在 FlymeAuto 上，除了休憩模式，還有時光引擎 / 情景空間和如然體驗(yàn)這三大模塊驅(qū)動著動效擬真，讓用戶在這些沉浸式的場景下充分感受到設(shè)計(jì)帶來的儀式感。

時光引擎

如然空調(diào)

一鏡到底

四、其他功能

除了以上的亮點(diǎn)，還有很多體驗(yàn)細(xì)節(jié)值得大家去慢慢琢磨。

車內(nèi)的隱私安全和應(yīng)用權(quán)限管理，F(xiàn)lymeAuto 將手機(jī)行業(yè)的優(yōu)勢賦能車機(jī)，做到多賬戶數(shù)據(jù)隔離 / 通訊隱私保護(hù)以及錄音定位攝像頭等敏感權(quán)限使用的提醒；同時做到了手機(jī)+車機(jī)的無界互聯(lián)，車機(jī)即手機(jī)，更多應(yīng)用的無縫銜接和信息流轉(zhuǎn)，將車載屏幕拓展成了手機(jī)的另一個無限空間；車內(nèi)智能語音解決方案 Aicy，出生即具備蔚小理語音助手能力。不間斷連續(xù)會話 / 可見既可說 / 多成員語義識別等等，讓傳統(tǒng)車也具備了高度可用的語音能力。

如果說之前的預(yù)熱是前菜，那今晚 Flyme 的亮相就是一場滿漢全席。從人機(jī)交互到視覺 UI 再到信息安全生態(tài)應(yīng)用，軟硬件一體化，將自己在軟件行業(yè)和手機(jī)端的數(shù)十年積累解決方案都統(tǒng)統(tǒng)端上來。結(jié)合到億咖通之前公布的算力平臺和綜合解決方案，加入吉利集團(tuán)大家庭的魅族在智能座艙上還大有可為，前途光明。

五、體驗(yàn)建議

回到體驗(yàn)本身，F(xiàn)lymeAuto 真的沒有任何問題嗎？我覺得還是有提升空間的，在此前的閉門溝通會上我也提出了如下的兩點(diǎn)，供大家探討。

1. 有效的操作反饋和更可點(diǎn)擊的 UI 質(zhì)感

搭載于領(lǐng)克 08 的這套界面的 UI 視覺相對還是過于扁平，操作反饋目前在視覺上的效果看起來比較弱，尤其是 Dock 欄以及部分微小區(qū)域，高亮狀態(tài)不明顯，可以配合聲音進(jìn)行提示。但如果能在屏幕硬件里增加震動馬達(dá)，從視覺/觸覺再到聽覺給予用戶有效的操作反饋，可能會更完美。同時在 UI 質(zhì)感的表現(xiàn)上，純平并不是不好，但是否所有用戶都接受，還有待商榷。

2. 大屏幕下的信息展示效率及信息邏輯優(yōu)化，以及小窗口模式的迭代升級

同樣是基于首次搭載的硬件，15.4 英寸的 2.5K 屏，現(xiàn)在界面里部分最小號文字是否在車機(jī)里進(jìn)行高效的閱讀，也還是未知。例如中控大屏?xí)r間顯示在右上角，是離駕駛員最遠(yuǎn)的區(qū)域，而在駕駛員前方的屏幕里是否還有時間信息展示，都還是需要上車驗(yàn)證的。而關(guān)于小窗口模式，個人建議可以有更多模態(tài)和尺寸的設(shè)計(jì)，將組件原子化，支持更自由的尺寸縮放，以承載更多類型的信息布局。

最后，讓我們回歸到前面提到的問題，什么樣的智能座艙算“優(yōu)等生”呢，僅僅是一套好看的 UI 嗎？我覺得首先得有合理的信息布局，好用為先；其次得有看得過去的 UI，視覺美觀；同時得有流暢的響應(yīng)速度，不卡頓不死機(jī)；有優(yōu)秀的座艙體驗(yàn)動線，同時還具備可升級的硬件冗余。在滿足核心功能的基礎(chǔ)上，給予用戶更多的自定義空間；在交付后的軟件服務(wù)上，給予用戶可預(yù)期的升級迭代信息和有效的信息反饋渠道，這些，都是一個“優(yōu)等生”應(yīng)該具備的素質(zhì)基礎(chǔ)。

隨著時代的發(fā)展和變遷，用戶和車企之間的關(guān)系從“我告訴你怎么用”，已經(jīng)慢慢轉(zhuǎn)變?yōu)椤霸趺从媚阏f了算”。造車企業(yè)的用戶思維越來越多，以用戶為中心的體驗(yàn)場景也越來越多。如何站在用戶視角，做一個好的車機(jī)，魅族從手機(jī)行業(yè)的轉(zhuǎn)身給了大家一個很好的示例，那些已經(jīng)被趕超或者還未追上的同學(xué)們，還有很長的路要走。路漫漫其修遠(yuǎn)兮，加油～

我是呆呆。一個熱愛車 / 愛攝影 / 懂用戶體驗(yàn)的設(shè)計(jì)師。一個嘗試將自己在互聯(lián)網(wǎng)體驗(yàn)設(shè)計(jì)領(lǐng)域經(jīng)驗(yàn)結(jié)合到智能座艙設(shè)計(jì)的行業(yè)新人，歡迎與我一起探索和討論智能座艙體驗(yàn)設(shè)計(jì)。微博 ID：呆呆，關(guān)注話題 #呆總聊車機(jī)