一、VUI的現(xiàn)狀

隨著智能音箱的迅速發(fā)展，谷歌（Google Home）、亞馬遜（echo）天貓精靈、小愛音箱......智能產(chǎn)品的井噴式增長(zhǎng)，人們對(duì)智能語音產(chǎn)品的需求也越來越多，也越來越高，智能音箱對(duì)人們的生活的影響也越來越深，自然孕育而生一些新的職業(yè)需求，比如VUI（語音交互設(shè)計(jì)師Voice User Interfaces Designer），語音體驗(yàn)設(shè)計(jì)師VUE（Voice User Experience Designer），但其實(shí)VUI和VUE的分界線是很模糊的，這里不做多敘述。國際的一些大公司已經(jīng)做了很好的示范了，比如亞馬遜，谷歌等等，都會(huì)有設(shè)立專門的職位，做一些專門的研究，當(dāng)然近期國內(nèi)的相關(guān)招聘也會(huì)看到有相關(guān)的職位，且薪資不低。那么接下來會(huì)個(gè)大家詳細(xì)的分享VUI（語音交互設(shè)計(jì)師Voice User Interfaces）

二、VUI起源/歷史

1.VUI的第一個(gè)時(shí)期

20世紀(jì)50年代，貝爾實(shí)驗(yàn)室建立了一個(gè)單人語音數(shù)字系統(tǒng)

20世紀(jì)90年代，誕生了第一個(gè)可行的非特定人的語音識(shí)別系統(tǒng)

交互式語音應(yīng)答IVR系統(tǒng)的出現(xiàn)，代表了VUI的以一個(gè)重要時(shí)期

2.VUI的第二個(gè)時(shí)期

也就是我們現(xiàn)在所處的的時(shí)期

我們的現(xiàn)狀，我們正處于下一階段的初期階段，我們手機(jī)已經(jīng)可以用語音處理很多事情了，但是還有很多事情是無法處通過語音完成的

3.VUI的一些優(yōu)勢(shì)和局限性

優(yōu)勢(shì)

1.速度

顯而易見的是速度變快了，國內(nèi)的語音，語音轉(zhuǎn)文字的技術(shù)已經(jīng)很大程度上提高了人們效率

2.釋放雙手

比如你在開車的時(shí)候，你可以直接對(duì)著你的手機(jī)語音助手說，嘿XX，麻煩你幫我做XXX

3.直覺性

說話是每個(gè)人的天性（當(dāng)然排除特出情況）

4.同理心

語音包含了語氣、音量、音調(diào)、語速，這些特征包含了大量的感知信息，能夠讓你感知到對(duì)方在表達(dá)些什么。

局限性

1.環(huán)境

對(duì)環(huán)境的要求比較高，在公共場(chǎng)合，人多的地方不利于語音的接受和錄入

2.不適應(yīng)

還是有很多用戶不喜歡，不適應(yīng)對(duì)著語音設(shè)備說話的

3.喜歡打字

就是喜歡打字的一些用戶，打字從某個(gè)方面能夠帶給他一些愉悅

4.隱私

這個(gè)就很容易理解了，每個(gè)人都不希望自己的隱私被別人知道。

三、VUI設(shè)計(jì)師是什么（是做什么的）？

1.需要思考，在系統(tǒng)和終端用戶間，從開始到結(jié)束的整個(gè)個(gè)對(duì)話過程

2.用戶研究是不可少的

3.負(fù)責(zé)設(shè)計(jì)，產(chǎn)品原型和產(chǎn)品描述

4.需要了解底層技術(shù)的優(yōu)缺點(diǎn)

5.分析數(shù)據(jù)的能力

從項(xiàng)目的發(fā)布階段到發(fā)布階段都扮演著非常重要的角色。

當(dāng)然很多人看到上面5條可能會(huì)有點(diǎn)怵，其實(shí)也并不是需要全部都需要會(huì)，也可以專門負(fù)責(zé)其中的一個(gè)鏈條，節(jié)點(diǎn)。比如用戶研究，數(shù)據(jù)分析....

四、VUI的基本設(shè)計(jì)原則

1.對(duì)話式設(shè)計(jì)

定義：簡(jiǎn)單來說就是我問你答

目前我們使用的智能設(shè)備基本只能支持單輪對(duì)話，但這樣并不是人們習(xí)慣的對(duì)話方式

一輪以上的對(duì)話，才是符合用戶心理預(yù)期的。

請(qǐng)大家回憶下自己使用智能音箱的一些場(chǎng)景體驗(yàn)，

舉個(gè)例子（天貓精靈）

用戶:天貓精靈，明天我有鬧鐘么？

天貓：您明天沒有鬧鐘呢

用戶：那可以幫我設(shè)定一個(gè)么？

天貓：.....

你會(huì)發(fā)現(xiàn)，智能音箱這個(gè)時(shí)候像是失憶了一般，毫無反應(yīng)，顯然這并不是我們想要的一個(gè)交互，從用戶社交屬性來說，人們溝通的方式一直都是一輪以上對(duì)話式的，并不是單輪式的，一般來說，我們要做到讓用戶決定對(duì)話要持續(xù)多久，很顯然，你有親身體驗(yàn)過的話，能做到多輪對(duì)話的比較少。

插一個(gè)題外話，最近天貓精靈更新了游戲語音的玩法，算是踏進(jìn)一步了吧，雖然不是很棒的體驗(yàn)，但起碼跨進(jìn)了多一步，相信未來會(huì)越來越棒的。那對(duì)話式是如何設(shè)計(jì)出來呢？大致是怎么樣的一個(gè)流程呢？

2.設(shè)計(jì)工具、

這里說的設(shè)計(jì)工具并不是說是一個(gè)具體的工具，更多是指一個(gè)方法論

示例對(duì)話

定義：示例對(duì)話字面意思就是演示舉例對(duì)話，它看起來像一個(gè)電影腳本，像兩個(gè)人一起在對(duì)話

特點(diǎn)：是整個(gè)設(shè)計(jì)對(duì)話過程的關(guān)鍵方法。成本較低，簡(jiǎn)單易操作

用法：把要做成一件事情的場(chǎng)景用文字寫出來，然后大聲讀出來，你會(huì)發(fā)現(xiàn)書寫和口語化的還是有很多區(qū)別的，甚至是有些奇怪的，這時(shí)候你會(huì)發(fā)現(xiàn)有很多可以改進(jìn)的地方，所以你會(huì)看到一些招聘都會(huì)有這一項(xiàng)對(duì)應(yīng)的要求，甚至是要求一些事有話劇功底，有劇本寫作相關(guān)經(jīng)驗(yàn)優(yōu)先。

作用：它能夠讓你在投入開始研發(fā)之前，知道你的設(shè)計(jì)效果是如何。

3.視覺原型

雖然是語音交互，但是還是離不開GUI的，它可以結(jié)合示例對(duì)話，將用戶體驗(yàn)可視化。示例對(duì)話和原型組成了我們產(chǎn)品的故事板，GUI+VUI是用戶一套完整的體驗(yàn)，所以，VUI和GUI在早期階段就開始合作，這樣對(duì)用戶體驗(yàn)會(huì)更加流暢。

4.流程圖

也叫做呼叫流程圖，一般來說我們的流程圖需要包括用戶使用中所有可能存在的分支，但這樣下來會(huì)有千萬條復(fù)雜的情況，流程圖就會(huì)很亂，也很難梳理，所以我們采用分組的方法，

具體的分類的方法可以根據(jù)分成多組（日歷功能、搜索功能，電話..），也可以根據(jù)不同的目的進(jìn)行分組。

流程圖的使用到的工具就非常多了，這里就不一一列舉了。

那大概我們?cè)O(shè)計(jì)完成了一組示例對(duì)話之后，我們就要對(duì)一些細(xì)節(jié)進(jìn)行細(xì)致的研究，比如；確認(rèn)

五、如何進(jìn)行確認(rèn)

1.用戶語音的確認(rèn)

2.非語言式確認(rèn)

3.通用確認(rèn)

4.視覺的確認(rèn)

1.用戶語音的確認(rèn)

最重要的是用戶語音的確認(rèn)，分為顯性確認(rèn)和隱形確認(rèn)

顯性確認(rèn)即：比較重要，強(qiáng)制用戶確認(rèn)信息。比如：天貓精靈你能幫我一份奶茶么？查到附近XXX奶茶，使用優(yōu)惠后的價(jià)格是XX元，你要來一份么？

隱形確認(rèn)：即不需要用戶確認(rèn)消息，比如：用戶：XX你能幫我設(shè)定明天10點(diǎn)的鬧鐘么？好的，已經(jīng)幫你設(shè)定好明天早上10點(diǎn)的鬧鐘。

1.1那么如何去判定什么時(shí)候用隱性確認(rèn)和顯性確認(rèn)呢？

那么下面就要介紹一下三級(jí)置信度。

系統(tǒng)將在一定的閥值內(nèi)作出明確的形式確認(rèn)信息。而這個(gè)閥值我們?cè)O(shè)定為三個(gè)等級(jí)

1.2置信度？

就是智能音箱能識(shí)別到聲音的清晰度。

用易懂的話說就是人與人之間溝通的語言接受的清晰度，當(dāng)然聽不清對(duì)方說什么話的時(shí)候時(shí)候一般會(huì)發(fā)起詢問，或者直接說，對(duì)不起，我沒有聽清，你可以再說一遍嗎？

1.3三級(jí)置信度

比如幫我再買一份外賣

1.當(dāng)置信度大于80%，使用隱性確認(rèn)

好了已經(jīng)幫你在訂了一份外賣。

2.當(dāng)置信度為45~79%，使用顯性確認(rèn)

您是想再多訂一份外賣是嗎？

3.當(dāng)置信度小于45%

對(duì)不起，我沒有聽清您的講話，您想買些什么？

2.只用隱形確認(rèn).

智能語音音箱能夠非常清晰的識(shí)別到你說的內(nèi)容的時(shí)候，可以直接用隱形確認(rèn)，這樣帶來的體驗(yàn)流暢感舒服很多

3.非語言式

比如說，燈光花幾秒才能，那么只是讓系統(tǒng)先恢復(fù)好了或者知道的來讓用戶知道后面發(fā)生什么。還有加一些特定的音效，來代表特定某一個(gè)意思。

4.有趣的通用確認(rèn)。

就是說智能語音音箱不會(huì)單獨(dú)的回答你是和否，會(huì)主動(dòng)會(huì)詢問您一些的問候，通過這樣情感化的一些設(shè)計(jì)，將能夠讓用戶感到更加的溫暖和舒服。

那我們前面講到了那么多的一些確認(rèn)策略，那我們接下來再說一下對(duì)話式的標(biāo)識(shí)。因?yàn)槭亲層脩袅私饨徽勥M(jìn)展以及進(jìn)展情況的重要方式

5.對(duì)話式的標(biāo)識(shí)

它包括了以下三個(gè)方面。

1時(shí)間線，開始，進(jìn)行中，結(jié)束。

2接收回執(zhí)，謝謝，知道了，好的。了解了。

3積極反饋。哇，你這個(gè)消息真的很棒。

那對(duì)話式對(duì)話作用是什么呢？是讓用戶了解交談進(jìn)展以及進(jìn)展情況的重要方式。能夠更好的追蹤到用戶的使用過程中的一種路徑方法。

大家會(huì)發(fā)現(xiàn)我們很多時(shí)候智能語音設(shè)備并不是每次都能夠快速，精準(zhǔn)接受識(shí)別我們的信息的。出錯(cuò)率相對(duì)來說是比較高的，下面大概說下語音識(shí)別的出現(xiàn)錯(cuò)誤異常的幾種情況

六、語音出現(xiàn)錯(cuò)誤異常和解決方法

錯(cuò)誤異常的幾種情況

1.未檢測(cè)到語音

2.檢測(cè)到語音，但沒有識(shí)別

3.檢測(cè)到語音，但沒有識(shí)別

4.部分語音識(shí)別錯(cuò)誤

1.未檢測(cè)到語音

未檢測(cè)到語音有大概兩種情況，一是用戶說了，系統(tǒng)沒有接收到。二是用戶沒說。

主要說下用戶說了，系統(tǒng)沒有接收到的情況，建議采取兩種解決方式，

第一種前面我們說到的三級(jí)置信度，我們采取直接詢問，“對(duì)不起，我沒有聽清你說的話，你能再說一遍么？”

第二種是采取什么也不做

1.1那什么情況下使用詢問呢？

用戶必須回復(fù)后，系統(tǒng)才能繼續(xù)進(jìn)行任務(wù)

你的系統(tǒng)只是支持語音

沒有其他回復(fù)方式了

1.2什么情況下更適合使用什么也不做呢？

用戶還有其他選擇（比如手機(jī)界面課、通過一個(gè)按鍵操作）

什么也不做，不會(huì)中斷對(duì)話

有視覺信息可以提示用戶做出明確的選擇

2.檢測(cè)到語音，但沒有識(shí)別

處理方式和未檢測(cè)到語音基本是一直的，這里就帶過了

3.檢測(cè)到語音，但沒有識(shí)別

出現(xiàn)這種情況的原因一般是兩點(diǎn)

1.系統(tǒng)程序沒有針對(duì)這種情況的回復(fù)

2.程序中寫了錯(cuò)誤的回復(fù)

解決方法，這里我們就要通過測(cè)試來發(fā)現(xiàn)具體是哪個(gè)環(huán)節(jié)出了問題了，通過數(shù)據(jù)的收集分析能夠找到具體的答案

4.部分識(shí)別錯(cuò)誤

大概就是這樣的場(chǎng)景，天貓精靈，嗯...我想..。嗯，好的，為您帶來一首XXX的歌曲。

解決方法：這個(gè)還是需要技術(shù)的介入，可以通過使用N-Best列表（可以通過這個(gè)列表規(guī)避二次錯(cuò)誤）和鎮(zhèn)適用固件后相應(yīng)的數(shù)據(jù)分析來構(gòu)建此問題的解決方法

說完了錯(cuò)誤異常處理以及解決方式，我們接下來說下延遲和消除歧義

5.延遲

在交互一般用戶等待的時(shí)間是7秒（現(xiàn)在可能是5秒），當(dāng)你詢問等待回答的時(shí)間超過這個(gè)閾值，用戶就會(huì)懷疑是不是系統(tǒng)出問題了，甚至煩躁。

解決方法：一是通過“請(qǐng)稍等”讓用戶知道你在運(yùn)作和查找。2.非語言提示，比如音效，等等。

6.消除歧義

很多時(shí)候用戶提供的信息只有一部分，再加上中文的多層含義的特殊性，消除歧義對(duì)用戶體驗(yàn)的的提升有重要作用。

比如：?jiǎn)柕孛奶鞖猓袊芏噫?zhèn)區(qū)的地名都是一樣的。

鼓樓 河南省_開封市_鼓樓區(qū), 福建省_福州市_鼓樓區(qū), 江蘇省_南京市_鼓樓區(qū), 江蘇省_徐州市_鼓樓區(qū)

解決方法：還是可以采用置信度的方式去判別，如果很確定就直接回答，要么就多輪詢問確定

7.幫助功能

最后的模塊說下幫助功能。也是至關(guān)重要的，能夠在一定程度上消除用戶的“恐慌”，所以，在我們VUI中設(shè)計(jì)對(duì)應(yīng)的幫助是非常有必要的，比如：詢問智能語音設(shè)備你能干什么呢？它會(huì)告訴你他能做些什么？比如：我的設(shè)備怎么樣鏈接你的藍(lán)牙。APP：好的，長(zhǎng)按......

七、語音交互的幾點(diǎn)原則

1.應(yīng)該是省時(shí)、高效的

2.簡(jiǎn)短的

3.能夠被隨時(shí)打斷

4.能夠鏈接上下文語境

1.應(yīng)該是省時(shí)、高效的

和視覺界面交互其實(shí)是差不多的，用戶是非常不愿意花很多時(shí)間達(dá)到他想要完成的任務(wù)的。越高效，越短時(shí)間，用戶的體驗(yàn)會(huì)更加愉悅。

2.簡(jiǎn)短的

只需要告訴用戶主要關(guān)鍵信息即可，不要過于冗余。舉個(gè)簡(jiǎn)單的例子購物APP的商品表現(xiàn)形式，一般都是把名稱和價(jià)格放在主要的位置，把詳情放進(jìn)下一級(jí)頁面。采用盡可能簡(jiǎn)短的表現(xiàn)形式，讓用戶直接獲取到他想要的，當(dāng)然這對(duì)用戶的了解和洞察都要需要經(jīng)驗(yàn)的積累和感知的

3..能夠被隨時(shí)打斷

舉個(gè)例子，用戶：明天的天氣怎么樣？APP：明天XXX地方的天氣19℃，小雨，適合穿.......，用戶可能只是想知道天氣而已，這時(shí)候我們是需要做到可以被用戶打斷，而不是“執(zhí)拗”的把話說完，如果一直說下去，不允許用戶打斷，用戶的請(qǐng)求沒有被回應(yīng)，這時(shí)候用戶會(huì)產(chǎn)生反感心理，

4.能夠鏈接上下文語境

這是目前很多智能語音設(shè)備體驗(yàn)上沒有那么好的地方，也就是前面說的，可以進(jìn)行多輪對(duì)話，當(dāng)然如果要設(shè)定多輪對(duì)話，中間的交互情況將會(huì)比現(xiàn)在更佳龐大，需要考慮的可能性也會(huì)更佳復(fù)雜。

語音交互設(shè)計(jì)的前半部分設(shè)計(jì)流程基本已經(jīng)概述完了，主要說了VUI的起源，一些VUI中用到的一些方法論，設(shè)計(jì)工具，一些異常情況的處理，和VUI設(shè)計(jì)的幾點(diǎn)原則。下面將會(huì)和大家聊下用戶測(cè)試和預(yù)發(fā)布、確認(rèn)發(fā)布......

八、用戶測(cè)試

語音用戶界面的測(cè)試其實(shí)和視覺界面測(cè)試的方法有一些相同的地方，但也有一些差異。

一般來說，在開始測(cè)試之前呢，還是需要做用戶調(diào)研的。大概分為以下幾個(gè)步驟。

1.了解需求（用戶用例背景研究。）

1.做用戶研究和訪談之前，我們要先搞清楚，這個(gè)利益方的需求是什么，業(yè)務(wù)需求，用戶訴求是什么，我們的產(chǎn)品能夠給用戶帶來什么？能夠給他們解決什么問題？最后我們要確定我們的目標(biāo)用戶，然后進(jìn)行訪談和調(diào)研（大體的方法，詳細(xì)可以去看一下阿里提出的五導(dǎo)家加方法論）

2.制定設(shè)計(jì)研究方案。

2.1給目標(biāo)用戶制定，任務(wù)流程。

就是給每一個(gè)受訪的用戶，一個(gè)特定的任務(wù)流程，但很多時(shí)候我們并不是只是測(cè)試一個(gè)任務(wù)，會(huì)有很多任務(wù)，那就會(huì)涉及到任務(wù)排序的問題。還有最好的方法是采用拉丁方陣設(shè)計(jì),這樣的話不必通過出現(xiàn)所有可能的排斥方式來試驗(yàn)。

那么設(shè)定好這次任務(wù)之后呢，我們就要進(jìn)行招募受試人員了

2.2.招募受試人員

需要注意以下幾點(diǎn)。

1.要在目標(biāo)用戶里抽取測(cè)試用戶

2.人數(shù)大概控制在5~12人，可用性專家Jakob  Nielseb提出效果一般控制在5-8人左右為最佳

對(duì)于小公司招募測(cè)試用戶可能會(huì)相對(duì)比較困難，成本相對(duì)來說會(huì)比較高，當(dāng)然是可以招募你身邊的朋友和公司的同事來協(xié)助你的，但最好避開項(xiàng)目的直接核心人員。

那么在目前人員完成之后呢，我們大概會(huì)進(jìn)行一些進(jìn)行中的一些測(cè)試，比如說我們做一些提問。

請(qǐng)問這里會(huì)涉及到一個(gè)方法，我們?cè)诮换ピO(shè)計(jì)里面叫它為用戶體驗(yàn)地圖。

3.用戶體驗(yàn)地圖

我會(huì)給到用戶一些任務(wù)的體驗(yàn)流程，然后根據(jù)他的一些反饋，通過語言、表情，然后繪制出用戶體驗(yàn)地圖，從而判斷出，用戶在這個(gè)任務(wù)流程中，得到了一些體驗(yàn)感受，找到可能存在問題的所在節(jié)點(diǎn)，然后進(jìn)行修改。下面說下在訪談中需要注意的I點(diǎn)，如何進(jìn)行訪談

4.訪談需要注意的點(diǎn)

那么在口頭提問的過程中，我們需要注意些什么呢？

4.1.提問不要有一些語句上的偏袒，不要出現(xiàn)故意引導(dǎo)，比如說你喜歡這個(gè)功能嗎？這樣提問是不太合理的。最好提問是，你用完這個(gè)功能之后，你是什么樣的一個(gè)感受？或者說你覺得怎么樣？

4.2.要注意引導(dǎo)用戶得出具體的結(jié)論。而不是用戶說大概，可能我覺得應(yīng)該是等等之類的詞。要有具體的例子，不要一個(gè)抽象的結(jié)果。

4.3.少用為什么開頭，會(huì)讓受訪者覺得你是在質(zhì)疑他，或者說故意的，刁難他。比如說受訪者說，語音天氣詢問功能特別難用，能夠簡(jiǎn)單說一下你的使用場(chǎng)景嗎？他是在什么情況下讓你感覺到難用？描述我們需要更加具體化一些，而不是籠統(tǒng)的，抽象的。

5.可用性測(cè)試（用戶調(diào)研）

目的是測(cè)試工作流程和易用性。但是在語音交互過程中，識(shí)別問題往往會(huì)阻礙用戶完成任務(wù)。最好是找?guī)孜粶y(cè)試用戶，嘗試找出主要的識(shí)別問題，然后修復(fù)它。

可用性測(cè)試大概分為幾類

5.1.遠(yuǎn)程測(cè)試（電話/視頻訪談）

優(yōu)點(diǎn)

更容易找到符合特征的用戶

成本較低，只需要遠(yuǎn)程即可，不需要支付其他額外的支出，比如說來到你約定地方差旅費(fèi)。

會(huì)更加自然，更貼近真實(shí)情景。

用戶心理負(fù)擔(dān)沒有那么大會(huì)比較自在。

可以沒有測(cè)試主持人

條件允許的話，最好使用視頻通話，這樣我們可以錄制影像，后期方便我們?nèi)ビ^察用戶的表情和反應(yīng)，以得出更加正確的測(cè)試結(jié)果。

缺點(diǎn)

沒有辦法實(shí)時(shí)跟進(jìn)參與人員的反應(yīng)。

5.2.攔訪

這種測(cè)試方式是非常有難度的。意味著我們要去到公共場(chǎng)合去攔截受訪者，然后讓他參與到你這個(gè)測(cè)試當(dāng)中，因?yàn)槿伺c人的戒備心理，所以很多人都會(huì)拒絕你，如果你想提高成功率，最好準(zhǔn)備一些小禮品或者其他的小獎(jiǎng)勵(lì)，這樣有助于你提高攔訪的成功率。當(dāng)然你也很有可能得到的結(jié)果，會(huì)有一些偏差，受訪者會(huì)出于某些目的而回答你的一些問題，有可能并不是出于真心的。所以呢，這里不是很建議大家用這種方法。

5.3測(cè)試完成

測(cè)試完之后，我們需要進(jìn)行我們的結(jié)果分析和統(tǒng)計(jì)。

測(cè)試衡量的一些指標(biāo)，我們大概分為5個(gè)關(guān)鍵指標(biāo)。

準(zhǔn)確性，響應(yīng)速度，認(rèn)知速度，清晰度，友好度和聲音

5.4.注意事項(xiàng)

這里需要注意的點(diǎn)是，一定先要預(yù)先設(shè)定好，確定每項(xiàng)任務(wù)完成的標(biāo)志是什么。不然后期對(duì)結(jié)果的一個(gè)標(biāo)準(zhǔn)很難去統(tǒng)計(jì)，會(huì)比較混亂。

我們需要總結(jié)這是用戶對(duì)問題的回答及完成任務(wù)率錯(cuò)誤數(shù)量和類型等等，從中找出用戶的痛點(diǎn)，用戶的一些干擾點(diǎn)。按任務(wù)出錯(cuò)時(shí)，用戶是否能夠自己解決呢？等等，具體需要得出的一些結(jié)論，要根據(jù)自己想要測(cè)試的一些目的來定。

在這樣我們就完成了整個(gè)可用性測(cè)試的流程。

6.預(yù)測(cè)試

發(fā)布之前需要做一次與測(cè)試，可以權(quán)重沒有那么高。但也是關(guān)鍵的一步。

7.識(shí)別測(cè)試

最重要的還是識(shí)別測(cè)試，這關(guān)系著整個(gè)產(chǎn)品的體驗(yàn)問題，整體的測(cè)試流程需要用三級(jí)置信度和N-Best列表、以及后臺(tái)的表格相結(jié)合，找出相對(duì)應(yīng)的問題節(jié)點(diǎn)，并且修復(fù)它。

8.負(fù)載測(cè)試

你得清楚明白你的設(shè)備，最多的承載量，不然流量一進(jìn)來，服務(wù)器就崩潰了，這樣的體驗(yàn)是極其差的。

9.效果的評(píng)估

你還得去做效果的評(píng)估。在試運(yùn)行開始之前，你需要制定目標(biāo)，然后看是否達(dá)到這個(gè)目標(biāo)，這個(gè)效果大概是什么樣的？是否達(dá)到預(yù)期？任務(wù)的完成率也是非常關(guān)鍵的一個(gè)成功指標(biāo)。

10.試運(yùn)行

最后到達(dá)發(fā)布階段。為了產(chǎn)品的穩(wěn)妥起見，我們還是會(huì)進(jìn)行一次試運(yùn)行，

11.發(fā)布

12.迭代

條件允許的話，重復(fù)上面一次的用戶調(diào)研的方法，然后得出一些現(xiàn)階段的一些問題。我們需要實(shí)時(shí)跟蹤系統(tǒng)的故障并快速的改進(jìn)，這是我們非常需要要做到的。

大概全部的語音交互流程就說到這里了，我們簡(jiǎn)單的回顧下下

1.語音交互設(shè)計(jì)的起源

2.語音交互設(shè)計(jì)的設(shè)計(jì)原則-示例對(duì)話

3.確認(rèn)原則/糾錯(cuò)方法-三級(jí)置信度

4.可用性測(cè)試

5.發(fā)布

那語音交互設(shè)計(jì)的未來點(diǎn)在那里？設(shè)計(jì)師我們的機(jī)會(huì)在哪里

戰(zhàn)略選擇

世界一直都是存在不確定性的，如何能夠應(yīng)對(duì)呢？眼界和選擇。

這里延伸下梁寧在《產(chǎn)品思維30講》里面說到的點(diǎn)線面的戰(zhàn)略選擇的問題，她大概說了這樣的例子：比如有一對(duì)雙胞胎，2010年一起大學(xué)畢業(yè)，一個(gè)進(jìn)入了騰訊，一個(gè)進(jìn)入了報(bào)社。7年之后呢，騰訊的那位如果不出意外應(yīng)該是年薪百萬，而且滿街都是獵頭在挖，投資人在挖，只要出來創(chuàng)業(yè)就給錢，而去了報(bào)社的那位呢，報(bào)社的情況我們今天肯定了解整個(gè)產(chǎn)業(yè)都沉淪了，曾經(jīng)他寄托理想的整個(gè)產(chǎn)業(yè)都沒有了，其實(shí)一切都需要重來，在這個(gè)時(shí)候并不是說雙胞胎他們的個(gè)人的素質(zhì)有問題，或者是他們的能力點(diǎn)有問題，點(diǎn)是沒有問題的，也不是他們分別跟隨的領(lǐng)導(dǎo)，比如說我們就跟老大，他們的老大的能力點(diǎn)和個(gè)人操守也都是沒有問題的，但是問題在哪里？問題是說這兩個(gè)單位所附著的經(jīng)濟(jì)體，一個(gè)是在快速崛起，一個(gè)是在快速崩潰。你努力工作的公司收益，遠(yuǎn)遠(yuǎn)不如你在2010年以前或者2013年以前，比如說買騰訊的股票，或者是說你買一套北上廣的房子，

我們本身是一個(gè)點(diǎn)，我們這個(gè)點(diǎn)需要附著在整個(gè)整個(gè)快速崛起的“線”上，戰(zhàn)略的選擇，眼界的層面顯得尤為重要，和努力一樣重要，甚至往往有時(shí)候選擇比努力更重要，但選擇也是努力累計(jì)的結(jié)果。我們?cè)O(shè)計(jì)師如何做出順應(yīng)這個(gè)迅速崛起的經(jīng)濟(jì)體的選擇，也是我們當(dāng)下 的機(jī)會(huì)，我們能看到什么機(jī)會(huì)，我們要附著到什么樣的線上，在當(dāng)下職業(yè)邊界愈發(fā)模糊的時(shí)代，我們能力和眼界的提升，可以做到從容的應(yīng)對(duì)未來的種種變故。

那么同樣，隨之AI的發(fā)展，5G的到來，我們的很多工作方式都有可能被顛覆，語音交互設(shè)計(jì)的將會(huì)是一片藍(lán)海，雖然現(xiàn)在有諸多的桎梏，但這是趨勢(shì)，是快速崛起的趨勢(shì)。設(shè)計(jì)師工作你能想象未來沒有顯示器么？沒有臃腫的主機(jī)么？等等，未來都有可能會(huì)發(fā)生。而這一切也正在發(fā)生.....

原文地址：站酷
作者：木七木七

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

“生活就像是一顆巧克力，你永遠(yuǎn)不知道下一顆是什么滋味?！泵ず械恼Q生，給“box”的意象又增加了一份神秘。2020年作為大眾廣為人知的盲盒元年，隨著12月第一支“盲盒股”在港交所掛牌上市，盲盒零售店和自動(dòng)盲盒機(jī)都如雨后春筍一般席卷了大小消費(fèi)集散地。抽盲盒、買盲盒、再到次級(jí)市場(chǎng)交易盲盒，一個(gè)百億盲盒市場(chǎng)被快速“拆”了出來。

從潘多拉的墨盒、薛定諤的貓，再到盲盒的隱藏款，“抽盒”在搭上潮玩這趟商業(yè)快車的同時(shí)，也在不斷試探年輕的好奇心和為此豪擲千金的底線。根據(jù)《95一樣玩家剁手力榜單》顯示，收藏盲盒手辦從最開始的“亞文化”消費(fèi)，已經(jīng)成為當(dāng)下95后熱度最高的收藏愛好。也不難理解，盲盒低至50-80元的單價(jià)，和Z世代年輕人群體逐漸下沉的消費(fèi)趨勢(shì)一拍即合。而搭載了游戲及商業(yè)IP的盲盒，除了有得天獨(dú)厚的爆款產(chǎn)出特性，也在更多方面和更高層次上滿足Z世代年輕人的好奇心、收集欲并拓展了線下社交的可能性。

那么同樣備受年輕人喜愛的社交產(chǎn)品手Q，在這趟“萬物皆可盲盒”的浪潮中，又可以扮演怎樣的角色呢？我們給出的答案是：數(shù)字盲盒。借助平臺(tái)已有的大量IP，數(shù)字盲盒相比線下實(shí)體盲盒搭乘IP紅利的成本更低，推陳出新，以速度和“量”取勝是一大優(yōu)勢(shì)。同時(shí)，我們也希望以日簽打卡的方式，在滿足手Q、Z世代用戶收集欲望的同時(shí)，打造一種基于線下盲盒收集但同時(shí)潛在拓展數(shù)字“盲盒”社交的新玩法。

01

——————————

從線下到線上

在傳承線下玩法的同時(shí)打造線上盲盒新玩法，則需要考慮到許多問題。我們留意到，線下盲盒有許多優(yōu)勢(shì)是無法照搬的，比如實(shí)體盲盒的觸感，購買、拆開實(shí)體盲盒所獲得的即時(shí)心理反饋等。但盲盒的核心特點(diǎn)，就在于它給普通的商品增加了游戲?qū)傩浴?

因此，我們也嘗試通過挖掘虛擬盲盒的獨(dú)特之處，保留并增添整個(gè)抽盒過程的娛樂性和驚喜。從設(shè)計(jì)層面而言，我們從一下三個(gè)角度切入構(gòu)思：

1） IP：篩選線下盲盒成功案例，敲定以Q萌的盲盒為主推IP；并且線上盲盒可以實(shí)現(xiàn)短平快上架IP，結(jié)合時(shí)效熱點(diǎn)，孵化出更出圈的虛擬IP。

2） 包裝：趨同于線下盲盒包裝，繼承實(shí)體盲盒的視覺審美體驗(yàn)；線下盲盒受包裝成本所限，線上盲盒可以打磨出更新穎的盲盒包裝。

3） 隱藏玩法：同步線下盲盒玩法邏輯，采用N+1的種類形式，在每套盲盒系列中設(shè)定一個(gè)隱藏款。在用戶抽盒過程中，整套盲盒以動(dòng)畫輪播的方式呈現(xiàn)，隱藏款則用問號(hào)代替，驅(qū)動(dòng)玩家好奇心。并且依附QQ關(guān)系鏈，引導(dǎo)用戶交換已經(jīng)擁有的重復(fù)盲盒，從而收集整套端盒。

02

————————

IP｜重中之重

主打IP對(duì)品牌形象的構(gòu)造有至關(guān)重要的作用。這種重要性不外乎企鵝之與手Q，因此敲定、完善頭部IP，是設(shè)計(jì)手Q虛擬盲盒的首要考慮。在設(shè)計(jì)的首個(gè)階段，我們選定了四類優(yōu)質(zhì)虛擬盲盒IP：

1） 自有潮玩IP：選擇現(xiàn)有ISUX體系下已孵化成熟的精品潮玩IP，比如PUPU&藍(lán)莓之夜，UPUP牛&牛年大吉等；

2） 自有虛擬IP：在手Q用戶群中知名度高、在禮物系統(tǒng)中受到粉絲熱捧的IP。比如多肉植物、Alice夢(mèng)游仙境系列等；

3） 外部虛擬IP：聯(lián)名外部爆款I(lǐng)P。手Q以95后年輕用戶為主，也是外部各大爆款I(lǐng)P的目標(biāo)消費(fèi)者聚集地。因此我們挖掘了包括超人氣虛擬偶像洛天依，迪士尼的達(dá)菲熊&星黛露春節(jié)系列在內(nèi)的外部IP合作；

4） 外部潮玩IP：擁抱主流盲盒潮玩IP，將消費(fèi)者粉絲與盲盒的情感從線下延續(xù)至線上。知名IP包括star moly萌力星球、迷萌假日派對(duì)、達(dá)么吉發(fā)財(cái)者聯(lián)盟系列等。

敲定IP方向后，我們綜合了幾個(gè)方面考慮虛擬盲盒的IP設(shè)計(jì)和上架思路：

1） 目標(biāo)匹配度：IP是否和手Q用戶群體產(chǎn)生足夠的共鳴；

2） 品牌定位：IP是否和虛擬盲盒平臺(tái)的風(fēng)格、氛圍及調(diào)性協(xié)調(diào)一致；

3） 制作成本：在估算虛擬盲盒IP生命周期的基礎(chǔ)上，是否能以較低的設(shè)計(jì)、生產(chǎn)及修改成本進(jìn)行批量生產(chǎn)。

03

——————————

「盒」再一次定義視覺邊界

“從Box出發(fā)”這一理念，也淋漓盡致地體現(xiàn)在數(shù)字盲盒視覺設(shè)定的方方面面。

03-1 LOGO

在logo設(shè)定上，我們將“盒”的意象與字母Q的形態(tài)相結(jié)合，并充分考慮移動(dòng)端設(shè)備屏幕的呈現(xiàn)空間，以30度的軸測(cè)圖視角構(gòu)建出一個(gè)正方形的盒子。這樣既突顯了logo的存在感，又給整個(gè)視覺界面留出了充足的展示空間。同時(shí)，logo三維六邊形的框架設(shè)計(jì)，也突出了產(chǎn)品的格調(diào)和設(shè)計(jì)感。

03-2 色彩&字體

在配色設(shè)定方面，我們提取傳統(tǒng)線下盲盒品牌中核心玩家廣泛認(rèn)可的粉色，也從QQ品牌色中提取出藍(lán)色，調(diào)和出一種明度更深的藍(lán)色作為互補(bǔ)色。字體設(shè)定上，我們選擇了造字工房元黑體搭配DIN的家族字體作為虛擬盲盒平臺(tái)的運(yùn)營字體。這款字體字形較為硬朗粗壯，但同時(shí)又兼顧圓角的設(shè)定，符合虛擬盲盒品牌“活潑，潮流，可愛”的氣質(zhì)定位。

03-3 Pattern

同時(shí)，我們?cè)谄脚_(tái)界面的視覺方面也延續(xù)logo的設(shè)計(jì)思路，通過使用30度軸測(cè)圖的空間正方形，衍生為基礎(chǔ)圖形并在不同頁面中配合主題品牌色使用。同時(shí)，該基礎(chǔ)圖形也在虛擬盲盒的其他頁面結(jié)合產(chǎn)品形態(tài)靈活變形，強(qiáng)化虛擬盲盒品牌形象。

“盒”的涉及理念也延展到頁面的涉及思路中。在抽盒延展上，我們基于30度平行透視的設(shè)計(jì)理念進(jìn)行了一系列構(gòu)思。首先在抽盒頁面，我們將頁面簡(jiǎn)單分割為上下兩個(gè)部分。盒內(nèi)產(chǎn)品放置在一個(gè)通過透視視角構(gòu)建出的“桌面”上，并通過動(dòng)畫進(jìn)行進(jìn)行系列產(chǎn)品展示。頁面下半部分則用于信息及其他相關(guān)操作。

03-4 界面應(yīng)用

在ARK傳播、用戶贈(zèng)送虛擬盲盒的界面，我們也利用30度平行透視的涉及思路，在分享卡片中對(duì)虛擬盲盒及相關(guān)產(chǎn)品進(jìn)行了空間視覺處理。此外，貫穿始終的純色背景在突出盲盒產(chǎn)品本身的前提下，也保證了整體風(fēng)格的一致性。

03-5 盲盒包裝

在包裝設(shè)定上，我們延續(xù)線下盲盒常規(guī)的視覺慣例，以“盒”的形式進(jìn)行產(chǎn)品包裝，并以logo的30度側(cè)軸圖作為基礎(chǔ)預(yù)覽視角。眾所周知，雖然線下盲盒的包裝五花八門，比如浮雕、專色印刷，但最終還是落腳到“紙本”這一包裝形式。相比之下，虛擬盲盒包裝不受制作成本限制，發(fā)揮空間就更為廣闊。在此基礎(chǔ)上，我們將虛擬盲盒的包裝設(shè)計(jì)成具有磨砂質(zhì)感的毛玻璃材質(zhì)。這一設(shè)計(jì)不僅讓虛擬盲盒更有視覺沖擊力和格調(diào)，同時(shí)霧化的透明磨砂表面也可以隱隱透露出盒內(nèi)產(chǎn)品的輪廓和顏色，勾起用戶抽盒過程中的緊張好奇情緒。

在此基礎(chǔ)上，每個(gè)盲盒配合各系列的IP字體、規(guī)范化的系列編號(hào)、品牌LOGO和IP色，則可以高效統(tǒng)一IP形象，規(guī)范化輸出系列盲盒包裝。

04

——————————

讓「盒」動(dòng)起來

完成了盲盒靜態(tài)視覺的構(gòu)思后，就進(jìn)入了動(dòng)畫設(shè)定的階段。我們將抽盒UI中的動(dòng)畫種類大致分為三種：

一、 輔助型循環(huán)動(dòng)畫：限制較少的頁面動(dòng)畫，主要目的是烘托抽盒界面的氛圍。

二、 輔助操作的反饋型動(dòng)畫：主要為用戶抽盒后喚醒的交互動(dòng)畫，增強(qiáng)抽盒結(jié)果的用戶心理反饋。由于此類動(dòng)畫基于用戶操作觸發(fā)，因此時(shí)長(zhǎng)限制較為嚴(yán)格。動(dòng)畫過長(zhǎng)會(huì)直接減緩載入速度，消耗用戶等待時(shí)長(zhǎng)，適得其反。

三、 載入動(dòng)畫：動(dòng)畫形式簡(jiǎn)單，主要目的是在等待的過程中加入趣味的細(xì)節(jié)，動(dòng)畫資源要保證盡可能小。界面設(shè)計(jì)繼承品牌圖形設(shè)計(jì)思路，風(fēng)格統(tǒng)一。

抽盒頁面的設(shè)計(jì)是整個(gè)虛擬盲盒設(shè)計(jì)的重中之重。這就要求設(shè)計(jì)師既突出展示盲盒產(chǎn)品本身，又保證抽盒界面的趣味性。在底層動(dòng)畫中，我們繼續(xù)延續(xù)30度平行透視視角的設(shè)計(jì)邏輯，使用After Effects的攝像機(jī)工具以Y軸旋轉(zhuǎn)的方式做成Fake 3D的效果。在制作Fake 3D動(dòng)畫時(shí)，我們也使用了Lottie組件。Lottie組件的優(yōu)勢(shì)在于在實(shí)現(xiàn)動(dòng)畫高保真還原的同時(shí)，也可以通過在AE內(nèi)替換對(duì)應(yīng)素材即可在統(tǒng)一標(biāo)準(zhǔn)下實(shí)現(xiàn)量化輸出，規(guī)范后續(xù)動(dòng)畫生產(chǎn)標(biāo)準(zhǔn)，提高生產(chǎn)效率，降低設(shè)計(jì)成本。

在底層動(dòng)畫上，我們也加入了四層動(dòng)畫進(jìn)行功能和效果的區(qū)分。在疊加的首層動(dòng)畫上，我們對(duì)每套虛擬盲盒的所有產(chǎn)品進(jìn)行了展示，進(jìn)一步加深用戶對(duì)可能拆出的盲盒產(chǎn)品的期待心理。在第二層和第三層動(dòng)畫上，我們以Z軸旋轉(zhuǎn)的動(dòng)畫特效，將虛擬盲盒進(jìn)行一種立體的空間感展示，并使用粒子效果配合光環(huán)旋轉(zhuǎn)的動(dòng)畫特效環(huán)繞虛擬盲盒，引導(dǎo)用戶的點(diǎn)擊路徑。同時(shí)在最頂層，也就是第四層動(dòng)畫，我們還加入了手Q具有代表性的大黃臉表情，并賦予它彈跳和位移的效果，增添抽盒界面的趣味性。

但在盲盒抽取結(jié)果動(dòng)畫設(shè)計(jì)方面，我們?cè)陧?xiàng)目前期的嘗試中就遇到一個(gè)難題——拆盒動(dòng)畫最重要的部分就是盒子打開并告知用戶抽中了哪款盲盒。如果每一個(gè)抽盒結(jié)果都配置不同的動(dòng)畫，那么單獨(dú)一套盲盒“UPUP牛&牛年限定鵝”，將至少需要設(shè)計(jì)六種盲盒結(jié)果動(dòng)畫，不同系列的盲盒的動(dòng)畫設(shè)計(jì)成本也將成幾何倍數(shù)增加。

因此我們需要找到一種盡可能控制開發(fā)資源和成本，同時(shí)又不拘泥于盲盒IP類型和風(fēng)格的通用方案。我們?cè)O(shè)計(jì)了一款拆盒動(dòng)畫作為底層素材，并且搭配放大效果和粒子碎花下落的“撒花”慶祝的氛圍特效，最終制作出一段不超過800ms的物品從盒子“蹦出”的效果動(dòng)畫，流暢處理了抽盒結(jié)果的過場(chǎng)動(dòng)畫，也完善了整個(gè)虛擬盲盒的抽取邏輯。

暢想：未來｜無限延伸的「盒」

本次虛擬盲盒的設(shè)計(jì)項(xiàng)目時(shí)間緊，需要趕在年前新版本發(fā)布之前敲定設(shè)計(jì)細(xì)節(jié)。因此設(shè)計(jì)的重點(diǎn)和難點(diǎn)，就是需要找出一個(gè)和品牌強(qiáng)關(guān)聯(lián)的視覺元素，提綱挈領(lǐng)地引導(dǎo)整個(gè)視覺設(shè)計(jì)方案。而我們給出的30度軸測(cè)圖視角，就成功給予了虛擬盲盒空間的概念，并將這一設(shè)計(jì)細(xì)節(jié)靈活貫穿項(xiàng)目始終。此外，一些視覺類設(shè)計(jì)比如盲盒Z軸旋轉(zhuǎn)，也需要從視覺設(shè)計(jì)師的視角出發(fā)，提前通過和包括開發(fā)在內(nèi)的相關(guān)項(xiàng)目團(tuán)隊(duì)進(jìn)行對(duì)接，給予解決方案。這在很大程度上也節(jié)約了人力成本，推動(dòng)了項(xiàng)目的快速落地。

而在整個(gè)虛擬盲盒的設(shè)計(jì)過程中我們也反復(fù)思考，如何通過打磨虛擬盲盒的特點(diǎn)和亮點(diǎn)，實(shí)現(xiàn)超過線下抽盒的體驗(yàn)。比如在一開始就提到，線下盲盒從項(xiàng)目創(chuàng)立、建模、工廠生產(chǎn)打樣、后期形態(tài)修正再經(jīng)過一系列生產(chǎn)運(yùn)輸?shù)竭_(dá)消費(fèi)者面前，時(shí)間長(zhǎng)、成本高。而相比之下，虛擬盲盒則在抓熱點(diǎn)、做爆款上具備得天獨(dú)厚的優(yōu)勢(shì)。通過和潮流IP快節(jié)奏展開合作，在短期內(nèi)提升影響力及曝光度，觸達(dá)大批潛在受眾。

與此同時(shí)，我們也體現(xiàn)出虛擬盲盒的亮點(diǎn).在一些特性上做到超過線下抽盲盒體驗(yàn)

盲盒IP選擇，在線下盲盒運(yùn)營策略中，從項(xiàng)目立項(xiàng)到設(shè)計(jì)師創(chuàng)意建模再到工廠生產(chǎn)打樣，反復(fù)修正盲盒最終的形態(tài)，下線生產(chǎn)物流到消費(fèi)者面前，是一個(gè)非常冗長(zhǎng)的過程。相比線上盲盒的節(jié)奏則會(huì)輕盈很多，我們?cè)诰€上虛擬盲盒中發(fā)揮特點(diǎn)，篩選出一些時(shí)效性強(qiáng)，熱度高的IP，快速制作素材上架虛擬盲盒平臺(tái)。以「創(chuàng)造營2021」為例，線上盲盒可以在最短時(shí)間內(nèi)響應(yīng)熱點(diǎn)，制作出短時(shí)間內(nèi)出團(tuán)成員的IP素材并且上架虛擬盲盒平臺(tái)，這些都是線下盲盒所無法觸及的。

盲盒潮玩是z世代身邊最熱門的話題之一，消費(fèi)主義浪潮過后，人們從新審視「盲盒」的價(jià)值意義，未嘗不是一件好事。虛擬盲盒固然無法代替真實(shí)盲盒帶來的重量和觸摸手感，但是現(xiàn)實(shí)盲盒潮玩逃不開工業(yè)化的生產(chǎn)成本，虛擬盲盒平臺(tái)通過有低成本扁平化的策略，有溫度的情感化設(shè)計(jì)，和用戶建立起來另一種連接。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

在終端APP中，動(dòng)畫非常常見，它可以輔助視覺制造焦點(diǎn)，同時(shí)也可以讓用戶交互更加順滑，但動(dòng)畫的實(shí)現(xiàn)卻是設(shè)計(jì)師和研發(fā)群體的一個(gè)痛點(diǎn)。如何輔助設(shè)計(jì)師設(shè)計(jì)高性能炫酷的動(dòng)畫、如何將設(shè)計(jì)師設(shè)計(jì)的動(dòng)畫準(zhǔn)確無誤的還原到終端APP上是業(yè)界不斷探索和解決的問題。

圖1 傳統(tǒng)動(dòng)畫實(shí)現(xiàn)流程圖

當(dāng)前最好的動(dòng)畫設(shè)計(jì)軟件是Adobe After Effects（簡(jiǎn)稱AE），從AE動(dòng)畫制作到終端APP呈現(xiàn)，傳統(tǒng)的實(shí)現(xiàn)方式如圖1所示，有三大痛點(diǎn)：實(shí)現(xiàn)成本高、溝通成本高和性能難以保證。

近幾年，業(yè)界誕生了像Lottie、SVGA這樣的動(dòng)畫工作流解決方案，雖然在一定程度上提升了生產(chǎn)效率，但存在AE支持能力有限、動(dòng)畫性能難以保證、配套工具支持有限的問題。

1 ：PAG解決的問題

——————————

PAG（Portable Animated Graphics）是騰訊PCG發(fā)布器中臺(tái)自主研發(fā)的一套完整的動(dòng)畫工作流解決方案，助力于將AE動(dòng)畫方便快捷的應(yīng)用于各平臺(tái)終端。PAG的流程圖如圖2所示，設(shè)計(jì)師在AE上設(shè)計(jì)出動(dòng)畫后，可以通過導(dǎo)出插件導(dǎo)出pag文件，同時(shí)PAG提供了桌面端預(yù)覽工具，支持實(shí)時(shí)預(yù)覽效果，在確認(rèn)效果后，通過運(yùn)行配置上線，各平臺(tái)終端可以通過PAG SDK加載渲染pag動(dòng)畫。

圖2 PAG動(dòng)畫工作流流程圖

與Lottie、SVGA相比，PAG增加支持了服務(wù)端。除此之外，如圖3所示，PAG動(dòng)畫方案在導(dǎo)出動(dòng)畫文件大小、AE特性支持和可編輯性方面具有較大的優(yōu)勢(shì)。

圖3 PAG和Lottie對(duì)比圖

2: PAG支持的AE特性能力

——————————

2.1 矢量特性能力的支持

和Lottie、SVGA實(shí)現(xiàn)不同的是，PAG不依賴平臺(tái)端渲染接口，可以實(shí)現(xiàn)各平臺(tái)的渲染一致性。PAG與Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。

2.2 BMP預(yù)合成--全AE特性支持

無論是PAG還是Lottie、SVGA，所支持的AE特性僅僅是AE眾多特性中的很少的一部分，這在一定程度上限制了設(shè)計(jì)師的創(chuàng)造力。針對(duì)這個(gè)問題，PAG新增了BMP預(yù)合成的導(dǎo)出方式，支持導(dǎo)出所有AE特性，適用于不可編輯的場(chǎng)景。其原理如圖4所示，在合成的層面將渲染結(jié)果截取成圖片，然后進(jìn)行視頻編碼。

圖 4 BMP預(yù)合成原理圖

針對(duì)視頻不支持透明通道而動(dòng)畫需要包含透明通道的問題，在編碼的層面擴(kuò)展了透明通道的支持，如圖5所示。

圖6 PAG矢量和BMP預(yù)合成混合導(dǎo)出

3: PAG導(dǎo)出插件

——————————

3.1 不支持AE特性提示

針對(duì)導(dǎo)出動(dòng)畫和AE設(shè)計(jì)動(dòng)畫存在偏差的問題，PAG導(dǎo)出插件增加了使用了不支持AE特性提醒功能，如下圖7所示。

圖7 PAG導(dǎo)出面板

在預(yù)覽界面，同樣有不支持特性的提示，如圖8所示。

圖8 PAG導(dǎo)出面板預(yù)覽窗口

在使用AE設(shè)計(jì)動(dòng)畫的過程中，設(shè)計(jì)師可以方便快捷的提前查看使用了那些不支持直接導(dǎo)出的AE特性，換種實(shí)現(xiàn)方式或者導(dǎo)出成BMP預(yù)合成，有效的解決了設(shè)計(jì)動(dòng)畫和導(dǎo)出動(dòng)畫存在偏差的問題。

3.2 BMP預(yù)合成一鍵設(shè)置

在AE動(dòng)畫設(shè)計(jì)的過程中，PAG導(dǎo)出面板提供了一鍵設(shè)置BMP預(yù)合成的方法，如下圖9所示。需要提示的是，一旦設(shè)置了BMP預(yù)合成，該合成中的文本和圖片將不能再被用戶編輯。

圖9 BMP 預(yù)合成設(shè)置

由于BMP預(yù)合成可能會(huì)影響到可替換圖片的數(shù)量，PAG同時(shí)會(huì)實(shí)時(shí)更新可替換圖片的數(shù)量給設(shè)計(jì)以提示。

3.3 圖片填充模式設(shè)置

在用pag設(shè)置的素材中，經(jīng)常會(huì)遇到用戶填充的圖片與默認(rèn)占位圖尺寸不一致的情況，在導(dǎo)出面板中PAG增加圖片填充的四個(gè)規(guī)則，如圖10所示：

圖10 可替換圖片填充設(shè)置

其中：

不縮放：畫面不縮放，從左上角位置開始裁剪

黑邊：在保持高寬比的情況下縮放到設(shè)備的可用屏幕大小，圖像不發(fā)生變形，如果圖片尺寸和填充區(qū)域比例不一致，會(huì)出現(xiàn)黑邊，為默認(rèn)填充模式

拉伸：不保持寬高比填充，會(huì)發(fā)生失變形

裁剪：在保持高寬比的情況下縮放到完全填滿可用的屏幕大小

具體效果如圖11所示。

圖11 圖片填充效果圖

4桌面預(yù)覽工具PAGViewer

——————————

4.1 效果預(yù)覽

PAGViewer支持桌面端預(yù)覽PAG文件動(dòng)畫效果，如下圖所示。支持查看動(dòng)畫文件中包含有多少個(gè)可編輯文本和可編輯圖片，且支持設(shè)計(jì)師本地填充素材，實(shí)時(shí)預(yù)覽填充效果，無需等待上線后才能確認(rèn)真實(shí)效果。圖片占位圖支持填充圖片或視頻，如果PAG文件內(nèi)置了音頻文件，支持播放音頻效果。具體效果如圖12所示。

圖12 PAG效果預(yù)覽

4.2 性能檢測(cè)

在pag動(dòng)畫實(shí)際使用的過程中，PAG經(jīng)常遇到的問題是設(shè)計(jì)師辛辛苦苦設(shè)計(jì)的動(dòng)畫在終端上性能表現(xiàn)不佳，需要進(jìn)行返工優(yōu)化，同樣的問題在使用Lottie方案時(shí)候也會(huì)存在。

除了效果預(yù)覽，PAGViewer還增加了性能展示面板，可以很方便的看到pag動(dòng)畫的基本信息，如時(shí)長(zhǎng)、幀率、尺寸、bmp預(yù)合成的數(shù)量，圖層總數(shù)等，還有量化的性能指標(biāo)，定量的評(píng)估pag文件的性能，如圖13所示，方便設(shè)計(jì)師進(jìn)行針對(duì)性的優(yōu)化，而不需要等到上線前才會(huì)暴露性能問題。具體效果如圖13所示。

圖13 PAG性能展示面板

5: PAG的應(yīng)用場(chǎng)景

目前PAG方案已經(jīng)廣泛應(yīng)用于騰訊公司內(nèi)外幾十款產(chǎn)品中，涵蓋了眾多的國民級(jí)應(yīng)用。

總結(jié)下來，PAG目前主要使用在以下幾大場(chǎng)景：

5.1 UI動(dòng)畫

圖15 UI動(dòng)畫場(chǎng)景

設(shè)計(jì)師設(shè)計(jì)出動(dòng)畫文件后，研發(fā)只需要替換預(yù)設(shè)的文本內(nèi)容即可，并且文件體積非常小。

5.2 貼紙動(dòng)畫

圖16 貼紙動(dòng)畫場(chǎng)景

5.3 照片/視頻模板

圖17 照片/視頻模板場(chǎng)景

PAG支持將內(nèi)置的圖片作為占位圖替換，并保留所有動(dòng)畫效果。因此可以將整個(gè)PAG動(dòng)畫設(shè)計(jì)成一個(gè)模板，把預(yù)設(shè)的占位圖替換成用戶選取的照片，自動(dòng)套用效果生成視頻。全程可以讓設(shè)計(jì)師自由批量生產(chǎn)模板，無需研發(fā)介入。

仍然基于圖片替換原理，PAG也支持將占位圖替換為視頻，實(shí)現(xiàn)視頻模板功能。

5.4 智能剪輯

圖18 智能剪輯場(chǎng)景

智能剪輯是圍繞用戶上傳的視頻內(nèi)容，生成定制化的模板，模板本身是不固定的，可以從多個(gè)PAG文件組合而成，類似活字印刷。設(shè)計(jì)師可以利用這個(gè)特性，構(gòu)建自己的特效組件庫，然后對(duì)接AI的識(shí)別能力，根據(jù)一定規(guī)則組合得到無限數(shù)量的模板效果，可以做到一鍵出片。這塊目前的典型應(yīng)用場(chǎng)景是王者榮耀的周戰(zhàn)報(bào)功能，隨機(jī)生成游戲高光時(shí)刻視頻。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

Meet more beautiful colors.

在《騰訊文檔-構(gòu)建科學(xué)有效的色彩系統(tǒng)》這篇文章中，我們闡述了騰訊文檔如何升級(jí)了新的品牌色，為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和品牌認(rèn)知，以及如何構(gòu)建一個(gè)科學(xué)有效的調(diào)色板。

在設(shè)計(jì)系統(tǒng)的實(shí)際運(yùn)行中，我們也需要著眼于如何應(yīng)用調(diào)色板，建設(shè)協(xié)同工作流，并給各個(gè)角色提供有關(guān)色彩的擴(kuò)展指導(dǎo)，以達(dá)到在騰訊文檔中構(gòu)建一致且有品牌感的數(shù)字界面并有效提升效率的目的。

在建設(shè)騰訊文檔色彩系統(tǒng)的工作中，我們首先構(gòu)建了一個(gè)包含品牌色、灰色、輔助色的調(diào)色板，但僅有這個(gè)調(diào)色板不足以支撐我們流暢、無障礙的協(xié)同工作。日常工作中，“這里我用哪個(gè)藍(lán)色？”“這里我用哪個(gè)灰色？”“開發(fā)同學(xué)能否快速的變更某些元素的顏色？”等等問題層出不窮，建設(shè)系統(tǒng)的協(xié)同工作流迫在眉睫。

Chapter 1

——————————

如何建設(shè)？

HIG強(qiáng)調(diào)不要在APP中使用“硬代碼”，即十六進(jìn)制色值進(jìn)行編碼，但前期我們構(gòu)建的調(diào)色板僅有色值，這種硬代碼應(yīng)用到app中導(dǎo)致項(xiàng)目效率低下，維護(hù)也會(huì)成本激增。

于是在騰訊文檔中，我們開始采用顏色變量（color token）和主題（theme）來管理顏色，顏色變量（color token）基于任務(wù)（role）、主題（theme），為UI中的任務(wù)指定十六進(jìn)制代碼的色值（hex value），以弭平設(shè)計(jì)師之間、開發(fā)與設(shè)計(jì)師之間的溝壑，將顏色變量（color token）嵌入設(shè)計(jì)組件中與開發(fā)代碼形成聯(lián)動(dòng)，便于開發(fā)利用程序中的變量來做全局修改，橫向提升團(tuán)隊(duì)的協(xié)作效率。

所謂顏色變量，通俗的意思就是可以將一個(gè)顏色按任務(wù)用途去抽象，抽象成一個(gè)有命名的顏色樣式，這個(gè)顏色樣式就是顏色變量。

在設(shè)計(jì)或者代碼中，可以通過修改這個(gè)顏色變量的值來進(jìn)行全局顏色的更新。例如，我們現(xiàn)在需要給button一個(gè)顏色，不要將其寫為 #1E6FFF這樣的色值，而是將button的顏色指定為命名是Fill-01的顏色變量， 如果有重大版本更新，僅需將顏色變量Fill-01的色值更新，即可實(shí)現(xiàn)全局顏色的高效更新。如果在不同的主題下（例如淺色/深色模式）button有不同的顏色表現(xiàn)，顏色變量Fill-01可以在不同主題下，映射不同的十六進(jìn)制色值。這就是我們建設(shè)協(xié)同工作流的的基礎(chǔ)邏輯。

Chapter 2

——————————

為調(diào)色板的基礎(chǔ)色值命名

調(diào)色板的各個(gè)色值（hex value）是最底層的基礎(chǔ)樣式，我們將色板上的顏色進(jìn)行規(guī)則化命名，以方便后期將其引用到顏色變量中。

騰訊文檔包含核心藍(lán)色、藍(lán)灰色、中性灰色及其他輔助色，按照顏色屬性，將其命名為：Primayblue、Gray、Grayblue、Purple、Indigoblue、Acidblue、Cyan、Greenblue、Yellow、Orange、Red，并在命名中加入色階后綴。

*騰訊文檔調(diào)色板命名圖表

Chapter 3

——————————

定義顏色使用規(guī)則

1、 從調(diào)色板中選擇合適的顏色并測(cè)試

從調(diào)色板中根據(jù)UI中的任務(wù)挑選合適的顏色并進(jìn)行可用性測(cè)試，做具體任務(wù)中顏色選擇的最優(yōu)解。

例如，我們需要選擇一個(gè)藍(lán)色作為鏈接色，作為文本，對(duì)比度必須達(dá)到4.5:1以上才符合WCAG2.0的可用性標(biāo)準(zhǔn)。經(jīng)過測(cè)試我們選擇了primayblue-02作為鏈接色。

騰訊文檔的界面中，灰色系列占主導(dǎo)地位，起著至關(guān)重要的作用，為產(chǎn)品界面創(chuàng)造結(jié)構(gòu)、表達(dá)邊界、建立信息層次。在調(diào)色板中，我們選擇了兩種灰色：中性灰色和藍(lán)灰色，來支撐系統(tǒng)的設(shè)計(jì)。藍(lán)色系列是騰訊文檔產(chǎn)品和體驗(yàn)的主要?jiǎng)幼黝伾?

同時(shí)我們也使用了其他顏色以滿足一些沖突性任務(wù)（警示等）的顏色使用，這些顏色需要謹(jǐn)慎、有目的地使用。

2 、根據(jù)任務(wù)定義顏色的使用規(guī)則

經(jīng)常會(huì)有設(shè)計(jì)師問，“這里我能用這個(gè)灰色嗎？”出現(xiàn)這種問題，根本上還是顏色使用規(guī)則定義的不夠清晰，含混的口口相傳的規(guī)則會(huì)導(dǎo)致更多的混亂。于是，需要我們根據(jù)任務(wù)和使用場(chǎng)景把顏色的使用規(guī)則清晰的定義。

首先定義在界面中占主導(dǎo)地位的灰色、藍(lán)色的使用規(guī)則。

藍(lán)灰色_Grayblue：

在騰訊文檔中，藍(lán)灰色與品牌藍(lán)共同建立品牌印象，由此，藍(lán)灰色主要應(yīng)用于與風(fēng)格相關(guān)的場(chǎng)景。包括：圖標(biāo)色、填充底色及大面積的背景色等。

中性灰色_Gray：

中性灰色主要應(yīng)用于一些全局系統(tǒng)行為。如：文本、分割線及交互反饋hover、press等場(chǎng)景。

品牌藍(lán)色_Primayblue：

品牌藍(lán)色主要應(yīng)用于系統(tǒng)中的各種行為，如藍(lán)色圖標(biāo)、button、文本鏈接等。

其次定義在界面中用于警示、狀態(tài)提醒的其他顏色的使用規(guī)則。

紅色_Red：

紅色主要應(yīng)用于系統(tǒng)中需要警示的場(chǎng)景，如紅色警示圖形、錯(cuò)誤文本、紅色tag等。

其他顏色：

在騰訊文檔中，會(huì)針對(duì)不同的任務(wù)應(yīng)用不同的顏色，如左滑操作、成功提示、高亮顯示等。

品類圖標(biāo)基準(zhǔn)色：

在騰訊文檔中，不同的品類有不同的基準(zhǔn)色。

Chapter 4

——————————

顏色變量的語義化命名

定義了顏色在系統(tǒng)設(shè)計(jì)中的使用規(guī)則后，我們需要根據(jù)顏色變量的使用用途對(duì)其進(jìn)行語義化命名。一套好的語義化命名規(guī)則需要易于維護(hù)且具備可拓展性，如果只是將調(diào)色板的色值命名為 blue-01、blue-02... ，語義化的收益并不明顯。哪天設(shè)計(jì)團(tuán)隊(duì)需要調(diào)整品牌風(fēng)格，或是蘋果又掀起什么新潮流，把所有命名為 blue_x 的變量改為 gradient_serenity， 對(duì)于開發(fā)來說也是巨大的災(zāi)難。

根據(jù) HIG 的建議，語義化命名不應(yīng)該描述外觀或者色值，而是指明這個(gè)顏色的任務(wù)用途——標(biāo)簽 Labels，分割線 Sepatators 或者填充 Fill。

在思考如何賦予顏色語義化的命名時(shí)，設(shè)計(jì)師也需要用更概括和結(jié)構(gòu)化的視角來看待界面設(shè)計(jì)，同時(shí)也需與開發(fā)同學(xué)達(dá)成一致，使用同樣的命名，滿足以更好地維護(hù)一套收斂和統(tǒng)一的設(shè)計(jì)語言。

在騰訊文檔中，顏色的任務(wù)用途定義為為以下幾種：背景色 Background、文本色Text、圖標(biāo)色I(xiàn)con、分割線 Border、透明填充 Transparent fill 、實(shí)色填充 Opaque fill 、默認(rèn)交互反饋 Feedback、語義 Intent。統(tǒng)一使用ultrastrong、strong、medium、weak、ultraweak作為后綴來表達(dá)顏色強(qiáng)度。在需要更明確的用途說明的任務(wù)中，直接描述其用途，例如：hover，pressed、disabled等。

Chapter 5

——————————

建設(shè)團(tuán)隊(duì)協(xié)同工作流

以上種種，最終目的在于建設(shè)團(tuán)隊(duì)的協(xié)同工作流，將顏色變量（color token）嵌入設(shè)計(jì)組件中與開發(fā)代碼形成聯(lián)動(dòng)，便于設(shè)計(jì)利用變量及組件、開發(fā)利用程序中的變量來做全局修改，橫向提升團(tuán)隊(duì)的協(xié)作效率。

1、 設(shè)計(jì)內(nèi)協(xié)同：在Figma中生成顏色變量

在設(shè)計(jì)系統(tǒng)中，顏色變量屬于底層的設(shè)計(jì)原子，需要將其生成為顏色變量并嵌入到設(shè)計(jì)組件中，便于設(shè)計(jì)內(nèi)部使用。我們將已根據(jù)任務(wù)用途命名的色值，生成figma中的顏色樣式（color style），后續(xù)無論是進(jìn)行組件的設(shè)計(jì)，還是項(xiàng)目的設(shè)計(jì)，都可以直接賦予設(shè)計(jì)元素明確的顏色樣式。

2、 設(shè)計(jì)組件與開發(fā)代碼聯(lián)動(dòng)：利用顏色變量表進(jìn)行信息同步

我們生成了一個(gè)面向內(nèi)部、外部的顏色變量表，進(jìn)行顏色變量的說明和信息的同步，沉淀落到實(shí)處的資料文檔。（此處推薦使用騰訊文檔，多人協(xié)作實(shí)時(shí)溝通～）

最終形成了設(shè)計(jì)組件庫與開發(fā)組件庫的聯(lián)動(dòng)，構(gòu)建了一個(gè)協(xié)同工作流，橫向提升工作效率。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

動(dòng)效是用戶體驗(yàn)的重要組成部分，也是產(chǎn)品調(diào)性的重要體現(xiàn)。如今動(dòng)效設(shè)計(jì)也有了更多的解決方案，如Framer、Principle、Flinto、Protopie等，這些軟件在制作交互原型時(shí)，確實(shí)有更輕量便捷的優(yōu)勢(shì)，但效果也有一定的局限性，或者要求使用者有代碼基礎(chǔ)，比較適合有針對(duì)性的人群。而After Effects作為動(dòng)效軟件的鼻祖，以其強(qiáng)大的兼容性、效果豐富性和清晰明了的圖層操作邏輯深得設(shè)計(jì)師們喜愛，不論是UI、運(yùn)營還是多媒體類型的設(shè)計(jì)都能滿足，無疑是目前最具有普適性的動(dòng)效軟件。本文從AE的插件、操作以及落地三個(gè)方面，為大家整理了一波實(shí)用技巧，希望能幫助大家在工作中更加得心應(yīng)手。

——————————

Part 1. 便捷靈活-不容錯(cuò)過的精品插件

工欲善其事必先利其器，不論是AE還是其他軟件，好的插件都能配合軟件本身達(dá)到事半功倍的效果。這里介紹十款A(yù)E上不容錯(cuò)過的精品插件。

1.1 文件導(dǎo)入

AE與PS有很好的兼容性，PS的圖層以及各種樣式都能無偏差的導(dǎo)入到AE，但同樣是Adobe家族的AI，要導(dǎo)入AE卻特別麻煩，更不用說沒有血緣的Sketch了。偏偏AI和Sketch卻經(jīng)常需要和AE打交道，這時(shí)候以下兩款插件便應(yīng)運(yùn)而生。

Overlord：AI與AE互導(dǎo)

Overlord不僅可以實(shí)現(xiàn)AI導(dǎo)入AE，還能隨時(shí)從AE導(dǎo)回AI修改，這對(duì)本身不適合用于繪制圖形的AE來說，無疑是補(bǔ)上了一個(gè)短板。

最新的Overlord支持路徑、形狀、參數(shù)圖形、剪切關(guān)系、文本、甚至大部分的漸變參數(shù)都能無偏差互導(dǎo)，并且可以設(shè)置導(dǎo)成子圖層還是獨(dú)立圖層，可以說是非常方便了。

官網(wǎng)鏈接：https://www.battleaxe.co/overlord

AEUX：Sketch導(dǎo)入AE

如果說Overlord是AI和AE之間的一座橋梁，那AEUX就是Sketch和AE之間的一座橋梁。導(dǎo)入前在Sketch里將圖層整理好，導(dǎo)入AE后圖層關(guān)系也是一目了然。

官網(wǎng)鏈接：https://aeux.io/

1.2 使用過程

——————————

Motion Tools：常用功能合輯

如果說AE只能裝一款插件，那必然是Motion Tools了，它將很多常用操作整合到一個(gè)面板上，并且可以跳過繁瑣的常規(guī)操作。包括快速調(diào)整曲線、定位圖層錨點(diǎn)、克隆關(guān)鍵幀、制作回彈效果、錯(cuò)位圖層序列、生成多圖層空對(duì)象等。這里演示幾個(gè)常用功能。

快速調(diào)整速度緩動(dòng)曲線：

不用再通過輸入表達(dá)式，做出操控便捷又靈活的回彈效果：

錨點(diǎn)是元素變換時(shí)的基準(zhǔn)點(diǎn)，更改錨點(diǎn)也是高頻操作。Motion Tools不僅可以快速修改圖層錨點(diǎn)，并且支持多圖層批量操作：

官網(wǎng)鏈接：https://motiondesign.school/products/motion-tools/

Auto Crop：預(yù)合成裁切

新轉(zhuǎn)成的預(yù)合成尺寸總是占滿畫布，不方便做動(dòng)畫且干擾其他圖層選擇。手動(dòng)調(diào)節(jié)的話會(huì)影響元素的位置、位移等屬性，Auto Crop很好地解決了這個(gè)問題，能夠?qū)㈩A(yù)合成裁切至適合當(dāng)前元素的尺寸。

官網(wǎng)鏈接：https://aescripts.com/auto-crop

Auto Sway：飄動(dòng)效果

Auto Sway能夠很便捷的制作頭發(fā)或者服裝飄動(dòng)的效果，在日常運(yùn)營設(shè)計(jì)中，讓你的人物快速變得生動(dòng)靈活起來。

官網(wǎng)鏈接：https://aescripts.com/autosway

Trapcode Particular：粒子效果

AE自身帶有粒子效果器，點(diǎn)擊“效果 → 模擬 → CC Particle World ”就是。但更強(qiáng)大更為人所熟知的卻是這款粒子插件—Red Giant旗下Trapcode插件包里的“Particular”。

很多運(yùn)營或游戲頁面中的氛圍元素，例如落花、飄雪、灰燼、火花、彩帶等，Particular都可以快速做出。

除了運(yùn)營設(shè)計(jì)，粒子在很多UI場(chǎng)景也同樣適用，例如結(jié)合形變或路徑做的飄散和拖尾效果，就可以用在充電或掃描等場(chǎng)景。

官網(wǎng)鏈接：https://www.maxon.net/zh/red-giant-complete/trapcode-suite 

1.3 高品質(zhì)導(dǎo)出

Bodymovin：Lottie格式輸出

Bodymovin能夠?qū)E中矢量圖形做成的動(dòng)效導(dǎo)成json文件，變成一串純粹的代碼，再被Lottie渲染還原出來。這就讓“尺寸”和“幀率”擺脫了以往體積的束縛，導(dǎo)出的即使是又高清又流暢的大圖，也可以保持很小的體積。

QQ最新的Q彈超清表情，就是用Lottie實(shí)現(xiàn)的，大家可以在手機(jī)QQ上親自體驗(yàn)這種爽滑Q彈的感覺哦。

官網(wǎng)鏈接：https://aescripts.com/bodymovin/

PAG：完整的動(dòng)畫工作流

PAG（Portable Animated Graphics ）是一套完整的動(dòng)畫工作流，在動(dòng)畫導(dǎo)出與渲染方面和Lottie相似，但更進(jìn)一步的是，PAG還引入了視頻序列幀結(jié)合矢量的混合導(dǎo)出能力，這就保證了PAG能支持AE的所有特性和效果。

另外PAG還提供完善的桌面預(yù)覽工具、性能監(jiān)測(cè)可視化、運(yùn)行時(shí)可編輯等特點(diǎn)，能很好的打通設(shè)計(jì)與開發(fā)之間，從創(chuàng)作到素材交付上線的流程。

官網(wǎng)鏈接：https://pag.io/ 

Gifgun：導(dǎo)出小巧高清的Gif圖

Gif格式因?yàn)椴恢С职胪该鲄^(qū)域且容易有鋸齒，如今的實(shí)際開發(fā)中已經(jīng)有了Apng、Lottie等很多更好的替代方案，但在網(wǎng)頁瀏覽、文檔編輯等許多場(chǎng)景，還是需要使用Gif來演示動(dòng)效或者作為封面縮略圖。AE從2014版本后就不支持Gif導(dǎo)出了，而Gifgun就是一款能很好地導(dǎo)出Gif格式的插件。

Gifgun導(dǎo)出的格式小巧清晰，本文所有動(dòng)圖就是用這款插件導(dǎo)出，真香。

官網(wǎng)鏈接：https://aescripts.com/gifgun/

Aftercodecs：導(dǎo)出小巧高清的MP4

AE本身不支持直接導(dǎo)出MP4，很多時(shí)候只能先導(dǎo)出體積龐大的MOV格式，再通過第三方軟件轉(zhuǎn)成MP4，操作繁瑣不說，還損失畫質(zhì)。

Adobe自家的多媒體編碼軟件Media Encoder，也可以完美導(dǎo)出MP4格式，不過這款軟件本身體積較大，每次打開都要運(yùn)行很久。

這里推薦使用更實(shí)用的MP4導(dǎo)出軟件 — Aftercodecs。安裝后在輸出模塊設(shè)置里，就能找到對(duì)應(yīng)的導(dǎo)出項(xiàng)了，并且導(dǎo)出的MP4也是小巧高清的。

官網(wǎng)鏈接：https://aescripts.com/aftercodecs/

Part 2. 高效操作-效率翻倍的小技巧和快捷鍵

2.1 實(shí)用小技巧

小技巧這部分，整理了AE高頻操作經(jīng)常會(huì)遇見的一些問題，以及對(duì)應(yīng)比較高效的解決方案。

用空對(duì)象調(diào)整元素

當(dāng)我們想調(diào)整的元素已經(jīng)打上過關(guān)鍵幀，這時(shí)直接調(diào)整元素的位置或縮放屬性，就會(huì)影響到原本的效果，使用空對(duì)象就可以解決這一問題。

整體拉伸關(guān)鍵幀

關(guān)鍵幀比較多時(shí)，按住 “ Option ” 鍵，用鼠標(biāo)拖動(dòng)最末尾的關(guān)鍵幀，可以對(duì)所選關(guān)鍵幀進(jìn)行整體等比拉伸，并且支持多圖層同時(shí)操作。

快速定位圖層中心錨點(diǎn)

新建形狀層的定位錨點(diǎn)總是不對(duì)齊圖層的中心，這在做一些帶縮放或旋轉(zhuǎn)屬性的動(dòng)畫時(shí)就特別不方便，按住“Command”雙擊“平移錨點(diǎn)工具”，即可使圖層錨點(diǎn)快速對(duì)位到圖層中心。

還有更直接的方法，就是在“首選項(xiàng)”里將“在新形狀圖層上居中放置錨點(diǎn)”打上勾，以后新建的形狀層錨點(diǎn)都會(huì)自動(dòng)對(duì)齊圖層中心啦。

中英文AE快速切換

AE的很多插件和表達(dá)式對(duì)中文版本不兼容，包括很多教程也都是國外案例，所以其實(shí)直接用英文版的AE是最好的。但是難免也有跟我一樣看見英文界面就抓瞎的同學(xué)，平時(shí)還是習(xí)慣用中文版，有需要時(shí)才換成英文版。這里介紹一種AE快速切換中英文的方法，對(duì)2018以上的版本都適用。

以macOS系統(tǒng)為例，在以下路徑找到：

前往 \ 電腦 \ Macintosh HD \ 資源庫 \ Application Support \ Adobe \ Adobe After Effects CC \ AMT \ application.xml

將“application.xml”這個(gè)文件用“文本編輯”打開，然后按“Command + F”使用查找命令，將“zh_CN”文本替換為“en_US”，保存后重啟AE就是英文版了。

Windows也是同理，對(duì)應(yīng)路徑為：

C: \ Program Files \ Adobe \ Adobe After Effects CC \ Support Files \ AMT \ application.xml

然后將“application.xml”這個(gè)文件用“記事本”打開，同樣的查找“zh_CN”后替換“en_US”就好。

之后可以將“application.xml”文件分別存一份“zh_CN”中文和“en_US”英文的版本，下回再要切換時(shí)，直接將對(duì)應(yīng)的“application.xml”文件復(fù)制到原路徑替換即可。

視頻素材循環(huán)

新置入一段想要循環(huán)的視頻素材時(shí)，很多人習(xí)慣將素材復(fù)制多次，或者通過時(shí)間重映射打上關(guān)鍵幀后在添加循環(huán)表達(dá)式。其實(shí)并不需要這么麻煩，在項(xiàng)目窗口右鍵對(duì)應(yīng)的素材，選擇“解釋素材 → 主要”，在彈出窗口直接就可以設(shè)置素材循環(huán)次數(shù)。

2.2 高效快捷鍵

雖然AE的全部快捷鍵可以寫滿長(zhǎng)長(zhǎng)一串列表，但在精不在多。實(shí)際使用時(shí)，其實(shí)只要記住一些常用的關(guān)鍵快捷鍵，就已經(jīng)可以效率翻倍，享受“鍵步如飛”的感覺了。

以最常用的“添加關(guān)鍵幀”為例，在不使用快捷鍵的前提下，想要給對(duì)象添加一個(gè)“位置”關(guān)鍵幀，需要至少3個(gè)步驟：

而使用快捷鍵 “ Option+Shift+P ”，一步即可完成，并且不會(huì)展開不相關(guān)的屬性：

這對(duì)于一個(gè)工程里需要用到成百上千次的k幀操作來說，著實(shí)可以省下不少時(shí)間，可以說是不得不用的一個(gè)快捷操作。

秉持在精不在多的原則，整理出以下一些高效又常用的快捷鍵，親測(cè)好用哦！

因?yàn)樽髡呤荕acOS系統(tǒng)，所以下文中提到的 Option 可以對(duì)應(yīng) Windows 的 Alt ； Command 對(duì)應(yīng) Windows 的 Control 。

五大基礎(chǔ)變換屬性

在對(duì)應(yīng)圖層使用這五個(gè)快捷鍵，即可快速展開或收起對(duì)應(yīng)屬性。

位置：P（Position）

縮放：S（Scale）

旋轉(zhuǎn)：R（Rotation）

不透明度：T（Transparency）

錨點(diǎn)：A（Anchor）

常用工具選擇

選擇工具：V

形狀工具：Q

鋼筆工具：P

攝像機(jī)工具：C

關(guān)鍵幀操作

快速添加關(guān)鍵幀：Option + Shift + “ * ”（ * = 對(duì)應(yīng)屬性快捷鍵）

向右移動(dòng)關(guān)鍵幀一幀：Option + 右箭頭

向左移動(dòng)關(guān)鍵幀一幀：Option + 左箭頭

向右移動(dòng)關(guān)鍵幀十幀：Option + Shift + 右箭頭

向左移動(dòng)關(guān)鍵幀十幀：Option + Shift + 左箭頭

緩動(dòng)關(guān)鍵幀：F9

時(shí)間指針操作

定位到上一可見關(guān)鍵幀：J

定位到下一可見關(guān)鍵幀：K

定位到圖層入點(diǎn)：I

定位到圖層出點(diǎn)：O

設(shè)置當(dāng)前為工作區(qū)開始：B

設(shè)置當(dāng)前為工作區(qū)結(jié)束： N

圖層操作

將圖層拆分 ：Shift + Command + D

裁去時(shí)間線左側(cè)圖層：Option + [

裁去時(shí)間線右側(cè)圖層：Option + ]

設(shè)置當(dāng)前為入點(diǎn)： [

設(shè)置當(dāng)前為出點(diǎn)： ]

復(fù)制圖層：Command + D

其他常用操作

展開/收起帶關(guān)鍵幀的屬性：U

展開/收起所有屬性：UU

展開/收起遮罩屬性：M

展開/收起音頻屬性：L

轉(zhuǎn)為預(yù)合成：Shift + Command + C

圖像自適應(yīng)合成寬高：Shift + Option + F

After Effects官方快捷鍵大全：https://helpx.adobe.com/cn/after-effects/user-guide.html/cn/after-effects/using/keyboard-shortcuts-reference.ug.html

Part 3 .實(shí)際落地-動(dòng)效輸出與標(biāo)注

設(shè)計(jì)再好的動(dòng)效如果不能實(shí)際落地，那一切也只是徒勞，所以動(dòng)效輸出在對(duì)接開發(fā)時(shí)非常關(guān)鍵。按照輸出和實(shí)現(xiàn)的方式不同，我們可以將動(dòng)效分為兩種類型，一種是播放型動(dòng)效，一種是交互型動(dòng)效。

3.1 播放型動(dòng)效輸出

播放型動(dòng)效是指在輸出時(shí)效果就已經(jīng)固定的動(dòng)效，滿足觸發(fā)條件后播放出來，過程中并不會(huì)有影響效果的元素。

例如常見的APP底部導(dǎo)航點(diǎn)擊效果，icon動(dòng)效在用戶點(diǎn)擊時(shí)觸發(fā)播放，這個(gè)效果在輸出時(shí)就是固定的，不受任何其他因素影響，可以由設(shè)計(jì)師直接導(dǎo)出。

播放型動(dòng)效有以下幾種比較常見的輸出格式：

Gif、Apng、Webp本質(zhì)上都是將位圖進(jìn)行壓縮和轉(zhuǎn)換，而Lottie則是基于代碼層面的動(dòng)畫渲染，PAG則結(jié)合了兩者的特性。目前一般使用Apng、Lottie、和PAG就已經(jīng)可以覆蓋大部分的輸出場(chǎng)景，是可以優(yōu)先考慮的動(dòng)圖格式。

3.2 交互型動(dòng)效標(biāo)注

交互型動(dòng)效是指變換內(nèi)容跟我們的交互操作相關(guān)聯(lián)的動(dòng)效，并且包含無法由設(shè)計(jì)師直接導(dǎo)出的元素，比如用戶的頭像、名稱等。

比如這個(gè)支付面板切換的效果，變換的元素中包含了用戶的余額和綁卡信息，這些信息是無法由設(shè)計(jì)師輸出的。

這種動(dòng)效需要開發(fā)在代碼側(cè)還原。如果只是輸出視頻demo，開發(fā)同學(xué)很難將其中的細(xì)節(jié)（例如時(shí)間出入點(diǎn)、曲線速率等）還原出來。這就需要設(shè)計(jì)師有一份清晰的標(biāo)注文檔，將動(dòng)效的細(xì)節(jié)參數(shù)跟開發(fā)更好的明確下來。

一份規(guī)范的動(dòng)效標(biāo)注文檔，至少應(yīng)該包含以下幾個(gè)方面，

觸發(fā)：在什么條件下觸發(fā)動(dòng)效，例如點(diǎn)擊、雙擊、滑動(dòng)、長(zhǎng)按等；

對(duì)象：發(fā)生變換的對(duì)象，例如按鈕、列表、文字等；

屬性：具體變換的屬性，例如位移、縮放、不透明度等；

參數(shù)：換化屬性的具體參數(shù)，例如不透明度值從0到1；

時(shí)長(zhǎng)：變換的起始時(shí)間點(diǎn)、持續(xù)時(shí)間；

曲線：變換的速率曲線，描述在固定的時(shí)長(zhǎng)范圍內(nèi)，速度是如何變化的；

以上圖的支付面板首次切換過程為例，我們的標(biāo)注文檔是這樣的：

第一步定義好頁面的起始和結(jié)束狀態(tài)，并標(biāo)明動(dòng)效元素

第二步則是將各元素的運(yùn)動(dòng)細(xì)節(jié)用具體參數(shù)描述清楚

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

帳號(hào)作為用戶身份在互聯(lián)網(wǎng)產(chǎn)品中的投射，是用戶在產(chǎn)品中重要的身份信息。突出用戶個(gè)性風(fēng)格的頭像信息可以促進(jìn)用戶之間互動(dòng)社交行為，提高用戶對(duì)產(chǎn)品的粘性。

///

前言

帳號(hào)作為用戶身份在互聯(lián)網(wǎng)產(chǎn)品中的投射，是用戶在產(chǎn)品中重要的身份信息。我們可以通過用戶的頭像、用戶名、掛件等快速辨識(shí)用戶性格興趣喜好等特征。在用戶進(jìn)行社交時(shí)，帳號(hào)頭像是最直觀、最快速的了解用戶的方式之一。識(shí)別性強(qiáng)的頭像信息可以促進(jìn)用戶之間互動(dòng)社交行為，提升評(píng)論區(qū)活躍度與氛圍感，從而提高用戶對(duì)產(chǎn)品的粘性。在百度APP中真實(shí)頭像占比較低，讓用戶上傳/拍攝圖片作為頭像，對(duì)用戶而言成本較高，并且存在圖片質(zhì)量和內(nèi)容監(jiān)管等問題。因此產(chǎn)品內(nèi)部的推薦頭像就顯得尤為關(guān)鍵。

當(dāng)前百度APP中默認(rèn)推薦頭像設(shè)計(jì)過時(shí)，不能滿足當(dāng)下用戶群體對(duì)專屬個(gè)人身份標(biāo)識(shí)的訴求。本次目標(biāo)就是提升用戶真實(shí)頭像占比、同時(shí)提升百度APP社區(qū)氛圍體驗(yàn)，強(qiáng)化用戶個(gè)人屬性身份認(rèn)知，由此來塑造帳號(hào)的真實(shí)感。

對(duì)默認(rèn)推薦頭像進(jìn)行重新設(shè)計(jì)，如何滿足百度APP龐大的用戶群體是設(shè)計(jì)中的重點(diǎn)難點(diǎn)。第一是需要滿足用戶不同的身份特征個(gè)性訴求，第二是設(shè)計(jì)需要滿足整體產(chǎn)品設(shè)計(jì)定位。

在上述前提下我們啟動(dòng)了百度APP帳號(hào)人格化創(chuàng)新設(shè)計(jì)，進(jìn)一步滿足了用戶對(duì)個(gè)性化的訴求，并提高用戶粘性。

一、需求洞察

首先是問題定位，目前僅有30%的用戶自定義真實(shí)頭像，相較于競(jìng)品處于較低的狀態(tài)。并且默認(rèn)頭像設(shè)計(jì)過時(shí)，氛圍感不?，體驗(yàn)較差。本次目標(biāo)就是提升用戶真實(shí)頭像占比、同時(shí)提升百度APP社區(qū)氛圍體驗(yàn)，強(qiáng)化用戶個(gè)人屬性認(rèn)知，由此來塑造帳號(hào)的真實(shí)感。

二、設(shè)計(jì)打法

確定目標(biāo)后，圍繞真實(shí)感氛圍營造展開了一系列的發(fā)散。以業(yè)務(wù)、人群、人格三個(gè)維度進(jìn)行切入；分析和探索后發(fā)現(xiàn)單純的業(yè)務(wù)和人群劃分較為局限。為滿足百度APP用戶群體各年齡層、多種性格等的訴求，最終確定為心理學(xué)人格方向，以心理學(xué)“榮格人格”為理論基礎(chǔ)進(jìn)行展開。

心理學(xué)家榮格定義了人類基礎(chǔ)人格的12個(gè)主要類型。每種類型都有自己的價(jià)值觀、意義和性格特點(diǎn)，從性格中提取關(guān)鍵詞，分別篩選出有共性的、大眾熟知度高的動(dòng)物形象來匹配12種人格。

三、形象設(shè)計(jì)

基于人格理論依據(jù)開始將動(dòng)物具像化，經(jīng)過大量的討論、草圖繪制、篩選和優(yōu)化。

草圖繪制確定動(dòng)物形象基礎(chǔ)造型與特征。以天真者為例，為了表現(xiàn)形象俏皮、可愛的特性，兔子一邊耳朵折疊，并且選用圓潤(rùn)的外觀，搭配臉上的腮紅。通過表情大眼睛，張嘴微笑來表達(dá)心理人格。

在繪制的草圖中選取最符合人物性格，并且用戶可以接受的可愛的沒有對(duì)抗性的設(shè)計(jì)。
將選定的草圖在三維軟件中進(jìn)行模型制作。優(yōu)化模型布線并制作模型貼圖、燈光、材質(zhì)，完成三維化制作。通過以上的設(shè)計(jì)流程完成12種人格的動(dòng)物形象制作。

為了進(jìn)一步提高IP形象的影響力，推動(dòng)更多業(yè)務(wù)場(chǎng)景的應(yīng)用。對(duì)IP頭像進(jìn)行身體延展，打造專屬IP團(tuán)體，進(jìn)一步符合人格化定位，提升形象辨識(shí)度。

四、應(yīng)用&收益

為了保證用戶選擇多樣性和不同的圈層喜好，除了12個(gè)動(dòng)物形象，還提供了一系列實(shí)景拍攝照片，包括風(fēng)景、藝術(shù)、生活、中國風(fēng)等主題等來滿足用戶需求。

頭像設(shè)置頁面優(yōu)化升級(jí)，提升頁面容器屏效。將之前頭像尺寸減小并縮小間距，保證有限屏幕內(nèi)用戶可以看到更多的頭像。并將頭像以分類形式顯現(xiàn)，方便用戶挑選符合自己喜好的頭像樣式。下方“拍照”和“從相冊(cè)選擇”入口樣式更新，突出拍照入口。

42個(gè)新增頭像已經(jīng)在PASS源頭進(jìn)行鋪設(shè)使用，在百度APP產(chǎn)品內(nèi)、以及PC端PASS注冊(cè)環(huán)節(jié)做了相關(guān)的使用引導(dǎo)，保證用戶可觸達(dá)新版的頭像。

整套帳號(hào)人格化頭像設(shè)計(jì)完成百度系產(chǎn)品落地應(yīng)用，助力全系產(chǎn)品提升用戶粘性。

除了百度APP端內(nèi)場(chǎng)景運(yùn)用外，還在端外場(chǎng)景提升IP形象影響力。2021年牛年春節(jié)推出牛年專享新春紅包。為金牛形象設(shè)計(jì)專屬新春服飾&場(chǎng)景，打造財(cái)神牛形象，以搭配農(nóng)歷春節(jié)時(shí)間段，金牛、元寶、祥云相結(jié)合突出節(jié)日喜慶的氣氛。

帳號(hào)人格化頭像上線后得到了良好的反饋，用戶滿意度及推薦度遠(yuǎn)超預(yù)期，得到了近90%的用戶反饋。同時(shí)通過相關(guān)的場(chǎng)景推薦綜合提升了百度APP用戶真實(shí)頭像占比，并且數(shù)據(jù)還在持續(xù)提升中。

///

創(chuàng)新設(shè)計(jì)價(jià)值

一、提高用戶粘性

帳號(hào)頭像是真實(shí)用戶在產(chǎn)品中的身份標(biāo)識(shí)，可以展示用戶的個(gè)人性格特點(diǎn)、興趣愛好。提升用戶在產(chǎn)品中的辨識(shí)度，同時(shí)提升用戶互動(dòng)氛圍，提高用戶粘性。后期還可通過運(yùn)營和推廣手段，形成具體用戶畫像，達(dá)成精準(zhǔn)的內(nèi)容推送。

二、持續(xù)供給裝扮資產(chǎn)

帳號(hào)人格化形象設(shè)計(jì)上線后得到了良好的用戶反饋及數(shù)據(jù)收益。我們會(huì)繼續(xù)思考IP形象的拓展以及產(chǎn)品中的深度應(yīng)用。之后IP形象不止單單出現(xiàn)在用戶頭像設(shè)置上，會(huì)繼續(xù)精細(xì)化設(shè)計(jì)完成場(chǎng)景、裝扮等精細(xì)化設(shè)計(jì)。并應(yīng)用于百度APP首頁皮膚、號(hào)主頁背景裝扮、頭像掛件等場(chǎng)景。持續(xù)供給百度APP裝扮資產(chǎn)，綜合

提升用戶吸引力&用戶粘性。

文章來源：UI中國   作者：百度MEUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)

1.為什么這個(gè)配色會(huì)怪？

我們?cè)诋嬀€性圖標(biāo)的時(shí)候，有時(shí)候會(huì)用深淺色配合，比如描邊用亮藍(lán)色和深藍(lán)色，像這種：

我們會(huì)覺得很和諧，為什么？雖然他們飽和度、明度不同，但他們有相同的色相，有一定的關(guān)聯(lián)性。

還有一種情況就是相同明度、飽和度，但是有兩種色相，比如藍(lán)綠，藍(lán)黃：

我們也都覺得很和諧，為什么？因?yàn)橛邢嗤拿鞫?、飽和度，他們也有一定的關(guān)聯(lián)性！

但是如果是這樣兩個(gè)描邊配色在一起：

就感覺有些不和諧，就是因?yàn)樯?、飽和度、明度沒有一項(xiàng)是有關(guān)聯(lián)的，所以就感覺不太搭。

像下面這位星友做的練習(xí)，也是一樣的道理：

這個(gè)配色多少有點(diǎn)不太和諧，我們放大一個(gè)圖標(biāo)來展示下，比如這個(gè)：

這兩個(gè)配色，不論是在明度、飽和度、色相上都沒有關(guān)聯(lián)，所以看起來有點(diǎn)違和。

我們只要讓它稍微有點(diǎn)相同屬性，就會(huì)好很多，比如我們讓兩個(gè)顏色的色相有點(diǎn)關(guān)聯(lián)，都用藍(lán)色色相：

再比如讓兩個(gè)顏色飽和度有點(diǎn)關(guān)聯(lián)，都用比較灰的顏色，哪怕色相完全不同，都會(huì)比較和諧：

我們?cè)谧鲞@種圖標(biāo)描邊配色時(shí)候時(shí)候，一定要注意這個(gè)內(nèi)在關(guān)聯(lián)性的邏輯。

當(dāng)然，這里說的只是做圖標(biāo)描邊時(shí)候的配色，視覺畫面配色，不在討論范圍。

2.為什么你的圖標(biāo)看不清？

這個(gè)點(diǎn)之前其實(shí)有強(qiáng)調(diào)過，很多同學(xué)在做圖標(biāo)的時(shí)候很糊，像下面這組練習(xí)：

其中一個(gè)很重要的因素就是投影問題，投影千萬不要加的太重，要和你主體物的顏色區(qū)分開，比如我的主體物是藍(lán)色：

然后投影也用這個(gè)藍(lán)色：

那肯定很糊呀，所以我們必須要用一個(gè)淡藍(lán)色：

直接降低透明度也行，沒有什么操作成本，所以投影千萬別再和主體物黏在一起了。

3.對(duì)比就能出來基礎(chǔ)的設(shè)計(jì)感

很多時(shí)候，我們的設(shè)計(jì)感其實(shí)只要做好對(duì)比就能出來，比如下面這組信息：

我們做一個(gè)大小對(duì)比：

再做一個(gè)粗細(xì)對(duì)比：

再做一個(gè)深淺對(duì)比：

然后再來一個(gè)景上添花的樣式對(duì)比，就是數(shù)字來一個(gè)特殊數(shù)字：

這其實(shí)就算是比較穩(wěn)的一個(gè)效果了。

我們可以看一些界面：

他們里面也是用了這樣的對(duì)比，比如大小對(duì)比、樣式對(duì)比、深淺對(duì)比，再來點(diǎn)小圖形等等。

所以，一定要善用這些對(duì)比，讓你的設(shè)計(jì)更有層次，更有沖擊力。

4.平時(shí)多積累圖形的布爾運(yùn)算

平時(shí)在練習(xí)圖標(biāo)的時(shí)候，大家一定要多積累圖形的布爾運(yùn)算，以備不時(shí)之需。

比如火箭的外輪廓，當(dāng)頭部比較圓潤(rùn)的時(shí)候，我們可以直接用橢圓來做：

如果頭部比較尖的時(shí)候，我們可以用兩個(gè)橢圓相交切，然后再切：

像這樣的形狀，我們不僅可以做火箭頭，還可以做魚的外輪廓等等:

還可以做眼睛的外輪廓：

多去聯(lián)想，多去實(shí)踐，當(dāng)腦庫存達(dá)到一定量，我們就可以得心應(yīng)手了！

文章來源：UI中國   作者：菜心設(shè)計(jì)鋪
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)

文章來源：UI中國   作者：七月七咸
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)

前段時(shí)間在年終總結(jié)會(huì)上，產(chǎn)品經(jīng)理向設(shè)計(jì)團(tuán)隊(duì)提出了一個(gè)問題：怎么證明你的設(shè)計(jì)是有價(jià)值的？如何衡量驗(yàn)證Ui、UX的設(shè)計(jì)效果？

很多人都認(rèn)為，公司的業(yè)績(jī)?nèi)Q于產(chǎn)品和運(yùn)營，和設(shè)計(jì)師關(guān)系不大，甚至有些公司想取消年終績(jī)效。那么，改如何判斷設(shè)計(jì)結(jié)果是否好壞，設(shè)計(jì)產(chǎn)生的影響又該怎樣被量化？

我相信回復(fù)肯定是：可以通過數(shù)據(jù)來找到答案。 

但又會(huì)有新的問題出現(xiàn)：需要哪些數(shù)據(jù)可以驗(yàn)證設(shè)計(jì)效果？又該怎樣通過數(shù)據(jù)來判斷設(shè)計(jì)的效果究竟是好是壞？

滿意度

簡(jiǎn)單來說是用來衡量用戶對(duì)產(chǎn)品服務(wù)和體驗(yàn)的整體滿意程度。我們都知道，要提高滿意度，要滿足很多個(gè)條件，比如產(chǎn)品功能、運(yùn)行速度等。這里我們分兩個(gè)維度，用戶體驗(yàn)質(zhì)量和產(chǎn)品目標(biāo)。

1）用戶體驗(yàn)質(zhì)量

用戶體驗(yàn)指標(biāo)可以從凈推薦值（NPS）來衡量，凈推薦值意為用戶是否愿意將產(chǎn)品推薦給身邊人的指標(biāo)。凈推薦值是有一個(gè)公式：NPS值=推薦者所占比例-批評(píng)者比例。

• 9-10分（推薦者）：活躍度很高的用戶

• 7-8分（被動(dòng)者）：對(duì)產(chǎn)品滿意但忠誠度不高的用戶

• 0-6分（批評(píng)者）：對(duì)產(chǎn)品不滿意的用戶

還可以通過反饋，來收集功能或界面的問題反饋比例，更直觀的評(píng)估用戶操作過程中的感受反饋，來進(jìn)一步優(yōu)化迭代。

降低用戶的學(xué)習(xí)成本也能提高體驗(yàn)質(zhì)量，通俗的講，就是用戶對(duì)產(chǎn)品接受度和使用成本的高低，更偏向于產(chǎn)品和交互層面。

2）產(chǎn)品目標(biāo)

簡(jiǎn)單來說，就是希望產(chǎn)品上線以后，會(huì)達(dá)到什么樣的結(jié)果。

例如一個(gè)列表篩選功能，其核心目標(biāo)是為了讓用戶在多維度混合排列里找到自己想要的目標(biāo)群。

當(dāng)用戶篩選后，找到了想要的信息且進(jìn)入了目標(biāo)頁面，說明指標(biāo)已成功；反之沒找到想要的結(jié)果，中斷了操作流程，說明任務(wù)失敗。以此為依據(jù)，通過是否完成的維度來進(jìn)行衡量，確定篩選按鈕到任務(wù)界面的UV轉(zhuǎn)化率。

結(jié)合上面的用戶體驗(yàn)質(zhì)量，來驗(yàn)證設(shè)計(jì)需要注意哪些方面，關(guān)注哪些數(shù)據(jù)來達(dá)到目的。

活躍用戶數(shù)

通常觀察日活（DAU）和月活（MAU）就可以?；钴S用戶數(shù)用于衡量產(chǎn)品的用戶粘性，便于了解產(chǎn)品一段時(shí)間的用戶情況，了解產(chǎn)品的用戶變化趨勢(shì)。

日活（DAU）：一個(gè)用戶一天通過相同的渠道多次訪問產(chǎn)品，DAU仍只算一個(gè)；

月活（MAU）：在一月內(nèi)多次訪問產(chǎn)品，MAU仍只算一個(gè)。

日活越高，說明有剛需的忠實(shí)用戶越多。月活越高，說明新增的用戶越多，但未必是忠實(shí)用戶。當(dāng)然，活躍度的高低也需要根據(jù)用戶的停留時(shí)長(zhǎng)有一定的聯(lián)系。如果只是打開產(chǎn)品而并沒有使用，其實(shí)這個(gè)數(shù)據(jù)的意義并不是很大。 

用戶留存率

一般是衡量產(chǎn)品或功能的新用戶增長(zhǎng)程度，對(duì)產(chǎn)品或功能的新用戶占比。這對(duì)于新產(chǎn)品或新功能特別有用。

提取數(shù)據(jù)的一般周期為1日、7日或者30日。日留存率通常用來衡量產(chǎn)品粘性；周留存率通常用于判斷產(chǎn)生的忠實(shí)用戶數(shù)；月留存率通常用于衡量版本迭代的效果。

如果產(chǎn)品做了更新迭代，并且提升了月留存率，而其他變量沒有變化時(shí)，說明此次迭代很成功。所以通過留存率可以很直觀的判斷產(chǎn)品的用戶粘性是上升還是下降。同時(shí)老用戶的留存率也需要關(guān)注，好的更新迭代不僅可以留住新用戶，還可以喚醒“沉睡用戶”。

完成率

衡量流程設(shè)計(jì)的合理性，通常用于產(chǎn)品中主要任務(wù)流程的內(nèi)容，這里單指設(shè)計(jì)中操作流程的順暢度。

完成率是產(chǎn)品設(shè)計(jì)中重要的指標(biāo)之一，完成率越高，產(chǎn)品的操作體驗(yàn)就越好。

最后

數(shù)據(jù)只是有效驗(yàn)證的方法之一，并不是萬能的。就如調(diào)查問卷一樣，都會(huì)有一定的局限性和不確定性，數(shù)據(jù)能明確看到結(jié)果，但不能說明具體原因，只能作為支撐來驗(yàn)證設(shè)計(jì)師的想法或決定，但無法代替設(shè)計(jì)直覺、用戶研究和設(shè)計(jì)可用性。

文章來源：站酷   作者：UX設(shè)計(jì)幫
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)