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

騰訊企點往期實戰(zhàn)案例復盤：

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

任務流程復雜；

界面信息量大、復雜度高；

核心功能操作步驟繁瑣

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

新功能透傳不夠直觀；

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在工作臺左側最近會話列表不同角色有不同的信息展示：

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

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

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

界面焦點分散？-強化視覺吸引與視覺反饋

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

提高機器人回答反饋收集率

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

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

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

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

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

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

快捷回復層級簡化

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

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

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

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

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

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

客戶端新手引導氛圍渲染

新用戶首次打開客戶端時，需要進行一些簡單的設置，用戶對于彈框形式的新功能會下意識的點擊右上角關閉，阻礙了功能的介紹和初始設置的完成度。

客戶端的彈框受眾和對應的目標為以下三種：

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

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

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

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

動態(tài)引導圖上線后，相對于以往的靜態(tài)引導方案，點擊率有約 50%的提升。

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 動效基礎原則

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

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

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

2. 動效曲線的建立

建立動效規(guī)范如同建立設計規(guī)范一樣，是一個復雜且龐大的工程，這里以動效曲線的建立為例，闡述動效規(guī)格的建立過程。

深入運動的本質(zhì)

"運動太生硬了"、"不夠流暢"、"怎么這么拖沓"、"不錯哦，看著比較舒服"

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

從品牌內(nèi)核到運動力學

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

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

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

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

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

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

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

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

基于此得到最終的運動曲線：輕快有力的控制感，延綿流暢的舒適感。

同時針對進入與退出場景增加兩種曲線：

動畫時長

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

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

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

3. 建立品牌動效體系

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

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

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

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

將動態(tài)素材化，可以應用到企點內(nèi)外輸出的任何需要動態(tài)演繹的地方。

小結

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