車載系統中,交互設計的「三秒原則」

28 評論 23863 瀏覽 194 收藏 13 分鐘

最近在復盤之前的一個關于車載系統設計的項目,有一些思考和總結在這與大家分享一下,歡迎一起討論。

車載系統的設計目前來說仍然是一個混沌狀態,市場上并沒有一套完整統一的設計標準與規范,大多數廠家的設計仍然沿用移動端式的設計思維,這顯然與實際場景是不符合的。

雖然現在仍然沒有一套標準強大的系統規范和交互形式來約束大家,但我們可以通過站在使用場景與用戶行為的角度,找到一些基本且重要的交互原則與設計理念來規避系統設計中的一些問題。

一、車載系統不同于移動端的三個主要特點

第一? 車載系統的單次操作行為無法超過3秒

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

而如果用戶沒有在這個時間以內完成操作任務,要么用戶選擇放棄,重新再來;要么用戶花費更多時間和精力,但這樣駕駛的危險系數會成倍增長。

經筆者多次在不同路段試驗,統計下來平均每次操作,即視線與注意力專注在車載上的時間,無法超過三秒;事實上,當進入第三秒時,已不得不需要利用余光開始注意前方路況了。

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

第二 車載系統對信息與功能需要高度的聚合

在第一點提到的特殊操作環境下,我們無法用傳統移動端沉浸式的設計思維來設計車載的界面與功能——因為在極短時間內導致我們必須對所有可能用到的功能入口一步觸達,對信息的布局必須做到一眼即見的程度。

這也是為什么飛機駕駛艙內、國際空間站內的各種操控開關拉桿都是星羅密布式的擺放,并非以如今的科技無法做到像科幻片里一樣簡潔干凈的操控臺,而是因為考慮到在實際應用場景下,專業素質的人員不需要也沒有時間去欣賞美觀的界面,學習我們所認為的交互方式。

試想在緊急情況下,機長是不可能像我們在移動端上完成任務一樣,先找到主TAB欄,再一級一級點進去確認告訴大家要坐穩扶好不要亂跑。

因此在車載系統的設計中,我們需要放下傳統移動端的設計思維和所謂的美學,緊扣實際場景下的交互方式與用戶需求來設計:

第三? 車載系統有明顯的操作熱區與高效的交互方式

由于駕駛場景的特殊性,用戶只能用離車機最近的一只手去操作,而無法出現像移動端那樣,用另一只手或者雙手操作的情況。這也就決定在設計車載系統的功能入口時,會有著強烈的偏向性,并也會影響視覺信息的排布。

同時,在操控車載的過程中,點擊仍然是最有效率的交互方式,滑動與長按在上述的3秒安全操作時間內,都會極大的增加操作難度和駕駛風險

通過以上三個特點分析,我們可以了解車載系統設計的大背景與環境,由此我們可以推導出一些比較詳細的設計原則。

二、關于交互行為的“三秒設計”

三秒設計原則

第一秒 視覺

用戶在0到1秒的時間內,對車機進行掃視,在這個過程中,應用場景的重點信息與功能入口必須能被用戶在這個時間以內發現

  • 不可讓用戶頻繁轉動視角以搜索信息;
  • 不可讓用戶花費過長時間搜尋信息;

哈哈哈哈

第二秒 行為

用戶在交互行為過程中從開始至結束時間上不能超過一秒

  • 避免需要用戶點擊兩次才能完成,功能要一步必達;
  • 不要讓用戶滑動或長按;

第三秒 反饋

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

  • 內容的變化反饋需要有明顯且引導性質的動畫轉場支持
  • 去除不必要的裝飾性的動態展示將使反饋效果更加聚焦

在滿足以上“三秒設計”的原則下,車載系統設計才能達到可用性范疇。

由于特殊的使用場景和交互行為的規則,視覺設計需要保證信息傳遞的效率以及不同場景下合理的視覺表現。

三、車載系統的視覺設計需要注意的幾點

1.色彩

關于色彩,夜間模式下不宜過多使用高飽和的顏色。

由于駕駛環境的變化,車載系統的視覺整體色彩需要跟隨場景智能調整,當進入夜晚模式時,長時間駕駛本身精神與視覺會更加需要集中注意力在前方,此時車內環境中,不宜有過于強烈明顯的色彩干擾視線,可試想你在電影院中看電影時,身邊的人的手機亮度最高,此時會嚴重影響視覺的余光,難以聚焦在前方畫面上。

因此視覺設計的整體色彩體系應當適當的降低飽和度,同樣的,車載系統視覺的設計也應避免使用同一色系的方案,這樣無法在1秒的安全時間以內讓用戶有效果的判斷識別信息

2. 字體

文字內容應當通過字號字重來區分主次關系,用戶在掃一眼的過程中即可準確的看到重點信息。

3. ICON

ICON的設計形式,可更多結合應用的內容,應注意在內容與形式結合時,視線上要保持一致性,可有助于在一秒的安全時間內讓用戶快速瀏覽并判斷信息

而視線不一致的情況會導致視覺解析的負擔:

4. 內容排版

由于車載有明顯的操作熱區,因此在功能與入口的布局上應盡可能的根據熱區分布來設計。

功能布局盡量設計在離手最近的位置,縮短操作距離,將信息展示區放置在右側。

以上主要為車載系統設計中視覺部分的一些基礎規則,除此之外,我們還可以針對系統底層的響應設計做優化,如對觸控區域的優化設計,內容的響應區域應當根據功能入口的布局,進行智能調整,以防止操作無效或者誤操作。

5. 不同場景下的提示

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

所以要想系統整體跳出基礎可用性范圍,進階到好用的層次,系統對各種復雜交插的應用場景的處理需要更加智能(如導航中的來電,緊急路況的提示),對車內環境控制(如聲音、氣溫)需要更加敏感

車載系統的設計相比于移動端有著更明顯的約束,不論是從空間(使用環境)、時間(三秒原則)、行為(交互方式)、心智(心理訴求),都有著明顯獨特的場景和特點,要做好車載系統設計,我們需要有豐富的同理心以及親身體驗并反復驗證設計。

 

作者:隔壁老李,歡迎一切產品設計相關的話題討論。

本文由 @隔壁老李 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自 Unsplash ,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 發表一下一個UI新人看法,既然是駕車,安全問題很重要,為何要點擊 呢,為何不直接設計成智能的語音對話呢,比如Siri,語音控制操作多好。是不是這樣實現起來成本比較大呢?

    來自陜西 回復
  2. 很棒

    來自北京 回復
  3. 相比脫離方向盤的 大屏觸摸式操作,方向盤上的物理按鍵和即時反饋機制更安全呢

    來自江蘇 回復
  4. 你好,關于豎屏操作熱區的定義,是以什么場景為主呢?你上邊的圖如果在駕駛中,手握方向盤的情況下,操作熱區還是這樣么?

    來自上海 回復
    1. 是以最短操作距離為準,你可以實際感受一下

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

      來自上海 回復
  5. 一年半之后再來看此文,依然受益匪淺

    來自河北 回復
  6. 一、整體的意思就是布局要清新明了,操作路徑要短。
    二、我個人覺得3s原則過于理想化了,大部分的車機功能很難在3s內操作完成,這是功能本身的問題,是沒辦法通過交互進行優化縮短路徑的。
    三、中控大屏最初是特斯拉開始這樣設計的,也是基于無人駕駛技術的成熟和對未來汽車的一種展望,所以從本質上來講安全與中控大屏其實就是矛盾的,用物理按鍵肯定是最安全的。

    回復
    1. 中控大屏和安全不是矛盾,應該說是大屏外露的內容越多越明顯,安全性越差。。。
      物理按鍵給予的安全感,是「我操作了」,但是這個過程正確來說應該是「我操作我想要的功能成功了」,物理按鍵明顯不提供這個點。最安全的操作,本質上來說,應該是「我操作到我想要的功能并且成功了」,目前的技術有很多方式能做到這個效果,并不僅局限于物理按鍵

      來自廣東 回復
    2. 完全靠3秒來實現確實太理想,但如果對任務進行拆解會比較好理解這個原則的初衷,比如我想聽某一首具體的歌, 可以把這個任務拆分為 1我要聽音樂 2 找到音樂人或電臺或收藏的歌單 3 播放 ,這樣3秒的原則可以分別應對每個單獨的小任務, 每完成一個可以回到駕駛當中。

      回復
  7. 三秒原則很受用,贊~

    來自上海 回復
  8. 專業!

    來自重慶 回復
  9. 你好,能轉載這篇文章嗎?我是 飛靈汽車 ??

    來自廣東 回復
    1. 可以的哈 請注明出處和作者名就行

      回復
  10. 寫的很贊?。?!

    來自上海 回復
  11. 太有感覺了!我們公司最近也有車載系統的項目,不知道是否可以溝通一下?我的wx:vanhoooo

    來自浙江 回復
  12. 學習了,從沒研究過這類產品的思路。希望這套思路可以給車主帶來更好的體驗(比如現在的安卓中控我總找不到時間。。

    來自北京 回復
  13. 這個很干貨 受用 感謝

    來自北京 回復
    1. 客氣了,請多指教哈

      來自浙江 回復
  14. 覺得總結的很棒很契合,作者棒棒!

    來自上海 回復
    1. 謝謝~ 請多多指教哈

      來自浙江 回復
  15. 圖是用什么軟件制作的? ??

    來自山西 回復
    1. keynote

      回復
  16. ??

    來自北京 回復
    1. ??

      來自廣東 回復
  17. “三秒”亮了~~ :mrgreen:

    來自上海 回復
    1. ??

      來自北京 回復
    2. 得謝謝小編取的標題

      回復