語(yǔ)音交互——GUI界面設(shè)計(jì)
編輯導(dǎo)語(yǔ):在語(yǔ)音交互設(shè)計(jì)中,GUI界面設(shè)計(jì)是語(yǔ)音交互設(shè)計(jì)中的環(huán)節(jié)之一,其中包括了GUI容器、語(yǔ)音助手、播報(bào)內(nèi)容與ASR內(nèi)容顯示等方面。本篇文章里,作者總結(jié)了語(yǔ)音交互設(shè)計(jì)中的GUI界面設(shè)計(jì)原則,一起來(lái)看一下。
語(yǔ)音交互的GUI設(shè)計(jì)相對(duì)簡(jiǎn)單,需要設(shè)計(jì)的對(duì)象主要包括了語(yǔ)音助手的GUI容器、語(yǔ)音助手和用戶之間的對(duì)話流、語(yǔ)音助手的當(dāng)前狀態(tài)和播報(bào)內(nèi)容,以及顯示用戶說(shuō)話內(nèi)容的ASR區(qū)域。
01
總的來(lái)說(shuō),無(wú)論是手機(jī)、帶屏智能音箱、智能電視或者車載系統(tǒng),顯示語(yǔ)音交互任務(wù)的GUI容器分為兩種設(shè)計(jì)方式,分別是占滿全屏和不占滿全屏,以iOS 13和iOS 14的Siri為示例,請(qǐng)看圖1:
圖1 iOS 13(左)和iOS 14(右)
圖1的左側(cè)兩張圖中,iOS 13的Siri占據(jù)了整個(gè)屏幕大小,該設(shè)計(jì)被筆者稱為“應(yīng)用級(jí)語(yǔ)音交互”。
語(yǔ)音交互容器占據(jù)整個(gè)屏幕的好處是語(yǔ)音交互流程和其他界面分隔開(kāi),實(shí)現(xiàn)邏輯相對(duì)簡(jiǎn)單,同時(shí)能有更多的空間顯示語(yǔ)音播報(bào)內(nèi)容和對(duì)話流。在2018年以前的大部分智能手機(jī)和帶屏智能音箱的語(yǔ)音助手都采用了該設(shè)計(jì)方式,還有本書出版前的蔚來(lái)汽車、榮威汽車等車載系統(tǒng)的語(yǔ)音助手也是如此。
圖1的右側(cè)兩張圖中,iOS 14的Siri占據(jù)了屏幕的一部分顯示相關(guān)內(nèi)容,它的好處是比占滿全屏的語(yǔ)音助手看起來(lái)輕量得多,但是它跟后者沒(méi)有本質(zhì)差別,因?yàn)樗€是和其他的界面分隔開(kāi),雙方的數(shù)據(jù)和交互任務(wù)基本做不到互通。
最早采用該設(shè)計(jì)方式的設(shè)備是大屏設(shè)備和電腦設(shè)備,例如Android TV上的Google Assistant和MacOS上的Siri,因?yàn)檎Z(yǔ)音助手顯示的內(nèi)容較少,無(wú)需占滿整個(gè)屏幕,相關(guān)細(xì)節(jié)請(qǐng)看下圖2和圖3。
由于絕大部分的語(yǔ)音交互任務(wù)無(wú)需顯示太多信息,所以截至本書出版前,iOS 14的Siri、Android10版本以上的Google Assistant、MIUI 12版本以上的小愛(ài)同學(xué)以及帶屏智能音箱的小度在家和天貓精靈都采用了該設(shè)計(jì)方式。
圖2 位于Android TV底部的Google Assistant
圖3 位于MacOS右上角的Siri
02
是否需要展示用戶和語(yǔ)音助手的對(duì)話流會(huì)直接影響語(yǔ)音助手的當(dāng)前狀態(tài)、播報(bào)內(nèi)容和顯示用戶ASR內(nèi)容的界面布局。
最常見(jiàn)的對(duì)話流設(shè)計(jì)是社交應(yīng)用常用的左右結(jié)構(gòu)布局,即界面左右兩側(cè)分別顯示對(duì)方輸出的內(nèi)容以及用戶自己輸入的內(nèi)容;而最新消息顯示在界面底部,包括用戶即將輸入的內(nèi)容,以圖4 Google Allo中的Google Assistant為例。
圖4 Google Allo中的GoogleAssistant(左)和用戶(右)的對(duì)話流
在Google Allo中,Google Assistant的播報(bào)內(nèi)容顯示在左側(cè),用戶敲打鍵盤或者語(yǔ)音轉(zhuǎn)換的文字顯示在界面的右側(cè),如果需要用戶交互或者確認(rèn)的內(nèi)容例如選項(xiàng)列表,則通過(guò)另外一種顯示形式穿插在雙方的對(duì)話歷史中,該顯示方式更多是單張卡片或者由多張卡片組合而成的列表。
另外一種對(duì)話流的設(shè)計(jì)可以參考iOS 13的Siri設(shè)計(jì)。
Siri可以通過(guò)上下滑動(dòng)的方式查看歷史對(duì)話記錄,但整個(gè)設(shè)計(jì)弱化了“你問(wèn)我答”的方式,并強(qiáng)調(diào)Siri給出的對(duì)話結(jié)果;即使對(duì)話結(jié)果不需要一屏展示,Siri也會(huì)將上一輪對(duì)話內(nèi)容頂上去,如圖5所示。
這樣設(shè)計(jì)的好處是對(duì)話結(jié)果有更大的面積展示,同時(shí)減少上一輪對(duì)話對(duì)當(dāng)前的干擾,但缺點(diǎn)也很明顯,如果上一輪對(duì)話和當(dāng)前對(duì)話處于同一任務(wù)中,兩輪對(duì)話之間的關(guān)聯(lián)會(huì)被削弱,如圖6所示,圖6-1和圖6-2之間的關(guān)系明顯不如圖6-1和圖6-3。該問(wèn)題在iOS 14中尤其明顯,因?yàn)樵趇OS 14中,Siri的容器不占滿全屏,同時(shí)Siri會(huì)將上一輪對(duì)話出現(xiàn)的卡片直接消失,如圖7所示。
圖5 iOS 13 Siri 對(duì)話流1
圖6 iOS 13 Siri 對(duì)話流2
圖7 iOS 14 Siri 對(duì)話流
這里有個(gè)細(xì)節(jié)需要注意的是,前文提到語(yǔ)音交互是線性不可逆的,所以一般而言對(duì)話流只做對(duì)話歷史展示,沒(méi)有其他作用。
如果雙方進(jìn)行了好幾輪對(duì)話后,用戶回過(guò)頭對(duì)之前的ASR或者某個(gè)卡片進(jìn)行編輯和選擇,整個(gè)對(duì)話的上下文很可能發(fā)生改變,后續(xù)的對(duì)話內(nèi)容會(huì)直接作廢,所以讀者在設(shè)計(jì)對(duì)話流時(shí)需要考慮是否將對(duì)話流中的操作選項(xiàng)置灰并且設(shè)置不可操作。
03
語(yǔ)音助手的狀態(tài)類型包括喚醒狀態(tài)、聆聽(tīng)狀態(tài)、網(wǎng)絡(luò)等待狀態(tài)、語(yǔ)音播報(bào)狀態(tài)、長(zhǎng)連接通信狀態(tài)和結(jié)束至默認(rèn)狀態(tài),具體的視覺(jué)和動(dòng)效設(shè)計(jì)請(qǐng)參考Siri、Google Assistant、小愛(ài)同學(xué)等語(yǔ)音助手的設(shè)計(jì)。
手機(jī)、電視的語(yǔ)音助手當(dāng)前狀態(tài)一般顯示在界面底部,這能降低狀態(tài)切換時(shí)動(dòng)畫效果對(duì)用戶的干擾,讓用戶保持良好的閱讀體驗(yàn);相反,車載系統(tǒng)的語(yǔ)音助手當(dāng)前狀態(tài)一般放在對(duì)司機(jī)來(lái)說(shuō)一眼就能看到的區(qū)域,例如蔚來(lái)汽車的語(yǔ)音助手除了在中控屏幕上方顯示當(dāng)前狀態(tài),還會(huì)在座艙前方中央放置一個(gè)實(shí)體機(jī)器人Nomi;而小鵬汽車G3和P7的語(yǔ)音助手小P也會(huì)顯示在中控屏幕的上方。
如果不考慮對(duì)話流,語(yǔ)音助手顯示在頂部或者底部都沒(méi)問(wèn)題,一旦考慮對(duì)話流,語(yǔ)音助手顯示在頂部會(huì)存在一個(gè)問(wèn)題:對(duì)話流中的最新內(nèi)容是從上往下排序,還是從下往上排序?
一般而言,用戶在社交應(yīng)用的界面底部輸入內(nèi)容,從就近原則來(lái)說(shuō),剛發(fā)出去的內(nèi)容顯示在對(duì)話流底部以及輸入框的附近比較符合用戶的心理預(yù)期。
現(xiàn)有絕大部分語(yǔ)音助手的狀態(tài)顯示會(huì)和ASR在位置上強(qiáng)綁定,因此它們相當(dāng)于一個(gè)輸入框。如果輸入框顯示在上方,而最新的內(nèi)容顯示在底部,用戶很有可能會(huì)覺(jué)得困擾。如果最新內(nèi)容顯示在輸入框的下方,最新內(nèi)容從上往下排序,這樣的設(shè)計(jì)很有可能不符合用戶的心理預(yù)期,因?yàn)楣P者暫時(shí)沒(méi)有看到有這樣的對(duì)話流設(shè)計(jì)。
目前只有新聞的信息流會(huì)將最新信息顯示在界面頂部,但概念上和對(duì)話流有著較大的差異。因此,筆者不建議將語(yǔ)音助手的當(dāng)前狀態(tài)和ASR內(nèi)容顯示在界面頂部的同時(shí)加入對(duì)話流的設(shè)計(jì)。
在2021年以前,無(wú)論是手機(jī)、帶屏智能音箱、電腦、電視或者車載系統(tǒng),絕大部分的語(yǔ)音助手附近都會(huì)顯示ASR內(nèi)容,除了iOS 14的Siri以及蘋果歷代Carplay中的Siri。
是否一定要顯示ASR內(nèi)容?答案是否定的,因?yàn)椴粠恋闹悄芤粝錄](méi)辦法顯示ASR內(nèi)容也能正常使用。
在帶屏設(shè)備上,顯示ASR內(nèi)容是否會(huì)更佳?筆者認(rèn)為是的,主要原因如下:
- 用戶能更清晰地知道對(duì)話上下文是什么,詳情請(qǐng)對(duì)比圖6和圖7。
- 當(dāng)語(yǔ)音交互任務(wù)無(wú)法如愿完成,用戶檢查ASR可以知道問(wèn)題出自哪。
如果ASR和用戶說(shuō)的內(nèi)容不一致,說(shuō)明有可能是自己的發(fā)音或者環(huán)境噪音的問(wèn)題導(dǎo)致語(yǔ)音識(shí)別出錯(cuò),用戶可以重新發(fā)起語(yǔ)音或者直接編輯ASR中的內(nèi)容;如果ASR和用戶說(shuō)的內(nèi)容一致,說(shuō)明是語(yǔ)音助手自身的問(wèn)題,與用戶無(wú)關(guān)。
因此,在帶屏設(shè)備上顯示ASR內(nèi)容有利于對(duì)話的推進(jìn)。在界面設(shè)計(jì)時(shí),通常做法會(huì)在語(yǔ)音助手的狀態(tài)顯示附近預(yù)留1-2行的位置顯示ASR內(nèi)容,如果內(nèi)容超出了預(yù)留空間,系統(tǒng)會(huì)自動(dòng)對(duì)ASR的前面內(nèi)容做截?cái)嗵幚怼?/p>
以圖8為例,我們參考一下Google Assistant是如何設(shè)計(jì)ASR的。
當(dāng)用戶激活Google Assistant時(shí),由于用戶還沒(méi)開(kāi)始說(shuō)話所以ASR內(nèi)容為空。
從體驗(yàn)和商業(yè)兩個(gè)維度進(jìn)行考慮,這時(shí)候?yàn)橛脩籼峁┮恍┨崾驹~是有好處的;而且提示詞也屬于用戶想說(shuō)的內(nèi)容,所以提示詞可以直接利用顯示ASR的區(qū)域,如圖8中的第一張圖。
當(dāng)用戶不點(diǎn)擊提示詞而開(kāi)始說(shuō)話的時(shí)候,ASR區(qū)域內(nèi)的提示詞會(huì)自行消失并實(shí)時(shí)顯示用戶說(shuō)的內(nèi)容,如第二張圖。
當(dāng)發(fā)現(xiàn)用戶停止說(shuō)話時(shí),系統(tǒng)會(huì)將ASR內(nèi)容和搜索結(jié)果一并顯示在第三張圖中,此時(shí)ASR區(qū)域會(huì)清空文字并顯示相關(guān)的提示詞引導(dǎo)用戶發(fā)起下一輪對(duì)話。
圖8 Google Assistant的ASR設(shè)計(jì)
語(yǔ)音助手播報(bào)的內(nèi)容分為兩種類型,第一種類型是播報(bào)并跳轉(zhuǎn)到其他應(yīng)用,后續(xù)交互流程由該應(yīng)用承接;第二種是在語(yǔ)音容器中播報(bào)并顯示內(nèi)容,它們分別為純文本、圖片、圖文并排的內(nèi)容、選項(xiàng)列表和網(wǎng)頁(yè)五種形式。
iOS 13的Siri通過(guò)卡片樣式承載了圖片、圖文并排的內(nèi)容、選項(xiàng)列表和網(wǎng)頁(yè)四種內(nèi)容,有效統(tǒng)一了容器中整體的設(shè)計(jì)風(fēng)格,視覺(jué)效果如圖9所示。
圖9 iOS 13 Siri的對(duì)話以純文本和卡片的形式展示結(jié)果
有些語(yǔ)音交互的GUI設(shè)計(jì)還會(huì)考慮其他細(xì)節(jié),例如智能座艙的語(yǔ)音交互存在雙音區(qū)、四音區(qū)和全音區(qū)三種概念。
- 雙音區(qū)是指語(yǔ)音助手識(shí)別到語(yǔ)音交互發(fā)起人為駕駛員時(shí),車內(nèi)的麥克風(fēng)陣列會(huì)將拾音方向設(shè)定為左側(cè)方向,這時(shí)候即使右側(cè)的副駕和后排乘客發(fā)出指令,麥克風(fēng)也無(wú)法獲取他們的聲音。
- 四音區(qū)是指車內(nèi)的麥克風(fēng)陣列會(huì)鎖定主駕、副駕、后排左側(cè)和后排右側(cè)四個(gè)方向,鎖定后其他用戶無(wú)法發(fā)出指令。
- 全音區(qū)是指麥克風(fēng)不會(huì)鎖定某個(gè)方向,所有乘客都能發(fā)起語(yǔ)音指令。
雙音區(qū)和四音區(qū)能有效避免其他乘客或者車外環(huán)境產(chǎn)生的噪音對(duì)當(dāng)前語(yǔ)音交互流程的影響,但有些時(shí)候其他乘客想加入到對(duì)話過(guò)程中卻無(wú)法進(jìn)行對(duì)話,這會(huì)引起該用戶的困擾,因?yàn)檫@種定向聲場(chǎng)對(duì)他們來(lái)說(shuō)是無(wú)形的。
為了解決該問(wèn)題,小鵬汽車P7在語(yǔ)音交互過(guò)程中,界面底部的左、右兩側(cè)和中間分別顯示藍(lán)色波浪效果,以表示當(dāng)前處于鎖定左、右音區(qū)和不鎖區(qū)即全音區(qū)的狀態(tài),效果如圖10所示。
除此之外,當(dāng)語(yǔ)音助手小P完成一系列交互任務(wù)后,如果頭頂上還顯示著拾音圖標(biāo)和“繼續(xù)說(shuō)”時(shí),說(shuō)明小P仍處于聆聽(tīng)狀態(tài),這時(shí)候用戶無(wú)需通過(guò)喚醒詞即可繼續(xù)發(fā)起新一輪語(yǔ)音對(duì)話。
圖10 小鵬P7 語(yǔ)音交互流程展示
以上是公眾號(hào)發(fā)布關(guān)于語(yǔ)音交互的所有內(nèi)容,內(nèi)容較多需要讀者的慢慢消化。
總體而言,語(yǔ)音交互除了考慮對(duì)話的設(shè)計(jì),還需要考慮語(yǔ)音助手的人設(shè)、聲音、GUI等問(wèn)題,設(shè)計(jì)師需要思考的問(wèn)題和設(shè)計(jì)的內(nèi)容遠(yuǎn)多于移動(dòng)互聯(lián)網(wǎng)應(yīng)用。
無(wú)論是國(guó)內(nèi)還是國(guó)外,當(dāng)前語(yǔ)音交互處于發(fā)展前期,現(xiàn)階段仍有太多問(wèn)題需要探索和解決,所以它對(duì)設(shè)計(jì)師的綜合素質(zhì)要求較高。如果讀者對(duì)語(yǔ)音交互感興趣,不妨多了解這方面的知識(shí)和設(shè)計(jì),為后續(xù)基于多模交互的體驗(yàn)設(shè)計(jì)提前做好準(zhǔn)備。
#專欄作家#
薛志榮,微信公眾號(hào):薛志榮,人人都是產(chǎn)品經(jīng)理專欄作家。暢銷書《AI改變?cè)O(shè)計(jì)-人工智能時(shí)代的設(shè)計(jì)師生存手冊(cè)》作者,全棧開(kāi)發(fā)者,專注于交互設(shè)計(jì)和人工智能設(shè)計(jì)。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash,基于CC0協(xié)議。
專欄作家
薛志榮,微信公眾號(hào):薛志榮,人人都是產(chǎn)品經(jīng)理專欄作家。暢銷書《AI改變?cè)O(shè)計(jì)-人工智能時(shí)代的設(shè)計(jì)師生存手冊(cè)》作者,全棧開(kāi)發(fā)者,專注于交互設(shè)計(jì)和人工智能設(shè)計(jì)。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash,基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!