如何做好B端體驗標準化？用阿里的數據可視化案例教你！

在 B 類業務里，服務多產品、多角色、體驗復雜，設計師該如何做好體驗標準化，保障基礎體驗一致性？下面我將從實戰案例同大家分享。

更多B端設計干貨：

一、業務背景

以我們 CCO 體驗設計團隊為例，主要服務阿里體系的消費者、商家、經濟體等業務領域。隨著業務不斷擴大、用戶角色多、體驗復雜、設計師人力有限、定制化需求不斷增加，設計面臨嚴峻挑戰。

1. 業務多：30 多個產品應用
2. 角色多：覆蓋消費者、客服小二、服務管理、業務運營、中臺管理、客戶 6 大類用戶群體。
3. 體驗復雜：設計師需兼顧用戶和客戶兩個視角。

從組織上，85% 設計師縱向支撐業務，15% 設計師橫向做標準化，反哺業務設計師。標準化實質解決的問題是保障基礎體驗一致性。

二、標準化怎么做

核心通過頁面梳理、抽象、分發、衡量，保障基礎體驗一致性。

三、案例實戰

以數據可視化場景為例，講述如何做標準化。

1. 業務現狀

共有 11 個應用，涉及 89 個頁面。

2. 問題

體驗不一致：各個工作臺頁面架構、組件、樣式野蠻生長，缺少規范導致體驗不統一。
低效：部分場景缺失，組件重復建設，大量定制；溝通協同內耗大，成本高。

3. 策略

體驗統一：框架、組件、樣式。

提效：代碼化、工具、交付機制。

4. 體驗統一

包括框架、組件、樣式。

① 框架

現有頁面收集

用戶場景分析：

頁面歸類：

結合用戶看數內容（例：概覽、分析、詳情）和交互形態（例：平鋪、下鉆），對頁面進行歸類。

通過統計高頻復用形態，確定典型布局。

② 組件

頁面結構分析

組件的收斂，需要先對頁面分析，確定模塊層內容。例：模塊包含頁頭、篩選、圖表、表格。

模塊層分類

橫向收集全部業務，將模塊層分類。細分模塊擴展形態，放到對應的簍子里。

模塊專項治理

接下來，需要對每一個模塊進行專項治理。比如圖表模塊，再拆再抽象成指標、圖表、單選、多選 4 類場景。場景里再對主體和變體（也就是擴展形態）分類。

③ 樣式

確定優化內容

圍繞視覺凌亂，要做的便是完善設計語言。設計師需要結合自身技術底層，補充缺失規范。例如布局、色板、字體、動效。

確定組件范圍

通過統計高頻復用組件，確定需要梳理的組件范圍。

布局

圖例位置：線上有 9 種，通過從業務場景按閱讀順序劃分，最終收斂成 2 種。

組件高度：真實線上情況，只能看 2 個指標，高度規范缺失。

需要根據用戶分辨率調研，提煉典型分辨率。比如用戶是 win 系統，包含菜單欄、任務欄等默認高度，再減去本身頁面頁頭等默認高度，得到 3 檔。確定組件建議默認行高 240px。

軸標簽旋轉角度：現狀有順/逆時針兩種，通過分析標簽類型，結合閱讀順序、軸與標簽親密度，確定默認角度為順時針。

色板

通過場景梳理，確定不同組件使用的色板類型及缺失色板。

補充語義色板：從業務里抽象 2 類場景，指標和柱/餅/環場景，定義顏色。例如帶正面語義，用綠色，比如升、已到崗、正常。帶負面語義，用紅色，比如降、曠工、失敗。

字體

結合自身業務場景問題，從場景、版權、風格、識別、極值共 5 個維度選擇字體。

舉例場景一，縱向數據場景里，將市面上數據競品用到的字體都橫向鋪開嘗試，做排除法。比如 din 沒版權，蘋方非等寬字體，普惠 102 識別性弱。

舉例場景二，在核心數據呈現中，helvetica 品牌風格弱，普惠在 1 億以上極值過寬。

最終我們根據自身業務場景特征，用普惠和普惠 102，運用在對應場景里。并同前端提煉規則。

動效

首先，需要確定動效價值，明確動效需要解決的問題。這里圍繞舒適度、活力、層級、反饋來講。

通過動效場景鏈路分析，確定優化范圍。

加載動效：圍繞讓用戶認知過程更為自然。通過組件橫向梳理、抽象圖形、組合樣式的思路，輸出方案。比如這里共梳理 17 種組件類型，抽象成 9 類，包括點、線、面、餅、環、柱、文本、圖標、詞云，再進行組合產出方案。

出場動效：通過業務分析、提煉場景、優化效果。比如這里共提煉 3 類場景，有通用、監控、輿情。圍繞過渡不自然、卡頓、缺少情感化表達來優化效果。

瀏覽動效：通過提煉場景，來強化元素之間的層級與空間關系。比如單個組件、聯動、下鉆場景下，圍繞點擊感知弱、重點不突出、缺少懸停態來優化效果。

沉淀速度參數：將優化動效場景的速度參數，同前端約定規則沉淀組件庫。

5. 提效

包含代碼化提效、工具提效、機制提效。

整體思路

從設計組內到技術產研的提效過程。

提效面向用戶依次是：組件設計師、業務設計師、前端、產品。

搭建目前還在進行中，這里主要從交付-工具-代碼化來分析。

交付內容

1. 業務設計師：sketch/figma 物料 (樣式、組件、區塊、模板、規則 )
2. 業務設計師：kitchen 工具（樣式、組件、區塊、模板）
3. 組件工程師：組件規范/組件官網

交付機制

新需求：通過評估復用性、抽象、內審、沉淀物料。

現有業務：通過頁面梳理歸類、抽象、內審、沉淀物料。

6. 衡量

從物理到行為層，包括樣式、組件、框架、組件交互 共 4 個維度。通過一致性評分衡量標準化覆蓋的好壞。

四、總結

回歸課程，在 B 類業務里，服務多個產品、多用戶角色、體驗復雜的場景下，在定制化+標準化團隊陣型里，標準化實質解決的問題是保障 60 分基礎體驗一致性。

總結：B 端體驗標準化包括物料的產出、交付以及衡量標準。

產出：包括框架、組件、樣式的收斂來梳理、抽象頁面。

交付：面向 2 類用戶群體，業務設計，需交付物料和工具。組件工程師，代碼化需提供組件規范，組件線上化需助力組件官網的建設。

衡量：一致性評分包括樣式、組件、框架及組件交互。

歡迎關注作者的微信公眾號：「AlibabaDesign」