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

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

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

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

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

一、測試環(huán)境

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

4 個(gè)原型

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

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

二、測試結(jié)果

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

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

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

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

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

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

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

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

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

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

結(jié)論

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

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

極氪ZED