AR和VR流行之前，設(shè)計(jì)師如何掌握「環(huán)境」對(duì)用戶體驗(yàn)的影響

鴻影：隨著 AR/VR/MR 大潮來(lái)臨，傳感器等技術(shù)的不斷發(fā)展，「環(huán)境」已經(jīng)逐漸成為 UX 設(shè)計(jì)師在「人」與「設(shè)備」之外重點(diǎn)關(guān)注的第三極。

最近在閱讀 Mixed Reality（Hololens）Design 的官方指南文檔，其中反復(fù)強(qiáng)調(diào)了環(huán)境的重要性。隨著 AR/VR/MR 大潮來(lái)臨，傳感器等技術(shù)的不斷發(fā)展，「環(huán)境」已經(jīng)逐漸成為 UX 設(shè)計(jì)師在「人」與「設(shè)備」之外重點(diǎn)關(guān)注的第三極。而即使是在已經(jīng)相對(duì)成熟的 PC 和移動(dòng)互聯(lián)網(wǎng)設(shè)計(jì)領(lǐng)域，「環(huán)境」也是我們?cè)诜治龊瓦€原用戶場(chǎng)景時(shí)多多少少需要考慮的。

光照 Light

基于場(chǎng)景光照考量的設(shè)計(jì)在資訊、閱讀類的應(yīng)用里已經(jīng)有了不少典型，比如屏幕亮度調(diào)節(jié)、夜間模式等，給用戶帶來(lái)更好的瀏覽閱讀體驗(yàn)。

△ ?多看閱讀

在拍照、攝像等相關(guān)的應(yīng)用里，思考光照的影響也同樣重要，尤其是涉及到對(duì)拍攝對(duì)象的識(shí)別時(shí)。對(duì)于后置攝像頭，一個(gè)例子是微信的掃碼功能，如果用戶操作過(guò)程中周邊環(huán)境過(guò)暗，無(wú)法準(zhǔn)確地識(shí)別二維碼信息，屏幕上會(huì)出現(xiàn)「輕觸照亮」的提示，引導(dǎo)用戶打開閃光燈；而對(duì)于前置攝像頭，開啟閃光燈的意義則不大，這里我比較喜歡支付寶在人臉識(shí)別功能里所做的，用大塊白色背景作為屏幕反光，提高弱光場(chǎng)景下的識(shí)別效率。

△ 左：微信掃碼；右：支付寶人臉識(shí)別

而在 AR/MR 應(yīng)用設(shè)計(jì)中，光照的重要性還會(huì)進(jìn)一步提升，在設(shè)計(jì)元素的色彩、形態(tài)、光影關(guān)系時(shí)，都需要考慮如何在所處的背景環(huán)境光照中突出重點(diǎn)、保證清晰的識(shí)別度、顯得協(xié)調(diào)而非過(guò)于突兀等。

姿態(tài) Posture

Mixed Reality Design 里的交互基礎(chǔ)章節(jié)里，提到了 4 個(gè)在設(shè)計(jì)時(shí)需要自問(wèn)的問(wèn)題：

• 用戶在使用過(guò)程中是否坐著、斜靠、站立或者行走？
• 你的內(nèi)容如何適應(yīng)不同的位置？
• 用戶能適應(yīng)它嗎？
• 用戶在用你的應(yīng)用時(shí)感到舒適嗎？

對(duì)用戶使用產(chǎn)品過(guò)程中的姿態(tài)考慮不夠周全的話，可能會(huì)引發(fā)輕則疲勞、重則安全等問(wèn)題。一個(gè)例子是導(dǎo)航類的 App，用戶一邊行走一邊瀏覽路線算是比較常見的場(chǎng)景，但過(guò)于專注在屏幕內(nèi)容上而忽視周邊的話，會(huì)產(chǎn)生一些潛在的危險(xiǎn)，需要不斷在屏幕與真實(shí)環(huán)境之間切換視線。這里一個(gè)叫「隨便走」的 App 處理得不錯(cuò)，把導(dǎo)航和實(shí)景相結(jié)合，既能一目了然地感知前往目的地的路線，也可以通過(guò)開啟攝像頭的屏幕隨時(shí)感知周邊環(huán)境動(dòng)態(tài)。

△ 隨便走

Mixed Reality Design 也提到了不少 MR 設(shè)計(jì)中的注意事項(xiàng)，比如當(dāng)用戶在虛擬空間里移動(dòng)的距離超過(guò)真實(shí)空間限制后，使用虛擬動(dòng)畫來(lái)表現(xiàn)移動(dòng)；注意元素和用戶的距離與角度關(guān)系，讓頭部轉(zhuǎn)動(dòng)角度控制在舒適范圍內(nèi)；等等。

此外，我想隨著設(shè)計(jì)對(duì)象逐漸突破屏幕的界限，傳統(tǒng)工業(yè)設(shè)計(jì)中的人機(jī)工程學(xué)知識(shí)也會(huì)有更多應(yīng)用空間，以幫助用戶更舒適地使用產(chǎn)品。

聲音 Voice

近年來(lái)各類語(yǔ)音助手、智能音箱紛紛涌現(xiàn)，語(yǔ)音交互設(shè)計(jì)領(lǐng)域也受到了比以往更多的關(guān)注，除了語(yǔ)音對(duì)話腳本之外，對(duì)話環(huán)境中的噪音影響也需要關(guān)注。

Mixed Reality Design 里在 Voice Design 的注意事項(xiàng)里提到了一條：確保命令是非破壞性的——任何通過(guò)語(yǔ)音指令發(fā)起的行為，都應(yīng)該是非破壞性、容易撤銷的，以防用戶旁邊的其他人無(wú)意間說(shuō)話觸發(fā)命令。

降噪處理也是一種常見思路，比如最近發(fā)布的天貓精靈用到的聲紋識(shí)別技術(shù)，可以根據(jù)聲音識(shí)別出不同的使用者，保證用戶使用的安全性和私密性。

△ 天貓精靈

另一個(gè)例子是移動(dòng) App 中常見的語(yǔ)音錄入交互模式選擇：通過(guò)用戶結(jié)束長(zhǎng)按/手動(dòng)點(diǎn)擊結(jié)束/停止說(shuō)話超過(guò) X 秒來(lái)判斷當(dāng)前對(duì)話是否結(jié)束。其中前兩個(gè)通過(guò)用戶手動(dòng)控制錄入進(jìn)程的方式，相比機(jī)器判斷，要更利于在嘈雜環(huán)境中避免噪音帶來(lái)的干擾。

時(shí)間 Time

時(shí)間作為重點(diǎn)環(huán)境因素考慮的典型案例是通知推送的設(shè)計(jì)，比如盡量避免在夜深人靜時(shí)給用戶帶來(lái)干擾，又比如分析后臺(tái)的用戶活躍時(shí)間數(shù)據(jù)，挑選合適時(shí)間段進(jìn)行推送，最大化通知影響面。

另一個(gè)例子是辦公類應(yīng)用，在用戶深夜或者周末打開時(shí)主動(dòng)安慰「加班辛苦」等，給用戶更好的情感體驗(yàn)。

當(dāng)然，環(huán)境的構(gòu)成因素還有很多，比如天氣（餓了么 App 里外賣小哥配送時(shí)的天氣狀態(tài)動(dòng)畫算一個(gè)不錯(cuò)的應(yīng)用案例，詳情鏈接）、網(wǎng)絡(luò)（各種網(wǎng)絡(luò)異常狀態(tài)的處理，這個(gè)網(wǎng)上已經(jīng)有很多總結(jié)分析，就不贅述了）、人群（公眾場(chǎng)合中考慮用戶可能存在的怕尷尬心理，慎用一些交互模式比如語(yǔ)音）……就不再一一展開了。

總結(jié)

過(guò)去雖然也思考過(guò)一些環(huán)境因素對(duì)設(shè)計(jì)方案的影響，但總覺(jué)得相對(duì)有些錦上添花、無(wú)足輕重（尤其對(duì)于傳統(tǒng)的 PC 端產(chǎn)品設(shè)計(jì)），不過(guò)正如前文所提，隨著技術(shù)的發(fā)展、設(shè)計(jì)對(duì)象不再局限于屏幕，環(huán)境的影響會(huì)變得越來(lái)越重要，我們也應(yīng)該做更多未雨綢繆的研究和準(zhǔn)備，給用戶帶來(lái)更高效自然、舒適貼心的使用體驗(yàn)。

參考資料：https://developer.microsoft.com/en-us/windows/mixed-reality/design

歡迎關(guān)注阿里CCOUX團(tuán)隊(duì)的微信公眾號(hào)：

「如何做出打動(dòng)人心的設(shè)計(jì)」

1. 《進(jìn)階好文！如何從3個(gè)層面做出打動(dòng)人心的設(shè)計(jì)？》
2. 《如何做出讓競(jìng)爭(zhēng)對(duì)手難以復(fù)制的設(shè)計(jì)創(chuàng)新方案？》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com