2021-4-14 濤濤
語言交流是人類的本能，近幾年語音交互的迅速崛起讓產品更加人性化了。然而即使不考慮技術限制，人與機器的互動也不是只有聽或說單一模態的，因為這不符合我們的自然交流。目前，在居家場景中，用戶與電視的交互依然是對眾多信息-圖像、語音、觸感-的同時處理，它們分別對應著觀看、聽說和必要的遙控器操作。對UX設計師而言，如何讓電視端同時承載這樣多的感知設計是值得思考的。
語音體驗設計是一個很大的系統，從用研、功能、內容到交互、技術實現等等，而GUI的展示只是一種輔助模態。今天我想探討的是如何結合GUI與VUI展開界面設計。
文章分兩個部分：電視端VUI的搭建和一次改版迭代。
1. VUI的構成
2. 改版需求
3. 界面改版
4. 設計驗證
“Voice User Interface (or VUI) is an interaction model where a human interacts with a machine and performs a set of tasks at least in part by using voice.”
<Voice User Interface Design>
VUI：是一種交互模態，讓人能夠或多或少通過語音交互與機器共同完成一系列任務；
領域：是將用戶想要完成的任務分為一些大的類型，比如視頻領域、音樂領域、百科領域等；
意圖：指某領域下的具體任務，比如視頻領域下的“我想看某部電影”，即為影視搜索意圖。
小明：“給我推薦點美劇”；
電視：“看看這些有沒有你喜歡的”，并推送一些熱門美劇；
小明：考慮了一會兒....說“風騷律師吧”；
電視：起播《風騷律師》。
在這個故事中，除了眾所周知的VUI應具備的基礎功能-聽和說-以外，我們還需要定義更完整的體驗流程：
1. 小明如何開啟與電視的對話？因為電視機不能一直處于聆聽狀態，那樣很可能會識別用戶無意圖的語言，從而誤響應。
2. 電視端應該以什么方式推薦美劇？如果只一個個播報片名，小明會記不住。
3. 推薦幾部合適？隔空喊話的情況下（遠場語音，下圖解釋），最好不需要再用遙控器翻頁。
4. 如果小明問的是其他領域問題，比如天氣、歌曲、球賽等，對應的媒體資源會涉及到多樣化的信息類型，如圖形、音頻等。不僅要統一設計風格，還要為未來可能支持的新領域/新意圖預留承載框架。
5. 如果小明的詢問得到了錯誤答復，或者一直未被答復，除了技術上提高識別率和語義理解程度，該怎么緩解用戶的茫然和憤怒情緒？
6. 當小明問了一個問題，不被理解，但換個問法卻成功理解。如何教會小明盡可能一次就做出能被識別的表達？
7. 我們能支持幾十個領域、幾百種意圖，怎樣能讓小明知道一共有哪些？
8. 如何結束對話，以免電視一直聆聽造成誤識別？
9. ......
為了回答以上問題，我們經過大量的模擬對話、競品分析和demo體驗，從而定義了電視端VUI的交互流程和組成模塊：
喚起、聆聽、思考、反饋、退出：
電視端的語音有三種對話狀態：
1. 單輪對話：每說一句話都需要喚起一次語音；
2. 多輪對話：一次喚起，多輪對話，但輪數受限于領域范圍；
3. 全雙工模式：一次喚起，多輪對話，輪數不限。
圖源網絡
這是本文重點描述的部分，電視端的GUI包括：
1. 狀態指示動畫：告知用戶當前狀態；
2. 提示詞條：提示用戶有哪些說法；
3. 用戶指令：用戶說法的文字識別結果，它讓人知道自己說的話是否被正確識別，若出了錯，用戶就知道原來是錯在這一環節；
4. 電視答復：文字+音頻；
5. 內容展示：所有媒資內容的呈現，如果沒有，則不展示。比如，天氣需要展示圖像，而交通限行用一句話回答即可。
舊版設計方案概覽：
語音GUI分為兩塊：語音基礎界面（必須）和內容展示區（可選），基礎界面包括上圖中的1234內容。
上圖效果是從17年逐漸搭建起來的框架，隨著需求增多、不同設計師的參與，設計越來越碎片。從易用性、視覺、開發維護難度和新功能兼容上，都存在很多問題：
1. 布局調整
由于電視用戶使用最多、最重要的功能是觀看影視，所以優先考慮視頻領域。因此布局調整的優先順序是：基礎界面>視頻領域>其他領域。
2. 建立視覺規范
建立原子化設計規范：配色方案、文字、間距、圓角、圖標，以及可復用和拓展的組件、模版。
3. 統一狀態動效
將上文的5種基礎狀態結合全雙工狀態統一設計，并為未來可能開發的主動提示等狀態，預留一席之地。
經過競品分析，窮舉了7種可能的布局方式：
這么多的優缺點該如何取舍？我們將痛點歸類，并根據通用的交互原則排列了優先級：
最后決定用B1-底部長矩形，但設計UI時需要借鑒B2那樣增加一點漸變過渡。而針對B1的痛點，需要重新設計小面積狀態指示動畫，并定義好低欄左側的識別文字與右側的提示詞條之間間距，從技術上，我們能做到跟進用戶說話和播報內容，說一句、展示一句。
電視端就像是一塊自由發揮的大畫布。視頻海報的擺放，得從幾個方面考慮：
1. 背景占比：半屏、全屏、半屏至全屏；
2. 導航方式：宮格（我們的海報尺寸是可以統一的，所以不考慮瀑布流，此階段也沒有專題分類，無需考慮tab欄和泳道欄）；
3. 海報方向：橫幅、豎幅；
4. 展示數量：是否超過一頁、海報尺寸。
市面上的競品就有這幾種方案：
行為數據顯示，我們用戶的視頻意圖分兩種：明確自己想看什么－“播放陳情令”，和不明確目標、向電視尋求推薦－“推薦點古裝劇”。我們分別稱為普通推薦和個性化推薦。由于前者在大多數情況下內容較少，所以用半屏，后者則用全屏。由于視頻會單獨設計一個APP，故最后定的普推和個推的坑位都是十張：
上面確定了視頻領域，而其他幾十個領域的信息，同所有平面設計的信息一樣，都是文字、圖片、圖標的排列組合，可以把它們按照原子化設計系統，從分子到模版逐步搭建：
這樣的結構，能確保20多個帶內容的領域都能從中找到對應的排列方式，模版如下表。這里看起來可能比較抽象，可以先看后面的UI效果圖再回來看這里。
實際界面中，內容可能會以前面的任何一種排列形式出現，給較少的內容使用大背景是浪費，反過來則擁擠雜亂，故不同內容需要不同的背景。依然還是窮舉了5種背景待選擇：
1. 卡片
2. 懸空半透明容器
3. 半屏羽化背景
4. 半屏實心背景
5. 全屏背景
按照痛點的優先級打分：
可見方案d-半屏實心背景最佳，但它最適合內容量級為中等的情況。所以我們考慮了是否也采用卡片和全屏來適應內容過少和過多的情況。最后結論是：只采用方案d和e，舍棄a，因為d的背景高度可以隨內容的多寡而變化。這樣以來，設計就不會很碎片化了。
到這里，已經確定了語音基礎界面（低欄）、各領域信息排列方式和背景。接下來就像搭積木把它們組合起來，這一步重點考慮的是內容是否上焦點和翻頁，這需要根據具體領域的資源參數和使用場景甄別。
正好在做這個項目時，我們電視端的視覺規范也在完善中，所以焦點色、文字、柵格等規范是直接從規范庫搬過來的。
實際效果：（抱歉GIF原圖太大了，只好展示一小截。手機拍攝有一點色差，實際的色彩還原度是很高的。）
我們找來40名用戶體驗新舊版本語音，進行了偏好測試和用戶反饋收集，部分反饋如下：
40名用戶中，有80%認為新版更好，分別有12.5%和7.5%的人認為兩者差不多和舊版更好。這次的改版中，UI&交互、動效、顏色&背景三者，體驗感分別提升了12%、2%和7%。
當時大家對新版評價最高的是：簡潔易看、空間利用率高、布局更好。
吐槽最多的問題是：背景色太深、配色單一，動畫不夠好看、不夠明顯。我們隨即對背景色做了優化，上圖看到的是優化后的效果。
后續兼容性驗證：新版結構能較好適應節假日換膚、半屏小程序、第三方App適配等多種需求。
文章復盤了電視端語音的基礎界面、視頻領域、其他領域和背景的重構過程。主要用到的方法有原子化設計理論、競品分析、痛點云圖（表格形式）和用戶偏好測試。對界面布局有較好的優化效果。最大的收獲是掌握了從最底層元素展開剖析的方法，這種細致的方法用來搭建界面設計會很穩固、全面，并且拓展性強。
經驗和不足：
1. 大屏經常強調沉浸式體驗，因而電視端疊加功能很多，但必須要注意分個主次。一是疊加內容不能太多，要么就不疊加、全屏展示。二是一定要考慮背景播的不確定因素，避免花亂；
2. 上面只是分析了二維平面，還有次級頁面、時序等三、四維的規則還未深入學習研究。這樣的研究會對所有App設計都有更好的指引。
3. 我們雖然已有了簡單的導航、柵格等布局規范，但內容展示區依然是毫無章法的自定義排列，智能電視產品還沒有像手機、PC一樣較成熟的設計框架，我覺得蘋果的tvOS模版規范做的比較穩定，我們也應該借鑒，形成自己的風格。
文章來源：優設 作者：lady珠珠
藍藍設計( www.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務