雖然三維圖形帶來的立體感很強(qiáng)，但用在可視化設(shè)計(jì)中，很容易出現(xiàn)問題。

一方面，三維圖形具有X、Y和Z坐標(biāo)，容易造成圖表間的遮擋關(guān)系，遮擋會(huì)掩蓋一部分的數(shù)據(jù)，讓精準(zhǔn)比較數(shù)據(jù)信息變得困難。

另外，透視使對(duì)象看起來像是位于三維空間中，但在數(shù)據(jù)可視化中，它會(huì)造成錯(cuò)誤的層次結(jié)構(gòu)：前景圖形看起來很大，背景圖形很小，數(shù)據(jù)關(guān)系被不必要地扭曲。

設(shè)計(jì)要點(diǎn)：

三維圖形很有吸引力但可能會(huì)遮擋重要的數(shù)據(jù)信息，并扭曲數(shù)據(jù)間的比例關(guān)系；

如果沒有絕對(duì)需要盡可能使用二維圖形樣式。

2.數(shù)據(jù)太多

在設(shè)計(jì)中，很多人總想在一張圖表中盡可能多地展現(xiàn)內(nèi)容，把各種數(shù)據(jù)信息聚合在一起。

這樣的想法本身沒什么錯(cuò)誤，但重要的前提是要有清晰的認(rèn)知，明確知道到底要展示哪些數(shù)據(jù)。

如果可視化中包含太多數(shù)據(jù)，信息的展現(xiàn)會(huì)變得不堪重負(fù)甚至難以理解，這樣的話包含的數(shù)據(jù)再多也沒有任何意義。

設(shè)計(jì)要點(diǎn)：

避免數(shù)據(jù)可視化的信息過載，如果一張圖表中包含的信息過多，反而會(huì)讓用戶混亂；

3.省略基線

一組數(shù)據(jù)往往各不相同，數(shù)據(jù)差值的大小也不確定。為了使可視化效果看著更舒服，有的設(shè)計(jì)師通過改變坐標(biāo)軸比例來展示數(shù)據(jù)關(guān)系。

最常見的例子就是讓Y軸代表的數(shù)據(jù)不是從0開始，借此夸大數(shù)據(jù)之間的差異，讓數(shù)據(jù)的變化更加明顯。

設(shè)計(jì)要點(diǎn)：

圖表的美感再怎么重要，也要服務(wù)于精準(zhǔn)的數(shù)據(jù)表現(xiàn)；

4.選擇錯(cuò)誤的可視化方法

每個(gè)數(shù)據(jù)可視化方法都有自己的特點(diǎn)。例如餅圖適合用來比較一個(gè)整體中的不同部分，但不適合用來比較幾組不同的數(shù)據(jù)。

通過餅圖的比例劃分，雖然可以直觀地顯示三家企業(yè)的收益，但使用條形圖會(huì)讓這三家企業(yè)之間的差異更加明顯。

如果目的是為了顯示一段時(shí)間內(nèi)的收入，那么折線圖會(huì)是比條形圖更好的選擇。

設(shè)計(jì)要點(diǎn)：

5.混淆關(guān)聯(lián)

數(shù)據(jù)可視化更高的價(jià)值在于探索和發(fā)現(xiàn)不同數(shù)據(jù)間的相關(guān)性，通過比較幾組不同的數(shù)據(jù)關(guān)系，找出其中的關(guān)聯(lián)性，從而得到一個(gè)更有根據(jù)的驗(yàn)證結(jié)果。

顯示相關(guān)性最常用的方法是將幾組不同的數(shù)據(jù)疊加在同一個(gè)圖表上，但當(dāng)疊加的數(shù)據(jù)數(shù)量過多時(shí)，圖表會(huì)變得難以識(shí)別。

另外一旦強(qiáng)行關(guān)聯(lián)幾種相似的數(shù)據(jù)，有可能造成結(jié)果的混亂。一個(gè)有意思的例子是冰激凌銷量的增加與暴力犯罪的激增有關(guān)，因?yàn)檫@兩者都是因?yàn)闅夂蜃兓斐傻慕Y(jié)果。

設(shè)計(jì)要點(diǎn)：

透過數(shù)據(jù)間的關(guān)聯(lián)性發(fā)現(xiàn)事物本質(zhì)是有意義的，但要考慮數(shù)據(jù)間的關(guān)聯(lián)是否有依據(jù)、是否合理；

6.放大有利數(shù)據(jù)

數(shù)據(jù)的增長或下降和時(shí)間是不可分割的。放大時(shí)間范圍是很多公司經(jīng)營中投機(jī)取巧的方法。

比如只在圖表上向用戶展示業(yè)績?cè)鲩L的4-6月份(上圖)，這樣看起來公司業(yè)績?cè)鲩L幅度特別大，但如果將X軸的時(shí)間縮小到一整年(下圖)，才會(huì)發(fā)現(xiàn)公司真實(shí)的經(jīng)營狀況，4-6月份的業(yè)績?cè)鲩L僅僅代表了公司業(yè)績持續(xù)下跌中的小幅上漲。

設(shè)計(jì)要點(diǎn)：

避免放大的可視化效果與數(shù)據(jù)整體不一致；

7.避開常見的視覺聯(lián)想

視覺元素影響用戶的心理，圖標(biāo)、色彩和字體都具有影響觀者感知的作用。

下圖的可視化描述了美國各個(gè)地區(qū)宗教信徒占所有居民的百分比，但使用的顏色與地圖的設(shè)計(jì)元素(藍(lán)色的水、綠色的植被和棕色的土地)太過相似。

▲ 分析數(shù)據(jù)可視化很耗費(fèi)精力。在看到這樣的圖表時(shí)，我們第一時(shí)間聯(lián)想到的應(yīng)該是國家的地形情況，可能很難在這個(gè)熟悉的認(rèn)知下去重新理解這個(gè)圖表代表的其他含義。

設(shè)計(jì)要點(diǎn)：

8.過分糾結(jié)于數(shù)據(jù)可視化

數(shù)據(jù)可視化將難以表現(xiàn)的數(shù)字關(guān)系賦予了易于理解的形式。最理想的方式是可以通過可視化清晰、簡潔地傳達(dá)數(shù)據(jù)關(guān)系。

但是并不是所有的數(shù)據(jù)都需要使用可視化來表現(xiàn)，有時(shí)候一個(gè)簡單的數(shù)據(jù)搭配一個(gè)流行的顏色就足以說明問題。

設(shè)計(jì)要點(diǎn)：

數(shù)據(jù)可視化是一種交流工具。像其他所有工具一樣，有時(shí)它是合適的，有時(shí)可能另一種工具更適合。

為回饋一直以來關(guān)注和支持Clip設(shè)計(jì)夾的讀者，將免費(fèi)贈(zèng)送3本《寫給UI設(shè)計(jì)師看的數(shù)據(jù)可視化設(shè)計(jì)》書籍給大家，幫助大家更好地學(xué)習(xí)數(shù)據(jù)可視化設(shè)計(jì)。

參與方式：詳見原文。

作者：Clippp

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》數(shù)據(jù)可視化設(shè)計(jì)常出現(xiàn)的錯(cuò)誤，你一定要避免！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》數(shù)據(jù)之美：地理空間數(shù)據(jù)可視化II

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

標(biāo)準(zhǔn)圓環(huán)圖

圖表中間空心的部分用來展示數(shù)據(jù)的總數(shù)，用圓環(huán)的弧長和顏色表示不同數(shù)據(jù)的占比，圖表旁邊有圖例用來解釋說明。

布爾圓環(huán)圖

布爾圓環(huán)圖就像是給圓環(huán)圖做了布爾運(yùn)算，只表示正負(fù)兩個(gè)值。

比如想重點(diǎn)突出完成率，就使用綠色圓環(huán)來表示68%的完成率，圓環(huán)其他部分為灰色，同理想重點(diǎn)突出反彈率，就使用紅色圓環(huán)來表示83%的反彈率，圓環(huán)其他部分為灰色。

圓環(huán)中心部分用來顯示相關(guān)數(shù)值的百分比和標(biāo)簽。此外布爾圓環(huán)圖不需要額外添加圖例。

標(biāo)簽圓環(huán)圖

圓環(huán)圖交互狀態(tài)分析 

懸停狀態(tài)

在標(biāo)準(zhǔn)圓環(huán)圖中，鼠標(biāo)懸停在圓環(huán)圖上時(shí)，跳出分段名稱+百分比+數(shù)量值的彈窗。在標(biāo)簽圓環(huán)圖中，懸停的圓環(huán)部分突出顯示，其余部分淡出處理。

點(diǎn)選狀態(tài)

圖表段可以是交互式的，點(diǎn)擊對(duì)應(yīng)的分段時(shí)，右側(cè)的圖例也會(huì)同步高亮顯示。

焦點(diǎn)狀態(tài)

焦點(diǎn)狀態(tài)和上面提到的懸停狀態(tài)類似，唯一的區(qū)別在于，焦點(diǎn)狀態(tài)選中分段后有一個(gè)放大+描邊的圓環(huán)效果，突出展示數(shù)據(jù)。

空狀態(tài)

當(dāng)沒有可用的數(shù)據(jù)時(shí)，應(yīng)該在圖表上表明這一點(diǎn)，并給出提示引導(dǎo)用戶去點(diǎn)擊。

錯(cuò)誤狀態(tài)

圓環(huán)圖使用指南 

使用分類顏色

保持圓環(huán)圖每部分顏色都使用醒目的顏色且具有對(duì)比性。在圓環(huán)圖中不建議使用同色系顏色來顯示數(shù)據(jù)，同色系顏色常用在直方圖中。

最多使用五個(gè)分段

當(dāng)圓環(huán)圖包含多個(gè)數(shù)據(jù)分段時(shí)，圖標(biāo)會(huì)變得難以理解，為保證圖標(biāo)的清晰，盡可能將分段控制在 2-3 段，不要超過5段。如果數(shù)據(jù)過多，可以考慮使用柱狀圖、條形圖等其他形式的圖表。

保證數(shù)據(jù)準(zhǔn)確

圓環(huán)圖的所有分段加起來的數(shù)值應(yīng)該始終為 100%，沒有有多段數(shù)據(jù)占比過小，可以一起匯總到“其他”分段中。

按順序排列數(shù)據(jù)

圓環(huán)圖的份分段應(yīng)從12點(diǎn)位置開始按最大值排序，然后按順時(shí)針方向依次按大小排列每個(gè)數(shù)值。右側(cè)的圖例頁應(yīng)該從上到下保持一致的排序。

不要將時(shí)間分段

最后 

以上就是圓環(huán)圖的基本介紹，在之后的分享中，會(huì)為大家介紹折線圖、面積圖、條形圖、直方圖等一系列數(shù)據(jù)可視化圖表文章~

如果大家想看更多「數(shù)據(jù)可視化圖表」系列內(nèi)容，記得及時(shí)關(guān)注接下來的文章~

最后給大家分享一份最新的iPhone13樣機(jī)模型源文件，有PSD、Figma和Sketch三種格式可以選擇，特別適合用來包裝作品集。

領(lǐng)取方式：關(guān)注公眾號(hào)，后臺(tái)回復(fù)【13樣機(jī)】獲取源文件

慢慢來比較快，希望對(duì)你有幫助！

作者：Clippp

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》數(shù)據(jù)可視化圖表設(shè)計(jì)指南：圓環(huán)圖

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

展示二：

展示三：

展示四：

展示五：

業(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)行高 240px。

軸標(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)分包括樣式、組件、框架及組件交互。

作者：CCO 設(shè)計(jì)

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》如何做B端體驗(yàn)標(biāo)準(zhǔn)化：以數(shù)據(jù)可視化場(chǎng)景為例

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司