設計師都知道根據《蘋果 iPhone 人機界面設計指南》，手機 UI 的最小點擊區域是 44px。但汽車 HMI 的最小點擊區域業內卻沒有定論。考慮到汽車駕駛關系交通安全，點擊區域大小與反應時間極為重要。文章的作者 Casper Kessels（德國 Snapp 汽車軟件公司設計總監）通過 Figma 制作原型在實車上進行測試，得出了汽車 HMI 最小點擊區域的結論。

本文譯自：https://medium.com/snapp-automotive
原文作者：Casper Kessels（德國 Snapp 汽車軟件公司設計總監）

往期HMI干貨：

我們相信汽車消費軟件可以做得更好。因此，我們一直在開發基于 Android Automotive 的信息娛樂系統。期望看到可用性的改進。

與物理控制器相比，觸摸屏沒有材質和位置變化之類的反饋觸感。駕駛員必須將視線從路面上轉移到屏幕上，以便用手指對準屏幕。而且必須在沒有錯誤的情況下，在盡可能短的時間內完成，避免分心造成交通事故。

觸控區域的大小是優化這一點的關鍵。這就是為什么我們進行實驗來確定最小觸摸區域，這將成為我們設計的基礎。

一、測試環境

我們在 Figma 里創建了 4 個原型，按鈕大小分別為 60px、80px、100px 和 120px。物理尺寸分別對應 11 毫米、15 毫米、20 毫米和 23 毫米。

4 個原型

為了確保結果準確，我們決定在真實道路駕駛來進行測試。汽車的車速等情況對按鈕大小也有影響。我們決定把 iPad 放在真車的 HMI 上。當然，在繁忙的城市駕駛時，讓駕駛員與原型機進行交互可能會產生交通事故。所以我們把 iPad 放在中間，副駕駛和駕駛員與 iPad 距離一樣。然后，注：駕駛員專注于開車，由副駕駛代替駕駛員，與 iPad 上原型進行交互實驗。

由副駕駛與原型交互，請注意安全駕駛，遵守交通規則。

二、測試結果

在柏林的不同路面上駕駛之后，我們得出了以下結論：在一定程度上，增加觸控區域會產生更好的效果。

60px 和 80px 的原型有明顯的區別，可以看看 60px 原型的效果：

60px 的原型。由副駕駛與原型交互，請注意安全駕駛，遵守交通規則。

與 80px 的原型相比，60px 的表現要差得多：

80px 的原型，由副駕駛與原型交互，請注意安全駕駛，遵守交通規則。

80px 和 100px 之間的差異較小，但并非微不足道。

100px 的原型，由副駕駛與原型交互，請注意安全駕駛，遵守交通規則。

然而，最大的觸控區域并沒有產生比 100px 更好的效果。如果一個 100px 的按鈕很難點擊，那么在 120px 也同樣困難。請看下面的極端例子。

120px 的原型，由副駕駛與原型交互，請注意安全駕駛，遵守交通規則。

我們開車在城市里轉了一圈，親自感受了一下不同之處，最后得出了這樣的結果。在理想的情況下，我們應該測量駕駛員的注意力分散指標，比如離開道路的時間等等。幸運的是，已經有許多相關科學實驗得出對應結論了。有趣的是，我們的研究結果與汽車界面和其他相關應用領域的學術研究結果也相符。這些結論也表明，隨著觸摸區域的增大，改善程度也會減弱。

結論

在實驗之后，我們將最小觸控區域設置為 80px。HMI 中的每個可交互元素都至少為 80px。對于更高頻的交互，我們將最小觸控區域定義為 100px。比如，跳過一首歌，或改變空調溫度。

我們目前正在開發一個高保真的 Android Automotive 原型，來驗證這些設計決策。此外，我們正在測試其他使汽車觸摸界面更安全的手勢，比如滑塊和其他可交互元素。我們將繼續在這個博客分享我們學到的新知識，敬請期待！