他來了~ 他來了~ 一個月時間的打磨,不知道熬了多少次通宵了
為了輸出這篇競品分析文章,我也是夠拼了,利用周末的休假時間,預約這四家 4S 店進行試駕,并進行對車輛的拍照,和銷售對話的錄音等獲取到一手資料,再去做分析、總結這一次的探索。
大家很好奇我為什么想做一份 HMI 的競品分析呢? 因為我想做第一個發表實戰演練的 HMI 競品分析報告,大家可以去搜索一下百度、知乎都沒辦法搜索到直接可用的信息,我在寫每一篇文章的初衷,就是想彌補 HMI 行業的內容,將繁瑣的知識通過我寫的文章,能夠讓我的讀者們通俗易懂,能夠敢于跨入這個行業中去。
這篇文章的主要的核心就是實戰演練為主,有關于競品分析的基礎認知我這邊就不過多和大家闡述了,競品分析的方法論等等內容,我就不一一列舉,我會直接穿插到這篇文章中去,作為實戰演練的一部分。
剛開始我和大家一樣,想要做一份競品分析報告但由于實戰經驗不足,就會打開各大網站搜索相關的信息,但關于車載 HMI 的競品分析少之又少,根本毫無頭緒,因此我就立馬轉換策略,先從競品分析基礎知識開始學習,再去結合 HMI 的內容去實施,輸出報告。
我想很多設計師也有一個這樣的需求,就是想做一份側重點在于設計的競品分析報告,而不是長篇大論什么用戶體驗五要素,戰略層和范圍層這些都是我們沒有話語權去定奪的,只能去參與會議聽取內容而已,但不代表它們對于我們設計師不重要,除非你不想當“將軍”。所以這篇文章實戰演練的側重點會偏向于站在設計師的角度去考慮做一份 HMI 競品分析報告,本文將從表現層、框架層、結構層出發。
我的宗旨就是 → 所謂一份好的競品分析報告能夠達到易讀易懂、簡單直接即可,能說明問題就行。
那就開始吧~ 給我可愛的小讀者們直接上干貨,走 ni~
我們來看一下設計師是在哪個階段需要參與到競品分析中去,設計師的競品分析和產品經理輸出的競品分析側重點會有所不同,除了確定好競品,了解他的商業背景后,設計師會從用戶路徑拆解和交互維度分析,最后再視覺層分析,就是所謂的 #用戶體驗五要素# 中的表現層、框架層、結構層。
產品研發過程:一般是項目開始立項后 → 接下來是項目需求輸出(PM) → 再到后來就是產品設計(UX/UI) → 后續就是研發開發上線(程序) → 最后安排期 HMI系統升級迭代(OTA升級)。
先打個預防針 一開始做競品分析報告,我們應該更注重的是有針對性和目的性的對比。
在做對比內容的時候,就是要帶有強力的目的性的,然后在針對功能和界面進行分析。做競品分析報告切記不能在沒有目的的情況下去做分析,如果這樣去做分析,最后分析的內容深度會相對比較欠缺些。
所以分析競爭對手產品的整體定位、產品策略,找到新的切入點,切入點也可以從產品架構、交互設計、視覺表現等方面來進行,讓自己的產品有著合理的規劃。注意點:既然我們選擇去做了分析,那必然就要去得出結論。不能將競品分析寫成產品分析或者是說明書。
我在后半段競品分析實戰演練中,會加入很多結論和個人的想法
就是和自己做的產品產生直接競爭關系,在使用場景、產品的功能點和目標用戶群體一致,這次競品分析報告中就著重做介紹,直接競品就是一些車廠比如特斯拉、小鵬、蔚來、理想、比亞迪等頭部的新能源汽車品牌。
1. 間接競品
產品在功能方面與你是一個互補的關系狀態,市場的目標用戶群高度類似,后續可能會搶占你的市場份額,所謂敵人的敵人就是朋友,因此在你的項目進行中也可以選擇與他達成合作關系,在 HMI 行業中有很多就是這樣的一起創辦一個聯合研發中心。
舉個例子:
V2X 領域(車用無線通信技術)
這是國內 TOP → 梧桐車聯的TINNOVE V2X、東軟集團的VeTalk V2X、中科創達的C-V2X等
V2X 是我第一次提到,那我就簡單的介紹一下,所謂 V2X,vehicle to everything,即車對外界的信息交換。車聯網通過整合全球定位系統(GPS)導航技術、車對車交流技術、無線通信及遠程感應技術奠定了新的汽車技術發展方向,實現了手動駕駛和自動駕駛的兼容,通俗易懂來說,搭配了該系統的車型,在自動駕駛模式下,能夠通過對實時交通信息的分析,自動選擇路況最佳的行駛路線,從而大大緩解交通堵塞。除此之外,通過使用車載傳感器和攝像系統,還可以感知周圍環境,做出迅速調整,從而實現“零交通事故”。比如:如果行人突然出現,可以自動減速至安全速度或停車。
又到了我強項的領域了 “搜商” 車載的競品分析收集的數據、行業資訊與其他的會往往不同,由于他的深度比較廣想要精通一個內容,需要搜尋很多資料作為參考依據,這個我深有體會,假設我想了解輔助駕駛這塊內容,搜索出來的信息甚至比我大學讀過的書還多,好了,介紹一下我搜索的信息的好辦法。
1. 預約 4S 門店試駕
想要拿到一手資料,體驗最新 OTA 升級相關內容,那么你就跟我一樣去預約 4S 店去試駕,這是最簡單最直接,效果也是最好的,但是需要復盤的內容和前期準備工作會比較繁瑣,文章前面也有提到,一定要帶有目的的去做事情,所以在去 4S 店的時候,提前要做好需要體驗的內容的記錄,別到店里面毫無頭緒的去體驗。4S 店銷售員也是一個突破口,他們要完全了解汽車才能創造銷售額,因此他們對于銷售的汽車肯定你比還要了解透徹,可以通錄音那道你想到資源(被逮到,別說我教你們的,可別出賣我啊)。4S 店還有拿到資料的地方就是他們的使用手冊。
2. 汽車測評視頻
查看專業的測評人對于車輛的測試,他們會通過駕駛過程中做出自己的理解,站在用戶角度反饋問題,對于可用性測試也提供很多數據參考價值。國內想了解更多的測評可以在 B 站進行檢索,甚至連抖音也是一個不錯的選擇。國外相對較為資深的測評 Chris Harris、Grand Tour、TopGea。
3. 下載相關 - APP
這個不難理解,首先把車廠發布的 app 都下載下來,為啥?因為他們有社區,本身車廠在推出 OTA 升級或者新品發布的資訊都會第一時間發送,還有很多用戶會通過社區進行交流、碰撞出很多東西,他們也會寫很多關于駕駛的體驗報告,這些都是值得你去拿去做分析報告的。還有第三方的 app,比如:→ #新出行 #蓋世汽車 等。
4. 其他獲取途徑
汽車官網都會將該品牌全系列在售車型內容都展示出,從車輛信息參數、亮點功能介紹、再到設計細節都有展示,還可以在官網咨詢客服小姐姐,她們也會為你解答一些內容,親測有效。最后別忘記給人家五星好評。還可以參加車展,這是能收集到很多素材的重要關鍵點。其次就是就是國內做的相對較好的平臺知乎、人人都是產品經理、站酷等一系列。最后就是微信公眾號,這邊我推薦幾個不錯的賬號,# HMI 設計 #Apollo 智能駕駛體驗設計中心 #普修科技 #screens 德國 #未來出行實驗室 #智能座艙與自動駕駛 # #King 設計研究所(哈哈哈 這是我的賬號)
進入今天的主題,根據上述所講內容,我們設計師要做的競品分析內容已得到明確的方向。
1. 明確競品選擇
我們將選取的四臺車是新能源車領域最有代表性、關注度也最高的特斯拉、蔚來、理想以及小鵬四個品牌各自的代表車型。分別是特斯拉 Model 3、蔚來 ES6、理想 ONE 以及小鵬 P7。
另一方面,目前在座艙車機在屏幕規格上也分為兩大派,分別是橫屏布局和豎屏布局。這次選擇競品的 4 款車型中。特斯拉、小鵬和理想采用的是橫屏的布局,唯獨蔚來采用的是豎屏的布局。
特斯拉老款的 Model S/Model X 車型、小鵬新款 P5、老款 G3 也均為豎屏,這次分析主要選擇熱門車型來作為競品分析,其余車型的話就不做過多分析啦,接下來我們順便介紹一下熱門車型屏幕的分辨率:
- 特斯拉 Model 3 中控屏:1920x1200
- 蔚來 ES6 中控屏 :1600x1400 / 儀表盤:1920x720
- 理想 ONE 中控屏:2608x720 / 儀表盤:1920x720 / 副駕駛娛樂屏:1920x720 功能控制屏:1280x720
- 小鵬 P7 中控屏:2400x1200 / 儀表盤:1920x720
車型屏幕種類案例通過 Yes/No 羅列出熱門車型屏幕的分類,儀表盤、中控屏、副駕駛娛樂屏、HUD、后排娛樂屏、功能控制屏(俗稱中控臺屏)
說句題外話,新款的 Model S / Model X 是真好看,他們的屏幕也該為橫屏,還增加后排的娛樂屏... 比 13 還香。
車機交互體驗這個部分,建議只分析核心功能的交互體驗。如果想要詳盡到各個模塊,應該與交互設計師協作完成。通過分析,看看競品的在交互設計上有沒有值得我們借鑒的地方,我們是否可以做到更好。我是交互/設計/動效都要做 ,下面我就撿一些比較重要的功能給大家分析一下。
1. 空調交互方式 VS 大比拼
車輛中空調是我們最常操作的一個功能,我們把 Model 3、ES6、P7、理想 ONE 這四輛車空調的操作交互方式拿出來做一下對比,結合中控屏幕中的交互、語音交互、方控操作三個維度來綜合進行分析。
2. 中控交互分析
針對于大屏觸控來說,我們怎么才能把空調的交互方式做得既安全還便捷呢? 一定要記住安全是考慮的第一要素。
通過上車操作對比發現,這四輛新能源汽車在空調控制設計上面都是相同的想法,就是在首頁都有相對應空調控制區域,針對這種交互的設計方式非常的贊同,因為這不需要進入二級菜單就可以直接操作空調,并對其進行滑動操作調節溫度變化。
我們看一下這四輛車空調的具體的實際情況,Model 3、ES6 的中控都是有固定的空調快捷操作區域,理想 ONE 則是放在中控屏幕下方的控制屏上,小鵬的 P7 是做在屏幕的左側,這也是方便駕駛員的一個操作便捷性,也是符合我們一開始所說的便捷。除了小鵬 P7 外 其余三個車還可以直接對其進行前后風擋進行加熱(專業術語 → 前/后除霜)
接下來再針溫度對中控屏幕交互手勢進行做一個對比
Model 3 和蔚來 ES6 交互方式一致在溫度圖標區域進行左右滑動,dock 欄的風量就不好直接操控了,需要點擊后再空調彈窗頁面進行增減調節,在中控操作便捷性就不如蔚來 ES6 和理想 ONE 了。
ES6 空調手勢操作調節溫度和調節風量都是左右滑動,這邊就有人問了,在同一區域不會重復手勢操作么?蔚來 ES6 的解決方案是 → 在需要調節功能的圖標觸碰區域不松手對其進行橫向左右滑動,如需要再對風量進行調節,就松開手再觸碰風量圖標區域進行滑動即可。
小鵬 P7 空調中的溫度調節交互方式,是通過長按左側的調節溫度的區域后,出現調節溫度滑塊的區域進行上下拖動,P7 風量調節在左側 dock 就沒辦法進行調節,只能在方向盤進行控制風量的增減(這個在后面會細致的提到這邊就不做過度解讀)
理想 ONE 的空調溫度調節和風量增減在這四款車型中是我最為喜歡的,為什么這么說呢?因為它可以在任意區域進行盲操,交互方式也很清晰,上下滑動是溫度調節,左右為風量調節,并且還有增減時候的聲響,這是觸控給予反饋很好的交互點,所謂的及時反饋感。
針對中控的交互體驗的感覺我給 Model 3、ES6、P7、理想 ONE 做一個排名
- 最佳 NO:1 → 理想ONE (操作區域大,在安全和便捷性都排名四款車第一)
- 還行 NO:2 → 蔚來ES6(調節溫度和風量都可以在dcok 滑動完成,操作區域可觀)
- 其次 NO:3 → 特斯拉Model 3(調節溫度在dcok 滑動完成,操作區域可觀,風量則需要在其他頁面完成)
- 最后 NO:4 → 小鵬P7 (需要長按再進行操作溫度的滑動,長按的交互方式在車機是一種相對不好的交互方式)
3. 語音交互分析
特斯拉 Model 3 空調的語音交互,調節溫度只能做到調整到原先設定好的默認值溫度。
缺點:如需想要再次調節溫度高低,只能通過對中控屏下方的 dock 欄調節溫度區域進行滑動。
蔚來 ES6 在體驗的過程中,基本的功能都能很好實現,比如加熱座椅、通風座椅,還有就是空調的控制等等,這些常見的操作都能很好完成。值得一提的是打斷語音播報直接發出下一步指令以及上下文語義銜接等功能也都是支持的。
缺點:但不支持局部功能的免喚醒操作,每次使用語音控制都得呼喚一遍“Hi,NOMI”
小鵬 P7 全場景語音控制也選擇了與思必馳合作開發語音識別的部分,語義分析則是小鵬自己的團隊進行研發的,正確識別率達到 80%。在對于空調的控制方面也是不錯的,可以精準的說將溫度調到多少度,如果想繼續調整說:“好熱啊、再幫我下降 2 度”它也可以完成此項操作,如果你說將溫度調整到 35 度,這個已經超出了 P7 最高溫度 32 度,就怕語音形象給你來一句:“我怕你是有大病吧 ”
暫時沒啥缺點,就是識別率需要再提高一些,我體驗下來覺得他們的 TTS 反饋還挺豐富的,車聯網中的名詞,T 一般代表的就是 to 的意思,其中 STT 是語音轉文字過程,而 TTS 只是文字轉語言過程,簡單來說,你可以去看目前比較成熟的梧桐車聯 TINNOVE,能夠支持 40 多種語言意圖操控,并做出類人類的智能化反應,就是 STT 和 TTS 通力合作的一個結果。
理想 ONE 語音控制溫度我很是喜歡,比如你可以說,前排溫度調整到 23 度,后排只要跟說我也要就可以同步進行調溫度,這個就是他 OTA2.2 升級的功能四音區鎖定,所謂的四音區鎖定就是理想同學此前已經支持車內前后左右四個音區識別控制功能,但這也帶來一個問題:熊孩子在后面亂指揮怎么辦?理想同學支持除主駕之外任意一個音區的識別關閉。家長只要在前面說「關閉后音區」、「不要聽左后音區」就能關閉響應位置的語音識別,避免熊孩子搗亂, 讓你皮。
缺點:對于方言的識別率還有待提高。
4. 總結一下
個人傾向于小鵬 P7 和理想 ONE 的語音控制,他們體驗的感覺很棒,另外從空調的語音控制來看,特斯拉 Model 3、蔚來 ES6、小鵬 P7、理想 ONE 都是支持語音控制空調的,但是特斯拉 Model 3 只能設定最常用的溫度和風量,其他三種車都可以設隨意的說設定多少溫度、調整風向和風量、還可以切換內外循環,識別率成功率都非常不錯,可以不用操作中控屏幕,大大的提高了安全駕駛性。但現在很多人不習慣用語音來操作車機系統,所以單方面從中控的交互設計內容,可以偏向于理想 ONE 多參考一下,增大操作區域,減少交互手勢,對于復雜的手勢操作盡量避免不使用。方控控制空調這內容會連通方控整個模塊一起講,就不單獨這邊再開一小段了。
1. 特斯拉 Model 3 方控
左側功能為:控制音量 / 切換音樂 / 調節后視鏡位置 / 調節大燈的角度 / 調整方向盤的位置
- 控制音量:直接按下滾輪可以靜音或者取消靜音
- 切換音樂:向左撥動切換上一首歌曲,向右撥動切換下一首歌曲
- 調節后視鏡:進入車輛控制 → 快速控制 → 后視鏡 ,即可使用左側滾輪調節后視鏡
- 調整方向盤位置:進入車輛控制 → 快速控制 → 調整 → 方向盤 ,即可使用左側滾輪調節方向盤,上下滾動滾輪來調整方向的高度 / 傾斜角度,左右滾動滾輪用來拉近或者遠離方向盤
- 調整大燈角度:進入車輛控制 → 維護 → 調整大燈 ,即可使用左側滾輪調整大燈角度
切記注意點,特斯拉的車子出場時就已經將大燈調整到最佳位置,建議不要隨便的嘗試調整,讓們安全駕駛,遠離事故。
右側功能就相對減少了:語音指令 / 調節設置速度 / 調節跟車距離
- 語音指令:按下右側滾輪,就能啟動語音控制,說出相對于的指令,例如:將溫度調整為 XX 度(這個溫度的值也是之前設定好的默認值,Model 3 方控無法做到調節溫度增減功能,特斯拉的設計理念是做減法,所以他在方控沒有做過多復雜的一些操作)
- 調節設定速度: 主動巡航情況下,上下調整車速;可以快速調整單位為 5km/h,慢速度調整單位為 1km/h
- 調整跟車距離:右側滾輪左右調整時可以選擇設置 1-7 范圍的跟車距離
還有一個隱藏功能,我來悄咪咪的告訴你們:
在駐車狀態下,長按方向盤兩邊的滾輪按鈕,直到中控屏幕變黑,這樣就完成了一次重新啟動。
2. 蔚來 ES6 方控
蔚來 ES6 方向盤左側的多功能按鍵,主要負責 ACC 自適應巡航功能,它的布局相對另外一款車 ES8 有所簡化按鍵也變得更多,和特斯拉的設計理念也基本吻合,盡量的去做減法,去繁為簡,增加按鍵的操作面積也是為了安全駕駛。
左上角 → 增加巡航車速或恢復自適應巡航 / 左下角 → 減小巡航車速
右上角 → 增加跟車距離 / 右下角 → 減小跟車距離 / 中間 → 激活或退出自適應巡航
蔚來 ES6 方向盤右側的多功能按鍵,主要負責娛樂系統以及語音、電話功能的控制。其中上下按鍵負責音量,左右鍵為切歌。
左上角 → 語音功能鍵 / 左下角 → 方向導航鍵
右上角 → 菜單鍵 / 右下角 → 方向導航鍵 / 中間 → 圓圈為確認鍵、兩邊左右側為切歌
3. 小鵬 P7 方控
小鵬 P7 方向盤左側,上下按鍵為控制車輛空調溫度增減, 左右是來調節空調的風量大小
左下方為語音喚醒按鍵,按下去之后可以跟小 P 進行對話,右側的小鵬 logo 按鈕則為一個燈語的系統
觸摸左側旋轉來可以進行切換儀表盤左側的顯示內容,內容有車輛信息、音樂、胎壓、行駛里程等。
右側上下按鍵為音量的調節大小,左右按鍵為切歌 , 左邊是返回按鍵,右邊則是靜音按鍵,
觸摸右側旋轉來也可以進行切換儀表盤右側的顯示內容。
4. 理想 ONE 方控
我這邊所講的是理想 ONE 發布的最新款的車型
- 向上短按喚醒語音/結束對話。 向下短按接聽電話、長按掛斷電話
- 長按進入儀表頁面內容, 向上/向下滾動滾輪切換頁面。退出儀表頁面內容后,短按靜音/取消靜音;向上/向下滾輪滾輪增加/減少音量
- 向上/向下短按切換下一首/上一首
- 自動泊車啟動后,向上短按開始泊車/繼續泊車 ; 自動泊車未啟動,向上短按開始自動泊車;向下短按激活自定義鍵。
- 長按進入儀表屏頁面內容,向上/向下滑動滾輪切換頁面。退出儀表屏內容后,向上/向下滑動滾輪,巡航車速增加/減少 1km/h;短按設置巡航車速為道路限速。
- 向上短按執行 NOA 系統推薦變道,向下短按取消 NOA 系統推薦變道
5. 總結一下
方控作為車內交互的重要硬件,現在市場上面還是多數車型以硬按鍵為主,將常用的功能移植到方向盤上面,比如快速的調節音量大小、切歌等功能,也有調整駕駛模式跟車距離等等。按照現在方向盤的進展沒辦法滿足于智能化和數字化趨勢的轉變,很多車廠也在開始嘗試制作出前瞻性的智能化和數字化的方向盤,如果將中控可移植到方向盤上功能變的越多,那隨之而來的就會減少駕駛員的注意力分散,從而可以提高安全駕駛的可能性。
PS:有可能在后面對于未來前瞻性的方向盤有文章安排計劃。
在熱門車型 UI 界面中挑選對比,在分析完熱門車型頁面設計的內容后,我會呈現一些自己的 idea,這些純屬個人想法,并未用到實際項目中。下面我會從單個功能 → 對比體驗,單個界面 → 從界面內容、交互操作、信息位置、信息數量、色彩使用、界面風格,多個界面從 → 功能的邏輯、用色統一、情緒引導出發闡述。
當有人質問你為什么要這么設計的時候,你得有理可循,沒有理論支持的設計如同一盤散沙,一擊就潰,這就是為什么我們設計師需要做很多的分析、調研等等一系列的準備工作。
1. 主界面分析
特斯拉 Model 3、蔚來 ES6、小鵬 P7 的主界面以地圖方式呈現,而理想 ONE 是有傳統上主界面的。
我們來分析一下特斯拉 Model 3 的首頁,既然取消掉儀表盤,取而代之的是占用中控左側 1/3 區域作為儀表盤的功能頁 + 右側 2/3 區域則作為車機系統頁面,將使用頻率較高的導航作為主界面,頂部的狀態欄基本都可以進行點擊操作。
蔚來 ES6 也沿用將導航作為主界面和 Model 3 不同之處,是增加了兩個卡片,靠近主駕駛是常用的音樂卡片,旁邊則是車輛信息卡片。
小鵬 P7 也是導航作為他們的主界面,和蔚來 ES6 不一樣之處就在于小鵬 P7 的常用卡是放在中控左側欄,卡片的功能有:導航、音樂、電話、消息中心,頂部的狀態欄都可以進行點擊操作。
理想 ONE 采用的是橫屏布局,它的主界面采用卡片式的功能頁面設計,理想 ONE 中控屏左側顯示的是時間以及 5 大功能鍵,右側是各個常用的功能卡片頁。我們很多項目的主頁也是采用這種卡片式設計。
延展一下小知識點,敲重點了,提高注意力聽一下
對于汽車而言,卡片式設計有兩大好處
- 把學習成本降至最低;
- 增加的接觸面積讓駕駛的時候,誤觸率也降到最低,給到用戶帶來最為直觀的體驗就是簡單易用;
總結一下
這邊對照分析的 4 款車型首頁的功能:車輛信息 + 導航(Model 3) / 卡片 + 導航(ES6 +P7) / 卡片(理想 one),卡片樣式的設計,極大了提高對于功能的操作性,原本需要點擊功能進入二級頁面,再對其進行操作,現在首頁可以直接利用(卡片 + 快捷按鈕)樣式便捷性操作該功能。還有多種首頁的樣式比如傳統功能圖標采用的是“陳列式”的設計(代表作:蘋果 carplay)
在用色方面:
車機系統用色方面大家都用了對比度較高的顏色,不會像移動端那樣子,由于駕駛場景的特殊性,駕駛員沒有過多的時間停留在屏幕上,因此如果用了對比較低的,那么會影響到駕駛者的安全駕駛,在我第一篇文章中我也有提到,文本視覺呈現及文本圖像至少要有 7:1 的對比度,針對大號文本以及大文本圖像至少有 4.5:1 的對比度。
自己理解 + 新的 idea
首先要提高屏幕的利用率,不能為了設計而設計,從而浪費屏幕的使用率,要站在用戶角度思考問題,幫助用戶解決問題和痛點,而不是想當然天馬行空的設計,為了好看為出發點,有這個想法的請給我立馬打回去。有的車廠設計方案為了好看將屏幕的利用率降低,3 張功能卡 + 一個車模 + 車模下方控制車輛的 3 個功能按鈕 + 底部的 dock 欄,輸出的設計效果圖還不錯,但是這是在犧牲了功能為代價的基礎上。
新的 idea,首先要分場景,是輔助駕駛還是全自動駕駛,因為全自動駕駛的話就不需要考慮安全駕駛的因素了,這樣設計方案可以做出很多種,交互方式也因此將改變,安于現在的技術和道路復雜狀況,自動駕駛發展的道路我覺得很長,對于前瞻性的設計還是要輸出和探索。下面我們就開始說一下,介于現在的設計該如何優化首頁,有哪些值得我們去探索的?
在首頁中我們可以加入場景化相結合,比如天氣有陰雨天 、晴天、下雪等,都會在中控屏幕中顯示,大家肯定會說這不會影響駕駛員嘛?現在的技術可以做到識別主駕駛眼球,當主駕駛用眼睛掃描屏幕的時候,這些場景化的內容會立即消失,而且在設計之初也會考慮到不會影響到駕駛和中控操作等,在不影響安全駕駛的情況下,我們可以將這個功能做到設置中開關切換狀態。這邊就先提到這一個點,后續的探索內容大家可以持續關注我。
2. Dock 欄分析
Model 3 最高兩級菜單,所以操作起來非常的方便,底部的 dock 欄包含了車輛設置、音樂、攝像頭、雨刮器、座椅、風量、溫度、前除霜、后除霜、音量。
更多功能 →(通話、日歷、攝像頭、能量、充電、網絡、娛樂、玩具箱子)
這邊就有人有疑問了,為什么 dock 欄圖標下面沒有文字,而折疊后就加文字了呢?
首先下面作為常用的功能,前期通過 4S 店員的講解和查看使用手冊,短期的高頻率使用更容易讓人能夠記住它,所以在設計上只保留了 icon 去除了文字,相對于折疊的功能,它記憶性是呈現逐步遞減的,因此需要添加文字作為說明。
蔚來 ES6 由于是豎屏所以底部的 dock 欄相對 Model 3 減少很多,內容→車輛、內外循環、雙區溫度、風量調節、前除霜、后除霜,屏幕中是減少了很多,但中控下面的硬按鍵彌補了中控過少的缺陷,硬按鍵包括主頁按鍵、設置按鍵、車輛駕駛模式設置按鍵以及音量旋鈕。可以讓用戶更加快捷的進入到相應的設置頁面。
小鵬 P7 的 dock 欄位置處于屏幕的最左側,做在左邊的優點大家肯定不謀而合的都會想到,它靠近左側的駕駛員呀,對的,確實是基于這個體驗做的方案,小鵬 p7 的 dock 欄內容 → 應用中心、車輛設置、自動泊車、空調、音樂、電話等。與 Model 3 一樣,P7 大屏頂部各個圖標也均可打開,比如個人中心、電量管理中心、車輛中心等等,可以快速進入相應的控制頁面。
理想 ONE 中的 dock 欄就和其他三種車型有著很大的區別,既不是放在最左邊一豎排,也不是放在底部,由于 1920x720 分辨率的原因,不適合設計在底部區域,如果硬是放在底部的話,會占據很多可利用的空間,因此這種方案肯定不是最優的選擇, 理想 ONE 的選擇區域就是最左側時間和音樂快捷控件的下方,雖然方式獨特,但也算是適合的方案,dock 欄的內容 → “主頁”、“車輛”、“導航”、“音樂”、“360倒車”。
總結一下
關于 Dock 欄的設計,每個車廠都有自己的定義,當中控屏幕為豎屏時,dock 幾乎都設計在底部,因為設計在底部的話可以大大的提高屏幕的利用率,如果做在側邊欄可想而知,將會減少屏幕的利用率,如下圖:給大家展示一下效果。
小鵬 P7 和特斯拉 Model 3 屏幕類型相對比較類似高度相同,長度 P7 比 Model 3 多出 480px,所以我想這是導致他們在設計策略不同的主要原因吧。他們在對于 dock 定義,各有優缺點:
優點:小鵬 P7 dock 欄在左側便于用戶操作 / 特斯拉 Model 3 dock 欄功能較多還有功能擴展設計
缺點:小鵬 P7 dock 欄功能相對較少,在操作空調調溫度體驗很差 / 特斯拉 Model 3 dock 欄距離主駕駛較遠的功能點擊困難,因此他們在對于功能定義排序有著很好的策略,將常用的功能集中于靠近主駕駛左側區域。
理想 one 做的比較特別,一般車載系統的設計 dock 欄不是放在左側 or 底部 (PS:海外版本有的國家主駕駛是在右側的,那么放在左側的 dock 欄設計要移到右側區域中)但是理想 one 的 dock 也是放在靠近主駕駛區域的位置。
3. 自己理解 + 新的 idea
在對于 dock 做設計方案的時候,要考慮幾個要素:
- 在安全駕駛為前提下便于用戶操作;
- dock 欄的內容要使用頻率較高的功能;
- dock 欄的交互手勢不要過于復雜,點擊、左右、上下滑動即可長按的操作千萬別有;
新的 idea,根據用戶習慣可進行對 dock 功能進行編輯,dock 功能分為可編輯為不可編輯,比如返回主頁頁面設定為不可編輯,因為如果改動了這個,全局的交互都會因此改變,再出設計方案就要多出很多內容,所以需要可編輯為不可編輯,就像手機自帶的功能沒辦法刪除一個道理。
在做競品分析的時候,不建議視覺設計和交互分的太明顯,在一個產品的設計體驗上,他們是互相輔佐的,是一個互補的關系,如果你想要很好的鍛煉你自己一下,就要嘗試一下交互和視覺一起來做分析,還是那句話:站在用戶角度去為用戶考慮設計。
文章中如有不足之處,歡迎補充交流,我們下期見
復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。
熱評 ?陳豬肝?