總監(jiān)出品！HMI可交互概念原型的設(shè)計(jì)流程科普

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

本文譯自：https://www.theturnsignalblog.com/blog/behind-touch-concept
原文作者：Casper Kessels（德國(guó) Snapp 汽車軟件公司設(shè)計(jì)總監(jiān)）

往期HMI干貨：

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

一、行動(dòng)和目標(biāo)

下圖是我遵循的簡(jiǎn)略設(shè)計(jì)流程。

現(xiàn)在汽車 HMI 界面復(fù)雜的主要原因之一是功能太多。所以在開始時(shí)，我退一步評(píng)估了人們?cè)谄囍姓嬲枨笫鞘裁?，并以此為基礎(chǔ)進(jìn)行了設(shè)計(jì)。我首先列出了一輛典型汽車的所有功能，并研究了這些功能實(shí)現(xiàn)的潛在目標(biāo)。例如，提高風(fēng)扇速度的潛在目標(biāo)是更快地降溫。最終得出一個(gè)包含 20 個(gè)目標(biāo)的列表，我將其作為設(shè)計(jì)界面的基礎(chǔ)。

但在將這些目標(biāo)轉(zhuǎn)化為具體界面的過程中，我很難走出第一步。在大多數(shù)項(xiàng)目都存在一些限制，如屏幕大小、圖像性能、時(shí)間、預(yù)算等。如果沒有這些限制你可以自由地做出完美的設(shè)計(jì)，可有限制就很難起步了。

最困難的問題是沒有真實(shí)屏幕硬件。為根本沒造出來的汽車屏幕設(shè)計(jì)界面是很困難的。所以我希望至少有一個(gè)真實(shí)屏幕硬件讓我能做實(shí)驗(yàn)。我畫了不同的屏幕布局，但僅憑一張?jiān)愀獾牟輬D很難判斷出哪個(gè)設(shè)計(jì)方向更好。所以我更進(jìn)一步打算在 VR 中探索。

我的草圖

二、在 VR 中探索屏幕布局

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

谷歌 Cardboard（譯者配圖）

首先，我找到一個(gè)包含內(nèi)飾的免費(fèi)汽車 3D 模型。

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

車內(nèi)屏幕示例

在 Unity 中，我導(dǎo)入谷歌 Cardboard SDK，并修改了默認(rèn)場(chǎng)景。我又導(dǎo)入汽車模型并下載了一個(gè)免費(fèi)的道路素材。

我的 Unity 屏幕

不到一個(gè)小時(shí)，我就配置好了一切，開始在 VR 中探索場(chǎng)景。

Unity 中 三種屏幕布局之一

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

三種屏幕布局

三、草圖和線框圖

在確定了屏幕大小的方向后，我將目標(biāo)轉(zhuǎn)化為界面就沒那么困難了。我很早就明白必須對(duì)功能進(jìn)行分組才能開展設(shè)計(jì)。我按多媒體、環(huán)境控制和導(dǎo)航功能進(jìn)行分組。

另一個(gè)核心理念是，我希望用戶盡可能少點(diǎn)擊來實(shí)現(xiàn)他們的目標(biāo)。我基于可調(diào)整大小的窗口做了一些簡(jiǎn)單的布局。我的想法是，在一個(gè)平面上呈現(xiàn)所有東西會(huì)盡可能簡(jiǎn)單，并能最大限度地減少點(diǎn)擊次數(shù)。

我畫的窗口布局的簡(jiǎn)略線框圖

然后，我為每個(gè)功能分組設(shè)計(jì)草圖和線框圖。同時(shí)對(duì)屏幕布局做一些小的調(diào)整。

四、快速原型

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

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

五、第一次迭代

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

我在 Figma 中設(shè)計(jì)了所有界面，并使用 After Effects 創(chuàng)建了兩個(gè)手勢(shì)交互的動(dòng)畫。一個(gè)用來控制音量，一個(gè)用來調(diào)整溫度。

反饋

我聯(lián)系了有汽車設(shè)計(jì)經(jīng)驗(yàn)的設(shè)計(jì)師，尋求他們對(duì)這個(gè)概念原型的反饋。從他們的反饋中，我們可以清楚地看到有三點(diǎn)要改進(jìn)。

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

第二點(diǎn)是這個(gè)概念原型系統(tǒng)功能過于寬泛。相反，當(dāng)你開車時(shí)，你只需要導(dǎo)航和多媒體功能。這些功能應(yīng)該是基本功能，其余都是額外功能。在這個(gè)概念原型中，所有功能都同等重要。

最后一個(gè)建議是，這個(gè)概念原型相當(dāng)保守。這是為現(xiàn)在市場(chǎng)上的汽車設(shè)計(jì)的。而在汽車行業(yè)，由于開發(fā)周期較長(zhǎng)，設(shè)計(jì)師需要提前設(shè)計(jì) 3-4 年之后的汽車。所以我不應(yīng)該害怕創(chuàng)造新的概念原型，應(yīng)該同時(shí)使用不同的屏幕，并著眼于 3-4 年后的用戶體驗(yàn)。

六、第二次迭代

我把上一個(gè)原型中反饋的問題在這次迭代中改進(jìn)了，并更多關(guān)注導(dǎo)航和多媒體功能。我還想看看是否可以圍繞菜單欄進(jìn)行設(shè)計(jì)，創(chuàng)造更自然的交互。所以我嘗試將菜單欄轉(zhuǎn)換為一個(gè) 3D 多層界面，每一層都對(duì)應(yīng)一個(gè)駕駛模式。

第二個(gè)原型使用分層系統(tǒng)而不是菜單欄

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

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

反饋

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

另一個(gè)觀點(diǎn)說，這些多層級(jí)界面看起來相當(dāng)混亂。所以在最后的概念原型中，我需要找到一種視覺風(fēng)格，最大限度地減少混亂，使它看起來更簡(jiǎn)潔。

七、最終版本

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

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

我還為準(zhǔn)備了一個(gè)更沉著的視覺設(shè)計(jì)風(fēng)格，這有助于減少界面層級(jí)的混亂樣式。

最終的概念原型

其結(jié)果就是我在上一篇文章中提到的概念原型。像本文提到的這種的項(xiàng)目沒有終點(diǎn)，我將繼續(xù)改進(jìn)和迭代。我已經(jīng)收到很多讀者的評(píng)論和反饋，這將有助于改善概念原型！因此，如果你有任何意見，我會(huì)很樂意接受！