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