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

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

往期HMI干貨：

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

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

觸控區(qū)域的大小是優(yōu)化這一點的關(guān)鍵。這就是為什么我們進行實驗來確定最小觸摸區(qū)域，這將成為我們設(shè)計的基礎(chǔ)。

一、測試環(huán)境

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

4 個原型

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

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

二、測試結(jié)果

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

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

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

與 80px 的原型相比，60px 的表現(xiàn)要差得多：

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

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

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

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

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

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

結(jié)論

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

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