如今 App 和網頁可交互原型的制作方法和設計流程早已普及，但 HMI 可交互原型制作方法和設計流程還處在探索階段，比起只需考慮屏幕內交互的 App 和網頁，HMI 還要考慮屏幕在汽車內的位置。這次帶來一篇相關譯文，文章的作者 Casper Kessels（德國 Snapp 汽車軟件公司設計總監），使用 VR 來探索 HMI 可交互原型的設計制作。

本文譯自：https://www.theturnsignalblog.com/blog/behind-touch-concept
原文作者：Casper Kessels（德國 Snapp 汽車軟件公司設計總監）

往期HMI干貨：

在過去的幾周里，我設計了一個新的概念原型，用于測試在汽車中觸摸屏的交互。在這篇文章中，我想聊聊我遵循的設計流程和迭代過程。

一、行動和目標

下圖是我遵循的簡略設計流程。

現在汽車 HMI 界面復雜的主要原因之一是功能太多。所以在開始時，我退一步評估了人們在汽車中真正需求是什么，并以此為基礎進行了設計。我首先列出了一輛典型汽車的所有功能，并研究了這些功能實現的潛在目標。例如，提高風扇速度的潛在目標是更快地降溫。最終得出一個包含 20 個目標的列表，我將其作為設計界面的基礎。

但在將這些目標轉化為具體界面的過程中，我很難走出第一步。在大多數項目都存在一些限制，如屏幕大小、圖像性能、時間、預算等。如果沒有這些限制你可以自由地做出完美的設計，可有限制就很難起步了。

最困難的問題是沒有真實屏幕硬件。為根本沒造出來的汽車屏幕設計界面是很困難的。所以我希望至少有一個真實屏幕硬件讓我能做實驗。我畫了不同的屏幕布局，但僅憑一張糟糕的草圖很難判斷出哪個設計方向更好。所以我更進一步打算在 VR 中探索。

我的草圖

二、在 VR 中探索屏幕布局

我很想在真車或模擬器上測試屏幕布局，但新冠病毒危機讓這變得相當困難。我不得已退而求其次用 VR。我沒有 VR 眼鏡，但感謝谷歌 Cardboard，我可以用手機加紙殼當 VR 眼鏡。我們的目標是探索屏幕布局可能性的大致概念原型，而不是創造一個精確的內部布局模型。我不想花幾個小時搭建精確模型。

谷歌 Cardboard（譯者配圖）

首先，我找到一個包含內飾的免費汽車 3D 模型。

我把 3D 模型拆開，創建了三種不同的屏幕布局方案，用于后續探索。

車內屏幕示例

在 Unity 中，我導入谷歌 Cardboard SDK，并修改了默認場景。我又導入汽車模型并下載了一個免費的道路素材。

我的 Unity 屏幕

不到一個小時，我就配置好了一切，開始在 VR 中探索場景。

Unity 中 三種屏幕布局之一

這三種不同的屏幕布局是根據目前汽車公司的發展方向而選擇的。我發現把屏幕放在司機的視線附近最不會讓人分心。因此，小屏幕橫放是最佳選擇。

三種屏幕布局

三、草圖和線框圖

在確定了屏幕大小的方向后，我將目標轉化為界面就沒那么困難了。我很早就明白必須對功能進行分組才能開展設計。我按多媒體、環境控制和導航功能進行分組。

另一個核心理念是，我希望用戶盡可能少點擊來實現他們的目標。我基于可調整大小的窗口做了一些簡單的布局。我的想法是，在一個平面上呈現所有東西會盡可能簡單，并能最大限度地減少點擊次數。

我畫的窗口布局的簡略線框圖

然后，我為每個功能分組設計草圖和線框圖。同時對屏幕布局做一些小的調整。

四、快速原型

想要找到像調節音量一樣直接控制的交互方式是很難的。我在之前探索汽車手勢交互的概念原型的基礎上提出了一個新想法。為了更具體地了解它的工作原理，我使用 Axure 制作了一個非常簡單的可交互原型。點擊并按住屏幕邊緣會顯示一個覆蓋層。通過滾動到喜歡的位置并釋放，選項就會被選中。

我認為這個方案有潛力，所以我把它整合到概念原型的第一個版本中。

五、第一次迭代

第一個概念原型很簡單。它在屏幕底部有一個菜單欄，上面有導航、媒體、環境控制和攝像頭功能。導航總是覆蓋屏幕的左半部分，其他功能總是覆蓋屏幕的右半部分。每個菜單項都可以進入全屏模式。我還做了一點簡單的視覺設計，使原型變得栩栩如生。

我在 Figma 中設計了所有界面，并使用 After Effects 創建了兩個手勢交互的動畫。一個用來控制音量，一個用來調整溫度。

反饋

我聯系了有汽車設計經驗的設計師，尋求他們對這個概念原型的反饋。從他們的反饋中，我們可以清楚地看到有三點要改進。

使用可調整大小的窗口非常受限。如果使用多層級界面而不是窗口，那么界面就有更多的自由和空間。

第二點是這個概念原型系統功能過于寬泛。相反，當你開車時，你只需要導航和多媒體功能。這些功能應該是基本功能，其余都是額外功能。在這個概念原型中，所有功能都同等重要。

最后一個建議是，這個概念原型相當保守。這是為現在市場上的汽車設計的。而在汽車行業，由于開發周期較長，設計師需要提前設計 3-4 年之后的汽車。所以我不應該害怕創造新的概念原型，應該同時使用不同的屏幕，并著眼于 3-4 年后的用戶體驗。

六、第二次迭代

我把上一個原型中反饋的問題在這次迭代中改進了，并更多關注導航和多媒體功能。我還想看看是否可以圍繞菜單欄進行設計，創造更自然的交互。所以我嘗試將菜單欄轉換為一個 3D 多層界面，每一層都對應一個駕駛模式。

第二個原型使用分層系統而不是菜單欄

最高一層是”通勤模式“，展示多媒體、環境控制和導航功能。其次是“導航模式”，以導航為中心。最后，還有一個“專注模式”，界面菜單占用空間最小。每個模式都對應一個類似的儀表盤界面。用戶可以通過方向盤上的按鈕或與中央屏幕交互來循環切換這些模式。

我遇到的問題是沒有控制環境的地方了。我想了一個辦法，把控制器分開，放在不同的屏幕上。這樣中央屏幕界面更加簡單，有助于整個系統的可用性。

反饋

我已經注意到，在設計這個概念原型時，我引入了許多不必要的復雜性。其他設計師和我交談也得出了同樣的結論。使用層和駕駛模式相結合的想法很有趣，但太復雜了。理想的解決方案是將第一個概念原型和第二個概念原型結合一下。

另一個觀點說，這些多層級界面看起來相當混亂。所以在最后的概念原型中，我需要找到一種視覺風格，最大限度地減少混亂，使它看起來更簡潔。

七、最終版本

在最終版本中，我刪除了在不同駕駛模式中切換的交互。我想保持專注模式的理念。因此，我沒有使用 3D 多層界面在駕駛模式中循環切換，而是將兩個主要控件放在屏幕的角落，讓用戶決定他想要顯示什么。

最后，我在 VR 中測試了這個概念原型，看看控制的可達性如何。我曾擔心多媒體按鈕會被放置得離司機太遠而不舒服。在用谷歌 Cardboard 在 VR 中觀察后，我注意到情況并非如此。然而，我使用的車輛 3D 模型的車內空間不大。在大型 SUV 中，這仍然是一個問題。所以這將是下一個版本概念原型需要改進的地方。

我還為準備了一個更沉著的視覺設計風格，這有助于減少界面層級的混亂樣式。

最終的概念原型

其結果就是我在上一篇文章中提到的概念原型。像本文提到的這種的項目沒有終點，我將繼續改進和迭代。我已經收到很多讀者的評論和反饋，這將有助于改善概念原型！因此，如果你有任何意見，我會很樂意接受！