Sankey圖的實例運用

A sankey diagram is a visualization used to depict a flow from one set of values to another. The things being connected are called nodes and the connections are called links. Sankeys are best used when you want to show a many-to-many mapping between two domains (e.g., universities and majors) or multiple paths through a set of stages (for instance, Google Analytics uses sankeys to show how traffic flows from pages to other pages on your web site).

Google Chart Sankey

在SensorsData Analytics 1.6版本中，新增加了用戶行為路徑這個功能。

需求背景

很多網頁或者類似的產品的開發者，都有需求知道用戶在使用網站和產品時的路徑分布情況，例如，在訪問了某個電商產品首頁的用戶後，有多大比例的用戶進行了搜索，有多大比例的用戶訪問了分類頁，有多大比例的用戶直接訪問的商品詳情頁。

產品的原型圖如下：

設計過程

1、理清原型圖中元素

• 節點
• 路徑

節點中包含內容

• 事件名稱
• 會話次數
• 事件屬性

路徑包含

• 節點路徑連接
• 節點路徑流逝

2、尋找合適的產品實現原型

d3-plugins/sankey at master · d3/d3-plugins · GitHub

綜合研究，歸納Sankey圖的一些屬性：

• 矩形的高度代表流量

• 連接的曲線也對應相應的流量值

參考現有Sankey圖，其中交互包含：

• 節點拖拽換位（同一層級）
• 滑鼠hover節點顯示popover
• 滑鼠hover路徑顯示popover
• 點擊節點會高亮關聯路徑和路徑
• 點擊路徑會高亮關聯節點和路徑

一、文字與節點的位置關係

在一些sankey圖中，文字位於節點的右側，矩形塊進行相互連接。

優點

• 節省空間。文字排列在路徑中，節省了大量空間
• 塊與塊進行連接，連接更加明確

缺點

• 在矩形塊較高的時候，文字與矩形塊對應關係不是很明確

• 影響文字閱讀

• 長字元串的時候會影響路徑的選擇操作

雖然有部分優點，但缺點很明顯，不適合多文字的展示。

在Google Analytics中，將文字安放在矩形塊之中，文字與節點的關係一目了然。

隨後對Google Analytics做了仔細分析：

1. 節點流量大小從高到低排列
2. 一層展示5個具體事件，其餘的放置在末尾，合併成一個節點。
3. 路徑流量大小也按照從高到低排序
4. 節點和路徑高度有最小值，便於展示
5. 為了更好的展示圖形，部分數據和圖形沒有做成正相關，縮小或放大了相應的比例
6. 節點中的事件名稱進行截斷，只展示關鍵欄位，點擊查看詳情可以查看全部URL
7. 路徑與路徑之間可以看到重疊，說明使用了透明度

此次設計實例參考了GA的用戶行為流設計，雖然看似簡單的圖形設計，但在設計推演中逐漸感到Google設計的力量，每一個細節都有它特有的意義。本次實例設計也算是對GA行為流的一種反求，參考了一些元素也摒棄了一些，最終形態相似可以看作對同類問題的最終解答。

二、路徑繪製

路徑的繪製要點：

• 路徑要連接左右兩端的節點
• 起點和終點高度不一定不一致

• 路徑的寬度代表流量的大小

將左右兩個錨點的貝茲曲線拉為水平，且內部的貝茲點處於中線的位置，這樣即可以保證線條左右對稱，且端點水平接上兩個節點。

流失曲線繪製如上圖。

這是設計的初稿，產品大型已經繪製出來。

三、不同狀態的顏色

在Sensors Analytics產品中，產品界面主要是用兩種顏色，綠色和藍色。

在設計初期，對產品界面進行了顏色嘗試。

在產品中，限制因素有：

• 流失用戶一般用紅色表示。綠色搭配紅色顯得有些礙眼。

• 綠色在產品中更多代表行動行為。藍色更具有中性意義。
• 在綠色的底，黑色文字可讀性較差。
• 較高的顏色飽和度在產品界面中過於搶眼。由於節點數量較多，不適宜使用高飽和度。

所以，最終選擇淺藍色作為節點的顏色。

根據不同交互的狀態定義顏色：

圖形中主要交互操作有：

節點

• 展示狀態（基礎色1）

• hover狀態（基礎色1）
• 選中狀態（選中節點顏色不變，未選中節點變淺）

路徑

• 展示狀態（基礎色2）

• hover狀態（激活的路徑顏色加深，高亮顯示，其他路徑不變）

• 選中狀態（選中的路徑顏色加深，未選中路徑顏色變淺）

流失路徑

• 展示狀態（基礎色3）

• hover狀態（基礎色3）
• 選中狀態（選中流失路徑顏色不變，未選中顏色變淺）

由於界面元素已經很複雜，所以只對路徑設置了不同的顏色，減少對界面的干擾。

為了讓路徑與節點分隔更加清楚，給節點添加描邊和陰影。

由於路徑會有交錯的場景（展示狀態或高亮），所以在兩種狀態都應使用不透明度。

四、細節修改

文字在淺藍色的節點背景上閱讀性依然不好，且當文字橫跨節點和白底的時候，效果更差。

修改辦法：

• 增強文字和背景的對比度

• 將節點背景調成漸變，文字橫跨的時候能更好的區分文字和節點背景

五、產品上線後走查

在伴隨前端小哥@Lee Dan 30多個日日夜夜，產品終於上線了（包含調試性能、界面優化、需求更改等）。

產品界面基本符合設計師的要求。具體的產品界面很大程度依賴數據的『好壞』。如果數據都是很粗獷的，界面會很奇怪（如下）。

雖然這個數據是造出來的，但是不排除用戶真實使用的時候會出現類似情形。

所以和前端小哥繼續商量，進行優化。

優化點有：

• 相鄰路徑的重合問題
• 路徑與路徑粘連，區分不開
• 起始事件（最左邊）節點高度過長

目前已經對第一個優化點進行了解答。

具體如何實施還需進一步商討。

繼續加油，歡迎試用吐槽。

神策分析|Sensors Analytics-幫你實現數據驅動

［完］

推薦閱讀：