編輯導(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)為是的，主要原因如下：

1. 用戶能更清晰地知道對(duì)話上下文是什么，詳情請(qǐng)對(duì)比圖6和圖7。
2. 當(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ū)三種概念。

1. 雙音區(qū)是指語(yǔ)音助手識(shí)別到語(yǔ)音交互發(fā)起人為駕駛員時(shí)，車內(nèi)的麥克風(fēng)陣列會(huì)將拾音方向設(shè)定為左側(cè)方向，這時(shí)候即使右側(cè)的副駕和后排乘客發(fā)出指令，麥克風(fēng)也無(wú)法獲取他們的聲音。
2. 四音區(qū)是指車內(nèi)的麥克風(fēng)陣列會(huì)鎖定主駕、副駕、后排左側(cè)和后排右側(cè)四個(gè)方向，鎖定后其他用戶無(wú)法發(fā)出指令。
3. 全音區(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é)議。