編輯導(dǎo)語：在語音交互設(shè)計(jì)中，GUI界面設(shè)計(jì)是語音交互設(shè)計(jì)中的環(huán)節(jié)之一，其中包括了GUI容器、語音助手、播報(bào)內(nèi)容與ASR內(nèi)容顯示等方面。本篇文章里，作者總結(jié)了語音交互設(shè)計(jì)中的GUI界面設(shè)計(jì)原則，一起來看一下。

語音交互的GUI設(shè)計(jì)相對(duì)簡(jiǎn)單，需要設(shè)計(jì)的對(duì)象主要包括了語音助手的GUI容器、語音助手和用戶之間的對(duì)話流、語音助手的當(dāng)前狀態(tài)和播報(bào)內(nèi)容，以及顯示用戶說話內(nèi)容的ASR區(qū)域。

01

總的來說，無論是手機(jī)、帶屏智能音箱、智能電視或者車載系統(tǒng)，顯示語音交互任務(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í)語音交互”。

語音交互容器占據(jù)整個(gè)屏幕的好處是語音交互流程和其他界面分隔開，實(shí)現(xiàn)邏輯相對(duì)簡(jiǎn)單，同時(shí)能有更多的空間顯示語音播報(bào)內(nèi)容和對(duì)話流。在2018年以前的大部分智能手機(jī)和帶屏智能音箱的語音助手都采用了該設(shè)計(jì)方式，還有本書出版前的蔚來汽車、榮威汽車等車載系統(tǒng)的語音助手也是如此。

圖1的右側(cè)兩張圖中，iOS 14的Siri占據(jù)了屏幕的一部分顯示相關(guān)內(nèi)容，它的好處是比占滿全屏的語音助手看起來輕量得多，但是它跟后者沒有本質(zhì)差別，因?yàn)樗€是和其他的界面分隔開，雙方的數(shù)據(jù)和交互任務(wù)基本做不到互通。

最早采用該設(shè)計(jì)方式的設(shè)備是大屏設(shè)備和電腦設(shè)備，例如Android TV上的Google Assistant和MacOS上的Siri，因?yàn)檎Z音助手顯示的內(nèi)容較少，無需占滿整個(gè)屏幕，相關(guān)細(xì)節(jié)請(qǐng)看下圖2和圖3。

由于絕大部分的語音交互任務(wù)無需顯示太多信息，所以截至本書出版前，iOS 14的Siri、Android10版本以上的Google Assistant、MIUI 12版本以上的小愛同學(xué)以及帶屏智能音箱的小度在家和天貓精靈都采用了該設(shè)計(jì)方式。

圖2 位于Android TV底部的Google Assistant

圖3 位于MacOS右上角的Siri

02

是否需要展示用戶和語音助手的對(duì)話流會(huì)直接影響語音助手的當(dāng)前狀態(tài)、播報(bào)內(nèi)容和顯示用戶ASR內(nèi)容的界面布局。

最常見的對(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è)，用戶敲打鍵盤或者語音轉(zhuǎn)換的文字顯示在界面的右側(cè)，如果需要用戶交互或者確認(rèn)的內(nèi)容例如選項(xiàng)列表，則通過另外一種顯示形式穿插在雙方的對(duì)話歷史中，該顯示方式更多是單張卡片或者由多張卡片組合而成的列表。

另外一種對(duì)話流的設(shè)計(jì)可以參考iOS 13的Siri設(shè)計(jì)。

Siri可以通過上下滑動(dòng)的方式查看歷史對(duì)話記錄，但整個(gè)設(shè)計(jì)弱化了“你問我答”的方式，并強(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。該問題在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é)需要注意的是，前文提到語音交互是線性不可逆的，所以一般而言對(duì)話流只做對(duì)話歷史展示，沒有其他作用。

如果雙方進(jìn)行了好幾輪對(duì)話后，用戶回過頭對(duì)之前的ASR或者某個(gè)卡片進(jìn)行編輯和選擇，整個(gè)對(duì)話的上下文很可能發(fā)生改變，后續(xù)的對(duì)話內(nèi)容會(huì)直接作廢，所以讀者在設(shè)計(jì)對(duì)話流時(shí)需要考慮是否將對(duì)話流中的操作選項(xiàng)置灰并且設(shè)置不可操作。

03

語音助手的狀態(tài)類型包括喚醒狀態(tài)、聆聽狀態(tài)、網(wǎng)絡(luò)等待狀態(tài)、語音播報(bào)狀態(tài)、長(zhǎng)連接通信狀態(tài)和結(jié)束至默認(rèn)狀態(tài)，具體的視覺和動(dòng)效設(shè)計(jì)請(qǐng)參考Siri、Google Assistant、小愛同學(xué)等語音助手的設(shè)計(jì)。

手機(jī)、電視的語音助手當(dāng)前狀態(tài)一般顯示在界面底部，這能降低狀態(tài)切換時(shí)動(dòng)畫效果對(duì)用戶的干擾，讓用戶保持良好的閱讀體驗(yàn)；相反，車載系統(tǒng)的語音助手當(dāng)前狀態(tài)一般放在對(duì)司機(jī)來說一眼就能看到的區(qū)域，例如蔚來汽車的語音助手除了在中控屏幕上方顯示當(dāng)前狀態(tài)，還會(huì)在座艙前方中央放置一個(gè)實(shí)體機(jī)器人Nomi；而小鵬汽車G3和P7的語音助手小P也會(huì)顯示在中控屏幕的上方。

如果不考慮對(duì)話流，語音助手顯示在頂部或者底部都沒問題，一旦考慮對(duì)話流，語音助手顯示在頂部會(huì)存在一個(gè)問題：對(duì)話流中的最新內(nèi)容是從上往下排序，還是從下往上排序？

一般而言，用戶在社交應(yīng)用的界面底部輸入內(nèi)容，從就近原則來說，剛發(fā)出去的內(nèi)容顯示在對(duì)話流底部以及輸入框的附近比較符合用戶的心理預(yù)期。

現(xiàn)有絕大部分語音助手的狀態(tài)顯示會(huì)和ASR在位置上強(qiáng)綁定，因此它們相當(dāng)于一個(gè)輸入框。如果輸入框顯示在上方，而最新的內(nèi)容顯示在底部，用戶很有可能會(huì)覺得困擾。如果最新內(nèi)容顯示在輸入框的下方，最新內(nèi)容從上往下排序，這樣的設(shè)計(jì)很有可能不符合用戶的心理預(yù)期，因?yàn)楣P者暫時(shí)沒有看到有這樣的對(duì)話流設(shè)計(jì)。

目前只有新聞的信息流會(huì)將最新信息顯示在界面頂部，但概念上和對(duì)話流有著較大的差異。因此，筆者不建議將語音助手的當(dāng)前狀態(tài)和ASR內(nèi)容顯示在界面頂部的同時(shí)加入對(duì)話流的設(shè)計(jì)。

在2021年以前，無論是手機(jī)、帶屏智能音箱、電腦、電視或者車載系統(tǒng)，絕大部分的語音助手附近都會(huì)顯示ASR內(nèi)容，除了iOS 14的Siri以及蘋果歷代Carplay中的Siri。

是否一定要顯示ASR內(nèi)容？答案是否定的，因?yàn)椴粠恋闹悄芤粝錄]辦法顯示ASR內(nèi)容也能正常使用。

在帶屏設(shè)備上，顯示ASR內(nèi)容是否會(huì)更佳？筆者認(rèn)為是的，主要原因如下：

1. 用戶能更清晰地知道對(duì)話上下文是什么，詳情請(qǐng)對(duì)比圖6和圖7。
2. 當(dāng)語音交互任務(wù)無法如愿完成，用戶檢查ASR可以知道問題出自哪。

如果ASR和用戶說的內(nèi)容不一致，說明有可能是自己的發(fā)音或者環(huán)境噪音的問題導(dǎo)致語音識(shí)別出錯(cuò)，用戶可以重新發(fā)起語音或者直接編輯ASR中的內(nèi)容；如果ASR和用戶說的內(nèi)容一致，說明是語音助手自身的問題，與用戶無關(guān)。

因此，在帶屏設(shè)備上顯示ASR內(nèi)容有利于對(duì)話的推進(jìn)。在界面設(shè)計(jì)時(shí)，通常做法會(huì)在語音助手的狀態(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í)，由于用戶還沒開始說話所以ASR內(nèi)容為空。

從體驗(yàn)和商業(yè)兩個(gè)維度進(jìn)行考慮，這時(shí)候?yàn)橛脩籼峁┮恍┨崾驹~是有好處的；而且提示詞也屬于用戶想說的內(nèi)容，所以提示詞可以直接利用顯示ASR的區(qū)域，如圖8中的第一張圖。

當(dāng)用戶不點(diǎn)擊提示詞而開始說話的時(shí)候，ASR區(qū)域內(nèi)的提示詞會(huì)自行消失并實(shí)時(shí)顯示用戶說的內(nèi)容，如第二張圖。

當(dāng)發(fā)現(xiàn)用戶停止說話時(shí)，系統(tǒng)會(huì)將ASR內(nèi)容和搜索結(jié)果一并顯示在第三張圖中，此時(shí)ASR區(qū)域會(huì)清空文字并顯示相關(guān)的提示詞引導(dǎo)用戶發(fā)起下一輪對(duì)話。

圖8 Google Assistant的ASR設(shè)計(jì)

語音助手播報(bào)的內(nèi)容分為兩種類型，第一種類型是播報(bào)并跳轉(zhuǎn)到其他應(yīng)用，后續(xù)交互流程由該應(yīng)用承接；第二種是在語音容器中播報(bào)并顯示內(nèi)容，它們分別為純文本、圖片、圖文并排的內(nèi)容、選項(xiàng)列表和網(wǎng)頁五種形式。

iOS 13的Siri通過卡片樣式承載了圖片、圖文并排的內(nèi)容、選項(xiàng)列表和網(wǎng)頁四種內(nèi)容，有效統(tǒng)一了容器中整體的設(shè)計(jì)風(fēng)格，視覺效果如圖9所示。

圖9 iOS 13 Siri的對(duì)話以純文本和卡片的形式展示結(jié)果

有些語音交互的GUI設(shè)計(jì)還會(huì)考慮其他細(xì)節(jié)，例如智能座艙的語音交互存在雙音區(qū)、四音區(qū)和全音區(qū)三種概念。

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

雙音區(qū)和四音區(qū)能有效避免其他乘客或者車外環(huán)境產(chǎn)生的噪音對(duì)當(dāng)前語音交互流程的影響，但有些時(shí)候其他乘客想加入到對(duì)話過程中卻無法進(jìn)行對(duì)話，這會(huì)引起該用戶的困擾，因?yàn)檫@種定向聲場(chǎng)對(duì)他們來說是無形的。

為了解決該問題，小鵬汽車P7在語音交互過程中，界面底部的左、右兩側(cè)和中間分別顯示藍(lán)色波浪效果，以表示當(dāng)前處于鎖定左、右音區(qū)和不鎖區(qū)即全音區(qū)的狀態(tài)，效果如圖10所示。

除此之外，當(dāng)語音助手小P完成一系列交互任務(wù)后，如果頭頂上還顯示著拾音圖標(biāo)和“繼續(xù)說”時(shí)，說明小P仍處于聆聽狀態(tài)，這時(shí)候用戶無需通過喚醒詞即可繼續(xù)發(fā)起新一輪語音對(duì)話。

圖10 小鵬P7 語音交互流程展示

以上是公眾號(hào)發(fā)布關(guān)于語音交互的所有內(nèi)容，內(nèi)容較多需要讀者的慢慢消化。

總體而言，語音交互除了考慮對(duì)話的設(shè)計(jì)，還需要考慮語音助手的人設(shè)、聲音、GUI等問題，設(shè)計(jì)師需要思考的問題和設(shè)計(jì)的內(nèi)容遠(yuǎn)多于移動(dòng)互聯(lián)網(wǎng)應(yīng)用。

無論是國(guó)內(nèi)還是國(guó)外，當(dāng)前語音交互處于發(fā)展前期，現(xiàn)階段仍有太多問題需要探索和解決，所以它對(duì)設(shè)計(jì)師的綜合素質(zhì)要求較高。如果讀者對(duì)語音交互感興趣，不妨多了解這方面的知識(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è)》作者，全棧開發(fā)者，專注于交互設(shè)計(jì)和人工智能設(shè)計(jì)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于CC0協(xié)議。