GUI和VUI的差異來自信息維度、信息量大小、交互方式、內(nèi)容驅(qū)動、任務(wù)類型等等，今天我們一起探討一下GUI和VUI的差異，最后重點(diǎn)聊一下如何將GUI轉(zhuǎn)化為VUI。

今天我們深入探討一下GUI和VUI。

GUI是60年代“人機(jī)交互”的奇才道格·恩格爾巴特提出的概念，它使計算機(jī)更容易被用戶接受，自從80年代蘋果推出第一款搭載GUI的電腦后，至今為止GUI一直是人機(jī)交互的代表。VUI并不是全新的概念，它的前身是IVR(Interactive Voice Response，交互式語音應(yīng)答)，它誕生于70年代普及于2000年。電話用戶只要撥打移動運(yùn)營商所指定號碼，就可根據(jù)語音操作提示收聽、點(diǎn)播或發(fā)送所需的語音信息以及參與聊天、交友等互動式服務(wù)。新一代的VUI更多指的是人通過自然語言與計算機(jī)進(jìn)行交互，所以可以認(rèn)為VUI是人工智能時代下的人機(jī)交互代表。

在聊GUI和VUI之前，我們先聊一下視覺和聽覺，因為使用感官的不同會直接導(dǎo)致GUI和VUI設(shè)計的不同。

維度

如果問GUI和VUI最本質(zhì)的區(qū)別是什么，我認(rèn)為是傳遞信息的維度不同。眼睛接收的信息由時間和空間XZY軸四個維度決定；耳朵接收的信息只能由時間維度決定。

雖然耳朵能覺察聲音的方向和頻率，但不是決定性因素。

時間決定了接收信息的多少，它是單向的、線性的以及不能停止的。耳朵在很短時間內(nèi)接收的信息是非常有限的，舉一個極限的例子：假設(shè)人可以停止時間，在靜止的時間內(nèi)聲音是無法傳播的，這時候是不存在信息的；還有一個說法是在靜止的時間內(nèi)聲音總保持在一個當(dāng)前狀態(tài)例如“滴~~~”，這時候聲音對人類來說就是一種噪音。耳朵接收的信息只能由時間決定。

眼睛卻很不一樣，即使它在很短時間內(nèi)也可以從空間獲取大量信息?？臻g的信息由兩個因素決定：1.動態(tài)還是靜態(tài)；2.三維空間還是二維平面。在沒有其他參照物的對比下，事物的靜止不動可以模擬時間上的靜止，這時候人是可以在靜止的事物上獲取信息的。時間和空間的結(jié)合決定了信息的大小，好比如花一分鐘看周圍的動態(tài)事物遠(yuǎn)比一年看同一個靜態(tài)頁面獲取的信息多得多。

還有一個重要的區(qū)別，眼睛可以來回觀察空間獲取信息；耳朵只能單向獲取信息，在沒有其他功能的幫助下如果想重聽前幾秒的信息是不可能的。

接收信息量的對比

視覺接收的信息量遠(yuǎn)比聽覺高。在知乎上有神經(jīng)科學(xué)和腦科學(xué)話題的優(yōu)秀回答者指出大腦每秒通過眼睛接收的信息上限為100Mbps，通過耳蝸接收的信息上限為1Mbps。簡單點(diǎn)說，視覺接收的信息量可以達(dá)到聽覺接收信息的100倍。

以上數(shù)據(jù)來自知乎問題“耳朵和眼睛哪個接收信息的速度更快？”

雖然以上結(jié)論沒有官方證實，但我們可以用簡單的方法進(jìn)行對比。在不考慮超出理解范圍外，人閱讀文字的速度可以達(dá)到500~1000字每分鐘，說話時語速可以達(dá)到200~300字每分鐘，所以視覺閱讀的文字信息可以達(dá)到聽覺的2-5倍。

超出理解范圍時會花時間思考，這導(dǎo)致了接受信息量驟降。以上兩個數(shù)據(jù)來自知乎問題“普通人的閱讀速度是每小時多少字？”和“為他人撰寫中文演講稿，平均每分鐘多少字比較合適？”

如果將圖像作為信息載體，視覺閱讀的信息遠(yuǎn)超聽覺的5倍。眼睛還有一個特別之處，通過掃視的方式一秒內(nèi)可以看到三個不同的地方(圖)。

以上數(shù)據(jù)來自《人工智能的未來》一書。

GUI和VUI的差異

維度加上視覺聽覺各自的特點(diǎn)導(dǎo)致了GUI和VUI在信息展現(xiàn)、交互等方面的不同。以下我們討論一下GUI和VUI的差異。

內(nèi)容與數(shù)據(jù)驅(qū)動

GUI的內(nèi)容主要為圖形和文字；VUI的內(nèi)容主要為文字，圖形和文字都屬于非結(jié)構(gòu)化數(shù)據(jù)。目前的GUI展示的內(nèi)容是由結(jié)構(gòu)化數(shù)據(jù)驅(qū)動的；VUI展示的內(nèi)容是由非結(jié)構(gòu)化數(shù)據(jù)驅(qū)動的。

信息交互

如何理解GUI和VUI由不同的數(shù)據(jù)類型驅(qū)動？人主要通過點(diǎn)擊和手勢的方式與GUI進(jìn)行交互，至于人在做什么其實計算機(jī)是不知道的，它只是將點(diǎn)擊和手勢轉(zhuǎn)化為坐標(biāo)和操作兩種數(shù)據(jù)，再給予相應(yīng)的響應(yīng)事件，例如打開鏈接、獲取數(shù)據(jù)庫的信息。

人通過對話的方式與VUI進(jìn)行交互，對話過程中使用的自然語言屬于非結(jié)構(gòu)化數(shù)據(jù)，VUI要給出正確的響應(yīng)事件必須要先理解人類在說什么，更重要的是在想什么。

情境感知

要知道用戶在想什么做什么，必須要有出色的情境感知(Context Awareness)能力，也就是上下文理解能力，它能根據(jù)用戶是誰、用戶情感、當(dāng)前環(huán)境、之前的記憶給出下一步的預(yù)測。目前的人工智能技術(shù)還沒很好地掌握以上幾點(diǎn)技術(shù)，所以GUI和VUI的情境感知能力相對初級，只能人為設(shè)計來彌補(bǔ)。

任務(wù)類型

由于眼睛比耳朵可以接收更多信息，所以GUI更適合展示內(nèi)容。在指令面前，GUI和VUI各有優(yōu)勢，到底誰是最佳只能具體問題具體分析了，取決于各自的步驟長短。但可以肯定的是，目前的VUI不適合復(fù)雜的任務(wù)，因為它在多輪任務(wù)中表現(xiàn)并不是很出色。

信息架構(gòu)：

GUI的信息架構(gòu)包含了頁面和流程，頁面里包含了各種布局和結(jié)構(gòu)；而VUI的信息架構(gòu)只有流程，所以GUI的信息架構(gòu)要比VUI復(fù)雜。由于頁面操作的限制使GUI無法隨意切換毫無相關(guān)的流程，而通過對話交流的VUI可以做到這一點(diǎn)，在導(dǎo)航的便捷性上，VUI更勝一籌。

GUI to VUI

為什么要將GUI轉(zhuǎn)換為VUI？

1. 現(xiàn)有互聯(lián)網(wǎng)的絕大部分內(nèi)容和數(shù)據(jù)都與GUI的信息架構(gòu)和代碼有關(guān)，所以我們沒有必要為兩個界面做兩套內(nèi)容。
2. 這有助于人工智能助手的發(fā)展。如果我們要將GUI的內(nèi)容轉(zhuǎn)換為VUI內(nèi)容，我們必須簡化當(dāng)前信息，使信息壓縮為200-300字每分鐘或者3-5字每秒。

目前的人工智能還做不到圖片理解、情境感知等技術(shù)，要將大部分GUI內(nèi)容自動壓縮并轉(zhuǎn)換成自然語言絕非易事，所以需要人為制定一些轉(zhuǎn)換策略。

在轉(zhuǎn)換策略上我們可以借鑒成熟的無障礙規(guī)范指南——a11y，部分內(nèi)容是為失明人士提供幫助的，可以將界面內(nèi)容轉(zhuǎn)換為聲音內(nèi)容，我們借鑒以下三個準(zhǔn)則：

1. 可感知性：信息和用戶界面組件必須以可感知的方式呈現(xiàn)給用戶。
2. 適應(yīng)性：創(chuàng)建可用不同方式呈現(xiàn)的內(nèi)容（例如簡單的布局），而不會丟失信息或結(jié)構(gòu)。
3. 可導(dǎo)航性：提供幫助用戶導(dǎo)航、查找內(nèi)容、并確定其位置的方法。

解釋：

（1）在可感知性里下面有一條非常重要的準(zhǔn)則：為所有非文本內(nèi)容例如圖片、按鈕等等提供替代文本，使其可以轉(zhuǎn)化為人們需要的其他形式。現(xiàn)在的通用做法是為圖片、按鈕等非文本內(nèi)容增加描述性內(nèi)容，例如在img標(biāo)簽上增加alt屬性，在input button標(biāo)簽上增加name屬性。開啟無障礙設(shè)置后，失明人士通過觸摸相關(guān)位置，系統(tǒng)會將屬性里的文字朗讀出來。

舉個例子：

以京東的廣告為例，應(yīng)該在alt屬性上加上簡潔的內(nèi)容“12月14日360手機(jī)N6最高減600”，當(dāng)VUI閱讀該內(nèi)容時可以將廣告重點(diǎn)朗讀出來。

在這里我有新的想法，以下圖為例：粉紅色區(qū)域為一個小模塊，圖片、副標(biāo)題、時間和作者等信息對于必須簡化信息的VUI來說都不是必要信息。是不是可以在div標(biāo)簽上增加一個“標(biāo)題”屬性，當(dāng)VUI閱讀到該div時可以直接閱讀該屬性的內(nèi)容，例如標(biāo)題內(nèi)容；如果用戶對作者感興趣，可以通過對話的形式獲取作者信息。

（2）以淘寶為例，以下內(nèi)容普通人花幾秒就可以看完；如果以VUI的形式進(jìn)行交互，首先VUI不知道從哪開始讀起，其次是用戶沒有耐心聽完全部內(nèi)容。為什么？因為GUI的結(jié)構(gòu)有橫縱向兩個維度，VUI結(jié)構(gòu)只有一個維度，用戶在GUI上的閱讀順序無法直接遷移到VUI上，所以a11y希望頁面設(shè)計時可以采用簡單的布局，GUI和VUI采用相同的結(jié)構(gòu)，避免丟失信息或結(jié)構(gòu)。

（3）在可導(dǎo)航性上，a11y希望網(wǎng)頁提供一種機(jī)制可以跳過在多個網(wǎng)頁中重復(fù)出現(xiàn)的內(nèi)容模塊。在這里我有新的想法：可以直接跳過無需朗讀的內(nèi)容模塊，例如淘寶的導(dǎo)航、主題市場、登錄模塊，因為用戶使用淘寶VUI主要需求為搜索物品和獲取優(yōu)惠信息。同理，是不是可以在div標(biāo)簽上增加一個“跳過”屬性，當(dāng)VUI閱讀到該div時可以直接跳過div，當(dāng)用戶有需求時，可以通過對話的形式對該div里的內(nèi)容進(jìn)行交互。

最后我還有另外一個想法：是不是可以為大段內(nèi)容如新聞、介紹等增加“文本摘要”屬性，當(dāng)VUI閱讀到該標(biāo)簽式，自動使用文本摘要功能。

結(jié)合以上三點(diǎn)思考，GUI在轉(zhuǎn)換為VUI時以“概括”、“跳過”的方式可以大大地簡化信息，使VUI擁有一個良好的體驗。

以上三個屬性需要W3C、Google、蘋果等組織統(tǒng)一制定標(biāo)準(zhǔn)。

VUI and GUI

VUI和GUI的結(jié)合已經(jīng)不是新鮮事，例如Siri、Google Assistant、Cortana、Bixby，以及最近推出的Alexa屏幕版。在GUI的基礎(chǔ)上增加VUI有助于簡化整個導(dǎo)航的交互，可以做到無直接關(guān)系頁面的跳轉(zhuǎn)，例如以命令的形式導(dǎo)航去其他應(yīng)用的某個頁面。在VUI的基礎(chǔ)上增加GUI可以使選擇、確認(rèn)等操作得以簡化，尤其是用Alexa進(jìn)行購物時。

結(jié)語

人工智能時代下GUI和VUI的發(fā)展會越來越快，研究和探索它們是一件非常有趣的事情。我認(rèn)為在未來幾年里，個人智能助手的成熟會使VUI和GUI的結(jié)合會越來越緊密，它直接影響到未來幾年移動交互的發(fā)展。

如果你也有相關(guān)想法歡迎和我交流:-)

作者：薛志榮（微信公眾號：薛志榮），百度交互設(shè)計師，二年級生

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

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