企業級產品中常見的問題

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

騰訊企點往期實戰案例復盤：

1. 產品界面信息量大，操作繁瑣

任務流程復雜；

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

核心功能操作步驟繁瑣

2. 產品功能復雜，用戶難 get

新功能透傳不夠直觀；

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

3. 品牌形象對外宣傳不統一

品牌動態對外宣發文章/素材 logo 缺乏統一形象。

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

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

Part 1 巧用動效，提升產品體驗友好度

Part 2 動效傳遞功能亮點，產品特性秒 get

Part 3 基于品牌內核，建立動效設計系統

Part 1.巧用動效，提升產品易用性

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

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

知識庫內容展示層級優化

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

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

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

客服工作臺信息響應規則優化

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

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

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

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

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

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

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

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

功能指引內容外露，提高用戶教育效果

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

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

操作步驟繁瑣？-優化層級減少額外步驟

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

快捷回復層級簡化

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

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

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

Part 2.動效傳遞功能亮點，產品特性秒 get

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

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

客戶端新手引導氛圍渲染

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

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

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

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

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

針對老產品升級用戶，動態語義上強調穿越到新世界的感覺，表達了新產品完善的功能：

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

電子行業商機應用氛圍渲染

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

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

宣傳視頻流程化，提升產出效率與質量

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

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

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

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

Part 3.基于品牌內核，建立動效設計系統

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

1. 協同設計下，如何保證設計的統一性，

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

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

1. 動效基礎原則

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

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

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

2. 動效曲線的建立

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

深入運動的本質

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

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

從品牌內核到運動力學

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

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

從品牌內核出發，基于動效基礎原則，得到 輕質、有力、連續變化 這三個關鍵詞來描述材質和力。

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

有力 即施加在物體上的力數值大，以實現流暢與快速響應的效果；

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

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

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

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

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

動畫時長

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

時長的規則：輕快高效，退出快于進入，大質量物體時長大于小質量物體時長：

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

3. 建立品牌動效體系

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

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

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

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

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

小結

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