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