▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識，幫助全球 1 億設(shè)計師成長

作者：京東設(shè)計中心JDC

編輯：章欣怡

共 2864 字 27 圖  預(yù)計閱讀 8 分鐘

01 

背景介紹

在眾多的可視化場景中，描述一組實(shí)體從某個狀態(tài)到另外一種的狀態(tài)的變化過程 （即數(shù)據(jù)流向轉(zhuǎn)化） 是十分常見的需求。在業(yè)內(nèi)我們通常會使用桑基圖來處理這種可視化場景。

?；鶊D用于描述一組到另一組值的流向，其特點(diǎn)是延伸的分支的寬度對應(yīng)數(shù)據(jù)流量的大小，具體特征如下：
1）線條的走向?qū)?yīng)數(shù)據(jù)流的走向，根據(jù)線條走向進(jìn)行數(shù)據(jù)流變化分析；
2）線條寬度變化對應(yīng)數(shù)據(jù)變化情況；
3）通過節(jié)點(diǎn)間的比較分析，可以更清晰地看到和這個節(jié)點(diǎn)有關(guān)的數(shù)據(jù)流的情況。

基于這些特點(diǎn)桑基圖在以下場景可能存在一些 不足：
1）?；鶊D一次性將所有的鏈路流轉(zhuǎn)全部呈現(xiàn)一個視圖當(dāng)中，這雖然使得用戶可以看到整體流轉(zhuǎn)概覽情況，但是一方面當(dāng)鏈路復(fù)雜時，整體的效果不夠直觀，局部數(shù)據(jù)詳情的探查也不夠方便，同時對于顏色不敏感者不夠友好。

另一方面，當(dāng)各鏈路之間流轉(zhuǎn)的數(shù)據(jù)量級相差過大時，可視化效果較差，用戶容易出現(xiàn)忽略某些量級較小卻重要的數(shù)據(jù)的情況。

2）?；鶊D初始流量等于結(jié)束流量，即所有主邊寬度的總和與所有分出去的分邊寬度總體和近似值，保持流量的平衡。但在實(shí)際中由于數(shù)據(jù)加密或者技術(shù)受限等原因，會有初始流量不完全等于結(jié)束流量的情況，這個時候就無法使用?；鶊D。

3）?；鶊D以數(shù)據(jù)呈現(xiàn)為主，但從用戶體驗(yàn)的角度來看，視覺形式單一，隨著數(shù)據(jù)用戶受眾越來越多，更加人性化的設(shè)計會更加受到用戶喜歡。

02 

設(shè)計目標(biāo)

1）提供一種便捷探查數(shù)據(jù)流轉(zhuǎn)情況的可視化方式，當(dāng)鏈路之間數(shù)據(jù)量級差異大時完整呈現(xiàn)數(shù)據(jù)流轉(zhuǎn)情況，且具備顏色不敏感者用戶友好性；
2）提供一種能夠自定義起始和結(jié)束狀態(tài)流量的流轉(zhuǎn)可視化方式；
3）從用戶體驗(yàn)角度出發(fā)，提供更加符合用戶心理的可視化方式。

03

結(jié)構(gòu)圖

以下是結(jié)構(gòu)說明圖，可分為上下、左右兩種布局形式：

04

基本元素

1）基本組成元素：
a：卡片 （用于定義某個實(shí)體，用來描述某項(xiàng)指標(biāo)）
交互形式有以下 4 種：Default、Hover、Selected、Disable。

b：數(shù)據(jù)流轉(zhuǎn)線（用于描述數(shù)據(jù)流轉(zhuǎn)的方向）
交互形式具有 3 種：Default、Disable、Highlight。

c：流轉(zhuǎn)數(shù)據(jù)標(biāo)注（用于展示數(shù)據(jù)流轉(zhuǎn)的數(shù)值，可隱藏不展示）
交互形式具有 3 種：Default、Disable、Highlight。

04

設(shè)計思路

1）布局
a：布局上以常規(guī)的上下、左右布局為主，符合用戶從上到下，從左到右的眼球運(yùn)動；

b：如果卡片存在對應(yīng)關(guān)系，也可以錯開對齊或者自定義對齊方式，便于用戶觀看。

c：間距方面遵從親密性原則，卡片寬度可根據(jù)內(nèi)容或整體布局調(diào)整，卡片與數(shù)據(jù)流轉(zhuǎn)線間距為 a，卡片之間間距為 4a；

內(nèi)容與卡片間距為 2a，文字與數(shù)據(jù)距離為 a，圖標(biāo)/圖片與文字間距為 a。

2）樣式
a：首先，選擇卡片的樣式承載信息。

i）卡片可以提升內(nèi)容區(qū)域感，讓用戶明確每一塊的內(nèi)容，與數(shù)據(jù)流轉(zhuǎn)線區(qū)分開。分明的層級能夠引導(dǎo)用戶的瀏覽視線，有秩序地閱讀與點(diǎn)擊；
ii）卡片可以提升內(nèi)容獨(dú)立性，當(dāng)承載內(nèi)容較多時 （如增加具體數(shù)值、圖片、圖標(biāo)等），也能保持頁面整齊統(tǒng)一，保證用戶在較大信息量下不產(chǎn)生混亂；
iii）卡片可以增加可點(diǎn)性，由于卡片式設(shè)計產(chǎn)生的空間感，讓每個模塊更加突出，從感官上會引導(dǎo)用戶點(diǎn)擊。

b：其次，以線條代表數(shù)據(jù)流轉(zhuǎn)。

起點(diǎn)為圓點(diǎn)，終點(diǎn)為三角箭頭，準(zhǔn)確地展示數(shù)據(jù)流轉(zhuǎn)方向，流轉(zhuǎn)數(shù)據(jù)可隱藏、直接在數(shù)據(jù)線周圍展示或者以卡片形式疊加在數(shù)據(jù)流轉(zhuǎn)線上展示。

i）線條與卡片樣式上區(qū)分較大，便于用戶觀看；
ii）使用圓作為流轉(zhuǎn)起點(diǎn)，三角形作為流轉(zhuǎn)終點(diǎn)，方向性更加明確。相比之下，?；鶊D沒有明確數(shù)據(jù)流轉(zhuǎn)方向，默認(rèn)是從左到右，從上到下。
iii）根據(jù)需要，流轉(zhuǎn)數(shù)據(jù)可顯示或隱藏，當(dāng)數(shù)據(jù)量較少時可以直接鋪開展示，當(dāng)數(shù)據(jù)量較多時，可以以卡片的形式疊加在數(shù)據(jù)流轉(zhuǎn)線上，高亮展示，突出強(qiáng)調(diào)流轉(zhuǎn)數(shù)據(jù)。

c：顏色
由于數(shù)據(jù)流轉(zhuǎn)圖本身元素較多，為了突出層級感，讓用戶聚焦關(guān)鍵信息，我選用更為簡單、干凈的色調(diào)。數(shù)據(jù)產(chǎn)品大多以藍(lán)色為主，本次設(shè)計以藍(lán)色作為主要顏色，其他產(chǎn)品可視情況進(jìn)行主題化適配。

i）背景色：選用淺藍(lán)色作為底色。深色會導(dǎo)致整體較臟且卡片輪廓過于明顯，吸引用戶過多的注意力，太淺的藍(lán)色則會導(dǎo)致卡片信息不聚焦；
ii）文字：卡片內(nèi)的文字默認(rèn)為黑色，當(dāng)流轉(zhuǎn)數(shù)據(jù)高亮?xí)r為藍(lán)色，若流轉(zhuǎn)數(shù)據(jù)以卡片形式展示，則卡片為藍(lán)色，文字為白色；
iii）數(shù)據(jù)流轉(zhuǎn)線：默認(rèn)為灰色，當(dāng)兩個節(jié)點(diǎn)均選中時，數(shù)據(jù)流轉(zhuǎn)線變藍(lán)強(qiáng)調(diào)展示；
iv）卡片顏色：選擇白色作為卡片底色，由于卡片承載的內(nèi)容較多，可能同時存在文字、數(shù)據(jù)、圖片、圖標(biāo)等元素，在白底上能有更好的呈現(xiàn)效果；選擇藍(lán)色作為高亮顏色，起到突出強(qiáng)化的效果；
v）卡片投影：卡片投影為淡藍(lán)色，突出卡片，引導(dǎo)用戶進(jìn)行點(diǎn)擊，選中時投影顏色變深。

d：文字
文字上默認(rèn)以辨識度強(qiáng)的蘋方、微軟雅黑作為默認(rèn)字體，數(shù)字可以用根據(jù)產(chǎn)品需要，用特殊字體做突出強(qiáng)調(diào)展示。

05

交互方式

本次設(shè)計的數(shù)據(jù)流轉(zhuǎn)可視化方式，大體由三部分組成：
1）起始卡片組：對應(yīng)一組實(shí)體的起始狀態(tài)，默認(rèn)選中第一項(xiàng)。默認(rèn)狀態(tài)的卡片可以點(diǎn)擊，一次只能選中一個卡片，再次點(diǎn)擊相同的卡片可以取消選中狀態(tài)。

當(dāng)前選中的卡片展示其數(shù)據(jù)流向。

2）數(shù)據(jù)流轉(zhuǎn)線：起點(diǎn)為圓點(diǎn)，終點(diǎn)為三角箭頭，描述了某個實(shí)體的數(shù)據(jù)流向。

數(shù)據(jù)流轉(zhuǎn)線可以攜帶流轉(zhuǎn)量數(shù)據(jù)，直接展開或者以卡片形式展示。

3）終止卡片組：它對應(yīng)一組實(shí)體的結(jié)束狀態(tài)，默認(rèn)不選中。默認(rèn)狀態(tài)的卡片可以點(diǎn)擊，一次只能選中一個卡片，再次點(diǎn)擊相同的卡片可以取消選中狀態(tài)。

如果起始和終止卡片都有處于選中的狀態(tài)，那么對應(yīng)的鏈路高亮。

如果只選中了某個終止卡片，當(dāng)前選中的卡片展示其的數(shù)據(jù)流向。

1）本次設(shè)計區(qū)別于?；鶊D一次性展示全部鏈路，而是通過切換卡片查看數(shù)據(jù)流轉(zhuǎn)情況，使用戶查閱精準(zhǔn)的查看想要的鏈路數(shù)據(jù)，同時能夠區(qū)分?jǐn)?shù)據(jù)為空和無法流轉(zhuǎn)的狀態(tài)這兩種狀態(tài)；
2）自定義的起止卡片組，提升靈活性，不嚴(yán)格遵循能量守恒；
3）卡片支持用戶自定義內(nèi)容和樣式，可以在其中放置圖片和文字。

—  The end  —

以下三分設(shè)文章，你可能也感興趣

▽ 

?? 原創(chuàng)文章精選??

告別加班！使用設(shè)計系統(tǒng)方法更快地構(gòu)建產(chǎn)品

如何評估設(shè)計質(zhì)量，提升設(shè)計技能

你常常忽略的 7 個具有破壞性的體驗(yàn)鴻溝

一篇文章告訴你服務(wù)設(shè)計到底能做什么？

看 Apple CarPlay 如何提升駕駛安全和駕駛體驗(yàn)

一起看看《對馬島之魂》如何打造初次對抗體驗(yàn)

制定 “小目標(biāo)”，了解產(chǎn)品管理中的結(jié)構(gòu)化思維

35+ 的 Windows 系統(tǒng)到底有什么了不起？

導(dǎo)師與學(xué)員的高效交流 APP 設(shè)計 —— Lightship

?? 我們一起聊設(shè)計 ???♂?

高質(zhì)量，學(xué)設(shè)計行交流微信群

期待與更多優(yōu)秀用戶體驗(yàn)設(shè)計師一起成長

PS：歡迎大家關(guān)注三分設(shè)，每天早上9點(diǎn)，準(zhǔn)時充電。分享優(yōu)質(zhì)設(shè)計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲微信號【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號三分設(shè)的粉絲）