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