汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

2020-7-14    資深UI設(shè)計(jì)者

隨著車內(nèi)屏幕越來(lái)越多,越來(lái)越大,駕駛者在開車過程中因操作屏幕而分心機(jī)率逐漸升高。眾多汽車制造商均希望探索出一種降低或避免「駕駛員分心」的安全性技術(shù)。

手勢(shì),是指人手、手和手臂結(jié)合產(chǎn)生的動(dòng)作,作為解決「駕駛者分神」這個(gè)痛點(diǎn)的解決方案之一,正在全世界的汽車制造商中掀起「熱浪」。

你只需要隨意的揮一揮手,就能掛斷電話;將手指向順時(shí)針或者逆時(shí)針方向移動(dòng),就能調(diào)整音量大小。

互聯(lián)網(wǎng)基因:屏內(nèi)手勢(shì)交互

汽車手勢(shì)的出現(xiàn),源于對(duì)車內(nèi)屏幕的操作。而這些操作均來(lái)自于移動(dòng)端的設(shè)計(jì)標(biāo)準(zhǔn),比如蘋果IOS設(shè)計(jì)規(guī)范中的標(biāo)準(zhǔn)手勢(shì)或者谷歌Mertiral Design中的標(biāo)準(zhǔn)手勢(shì)。

汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

△ 移動(dòng)端常見交互手勢(shì)

常見的手勢(shì)如上圖,分別為

  • 點(diǎn)擊:激活控件或選擇一個(gè)項(xiàng)目
  • 滑動(dòng):上下滑動(dòng),或者左右滑動(dòng)來(lái)連續(xù)移動(dòng)需要查看的內(nèi)容
  • 按住并拖動(dòng):在屏幕上左右或者上下移動(dòng)某個(gè)元素
  • 雙擊:放大或縮小內(nèi)容或圖像,并使之居中
  • 捏:外捏時(shí)放大,內(nèi)捏時(shí)縮小
  • 長(zhǎng)按:進(jìn)入文本或內(nèi)容編輯狀態(tài)

為了滿足手機(jī)屏幕外觀改變,屏內(nèi)顯示內(nèi)容越來(lái)越多元化的需求,設(shè)計(jì)師們也在探索屏內(nèi)手勢(shì)的新玩法。

汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

△ android底部導(dǎo)航欄按鍵從左至右分別為:返回上一級(jí)、返回主頁(yè)、多任務(wù)

2017年iPhoneX的發(fā)布,正式開啟了全面屏?xí)r代。為了替代Home鍵及android底部導(dǎo)航欄,各大手機(jī)廠商相繼開始擁抱「全面屏手勢(shì)交互」。

在車機(jī)系統(tǒng)中,部分汽車制造商也在積極迎接變化,比如理想one采用「三指下滑」的手勢(shì)交互替代「返回主頁(yè)」的圖標(biāo)按鍵。

汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

△ 「 三指下滑」表示返回主頁(yè)

2019年的Google I/O大會(huì)上,新版本Android Q選擇與IOS采用一樣的手勢(shì)操作邏輯,即在屏幕下方提供一個(gè)指示條,用戶在左側(cè)頁(yè)面邊緣右滑代表「返回上一級(jí)」、提示條區(qū)域上滑代表「返回主頁(yè)」、提示條區(qū)域上滑并懸停代表「多任務(wù)」。

汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

△ android系統(tǒng)中的三種全面屏手勢(shì)

隨著全面屏手勢(shì)在手機(jī)端的操作交互上達(dá)成一致,相信在不久的將來(lái),也將越來(lái)越頻繁的在車機(jī)端看到全面屏手勢(shì)的「身影」。

車機(jī)新玩法:多屏聯(lián)動(dòng)交互

當(dāng)汽車與數(shù)字屏幕相遇,如何讓屏幕與內(nèi)飾結(jié)合的更加完美,又能突顯品牌特性,似乎給內(nèi)飾設(shè)計(jì)師帶來(lái)了許多挑戰(zhàn)與機(jī)遇,「一字屏」、「T字屏」、「7字屏」、「旋轉(zhuǎn)屏」應(yīng)運(yùn)而生。

汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

△ 拜騰M-Byte 一字屏

汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

△ 理想one的T字屏

汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

△ 合創(chuàng)007的7字屏

汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

△ 比亞迪王朝系列的旋轉(zhuǎn)屏

與此同時(shí),因?yàn)槌杀炯凹夹g(shù)的限制,汽車制造商的量產(chǎn)車型不得不在屏幕上做出妥協(xié)。理想one的妥協(xié)方案是利用3塊屏幕組合,在視覺上形成「大長(zhǎng)屏」的既視感。

汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

要讓3塊屏幕「變」成一塊屏幕,僅僅在視覺上做足功夫顯然還不夠,多屏聯(lián)動(dòng)手勢(shì)交互也不能「缺席」。

事實(shí)上,多屏聯(lián)動(dòng)手勢(shì)交互依舊來(lái)源于IOS及android系統(tǒng)中的標(biāo)準(zhǔn)手勢(shì),它將不同的手勢(shì)進(jìn)行組合,并與頁(yè)面聯(lián)動(dòng)顯示,形成了多屏聯(lián)動(dòng)手勢(shì)。

理想one在停車模式下,用戶長(zhǎng)按并向左滑動(dòng),即可將副駕娛樂屏上的信息「甩動(dòng)」至中控屏。

汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

天際ME7不僅有3塊屏幕組合而成的前排「一字屏」,還有2塊后排乘客娛樂屏,5屏聯(lián)動(dòng)的手勢(shì)交互,天際采用「手勢(shì)+屏幕顯示」來(lái)解決。

汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

在中控屏、副駕娛樂屏和后排娛樂屏上采用五指抓取手勢(shì)進(jìn)入多屏互動(dòng)頁(yè)面,比如想把中控屏上的內(nèi)容分享給副駕娛樂屏,第一步是單擊選中副駕娛樂屏,第二步按住并拖動(dòng)中控屏至副駕娛樂屏位置,第三步在副駕娛樂屏中點(diǎn)擊確認(rèn)。

視頻版交互演示:https://v.qq.com/x/page/w08791lhqus.html

未來(lái)已來(lái):隔空手勢(shì)交互

通過隔空手勢(shì)接聽或者掛斷電話,這似乎是科幻電影中才有的情節(jié)。但正如開篇所說(shuō),車內(nèi)屏幕數(shù)量增多,尺寸加大的同時(shí)「駕駛者分心」的機(jī)率也增加了,盲操手勢(shì)與隔空手勢(shì)的出現(xiàn),是解決這個(gè)痛點(diǎn)的一種嘗試。

目前量產(chǎn)的汽車中,盲操手勢(shì)主要是通過標(biāo)準(zhǔn)手勢(shì)與聲音反饋的組合來(lái)實(shí)現(xiàn)。

比如在理想one中,用戶在空調(diào)屏上左右滑動(dòng)可以調(diào)節(jié)風(fēng)量,上下滑動(dòng)調(diào)節(jié)溫度,且系統(tǒng)通過聲音反饋告知用戶操作成功與否。

與盲操手勢(shì)相比,隔空手勢(shì)似乎科技感十足,備受汽車制造商的青睞,我們不僅可以在各種概念車上窺見它的蹤影,在君馬SEEK上,也可以實(shí)際操作一番。

君馬SEEK提供8種隔空手勢(shì)。

汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

△ 左圖:接聽電話 右圖:掛斷電話

汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

△ 左圖:上一曲 右圖:下一曲

汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

△ 左圖:音量升高 右圖:音量降低

汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

△ 左圖:音樂播放/暫停 右圖:玫瑰花

與君馬SEEK相同,寶馬提供「向左」手勢(shì)代表上一曲、「向右」手勢(shì)代表下一曲,「yeah」手勢(shì)代表播放或暫停。

但在許多其他操作上,寶馬與君馬的手勢(shì)操作則各有特色。

君馬SEEK使用手掌的正面與反面來(lái)區(qū)分不同的操作,正面表示接聽電話·/音量增加,反面表示拒聽/音量降低。

寶馬則選擇向屏幕方向點(diǎn)擊代表接聽電話,手掌向右揮動(dòng)代表拒聽電話,手指順時(shí)針畫圈代表音量增加,手指逆時(shí)針畫圈代表音量降低。

在倒車影像中,手指向右揮動(dòng)代表調(diào)整視角。

汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

△ 圖片來(lái)源于「汽車界的扛把子」的短視頻《寶馬手勢(shì)控制詳細(xì)演示》

在手勢(shì)交互上,拜騰也交出了自己的「成績(jī)單」。

拜騰的手勢(shì)識(shí)別共五種,手掌向下激活手勢(shì)識(shí)別,手掌向上啟動(dòng)主頁(yè)面,手指移動(dòng)代表移動(dòng)光標(biāo),ok手勢(shì)代表確定,五指捏合可拖拽內(nèi)容。

汽車交互手勢(shì),這樣設(shè)計(jì)才有趣

△ 圖片來(lái)源于太平洋汽車網(wǎng)《拜騰Concept手勢(shì)感應(yīng)系統(tǒng)操作演示》

這些高大上的技術(shù)看起來(lái)令人興奮,但在實(shí)際使用的過程中,依舊存在識(shí)別范圍有限、識(shí)別精度不靈敏、識(shí)別后的響應(yīng)速度慢等等問題,而各個(gè)廠家的手勢(shì)識(shí)別沒有形成統(tǒng)一的標(biāo)準(zhǔn),且沒有大規(guī)模在在用戶中進(jìn)行推廣,必然會(huì)增加用戶的學(xué)習(xí)成本。

手勢(shì)識(shí)別對(duì)用戶來(lái)說(shuō)是「真香」還是「雞肋」,相信時(shí)間會(huì)給出答案。

參考文獻(xiàn):

寫在最后

汽車內(nèi)手勢(shì)的交互設(shè)計(jì),是一個(gè)有趣又好玩的課題,但如何讓這個(gè)課題在好玩但同時(shí)易用、好用,恐怕只有設(shè)計(jì)師不斷思考,并不斷采用一些用戶測(cè)試的方法進(jìn)行驗(yàn)證才能獲得答案。

文章來(lái)源:優(yōu)設(shè)    作者:點(diǎn)滴DESIGN

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔