點(diǎn)擊 ▲ 三分設(shè) 關(guān)注，和 6 萬設(shè)計(jì)師一起學(xué)習(xí)進(jìn)步

知識(shí)庫 2022 · 第 153 篇

在 B 類業(yè)務(wù)里，服務(wù)多產(chǎn)品、多角色、體驗(yàn)復(fù)雜，設(shè)計(jì)師該如何做好體驗(yàn)標(biāo)準(zhǔn)化，保障基礎(chǔ)體驗(yàn)一致性？下面我將從實(shí)戰(zhàn)案例里，同大家分享。

業(yè)務(wù)背景

以我們 CCO 體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)為例，主要服務(wù)阿里體系的消費(fèi)者、商家、經(jīng)濟(jì)體等業(yè)務(wù)領(lǐng)域。隨著業(yè)務(wù)不斷擴(kuò)大、用戶角色多、體驗(yàn)復(fù)雜、設(shè)計(jì)師人力有限、定制化需求不斷增加，設(shè)計(jì)面臨嚴(yán)峻挑戰(zhàn)。

1、業(yè)務(wù)多：30 多個(gè)產(chǎn)品應(yīng)用

2、角色多：覆蓋消費(fèi)者、客服小二、服務(wù)管理、業(yè)務(wù)運(yùn)營、中臺(tái)管理、客戶 6 大類用戶群體。

3、體驗(yàn)復(fù)雜：設(shè)計(jì)師需兼顧用戶和客戶兩個(gè)視角。

從組織上，85% 設(shè)計(jì)師縱向支撐業(yè)務(wù)，15% 設(shè)計(jì)師橫向做標(biāo)準(zhǔn)化，反哺業(yè)務(wù)設(shè)計(jì)師。標(biāo)準(zhǔn)化實(shí)質(zhì)解決的問題是保障基礎(chǔ)體驗(yàn)一致性。

標(biāo)準(zhǔn)化怎么做

核心通過頁面梳理、抽象、分發(fā)、衡量，保障基礎(chǔ)體驗(yàn)一致性。

案例實(shí)戰(zhàn)

以數(shù)據(jù)可視化場(chǎng)景為例，講述如何做標(biāo)準(zhǔn)化。

1、業(yè)務(wù)現(xiàn)狀

共有 11 個(gè)應(yīng)用，涉及 89 個(gè)頁面。

2、問題

體驗(yàn)不一致：各個(gè)工作臺(tái)頁面架構(gòu)、組件、樣式野蠻生長，缺少規(guī)范導(dǎo)致體驗(yàn)不統(tǒng)一。

低效：部分場(chǎng)景缺失，組件重復(fù)建設(shè)，大量定制；溝通協(xié)同內(nèi)耗大，成本高。

3、策略

體驗(yàn)統(tǒng)一：框架、組件、樣式。

提效：代碼化、工具、交付機(jī)制。

4、體驗(yàn)統(tǒng)一

包括框架、組件、樣式。

框架

(1) 現(xiàn)有頁面收集

(2) 用戶場(chǎng)景分析

(3) 頁面歸類

結(jié)合用戶看數(shù)內(nèi)容（例：概覽、分析、詳情）和交互形態(tài)（例：平鋪、下鉆），對(duì)頁面進(jìn)行歸類。

(4) 確定典型布局

通過統(tǒng)計(jì)高頻復(fù)用形態(tài)，確定典型布局。

組件

(1) 頁面結(jié)構(gòu)分析

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

(2) 模塊層分類

橫向收集全部業(yè)務(wù)，將模塊層分類。細(xì)分模塊擴(kuò)展形態(tài)，放到對(duì)應(yīng)的簍子里。

(3) 模塊專項(xiàng)治理

接下來，需要對(duì)每一個(gè)模塊進(jìn)行專項(xiàng)治理。比如圖表模塊，再拆再抽象成指標(biāo)、圖表、單選、多選 4 類場(chǎng)景。場(chǎng)景里再對(duì)主體和變體（也就是擴(kuò)展形態(tài)）分類。

樣式

(1) 確定優(yōu)化內(nèi)容

圍繞視覺凌亂，要做的便是完善設(shè)計(jì)語言。設(shè)計(jì)師需要結(jié)合自身技術(shù)底層，補(bǔ)充缺失規(guī)范。例如布局、色板、字體、動(dòng)效。

(2) 確定組件范圍

通過統(tǒng)計(jì)高頻復(fù)用組件，確定需要梳理的組件范圍。

(3) 布局

圖例位置：線上有 9 種，通過從業(yè)務(wù)場(chǎng)景按閱讀順序劃分，最終收斂成2種。

組件高度：真實(shí)線上情況，只能看2個(gè)指標(biāo)，高度規(guī)范缺失。

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

軸標(biāo)簽旋轉(zhuǎn)角度：現(xiàn)狀有順/逆時(shí)針兩種，通過分析標(biāo)簽類型，結(jié)合閱讀順序、軸與標(biāo)簽親密度，確定默認(rèn)角度為順時(shí)針。

(4) 色板

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

補(bǔ)充語義色板：從業(yè)務(wù)里抽象 2 類場(chǎng)景，指標(biāo)和柱/餅/環(huán)場(chǎng)景，定義顏色。例如帶正面語義，用綠色，比如升、已到崗、正常。帶負(fù)面語義，用紅色，比如降、曠工、失敗。

(5) 字體

結(jié)合自身業(yè)務(wù)場(chǎng)景問題，從場(chǎng)景、版權(quán)、風(fēng)格、識(shí)別、極值共 5 個(gè)維度選擇字體。

舉例場(chǎng)景一，縱向數(shù)據(jù)場(chǎng)景里，將市面上數(shù)據(jù)競(jìng)品用到的字體都橫向鋪開嘗試，做排除法。比如 din 沒版權(quán)，蘋方非等寬字體，普惠 102 識(shí)別性弱。

舉例場(chǎng)景二，在核心數(shù)據(jù)呈現(xiàn)中，helvetica 品牌風(fēng)格弱，普惠在 1 億以上極值過寬。

最終我們根據(jù)自身業(yè)務(wù)場(chǎng)景特征，用普惠和普惠 102，運(yùn)用在對(duì)應(yīng)場(chǎng)景里。并同前端提煉規(guī)則。

(6) 動(dòng)效

首先，需要確定動(dòng)效價(jià)值，明確動(dòng)效需要解決的問題。這里圍繞舒適度、活力、層級(jí)、反饋來講。

通過動(dòng)效場(chǎng)景鏈路分析，確定優(yōu)化范圍。

加載動(dòng)效：圍繞讓用戶認(rèn)知過程更為自然。通過組件橫向梳理、抽象圖形、組合樣式的思路，輸出方案。比如這里共梳理 17 種組件類型，抽象成 9 類，包括點(diǎn)、線、面、餅、環(huán)、柱、文本、圖標(biāo)、詞云，再進(jìn)行組合產(chǎn)出方案。

出場(chǎng)動(dòng)效：通過業(yè)務(wù)分析、提煉場(chǎng)景、優(yōu)化效果。比如這里共提煉 3 類場(chǎng)景，有通用、監(jiān)控、輿情。圍繞過渡不自然、卡頓、缺少情感化表達(dá)來優(yōu)化效果。

瀏覽動(dòng)效：通過提煉場(chǎng)景，來強(qiáng)化元素之間的層級(jí)與空間關(guān)系。比如單個(gè)組件、聯(lián)動(dòng)、下鉆場(chǎng)景下，圍繞點(diǎn)擊感知弱、重點(diǎn)不突出、缺少懸停態(tài)來優(yōu)化效果。

沉淀速度參數(shù)：將優(yōu)化動(dòng)效場(chǎng)景的速度參數(shù)，同前端約定規(guī)則沉淀組件庫。

5、提效

包含代碼化提效、工具提效、機(jī)制提效。

整體思路

從設(shè)計(jì)組內(nèi)到技術(shù)產(chǎn)研的提效過程。

提效面向用戶依次是：組件設(shè)計(jì)師、業(yè)務(wù)設(shè)計(jì)師、前端、產(chǎn)品。

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

交付內(nèi)容

1、業(yè)務(wù)設(shè)計(jì)師：sketch/figma 物料 (樣式、組件、區(qū)塊、模板、規(guī)則 )

2、業(yè)務(wù)設(shè)計(jì)師：kitchen 工具（樣式、組件、區(qū)塊、模板）

3、組件工程師：組件規(guī)范/組件官網(wǎng)

交付機(jī)制

新需求：通過評(píng)估復(fù)用性、抽象、內(nèi)審、沉淀物料。

現(xiàn)有業(yè)務(wù)：通過頁面梳理歸類、抽象、內(nèi)審、沉淀物料。

6、衡量

從物理到行為層，包括樣式、組件、框架、組件交互共 4 個(gè)維度。通過一致性評(píng)分衡量標(biāo)準(zhǔn)化覆蓋的好壞。

總結(jié)

回歸課程，在 B 類業(yè)務(wù)里，服務(wù)多個(gè)產(chǎn)品、多用戶角色、體驗(yàn)復(fù)雜的場(chǎng)景下，在定制化+標(biāo)準(zhǔn)化團(tuán)隊(duì)陣型里，標(biāo)準(zhǔn)化實(shí)質(zhì)解決的問題是保障 60 分基礎(chǔ)體驗(yàn)一致性。

總結(jié)：B 端體驗(yàn)標(biāo)準(zhǔn)化包括物料的產(chǎn)出、交付以及衡量標(biāo)準(zhǔn)。

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

交付：面向2類用戶群體，業(yè)務(wù)設(shè)計(jì)，需交付物料和工具。組件工程師，代碼化需提供組件規(guī)范，組件線上化需助力組件官網(wǎng)的建設(shè)。

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

熱門文章推薦

譯客專欄 2022 · 第 9 篇

OOUX一個(gè)面向?qū)ο蟮捏w驗(yàn)設(shè)計(jì)思維
2022 年 UXUI 設(shè)計(jì)趨勢(shì)
欺騙、迷惑、拖延...五宗罪：用戶體驗(yàn)的陰暗模式
設(shè)計(jì)師們應(yīng)該多玩電子游戲，游戲化設(shè)計(jì)背后的極致體驗(yàn)
為數(shù)字項(xiàng)目制定用戶體驗(yàn)策略的 6 個(gè)實(shí)用工具！
符號(hào)學(xué)分析導(dǎo)論，圖標(biāo)構(gòu)建的 3 大要素
在校的學(xué)弟學(xué)妹們，想要進(jìn)大廠實(shí)習(xí)，請(qǐng)務(wù)必提前準(zhǔn)備！
Google 最新的設(shè)計(jì)語言 MATERIAL YOU 來了，7 年以來最大更新
解密設(shè)計(jì)系統(tǒng)的 11 大優(yōu)點(diǎn)，終于可以說服你的管理層

精選體驗(yàn)設(shè)計(jì)知識(shí)

收錄 100+UED 團(tuán)隊(duì)干貨文章

共創(chuàng)成長訓(xùn)練營

三分設(shè)·星火會(huì)員

我們一起聊設(shè)計(jì)

三分設(shè)·微信讀者群/城市群

歡迎添加 ?? 星標(biāo)，獲取每日好文推薦，每天早上 8 點(diǎn)，準(zhǔn)時(shí)充電。加入設(shè)計(jì)微信交流群 三分設(shè)讀者 5 群，期待與更多優(yōu)秀用戶體驗(yàn)設(shè)計(jì)師一起成長，添加益達(dá) 微信號(hào)【 Lil_Bug 】or【 Red-boy2020】，備注【 三分設(shè)讀者 】加入讀者群！

分享設(shè)計(jì)心得，定期直播，零距離連麥，答疑解惑

↓↓↓點(diǎn)開『閱讀原文』，歡迎你的加入星球

如何做 B 端體驗(yàn)標(biāo)準(zhǔn)化：以數(shù)據(jù)可視化場(chǎng)景為例