業務背景

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

1、業務多：30多個產品應用

2、角色多：覆蓋消費者、客服小二、服務管理、業務運營、中臺管理、客戶  6大類用戶群體。

3、體驗復雜：設計師需兼顧用戶和客戶兩個視角。

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

標準化怎么做

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

案例實戰

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

1、業務現狀

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

2、問題

體驗不一致：各個工作臺頁面架構、組件、樣式野蠻生長，缺少規范導致體驗不統一。

低效：部分場景缺失，組件重復建設，大量定制；溝通協同內耗大，成本高。

3、策略

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

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

4、體驗統一

包括框架、組件、樣式。

框架

(1) 現有頁面收集

(2) 用戶場景分析

(3) 頁面歸類

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

(4) 確定典型布局

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

組件

(1) 頁面結構分析

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

(2) 模塊層分類

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

(3) 模塊專項治理

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

樣式

(1) 確定優化內容

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

(2) 確定組件范圍

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

(3) 布局

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

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

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

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

(4) 色板

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

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

(5) 字體

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

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

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

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

(6) 動效

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

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

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

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

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

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

5、提效

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

整體思路

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

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

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

交付內容

1、業務設計師：sketch/figma物料 (樣式、組件、區塊、模板、規則 )

2、業務設計師：kitchen工具（樣式、組件、區塊、模板）

3、組件工程師：組件規范/組件官網

交付機制

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

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

6、衡量

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

總結

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

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

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

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

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

原文地址：AlibabaDesign（公眾號）

作者：CCO 設計

轉載請注明：學UI網》如何做B端體驗標準化：以數據可視化場景為例

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司