TWaver - 專注UI技術(shù)

大部分拓?fù)鋱D界面都有顯示“分級(jí)呈現(xiàn)”的需求。一個(gè)復(fù)雜的系統(tǒng)或組織，會(huì)有很多不同層次的節(jié)點(diǎn)和連接關(guān)系。如何用圖形相對(duì)清晰的呈現(xiàn)出來(lái)，是一個(gè)需要不斷探討的話題。

twaver中有很多的方式可以顯示“分級(jí)”的先是方法：

1、用Group網(wǎng)元組顯示。
Group網(wǎng)元組是把一些網(wǎng)元顯示在一個(gè)組中。這個(gè)組可以雙擊展開(kāi)、閉合。在閉合狀態(tài)，它和一個(gè)普通的網(wǎng)元節(jié)點(diǎn)沒(méi)什么區(qū)別：有位置、有圖標(biāo)、有動(dòng)作。雙擊后，默認(rèn)它會(huì)把其內(nèi)部的孩子顯示出來(lái)，而自己變成一個(gè)覆蓋所有孩子的“區(qū)域”，形狀可能是圓形、方形等。也有人稱之為“本地展開(kāi)”。如下圖：

2、用SubNetwork子網(wǎng)顯示。
SubNetwork可以用于顯示一個(gè)下級(jí)網(wǎng)絡(luò)，雙擊后進(jìn)入一個(gè)全新場(chǎng)景（包括拓?fù)鋱D、地圖等），而當(dāng)前的數(shù)據(jù)會(huì)完全不再顯示。這就是類似常說(shuō)的數(shù)據(jù)“下鉆”或“鉆取”（drill down）。子網(wǎng)外觀和一個(gè)常規(guī)節(jié)點(diǎn)類似，雙擊后會(huì)把所有孩子在圖形上用全新場(chǎng)景顯示。和Group不同是它不是“本地展開(kāi)”，而是“下一級(jí)展開(kāi)”。如下圖：

3、用單層的連接來(lái)呈現(xiàn)。
一提到“分級(jí)”大家很容易想到“組”或“子網(wǎng)”。其實(shí)很多情況未必非要用這些元素。很多情況，我們需要表達(dá)的僅僅是一個(gè)“分級(jí)”的關(guān)系。而這種關(guān)系，完全可以在一個(gè)層面上用連線來(lái)表示。例如一個(gè)多公司、多部門、多步驟的業(yè)務(wù)流程，可以通過(guò)類似下圖的方式進(jìn)行呈現(xiàn)：

這種圖不用組不用子網(wǎng)一樣可以把各種層級(jí)和關(guān)系顯示出來(lái)，而且更容易觀察其“跨級(jí)”的連接情況和全局關(guān)系。組織內(nèi)部可能分更多“下級(jí)流程”，我們可以配合網(wǎng)元組進(jìn)行顯示：

當(dāng)連線較多時(shí)，可能會(huì)造成很多交叉，此時(shí)可以使用twaver的自動(dòng)布局進(jìn)行積極干預(yù)，讓圖形更清晰：

但是自動(dòng)布局也避免不了交叉出現(xiàn)的情況，有些圖形結(jié)構(gòu)就是決定了它必然有交叉。此時(shí)也可以多想辦法讓圖中連線更清晰一些，例如通過(guò)鼠標(biāo)滑過(guò)自動(dòng)高亮相關(guān)的連線：

當(dāng)然，用twaver就要盡量嘗試其提供的優(yōu)秀特性。例如使用矢量進(jìn)行描繪，就不需要寫(xiě)多少代碼，也不怕用戶使勁放大導(dǎo)致難看失真：

綜上所述，我們可以靈活利用平面的拓?fù)鋱D，來(lái)呈現(xiàn)顯示世界中各種“分層”的邏輯，而不必一定使用所謂的分組、下鉆等特性。簡(jiǎn)簡(jiǎn)單單，一張清晰可人的流程圖就有了。需要源代碼的讀者，可直接發(fā)郵件向我們索取。