車(chē)載系統(tǒng)中,交互設(shè)計(jì)的「三秒原則」

28 評(píng)論 23932 瀏覽 194 收藏 13 分鐘

最近在復(fù)盤(pán)之前的一個(gè)關(guān)于車(chē)載系統(tǒng)設(shè)計(jì)的項(xiàng)目,有一些思考和總結(jié)在這與大家分享一下,歡迎一起討論。

車(chē)載系統(tǒng)的設(shè)計(jì)目前來(lái)說(shuō)仍然是一個(gè)混沌狀態(tài),市場(chǎng)上并沒(méi)有一套完整統(tǒng)一的設(shè)計(jì)標(biāo)準(zhǔn)與規(guī)范,大多數(shù)廠家的設(shè)計(jì)仍然沿用移動(dòng)端式的設(shè)計(jì)思維,這顯然與實(shí)際場(chǎng)景是不符合的。

雖然現(xiàn)在仍然沒(méi)有一套標(biāo)準(zhǔn)強(qiáng)大的系統(tǒng)規(guī)范和交互形式來(lái)約束大家,但我們可以通過(guò)站在使用場(chǎng)景與用戶行為的角度,找到一些基本且重要的交互原則與設(shè)計(jì)理念來(lái)規(guī)避系統(tǒng)設(shè)計(jì)中的一些問(wèn)題。

一、車(chē)載系統(tǒng)不同于移動(dòng)端的三個(gè)主要特點(diǎn)

第一? 車(chē)載系統(tǒng)的單次操作行為無(wú)法超過(guò)3秒

移動(dòng)端系統(tǒng)為沉浸式操作,而車(chē)載系統(tǒng)不一樣,在駕駛過(guò)程中,用戶95%的精力在于聚焦駕駛上行為上,用戶只能抽取僅5%左右的精力與時(shí)間來(lái)操控車(chē)載。因此也就決定了車(chē)載系統(tǒng)的功能邏輯,信息布局都必須在極短的時(shí)間內(nèi)以最好的方式呈現(xiàn)。

而如果用戶沒(méi)有在這個(gè)時(shí)間以內(nèi)完成操作任務(wù),要么用戶選擇放棄,重新再來(lái);要么用戶花費(fèi)更多時(shí)間和精力,但這樣駕駛的危險(xiǎn)系數(shù)會(huì)成倍增長(zhǎng)。

經(jīng)筆者多次在不同路段試驗(yàn),統(tǒng)計(jì)下來(lái)平均每次操作,即視線與注意力專(zhuān)注在車(chē)載上的時(shí)間,無(wú)法超過(guò)三秒;事實(shí)上,當(dāng)進(jìn)入第三秒時(shí),已不得不需要利用余光開(kāi)始注意前方路況了。

因此,在三秒以內(nèi),無(wú)論是用戶第一次操作失敗,重新注意路況后,再重復(fù)操作,還是用戶持續(xù)操作直到任務(wù)完成,都是非常危險(xiǎn)的行為,在這里,由于用戶試錯(cuò)的成本非常巨大,也因此交互的設(shè)計(jì)與信息布局的設(shè)計(jì)都需要做到最極致

第二 車(chē)載系統(tǒng)對(duì)信息與功能需要高度的聚合

在第一點(diǎn)提到的特殊操作環(huán)境下,我們無(wú)法用傳統(tǒng)移動(dòng)端沉浸式的設(shè)計(jì)思維來(lái)設(shè)計(jì)車(chē)載的界面與功能——因?yàn)樵跇O短時(shí)間內(nèi)導(dǎo)致我們必須對(duì)所有可能用到的功能入口一步觸達(dá),對(duì)信息的布局必須做到一眼即見(jiàn)的程度。

這也是為什么飛機(jī)駕駛艙內(nèi)、國(guó)際空間站內(nèi)的各種操控開(kāi)關(guān)拉桿都是星羅密布式的擺放,并非以如今的科技無(wú)法做到像科幻片里一樣簡(jiǎn)潔干凈的操控臺(tái),而是因?yàn)榭紤]到在實(shí)際應(yīng)用場(chǎng)景下,專(zhuān)業(yè)素質(zhì)的人員不需要也沒(méi)有時(shí)間去欣賞美觀的界面,學(xué)習(xí)我們所認(rèn)為的交互方式。

試想在緊急情況下,機(jī)長(zhǎng)是不可能像我們?cè)谝苿?dòng)端上完成任務(wù)一樣,先找到主TAB欄,再一級(jí)一級(jí)點(diǎn)進(jìn)去確認(rèn)告訴大家要坐穩(wěn)扶好不要亂跑。

因此在車(chē)載系統(tǒng)的設(shè)計(jì)中,我們需要放下傳統(tǒng)移動(dòng)端的設(shè)計(jì)思維和所謂的美學(xué),緊扣實(shí)際場(chǎng)景下的交互方式與用戶需求來(lái)設(shè)計(jì):

第三? 車(chē)載系統(tǒng)有明顯的操作熱區(qū)與高效的交互方式

由于駕駛場(chǎng)景的特殊性,用戶只能用離車(chē)機(jī)最近的一只手去操作,而無(wú)法出現(xiàn)像移動(dòng)端那樣,用另一只手或者雙手操作的情況。這也就決定在設(shè)計(jì)車(chē)載系統(tǒng)的功能入口時(shí),會(huì)有著強(qiáng)烈的偏向性,并也會(huì)影響視覺(jué)信息的排布。

同時(shí),在操控車(chē)載的過(guò)程中,點(diǎn)擊仍然是最有效率的交互方式,滑動(dòng)與長(zhǎng)按在上述的3秒安全操作時(shí)間內(nèi),都會(huì)極大的增加操作難度和駕駛風(fēng)險(xiǎn)

通過(guò)以上三個(gè)特點(diǎn)分析,我們可以了解車(chē)載系統(tǒng)設(shè)計(jì)的大背景與環(huán)境,由此我們可以推導(dǎo)出一些比較詳細(xì)的設(shè)計(jì)原則。

二、關(guān)于交互行為的“三秒設(shè)計(jì)”

三秒設(shè)計(jì)原則

第一秒 視覺(jué)

用戶在0到1秒的時(shí)間內(nèi),對(duì)車(chē)機(jī)進(jìn)行掃視,在這個(gè)過(guò)程中,應(yīng)用場(chǎng)景的重點(diǎn)信息與功能入口必須能被用戶在這個(gè)時(shí)間以內(nèi)發(fā)現(xiàn)

  • 不可讓用戶頻繁轉(zhuǎn)動(dòng)視角以搜索信息;
  • 不可讓用戶花費(fèi)過(guò)長(zhǎng)時(shí)間搜尋信息;

哈哈哈哈

第二秒 行為

用戶在交互行為過(guò)程中從開(kāi)始至結(jié)束時(shí)間上不能超過(guò)一秒

  • 避免需要用戶點(diǎn)擊兩次才能完成,功能要一步必達(dá);
  • 不要讓用戶滑動(dòng)或長(zhǎng)按;

第三秒 反饋

內(nèi)容在交互行為結(jié)束后,在第三秒的時(shí)間里必須有強(qiáng)烈明顯的反饋告知用戶操作成功,例如明確的點(diǎn)擊效果反饋,可通過(guò)聲音或者界面動(dòng)畫(huà),但過(guò)于滯后(超過(guò)三秒)的動(dòng)畫(huà)反饋將脫離用戶的有效感知時(shí)間,將不能很好的體現(xiàn)反饋本身的價(jià)值

  • 內(nèi)容的變化反饋需要有明顯且引導(dǎo)性質(zhì)的動(dòng)畫(huà)轉(zhuǎn)場(chǎng)支持
  • 去除不必要的裝飾性的動(dòng)態(tài)展示將使反饋效果更加聚焦

在滿足以上“三秒設(shè)計(jì)”的原則下,車(chē)載系統(tǒng)設(shè)計(jì)才能達(dá)到可用性范疇。

由于特殊的使用場(chǎng)景和交互行為的規(guī)則,視覺(jué)設(shè)計(jì)需要保證信息傳遞的效率以及不同場(chǎng)景下合理的視覺(jué)表現(xiàn)。

三、車(chē)載系統(tǒng)的視覺(jué)設(shè)計(jì)需要注意的幾點(diǎn)

1.色彩

關(guān)于色彩,夜間模式下不宜過(guò)多使用高飽和的顏色。

由于駕駛環(huán)境的變化,車(chē)載系統(tǒng)的視覺(jué)整體色彩需要跟隨場(chǎng)景智能調(diào)整,當(dāng)進(jìn)入夜晚模式時(shí),長(zhǎng)時(shí)間駕駛本身精神與視覺(jué)會(huì)更加需要集中注意力在前方,此時(shí)車(chē)內(nèi)環(huán)境中,不宜有過(guò)于強(qiáng)烈明顯的色彩干擾視線,可試想你在電影院中看電影時(shí),身邊的人的手機(jī)亮度最高,此時(shí)會(huì)嚴(yán)重影響視覺(jué)的余光,難以聚焦在前方畫(huà)面上。

因此視覺(jué)設(shè)計(jì)的整體色彩體系應(yīng)當(dāng)適當(dāng)?shù)慕档惋柡投?,同樣的,?chē)載系統(tǒng)視覺(jué)的設(shè)計(jì)也應(yīng)避免使用同一色系的方案,這樣無(wú)法在1秒的安全時(shí)間以內(nèi)讓用戶有效果的判斷識(shí)別信息

2. 字體

文字內(nèi)容應(yīng)當(dāng)通過(guò)字號(hào)字重來(lái)區(qū)分主次關(guān)系,用戶在掃一眼的過(guò)程中即可準(zhǔn)確的看到重點(diǎn)信息。

3. ICON

ICON的設(shè)計(jì)形式,可更多結(jié)合應(yīng)用的內(nèi)容,應(yīng)注意在內(nèi)容與形式結(jié)合時(shí),視線上要保持一致性,可有助于在一秒的安全時(shí)間內(nèi)讓用戶快速瀏覽并判斷信息

而視線不一致的情況會(huì)導(dǎo)致視覺(jué)解析的負(fù)擔(dān):

4. 內(nèi)容排版

由于車(chē)載有明顯的操作熱區(qū),因此在功能與入口的布局上應(yīng)盡可能的根據(jù)熱區(qū)分布來(lái)設(shè)計(jì)。

功能布局盡量設(shè)計(jì)在離手最近的位置,縮短操作距離,將信息展示區(qū)放置在右側(cè)。

以上主要為車(chē)載系統(tǒng)設(shè)計(jì)中視覺(jué)部分的一些基礎(chǔ)規(guī)則,除此之外,我們還可以針對(duì)系統(tǒng)底層的響應(yīng)設(shè)計(jì)做優(yōu)化,如對(duì)觸控區(qū)域的優(yōu)化設(shè)計(jì),內(nèi)容的響應(yīng)區(qū)域應(yīng)當(dāng)根據(jù)功能入口的布局,進(jìn)行智能調(diào)整,以防止操作無(wú)效或者誤操作。

5. 不同場(chǎng)景下的提示

除以上正常駕駛場(chǎng)景外,還有部分對(duì)特殊場(chǎng)景的提示,如油耗、故障、雨雪天、超速、疲勞、等 。

所以要想系統(tǒng)整體跳出基礎(chǔ)可用性范圍,進(jìn)階到好用的層次,系統(tǒng)對(duì)各種復(fù)雜交插的應(yīng)用場(chǎng)景的處理需要更加智能(如導(dǎo)航中的來(lái)電,緊急路況的提示),對(duì)車(chē)內(nèi)環(huán)境控制(如聲音、氣溫)需要更加敏感

車(chē)載系統(tǒng)的設(shè)計(jì)相比于移動(dòng)端有著更明顯的約束,不論是從空間(使用環(huán)境)、時(shí)間(三秒原則)、行為(交互方式)、心智(心理訴求),都有著明顯獨(dú)特的場(chǎng)景和特點(diǎn),要做好車(chē)載系統(tǒng)設(shè)計(jì),我們需要有豐富的同理心以及親身體驗(yàn)并反復(fù)驗(yàn)證設(shè)計(jì)。

 

作者:隔壁老李,歡迎一切產(chǎn)品設(shè)計(jì)相關(guān)的話題討論。

本文由 @隔壁老李 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash ,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 發(fā)表一下一個(gè)UI新人看法,既然是駕車(chē),安全問(wèn)題很重要,為何要點(diǎn)擊 呢,為何不直接設(shè)計(jì)成智能的語(yǔ)音對(duì)話呢,比如Siri,語(yǔ)音控制操作多好。是不是這樣實(shí)現(xiàn)起來(lái)成本比較大呢?

    來(lái)自陜西 回復(fù)
  2. 很棒

    來(lái)自北京 回復(fù)
  3. 相比脫離方向盤(pán)的 大屏觸摸式操作,方向盤(pán)上的物理按鍵和即時(shí)反饋機(jī)制更安全呢

    來(lái)自江蘇 回復(fù)
  4. 你好,關(guān)于豎屏操作熱區(qū)的定義,是以什么場(chǎng)景為主呢?你上邊的圖如果在駕駛中,手握方向盤(pán)的情況下,操作熱區(qū)還是這樣么?

    來(lái)自上海 回復(fù)
    1. 是以最短操作距離為準(zhǔn),你可以實(shí)際感受一下

      回復(fù)
    2. 我理解你的最短操作距離,我想表達(dá)的是,在車(chē)機(jī)上以駕駛場(chǎng)景為主,駕駛場(chǎng)景中,人雙手的位置,大部分是在方向盤(pán)中間的。人在駕駛中操作中控,熱區(qū)分布還是這樣的么?作者大哥,我微信:wsy623-我好想和你交流一下,哈哈。 ??

      來(lái)自上海 回復(fù)
  5. 一年半之后再來(lái)看此文,依然受益匪淺

    來(lái)自河北 回復(fù)
  6. 一、整體的意思就是布局要清新明了,操作路徑要短。
    二、我個(gè)人覺(jué)得3s原則過(guò)于理想化了,大部分的車(chē)機(jī)功能很難在3s內(nèi)操作完成,這是功能本身的問(wèn)題,是沒(méi)辦法通過(guò)交互進(jìn)行優(yōu)化縮短路徑的。
    三、中控大屏最初是特斯拉開(kāi)始這樣設(shè)計(jì)的,也是基于無(wú)人駕駛技術(shù)的成熟和對(duì)未來(lái)汽車(chē)的一種展望,所以從本質(zhì)上來(lái)講安全與中控大屏其實(shí)就是矛盾的,用物理按鍵肯定是最安全的。

    回復(fù)
    1. 中控大屏和安全不是矛盾,應(yīng)該說(shuō)是大屏外露的內(nèi)容越多越明顯,安全性越差。。。
      物理按鍵給予的安全感,是「我操作了」,但是這個(gè)過(guò)程正確來(lái)說(shuō)應(yīng)該是「我操作我想要的功能成功了」,物理按鍵明顯不提供這個(gè)點(diǎn)。最安全的操作,本質(zhì)上來(lái)說(shuō),應(yīng)該是「我操作到我想要的功能并且成功了」,目前的技術(shù)有很多方式能做到這個(gè)效果,并不僅局限于物理按鍵

      來(lái)自廣東 回復(fù)
    2. 完全靠3秒來(lái)實(shí)現(xiàn)確實(shí)太理想,但如果對(duì)任務(wù)進(jìn)行拆解會(huì)比較好理解這個(gè)原則的初衷,比如我想聽(tīng)某一首具體的歌, 可以把這個(gè)任務(wù)拆分為 1我要聽(tīng)音樂(lè) 2 找到音樂(lè)人或電臺(tái)或收藏的歌單 3 播放 ,這樣3秒的原則可以分別應(yīng)對(duì)每個(gè)單獨(dú)的小任務(wù), 每完成一個(gè)可以回到駕駛當(dāng)中。

      回復(fù)
  7. 三秒原則很受用,贊~

    來(lái)自上海 回復(fù)
  8. 專(zhuān)業(yè)!

    來(lái)自重慶 回復(fù)
  9. 你好,能轉(zhuǎn)載這篇文章嗎?我是 飛靈汽車(chē) ??

    來(lái)自廣東 回復(fù)
    1. 可以的哈 請(qǐng)注明出處和作者名就行

      回復(fù)
  10. 寫(xiě)的很贊!?。?/p>

    來(lái)自上海 回復(fù)
  11. 太有感覺(jué)了!我們公司最近也有車(chē)載系統(tǒng)的項(xiàng)目,不知道是否可以溝通一下?我的wx:vanhoooo

    來(lái)自浙江 回復(fù)
  12. 學(xué)習(xí)了,從沒(méi)研究過(guò)這類(lèi)產(chǎn)品的思路。希望這套思路可以給車(chē)主帶來(lái)更好的體驗(yàn)(比如現(xiàn)在的安卓中控我總找不到時(shí)間。。

    來(lái)自北京 回復(fù)
  13. 這個(gè)很干貨 受用 感謝

    來(lái)自北京 回復(fù)
    1. 客氣了,請(qǐng)多指教哈

      來(lái)自浙江 回復(fù)
  14. 覺(jué)得總結(jié)的很棒很契合,作者棒棒!

    來(lái)自上海 回復(fù)
    1. 謝謝~ 請(qǐng)多多指教哈

      來(lái)自浙江 回復(fù)
  15. 圖是用什么軟件制作的? ??

    來(lái)自山西 回復(fù)
    1. keynote

      回復(fù)
  16. ??

    來(lái)自北京 回復(fù)
    1. ??

      來(lái)自廣東 回復(fù)
  17. “三秒”亮了~~ :mrgreen:

    來(lái)自上海 回復(fù)
    1. ??

      來(lái)自北京 回復(fù)
    2. 得謝謝小編取的標(biāo)題

      回復(fù)