同時考慮界面與語音交互的 VGUI 設計
本文適合（1）正在進行 CUI/VUI 設計的 Designer（2）喜歡探索和了解新領域的 Geeker（3）喜歡學習新設計趨勢 的 Anybody
在先前的語音體驗設計連載「Conversational UX 系列」，與大家分享了從最了解語音設計開始，到真正進行語音設計的過程總共五篇，對語音設計進行了比較系統化的說明。
但真正到了真實的設計工作環境裡，單純只考慮語音設計其實是非常少的。
更多的情況是基於界面結合語音交互，來進行產品功能的表達。甚至考慮到目前大多的公司，不具備智能音箱產品的開發能力，真正在面臨同時擁有 GUI & VUI 的工作需求，其實少之又少。
本次的文章總結了幾點， Nathan 目前在帶屏語音音箱的設計工作中，同時處理 GUI ＆ VUI 時的設計心得。提供大家建立一些能帶來初步幫助的思路。
01 了解 VUI 與 GUI 各自合適的場景
對於聲音，一直是人類最自然的交互形式。但考慮到本身的信息乘載量限制，直到目前的使用上，還不能真正取代圖形 GUI 來作為主要的交互方式，而是彼此更好的協作。
最直白也最簡單的來列舉 GUI & VUI 交互的優勢。
GUI
信息框架：層級遞進明確，在使用流程上有清楚的路徑感;
注意力：用戶的使用集中在 UI 界面上，能更專注在複雜操作上;
可視性：受限移動設備的觸屏交互，主要在固定距離的單一界面上;
信息承載：信息量豐富，可呈現的方式也更加豐富、生動和高效。
VUI
信息框架：相對扁平直達，基於指令語音前往對應頁面;
注意力：用戶可單一時間進行多項任務，能更自由的進行多工切換;
可視性：語音產品大多處於開放空間，大多在 1.0~2.3 之間的不定距離;
信息承載：單位時間能接受的信息量有限，需要簡潔高效。
整體而言相較於 GUI，當信息量在一定範圍內時，VUI 是更加自然、高效、低學習成本的操作方式，也讓原本不熟悉移動 Mobile App 的老人、小孩，能更加快速的上手。
當然，VUI 本質上並不是別於 GUI 的一種操作方式，同樣屬於人機交互界面設計範疇，只不過交互形式發生了變化。以人為本，考慮人如何更加自然的進行操作的人本化目標和設計原則基本還是不變。
比如：「易於理解和使用 」、「安全、信任的」、「效率、愉悅的」這些設計目標，仍然是在使用 VUI 時應當要同時考慮的。
如果將帶有 GUI & VUI 特性的產品，通過「不同使用場景」跟「硬件能力強弱」兩個維度列舉時。
可以發現隨著交互能力的疊加、到共同存在使用時，雖然設計問題變得越加複雜。但對用戶來說也是感官通道的增強，整個人機空間越來越立體。
如果我們再把智能硬件中間這條產品項，單拎出來看，且同時考慮 VUI & GUI 共同使用的情況時，整體的用戶行為跟屏幕上的設計目標，也基本能分成三個場景。
01 當用戶使用語音的效率大於觸屏時
也就是所謂的 Hands Free 場景，此時用戶會天然的選擇語音操作，整體的界面 & 輔助元素設計，也應圍繞著 VUI 進行，主要考慮用戶一掃而過時的信息呈現。當然在這個場景下，用戶大多不會進行過於複雜的操作。
02 當隨著要進行的任務趨於複雜、或是觸屏的效率大於語音時
用戶也會傾向靠近屏幕進行專注操作，此時即是 Hands On 場景，複雜或是需要一定流程才能完成的任務基本都是這個場景內。
03 但當完成操作所需的複雜度、效率訴求都屬於中間時
就帶來了 Hands with Voice 場景。由於用戶當前的注意力、使用場景、放置位置，都會影響到在這個場景下的交互選擇，因此大多時候的設計是兼顧 VUI & GUI 兩者，產生了 VGUI 的設計方式。真正意義上的多模態交互，基本也都發生在這個場景下。
如果要簡單的區別 VUI & GUI 的優勢交互場景，「任務複雜度」、「操作效率」會是用戶決定挑選何種操作的主要考慮點。當然 距離、易用性、可視性等，都會是其中的影響因素。
02 交互距離，是 VGUI 的關鍵設計要素
VGUI 的全稱為「Voice with Graphic User Interface」，指的即是如何更好的幫助用戶進行語音交互的界面設計。
當用戶處在 Hands On 場景時，大多是為了效率優先的目的，因此內容豐富度以及界面佈局上的處理，會是三個場境最為簡單，基本也是在平板的觸屏設計上，進行移植考慮。
但隨著「交互距離」的增加，從 Hands On 到 Hands wtih Voice 甚至 Hands Off 時，如何在保證界面上的信息可視性上，有效滿足用戶所要求的的內容透出，就會是 VGUI 主要考慮的點。
下圖就是從「交互距離」這個維度上，來看不同距離下的用戶注意力、信息接收密度以及社會主動性差異，並從這些設計影響因子，來看如何對不同場景進行針對性地體驗設計。
「交互距離」所帶來對於 VGUI 的最大影響，勢必就是可視性以及信息接收度問題。大至界面小至文字，其實都會影響到整體界面的設計方式。
比如下圖即是從人因工程學中的人眼信息識別，來看的「距離及可視字」公式。
最小物理字高 = 水平視角 * 物理距離
H = (TanA * 2) * D
但如果要轉為設計上常用的 PX 像素單位時，則另外要考慮「物理尺寸 H」、「屏幕解析像素 PPI/DPI」以及「不同軟件使用的像素單位 dp、pt」等，進行合理的換算，來保證不同距離下的最小可視字號。
當然如果要再加上愉悅性以及舒適性等考慮條件時，適當的加大字號梯度，會達到更好的效果。目前在智能音箱產品中 24dp/pt 會是較好的最小字號。
而 VGUI 同時也在獲取信息跟進行決策上，與 GUI 有所區別。下圖即是考慮 VGUI 下的主要 Hands Free & Hands with Voice 場景。
移動端或網頁端的為了更好的貼近沈浸式操作體驗，界面設計上大多以更高效率獲取信息的 F 型瀏覽佈局為主。但在 VGUI 上由於進行翻屏操作的不便性，大多時候會在單屏內，完成用戶所需信息的呈現。
因此採用 Z 形瀏覽佈局，能更好的在有限的屏佔比內，幫助用戶進行信息獲取。
同時在當用戶真正進行翻屏，獲取更多信息的操作時，不同於移動設備以及 PC，大部分的觸屏操作都屬於肢體懸空的狀態，因此會集中在大面積的手指掃動上，較難進行移動端特有的多指觸屏交互。
而當用戶在 VGUI 進行決策時，大多處於不定距離下，隨之而來的操作成本以及誤操作情況，也就相對 GUI 大幅提升。因此如何幫助降低「操作成本」和「誤操作」情況，即為需要設計師重點考慮的設計問題。
比如，通過能聯想可進行語音交互的圖形樣式，來幫助、暗示用戶提高語音表達的意願。再比如文案設計上除了要容易理解外，也能以更口語化的方式進行呈現，用戶不須思考就能直接進行表達，都是降低 VGUI 下的操作成本方式。
同時為了降低不定距離下的誤操作，適當的增加點擊熱區，以及將需要用戶進行行動的指令放大呈現，都是幫助用戶更簡單更不需考慮精度的設計方式。
VGUI 並非是取代帶語音能力的界面 GUI 設計方式。而是與其互補。相較於 GUI 和 VUI，VGUI 更加考慮如何融合兩者的能力，讓語音的自然、效率，界面的傳達、展示，都發揮其優勢，帶來 1+1 > 2 的可能。
當然，真正在設計時，時常會遇到 VGUI 和 GUI 兩者衝突的時刻。在當前時刻，用戶更多時候會更傾向於接受比較熟悉的產品使用心智，亦就是平板、手機等產品的使用習慣。
當用戶真正需要效率操作、或是更高密度的信息展現訴求時，不需要糾結於使用 VGUI 還是 GUI。以用戶更容易接受的方式來考慮，那肯定是不會錯的：Ｐ
由於 VGUI 可能大家相對比較少接觸，這次希望從比較顯性的差異上
，來帶著大家了解這三者的區別，如果有興趣後面可以再慢慢展開這個話題～
謝謝大家看完，如果你喜歡這篇文章的話，也請記得贊一下喔！如果覺得寫道你的心坎裡，但也不要吝嗇用力點個五次贊！我們下次見囉 See ya~
-Nathan
