業(yè)務(wù)背景
以我們 CCO 體驗設(shè)計團隊為例，主要服務(wù)阿里體系的消費者、商家、經(jīng)濟體等業(yè)務(wù)領(lǐng)域。隨著業(yè)務(wù)不斷擴大、用戶角色多、體驗復(fù)雜、設(shè)計師人力有限、定制化需求不斷增加，設(shè)計面臨嚴(yán)峻挑戰(zhàn)。
1、業(yè)務(wù)多：30多個產(chǎn)品應(yīng)用
2、角色多：覆蓋消費者、客服小二、服務(wù)管理、業(yè)務(wù)運營、中臺管理、客戶 6大類用戶群體。
3、體驗復(fù)雜：設(shè)計師需兼顧用戶和客戶兩個視角。
從組織上，85% 設(shè)計師縱向支撐業(yè)務(wù)，15% 設(shè)計師橫向做標(biāo)準(zhǔn)化，反哺業(yè)務(wù)設(shè)計師。標(biāo)準(zhǔn)化實質(zhì)解決的問題是保障基礎(chǔ)體驗一致性。
標(biāo)準(zhǔn)化怎么做
核心通過頁面梳理、抽象、分發(fā)、衡量，保障基礎(chǔ)體驗一致性。
案例實戰(zhàn)
以數(shù)據(jù)可視化場景為例，講述如何做標(biāo)準(zhǔn)化。
1、業(yè)務(wù)現(xiàn)狀
共有11個應(yīng)用，涉及89個頁面。
2、問題
體驗不一致：各個工作臺頁面架構(gòu)、組件、樣式野蠻生長，缺少規(guī)范導(dǎo)致體驗不統(tǒng)一。
低效：部分場景缺失，組件重復(fù)建設(shè)，大量定制；溝通協(xié)同內(nèi)耗大，成本高。
3、策略
體驗統(tǒng)一：框架、組件、樣式。
提效：代碼化、工具、交付機制。
4、體驗統(tǒng)一
包括框架、組件、樣式。
框架
(1) 現(xiàn)有頁面收集
(2) 用戶場景分析
(3) 頁面歸類
結(jié)合用戶看數(shù)內(nèi)容（例：概覽、分析、詳情）和交互形態(tài)（例：平鋪、下鉆），對頁面進(jìn)行歸類。
(4) 確定典型布局
通過統(tǒng)計高頻復(fù)用形態(tài)，確定典型布局。
組件
(1) 頁面結(jié)構(gòu)分析
組件的收斂，需要先對頁面分析，確定模塊層內(nèi)容。例：模塊包含頁頭、篩選、圖表、表格。
(2) 模塊層分類
橫向收集全部業(yè)務(wù)，將模塊層分類。細(xì)分模塊擴展形態(tài)，放到對應(yīng)的簍子里。
(3) 模塊專項治理
接下來，需要對每一個模塊進(jìn)行專項治理。比如圖表模塊，再拆再抽象成指標(biāo)、圖表、單選、多選 4類場景。場景里再對主體和變體（也就是擴展形態(tài)）分類。
樣式
(1) 確定優(yōu)化內(nèi)容
圍繞視覺凌亂，要做的便是完善設(shè)計語言。設(shè)計師需要結(jié)合自身技術(shù)底層，補充缺失規(guī)范。例如布局、色板、字體、動效。
(2) 確定組件范圍
通過統(tǒng)計高頻復(fù)用組件，確定需要梳理的組件范圍。
(3) 布局
圖例位置：線上有9種，通過從業(yè)務(wù)場景按閱讀順序劃分，最終收斂成2種。
組件高度：真實線上情況，只能看2個指標(biāo)，高度規(guī)范缺失。
需要根據(jù)用戶分辨率調(diào)研，提煉典型分辨率。比如用戶是win系統(tǒng)，包含菜單欄、任務(wù)欄等默認(rèn)高度，再減去本身頁面頁頭等默認(rèn)高度，得到 3 檔。確定組件建議默認(rèn)行高 240px。
軸標(biāo)簽旋轉(zhuǎn)角度：現(xiàn)狀有順/逆時針兩種，通過分析標(biāo)簽類型，結(jié)合閱讀順序、軸與標(biāo)簽親密度，確定默認(rèn)角度為順時針。
(4) 色板
通過場景梳理，確定不同組件使用的色板類型及缺失色板。
補充語義色板：從業(yè)務(wù)里抽象2類場景，指標(biāo)和柱/餅/環(huán)場景，定義顏色。例如帶正面語義，用綠色，比如升、已到崗、正常。帶負(fù)面語義，用紅色，比如降、曠工、失敗。
(5) 字體
結(jié)合自身業(yè)務(wù)場景問題，從場景、版權(quán)、風(fēng)格、識別、極值共5個維度選擇字體。
舉例場景一，縱向數(shù)據(jù)場景里，將市面上數(shù)據(jù)競品用到的字體都橫向鋪開嘗試，做排除法。比如din沒版權(quán)，蘋方非等寬字體，普惠102識別性弱。
舉例場景二，在核心數(shù)據(jù)呈現(xiàn)中，helvetica 品牌風(fēng)格弱，普惠在1億以上極值過寬。
最終我們根據(jù)自身業(yè)務(wù)場景特征，用普惠和普惠102，運用在對應(yīng)場景里。并同前端提煉規(guī)則。
(6) 動效
首先，需要確定動效價值，明確動效需要解決的問題。這里圍繞舒適度、活力、層級、反饋來講。
通過動效場景鏈路分析，確定優(yōu)化范圍。
加載動效：圍繞讓用戶認(rèn)知過程更為自然。通過組件橫向梳理、抽象圖形、組合樣式的思路，輸出方案。比如這里共梳理17種組件類型，抽象成9類，包括點、線、面、餅、環(huán)、柱、文本、圖標(biāo)、詞云，再進(jìn)行組合產(chǎn)出方案。
出場動效：通過業(yè)務(wù)分析、提煉場景、優(yōu)化效果。比如這里共提煉 3類場景，有通用、監(jiān)控、輿情。圍繞過渡不自然、卡頓、缺少情感化表達(dá)來優(yōu)化效果。
瀏覽動效：通過提煉場景，來強化元素之間的層級與空間關(guān)系。比如單個組件、聯(lián)動、下鉆場景下，圍繞點擊感知弱、重點不突出、缺少懸停態(tài)來優(yōu)化效果。
沉淀速度參數(shù)：將優(yōu)化動效場景的速度參數(shù)，同前端約定規(guī)則沉淀組件庫。
5、提效
包含代碼化提效、工具提效、機制提效。
整體思路
從設(shè)計組內(nèi)到技術(shù)產(chǎn)研的提效過程。
提效面向用戶依次是：組件設(shè)計師、業(yè)務(wù)設(shè)計師、前端、產(chǎn)品。
搭建目前還在進(jìn)行中，這里主要從交付-工具-代碼化來分析。
交付內(nèi)容
1、業(yè)務(wù)設(shè)計師：sketch/figma物料 (樣式、組件、區(qū)塊、模板、規(guī)則 )
2、業(yè)務(wù)設(shè)計師：kitchen工具（樣式、組件、區(qū)塊、模板）
3、組件工程師：組件規(guī)范/組件官網(wǎng)
交付機制
新需求：通過評估復(fù)用性、抽象、內(nèi)審、沉淀物料。
現(xiàn)有業(yè)務(wù)：通過頁面梳理歸類、抽象、內(nèi)審、沉淀物料。
6、衡量
從物理到行為層，包括樣式、組件、框架、組件交互 共4個維度。通過一致性評分衡量標(biāo)準(zhǔn)化覆蓋的好壞。
總結(jié)
回歸課程，在B類業(yè)務(wù)里，服務(wù)多個產(chǎn)品、多用戶角色、體驗復(fù)雜的場景下，在定制化+標(biāo)準(zhǔn)化團隊陣型里，標(biāo)準(zhǔn)化實質(zhì)解決的問題是保障60分基礎(chǔ)體驗一致性。
總結(jié)：B端體驗標(biāo)準(zhǔn)化包括物料的產(chǎn)出、交付以及衡量標(biāo)準(zhǔn)。
產(chǎn)出：包括框架、組件、樣式的收斂來梳理、抽象頁面。
交付：面向2類用戶群體，業(yè)務(wù)設(shè)計，需交付物料和工具。組件工程師，代碼化需提供組件規(guī)范，組件線上化需助力組件官網(wǎng)的建設(shè)。
衡量：一致性評分包括樣式、組件、框架及組件交互。
原文地址：AlibabaDesign
作者：CCO 設(shè)計
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》如何做B端體驗標(biāo)準(zhǔn)化：以數(shù)據(jù)可視化場景為例
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.dzxscac.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司