騰訊企點(diǎn)產(chǎn)品線，包括客服、電話營銷、商通等 SaaS 產(chǎn)品，產(chǎn)品受眾角色多，業(yè)務(wù)場景復(fù)雜，由于角色與場景的復(fù)雜性，在產(chǎn)品設(shè)計(jì)中也遇到了一些問題：

騰訊企點(diǎn)往期實(shí)戰(zhàn)案例復(fù)盤：

1. 產(chǎn)品界面信息量大，操作繁瑣

任務(wù)流程復(fù)雜；

界面信息量大、復(fù)雜度高；

核心功能操作步驟繁瑣

2. 產(chǎn)品功能復(fù)雜，用戶難 get

新功能透傳不夠直觀；

視頻等功能透傳效果好的形式制作成本高；

3. 品牌形象對(duì)外宣傳不統(tǒng)一

品牌動(dòng)態(tài)對(duì)外宣發(fā)文章/素材 logo 缺乏統(tǒng)一形象。

面對(duì)上述問題，除了常規(guī)的交互視覺優(yōu)化外，探索基于動(dòng)效的方式來解決企點(diǎn)在用戶體驗(yàn)、用戶教育、品牌傳遞三個(gè)方向的問題，提升用戶教育效果，標(biāo)準(zhǔn)化視頻制作流程提高視頻質(zhì)量并降低制作成本，建立可持續(xù)的動(dòng)效設(shè)計(jì)系統(tǒng)，規(guī)范動(dòng)效在產(chǎn)品內(nèi)外的設(shè)計(jì)，提高易用性與統(tǒng)一性。

基于上述三大方向遇到的問題，我將從以下三個(gè)方面來介紹：

Part 1 巧用動(dòng)效，提升產(chǎn)品體驗(yàn)友好度

Part 2 動(dòng)效傳遞功能亮點(diǎn)，產(chǎn)品特性秒 get

Part 3 基于品牌內(nèi)核，建立動(dòng)效設(shè)計(jì)系統(tǒng)

Part 1.巧用動(dòng)效，提升產(chǎn)品易用性

任務(wù)流程復(fù)雜？- 聚焦核心任務(wù)、優(yōu)化信息布局與優(yōu)先級(jí)分層

結(jié)合場景梳理任務(wù)流程，通過動(dòng)效將界面信息層級(jí)與操作優(yōu)先級(jí)結(jié)合，聚焦核心任務(wù)，從而降低界面信息復(fù)雜度。

知識(shí)庫內(nèi)容展示層級(jí)優(yōu)化

在客服工作臺(tái)中，訪客的問題命中了知識(shí)庫的內(nèi)容，則會(huì)展示知識(shí)庫的預(yù)設(shè)內(nèi)容，輔助客服進(jìn)行回答，以提高接待的效率。由于每個(gè)問題對(duì)應(yīng)的回答內(nèi)容長度與形式不一，如果直接展示這些信息，有可能會(huì)導(dǎo)致寸土寸金的聊天窗被輔助文本占用過大的區(qū)域，影響客服操作。

因此在設(shè)計(jì)策略上，需要將信息進(jìn)行分層，將命中內(nèi)容拆分為摘要和全部信息，當(dāng)觸發(fā)知識(shí)庫的內(nèi)容時(shí)，先展示摘要，客服可以快速判斷是否需要，如果是則進(jìn)一步展開查看全部信息，確認(rèn)無誤后發(fā)送給訪客或者編輯后發(fā)送給訪客。

通過動(dòng)效，將命中內(nèi)容改為抽屜式的展開與收起，把信心拆分成多級(jí)展示，既保證了整體頁面區(qū)域的信息展示，又能夠通過簡略信息判斷下一步的操作，提高了操作效率。

客服工作臺(tái)信息響應(yīng)規(guī)則優(yōu)化

在工作臺(tái)左側(cè)最近會(huì)話列表不同角色有不同的信息展示：

標(biāo)簽是判斷客戶的重要信息來源，以往的標(biāo)簽存在單個(gè)標(biāo)簽字?jǐn)?shù)顯示固定 3 個(gè)，標(biāo)簽數(shù)量顯示固定 3 個(gè)的問題，導(dǎo)致標(biāo)簽可讀性低、容易產(chǎn)生混淆、空間利用率低。

因此優(yōu)化的策略是在有限的空間內(nèi)展示更多標(biāo)簽，且不降低可讀性，這里分兩個(gè)維度考慮：1.標(biāo)簽展示的數(shù)量；2.標(biāo)簽內(nèi)文字?jǐn)?shù)。其一是影響判斷客戶的維度，二是單個(gè)標(biāo)簽信息展示的可讀性。

通過動(dòng)態(tài)的響應(yīng)規(guī)則，優(yōu)先滿足可讀性的情況下，充分利用空間，客服標(biāo)簽信息快速在列表中判斷不同的客戶，根據(jù)實(shí)際需要選擇應(yīng)答，提前做好話術(shù)準(zhǔn)備，提高接待效率與服務(wù)的質(zhì)量。

界面焦點(diǎn)分散？-強(qiáng)化視覺吸引與視覺反饋

動(dòng)效可以吸引用戶的焦點(diǎn)，在基于瀏覽器的中后臺(tái)界面中，使用者大多是多焦點(diǎn)工作，以提高工作流的效率，對(duì)一個(gè)工作流中的功能，適當(dāng)?shù)沫h(huán)節(jié)加入動(dòng)效，可以引導(dǎo)用戶按照預(yù)設(shè)的流程工作，從而提高單點(diǎn)功能的預(yù)期效果。

提高機(jī)器人回答反饋收集率

客戶與客服溝通過程中，企業(yè)會(huì)引入客服機(jī)器人對(duì)客戶服務(wù)以降低人工成本，初期接入機(jī)器人回答的能力后，存在未能解決用戶問題的回答，除了通過算法進(jìn)行調(diào)優(yōu)以外，在功能設(shè)計(jì)上也需要為用戶提供反饋通道，通過點(diǎn)贊或者點(diǎn)踩，可以疏導(dǎo)因機(jī)器人回答不準(zhǔn)確導(dǎo)致的用戶情緒，并幫助機(jī)器人優(yōu)化回答精度，利用 hover、press 等操作方式，引導(dǎo)用戶反饋，手型變化趨勢亦可降低點(diǎn)錯(cuò)率。

功能指引內(nèi)容外露，提高用戶教育效果

企點(diǎn)中后臺(tái)頁面中，部分功能比較復(fù)雜不好上手，將幫助內(nèi)容做成視頻的形式可以提高用戶教育效果，為讓幫助內(nèi)容觸手可及，在中后臺(tái)配置頁的右下方集成播放組件，為企業(yè)提供更專業(yè)的配置指南，每次進(jìn)入頁面時(shí)，自動(dòng)展開具備吸引力的文案，在一段時(shí)間后收起。

在合適的時(shí)機(jī)通過展開的動(dòng)畫吸引用戶轉(zhuǎn)移焦點(diǎn)，自動(dòng)收起邏輯避免用戶不需要的情況下遮擋頁面的內(nèi)容。

操作步驟繁瑣？-優(yōu)化層級(jí)減少額外步驟

核心路徑的工作流中，引入支線的操作往往會(huì)打斷主線任務(wù)的操作，降低主線工作流效率，將支線任務(wù)通過同一界面的不同層級(jí)進(jìn)行優(yōu)化，以降低對(duì)主線操作的影響，從而提高主線工作流效率。

快捷回復(fù)層級(jí)簡化

快捷回復(fù)是客服的高頻核心功能，在 PC 端我們利用 hover、雙擊等多種交互方式可實(shí)現(xiàn)快捷編輯與發(fā)送，但移動(dòng)端交互方式以觸摸為主，如何讓移動(dòng)端也有類似 PC 端的高效操作呢？

在頁面層級(jí)，移動(dòng)端定義了一套彈層頁面規(guī)范，彈層的應(yīng)用場景為臨時(shí)的操作或展示，在于不打斷操作流程，減少頁面跳轉(zhuǎn)。

快捷回復(fù)的內(nèi)容用彈層來承載，減少頁面間的跳轉(zhuǎn)，并利用層級(jí)關(guān)系做不同層級(jí)間的交互，也可長按拖動(dòng)直接發(fā)送，在習(xí)慣這種發(fā)送方式后，可以更加直觀高效的發(fā)送快捷回復(fù)內(nèi)容，也減少了操作步驟。

Part 2.動(dòng)效傳遞功能亮點(diǎn)，產(chǎn)品特性秒 get

產(chǎn)品功能總被忽略？- 氛圍動(dòng)效吸引用戶駐足

經(jīng)常會(huì)遇到新的產(chǎn)品功能使用數(shù)據(jù)不理想的情況，也許是內(nèi)容透傳的時(shí)機(jī)和內(nèi)容本身不夠吸引力，從而被用戶忽略，將產(chǎn)品的核心能力與具有吸引力的內(nèi)容結(jié)合，往往可以達(dá)到更好的透傳效果。

客戶端新手引導(dǎo)氛圍渲染

新用戶首次打開客戶端時(shí)，需要進(jìn)行一些簡單的設(shè)置，用戶對(duì)于彈框形式的新功能會(huì)下意識(shí)的點(diǎn)擊右上角關(guān)閉，阻礙了功能的介紹和初始設(shè)置的完成度。

客戶端的彈框受眾和對(duì)應(yīng)的目標(biāo)為以下三種：

• 新用戶首次使用：需進(jìn)行簡單的設(shè)置，同時(shí)承載核心亮點(diǎn)功能的透傳；
• 老用戶版本迭代：新版本升級(jí)后對(duì)于版本一系列的新功能介紹；
• 老產(chǎn)品升級(jí)用戶：除了新老用戶外，企點(diǎn)還存在從老產(chǎn)品遷移至企點(diǎn)的老用戶，因此更多是介紹兩者的不同，企點(diǎn)的優(yōu)勢等。

彈框內(nèi)的信息比較重要，設(shè)計(jì)方案上考慮動(dòng)效的形式，在首屏吸引用戶關(guān)注，提高點(diǎn)擊率。

通過輕松自然的客服形象，圍繞企點(diǎn)輕快、親和的品牌元素，周圍的聊天氣泡代表高效的消息處理，營造出輕松高效的氛圍。

針對(duì)老產(chǎn)品升級(jí)用戶，動(dòng)態(tài)語義上強(qiáng)調(diào)穿越到新世界的感覺，表達(dá)了新產(chǎn)品完善的功能：

動(dòng)態(tài)引導(dǎo)圖上線后，相對(duì)于以往的靜態(tài)引導(dǎo)方案，點(diǎn)擊率有約 50%的提升。

電子行業(yè)商機(jī)應(yīng)用氛圍渲染

在電子行業(yè)商機(jī)應(yīng)用中，商機(jī)對(duì)于中間商來說意味著成單與獲客的機(jī)會(huì)、銷售額的增長，用戶首次進(jìn)入時(shí)會(huì)有動(dòng)態(tài)商機(jī)墻，鋪面滿眼的商機(jī)，在告訴用戶使用這個(gè)應(yīng)用可以獲得海量的商機(jī)，除了吸引用戶的效果外，也起到傳遞產(chǎn)品核心能力的作用。

在商機(jī)列表頁也增加了輪播廣播，商機(jī)熱度等動(dòng)態(tài)，營造出熱鬧、緊俏的商業(yè)交易氛圍：

宣傳視頻流程化，提升產(chǎn)出效率與質(zhì)量

做好產(chǎn)品的同時(shí)，如何賣出去也同樣重要。在銷售過程中，傳遞產(chǎn)品的亮點(diǎn)與能力，最終打動(dòng)決策者，可以提高銷售業(yè)績。

企點(diǎn)產(chǎn)品主要通過各級(jí)經(jīng)銷商售賣，以往是經(jīng)銷商將產(chǎn)品賣點(diǎn)功能通過錄屏，并播放給客戶，這種視頻主次區(qū)分不明顯，且視頻冗長，往往效果不是很好，影響成交率，進(jìn)而影響到銷售業(yè)績；但更好的效果意味著更多的工作量，如何在不增加工作量的前提下提高視頻的效果，為滿足于此，建立教育內(nèi)容素材制作流程，包括視頻腳本流程、轉(zhuǎn)場素材、合作規(guī)范等；基于標(biāo)準(zhǔn)化的流程，可快速生成高質(zhì)量內(nèi)容。

當(dāng)有新的視頻需求時(shí)，可快速拉通相應(yīng)負(fù)責(zé)人，同步視頻受眾與核心用戶場景，提煉串聯(lián)的核心能力并套入腳本模版，制作過程根據(jù)視頻內(nèi)容套入合適的轉(zhuǎn)場素材，并快速輸出多設(shè)備多渠道的宣傳視頻，幫助商務(wù)講好故事，幫助銷售講好功能，幫助產(chǎn)品做好宣傳。

相對(duì)于以往制作視頻，平均制作時(shí)長從 2 周左右一條優(yōu)化為 4 天左右一條，同時(shí)視頻的質(zhì)量與統(tǒng)一性也有比較好的提升。

Part 3.基于品牌內(nèi)核，建立動(dòng)效設(shè)計(jì)系統(tǒng)

當(dāng)越來越多的需求與功能我們開始用動(dòng)效來解決時(shí)，也會(huì)發(fā)現(xiàn)一些問題：

1. 協(xié)同設(shè)計(jì)下，如何保證設(shè)計(jì)的統(tǒng)一性，

2. 動(dòng)畫緩動(dòng)是否有據(jù)可循，時(shí)長如何定義，

3. 協(xié)同設(shè)計(jì)下，動(dòng)效的認(rèn)知不同，從理性和感性兩個(gè)方向來考量，從設(shè)計(jì)者角度來看，應(yīng)該更多的理性來思考如何構(gòu)建一個(gè)具備特定調(diào)性的動(dòng)效，從觀看者交互來看，更多的理性感受動(dòng)效所傳達(dá)的調(diào)性。

1. 動(dòng)效基礎(chǔ)原則

在企點(diǎn)的產(chǎn)品線中，動(dòng)效也會(huì)應(yīng)用在產(chǎn)品體驗(yàn)、用戶教育與品牌傳遞三個(gè)領(lǐng)域，業(yè)務(wù)的深度和廣度都比較大，因此須有指導(dǎo)原則來統(tǒng)一動(dòng)效的設(shè)計(jì)，使用戶在企點(diǎn)產(chǎn)品中獲得一致的體驗(yàn)與感受，從而形成固有印象，加深對(duì)于產(chǎn)品認(rèn)知度。

企點(diǎn)體系的產(chǎn)品調(diào)性是一致的，動(dòng)態(tài)的語意也需要保持與品牌調(diào)性一致，基于企點(diǎn)的品牌內(nèi)核：輕快、高效、親和，來指導(dǎo)企點(diǎn)的動(dòng)效基礎(chǔ)原則，再規(guī)范企點(diǎn)不同領(lǐng)域的動(dòng)效設(shè)計(jì)，從而保證企點(diǎn)整體的調(diào)性一致。

將品牌內(nèi)核的關(guān)鍵詞映射到動(dòng)效的主觀感受上，得出更加具體的關(guān)鍵詞：

2. 動(dòng)效曲線的建立

建立動(dòng)效規(guī)范如同建立設(shè)計(jì)規(guī)范一樣，是一個(gè)復(fù)雜且龐大的工程，這里以動(dòng)效曲線的建立為例，闡述動(dòng)效規(guī)格的建立過程。

深入運(yùn)動(dòng)的本質(zhì)

"運(yùn)動(dòng)太生硬了"、"不夠流暢"、"怎么這么拖沓"、"不錯(cuò)哦，看著比較舒服"

這些描述大多基于主觀感受，難以量化，需要將主觀感受抽象成客觀可量化的指標(biāo)。將運(yùn)動(dòng)曲線量化為客觀的物理世界的規(guī)則，連接品牌內(nèi)核與運(yùn)動(dòng)感受。

從品牌內(nèi)核到運(yùn)動(dòng)力學(xué)

力是改變物體運(yùn)動(dòng)狀態(tài)的原因，要量化運(yùn)動(dòng)的變化的前提，是量化力的變化。

運(yùn)動(dòng)過程中兩個(gè)重要的元素：材質(zhì) 和 力。不同的材質(zhì)和力，會(huì)產(chǎn)生不同的運(yùn)動(dòng)變化曲線。

從品牌內(nèi)核出發(fā)，基于動(dòng)效基礎(chǔ)原則，得到 輕質(zhì)、有力、連續(xù)變化 這三個(gè)關(guān)鍵詞來描述材質(zhì)和力。

輕質(zhì) 即物體質(zhì)量較小，可以迅速響應(yīng)力的變化，以實(shí)現(xiàn)輕盈、簡短的效果；

有力 即施加在物體上的力數(shù)值大，以實(shí)現(xiàn)流暢與快速響應(yīng)的效果；

連續(xù)變化 即力的大小與方向并非固定的數(shù)值，會(huì)隨著時(shí)間變化，以實(shí)現(xiàn)緩和舒服的效果。

反應(yīng)到實(shí)際的運(yùn)動(dòng)中，輕質(zhì)的物體與大數(shù)值的力，會(huì)在很短的時(shí)間內(nèi)進(jìn)入最大速度，同時(shí)通過連續(xù)變化的力，迅速減少力的大小，在中后期進(jìn)入緩和。

在感知范疇，人的感知變化總是比變化晚一些，物體產(chǎn)生變化，到人感知之間有個(gè)時(shí)間差，且持續(xù)變化的沖擊，會(huì)產(chǎn)生心里壓力，如果在適應(yīng)變化的節(jié)點(diǎn)減少?zèng)_擊，則會(huì)感到舒適。

基于此得到最終的運(yùn)動(dòng)曲線：輕快有力的控制感，延綿流暢的舒適感。

同時(shí)針對(duì)進(jìn)入與退出場景增加兩種曲線：

動(dòng)畫時(shí)長

相同大小的力，作用于不同質(zhì)量的物體上，達(dá)到同一效果的時(shí)長不同，質(zhì)量越大的物體時(shí)長越長，因此，越大的元素運(yùn)動(dòng)時(shí)長越長，同時(shí)保持效率為先，適當(dāng)縮短整體時(shí)長，抵消滯留感。

時(shí)長的規(guī)則：輕快高效，退出快于進(jìn)入，大質(zhì)量物體時(shí)長大于小質(zhì)量物體時(shí)長：

回顧曲線建立的流程，以企點(diǎn)品牌關(guān)鍵詞為內(nèi)核，以動(dòng)效基礎(chǔ)原則為基底，以理性規(guī)則為表層，最終建立標(biāo)準(zhǔn)化動(dòng)效曲線，同樣適用于其他動(dòng)效設(shè)計(jì)系統(tǒng)的建設(shè)。

3. 建立品牌動(dòng)效體系

所有企點(diǎn)對(duì)外宣傳文章、視頻、展會(huì)等都是是曝光企點(diǎn)品牌的機(jī)會(huì)，動(dòng)態(tài)的品牌元素可以在短暫的與客戶交互的機(jī)會(huì)中，加深對(duì)企點(diǎn)品牌的印象。

基于企點(diǎn)的品牌內(nèi)核，同時(shí)對(duì)企點(diǎn) logo 設(shè)計(jì)元素進(jìn)行拆解，提取空間透視作為 logo 動(dòng)態(tài)演繹的 DNA。

強(qiáng)烈的空間感還原了企點(diǎn) logo 的形成過程，線條輾轉(zhuǎn)向上的動(dòng)態(tài)語義也對(duì)應(yīng)了騰訊企點(diǎn)幫助客戶實(shí)現(xiàn)業(yè)績向上，實(shí)現(xiàn)客戶成功的愿景。

企點(diǎn)的子產(chǎn)品眾多，在各領(lǐng)域的應(yīng)用須有統(tǒng)一的品牌調(diào)性，也要體現(xiàn)子產(chǎn)品的特點(diǎn)，因此子產(chǎn)品圖形形態(tài)的是基于母品牌動(dòng)態(tài) logo，并結(jié)合了各個(gè)子產(chǎn)品的核心功能；比如客服選擇氣泡溝通元素，動(dòng)態(tài)語意表達(dá)出親和、輕松順暢的服務(wù)溝通；"營銷"采用抽象的漏斗三角元素，動(dòng)態(tài)語意凸顯倒三角的復(fù)購和裂變等。

將動(dòng)態(tài)素材化，可以應(yīng)用到企點(diǎn)內(nèi)外輸出的任何需要?jiǎng)討B(tài)演繹的地方。

小結(jié)

企業(yè)級(jí)產(chǎn)品面向的業(yè)務(wù)場景和角色都比較復(fù)雜，除了交互視覺上的設(shè)計(jì)策略外，探索動(dòng)效設(shè)計(jì)系統(tǒng)在 to B 業(yè)務(wù)的用戶體驗(yàn)、用戶教育、品牌傳遞三個(gè)方向發(fā)揮的作用，為業(yè)務(wù)帶來更大的增益，為產(chǎn)品提供更好的體驗(yàn)。