2021-5-31 ui設計分享達人
「圖」對于很多人來說是一個熟悉又陌生的東西，那么到底什么是圖？以上圖的小游戲為例，為了演示方便，我們抽取其中10個人關于鍵盤和音樂類型的喜好的信息，如果以鍵盤和音樂喜好為關系，把這10個人聯(lián)系起來的話，會得到下方這樣能一張關系圖。
基于這張圖能大致了解這10個人中對于音樂和鍵盤喜好是什么情況，比如：沒有人喜歡流行樂和紅軸鍵盤，甚至可以進行一些簡單的推理：喜歡古典樂的人大概率會喜歡黑軸和青軸。
本質上來說，通過前面的小游戲收集到的數(shù)據(jù)是一張表格數(shù)據(jù)，當把這些靜態(tài)的數(shù)據(jù)以某個維度的信息關聯(lián)起來，就能構建成一張圖，基于這張圖我們能進行各種各樣的解讀和分析。這其實就構成了在我們圖這個領域中的 DIKW 模型。把靜態(tài)的數(shù)據(jù)，逐步轉化成信息，再到分析出有意義的「知識」，在實際的業(yè)務場景中，借助算法或者更復雜的分析手段，甚至能從圖中分析出價值更高的「智慧」。
隨著一張圖中的節(jié)點數(shù)量越多，節(jié)點之間能互相產(chǎn)生的關系會指數(shù)型的增長，對于這個關系網(wǎng)來說，它能產(chǎn)生的經(jīng)濟效益也是指數(shù)型的增長，在經(jīng)濟學領域把這一效應稱之為「梅特卡夫效應」。其實在日常生活中，最常見的圖，就是一張由人際關系構成的社交關系網(wǎng)絡，我們每天都在用的各種社交平臺都符合這一效應。
在實際的 B 端業(yè)務場景中，圖在圖數(shù)據(jù)庫、網(wǎng)絡安全、企業(yè)風控、知識圖譜等場景下有非常廣泛的應用。
分享一個在知識圖譜這個業(yè)務場景下的真實故事，某天 PD 發(fā)過來如上圖的釘釘消息，希望幫他設計一個圖的需求，然后隔一段時間發(fā)來不同的希望在圖上面表達的語義訴求。隨著要表達的信息越來越多，后面再去設計圖的樣式時，就陷入了不知道該怎么辦的境地…
在可視化設計中，常見的視覺通道就那么幾種：形狀、方向、紋理、尺寸、值、顏色，隨著產(chǎn)品功能的拓展，需要在圖上表達的信息維度越來越多，且根本沒有停下來的趨勢。這時我們會面臨圖這類產(chǎn)品設計時的第一個挑戰(zhàn)：視覺通道有限，無法滿足日益增長的語義表達的需求。
下圖左側是一張交付給前端同學的設計稿，基本上滿足 PD 提到的各類語義表達的訴求。然而實際驗收的時候，帶進實際數(shù)據(jù)的時候效果是右圖這樣的。這是面臨的第二個挑戰(zhàn)，在設計一張圖的時候，設計師往往是按照非常理想的情況去設計的，但當實際的數(shù)據(jù)灌入進去，再加上還原度的問題，布局的問題，會導致實際一張圖渲染出來的效果是非?！阁@人」的，可讀性幾乎為0。
下圖的 GIF 是最基礎的一種圖分析的操作：從一個節(jié)點出發(fā)，逐步的選擇感興趣的節(jié)點展開，以隨著關系的逐步擴散發(fā)掘出更多有價值的信息。GIF 中所看到的從起始的藍色節(jié)點擴散到青色節(jié)點，再到紅色、綠色節(jié)點，這樣逐步擴展，分層展示，是一個設計師的理想情況。但實際的情況往往是下圖這樣的，每次擴展開的節(jié)點都會在原來的基礎上覆蓋，連續(xù)擴散幾次之后，節(jié)點和邊密密麻麻的重疊在一起。連續(xù)分析的情況下，效果再一次超出我們的預期。
回顧一下為何會出現(xiàn)上面的幾個問題：在面對圖這樣一個陌生的設計對象時，在對其有更深入的了解之前，我們往往只能看到表面的靜態(tài)的視覺的設計，單點的交互設計，看不到也沒法控制的是藏在圖這座冰山之下的數(shù)據(jù)量、布局效果、加載速度和用戶連續(xù)分析的路徑。
為了解決上面提到的幾個挑戰(zhàn)，以及便于更多設計師更快速的上手圖產(chǎn)品的設計，避免一些我們此前踩過的坑，同時為了規(guī)范圖產(chǎn)品的設計，我們基于在不同業(yè)務線的圖產(chǎn)品的實踐和思考，產(chǎn)出了「AntV 圖可視分析設計指引」。
更好的閱讀體驗，推薦訪問語雀版
設計指引從全局樣式（Global Style）、交互規(guī)范（Guide）、組件（Conponents）、功能模板（Templates）、綜合案例（Examples）幾個視角出發(fā)組織相關的內容。由于大部分設計師對「圖」是不太了解的，所以增加了一篇「總則」來介紹「圖」是什么，在做相關產(chǎn)品的設計時，面臨的設計對象是什么，以及幾條最通用的設計指引內容。同時也提供了 Sketch 組件庫模板資產(chǎn)，內置了優(yōu)雅好看的圖的樣式和常用圖的模板。
回顧前面提到的知識圖譜里的這個圖設計的需求，我們踩過那么多坑之后，再回頭去看，該如何設計這一一張圖呢？其實把上面這張 DEMO 圖拆解來看，再復雜的圖，本質上無外乎就是「兩點一線」，以及在節(jié)點和邊上的文字標簽。
再抽象一層看，會發(fā)現(xiàn)組成圖的最基礎的元素有：點、邊、箭頭、標簽、布局這么5種元素。以其中的點為例，再去拆解看一下，設計這個圖里面最基礎的元素的時候，適用于表達點的視覺樣式的有大小、顏色、描邊、形狀、圖標、角標 這么幾個視覺參數(shù)。其中，「描邊」還能細分為單層描邊或多層描邊，「圖標」還能區(qū)分為線型還是面型，各自再對應不同的視覺參數(shù)。
有了最適合點的視覺通道和對應的參數(shù)之后，回顧一下我們此前需求中我們需要在節(jié)點上表達的各類語義，可以歸納3大類：
數(shù)據(jù)特性：數(shù)據(jù)中固有的一些特性，比如類型、規(guī)模、權限等，這些特性不會隨著呈現(xiàn)的平臺的不同而變化，而是屬于數(shù)據(jù)本身的一些特性；
功能屬性：在具體的產(chǎn)品中，隨著產(chǎn)品功能的不斷豐富，賦予給節(jié)點的屬性，比如一個產(chǎn)品有了預測或推理的能力，就需要在圖中表達出節(jié)點是否是「預測的」或者是「疑似」的；
鼠標狀態(tài)：鼠標 Hover 、Focus、Disable 等常見鼠標交互事件
這3類語義，共同決定了一個節(jié)點應該表達什么維度的信息，樣式應該是什么樣子的。這時再去設計一個節(jié)點的樣式時，其實就是一個把語義類型和適用的視覺通道和參數(shù)連線的過程。無論需要表達的語義如何新增，節(jié)點樣式的表達都有一定的內在邏輯可循。
圖的基礎元素中，除了點之外，其他的基礎元素也按照類似的思路梳理出需要表達的語義和使用的視覺通道，這樣我們就完整的，成體系地歸納出了所有影響一張圖「長什么樣」的基礎元素、視覺通道和參數(shù)。有了這樣一張「參數(shù)表」，再去設計一張圖時，就明確的知道有哪些要素可以考慮。
當然，能做的不止于此。結合我們前端同學的能力，我們把上述「參數(shù)表」工程化了，做成了一個在線工具 — GraphMaker 。在這個工具里可以根據(jù)實際的數(shù)據(jù)量，調整節(jié)點、邊、布局的所有視覺通道參數(shù)，以調整到一個合適的視覺效果。最終導出成代碼，用到實際的項目中。及時完全不懂圖，也能在這個工具上，調試出理想的視覺效果，再將對應的代碼導出給到開發(fā)同學使用。
在圖產(chǎn)品中，常見的操作對象有：畫布、節(jié)點、邊、Combo 和其他這五種類型。為了捋清楚圖產(chǎn)品中常見的交互事件，以交互事件三要素的形式，將所有的交互事件全部梳理和枚舉出來，并以操作對象為分類維度，歸納整理出一份完整的「交互時事件庫」，提供給設計師使用。
前面介紹了「交互事件」，很多時候，一個復雜的交互事件需要有一個獨立的組件來承載。比如：關聯(lián)節(jié)點的搜索查詢、代碼輸入框、算法模板選擇器等都有一個共性：都是屬于「輸入某中查詢條件」的組件，這類組件則統(tǒng)一歸納為「條件輸入組件」，主要由「條件輸入」和「確認執(zhí)行」兩部分內容組成。相同的邏輯，我們將各類業(yè)務場景下常見的組件歸納為基礎組件、條件輸入、信息輸出、高級功能四種類型。定義好每種類型組件的基本特性，確保產(chǎn)品在不斷迭代新增新功能的過程中，新增的功能組件都能保持基本一致的體驗。
以最常見的一個「算法模板」查詢的場景為例，在左側的條件輸入面板選擇一個合適的算法模板，畫布上會渲染出對應的結果內容，然后用戶會選擇其中感興趣的節(jié)點查看詳情。這三個組件共同組成了一個完成的圖分析操作，這類有固定條件輸入的分析模式被定義為「有明確目的分析」。圖分析產(chǎn)品中，常見的分析模式有3類：
有明確目的：這類分析模式是有明確的分析或查詢條件，這個條件的呈現(xiàn)形式可能是一個規(guī)則表達式，一段 Gremlin 或 GQL 的查詢語句，或明確的起點和終點，甚至是直接查看某個節(jié)點或某條邊的具體信息。常見的模式有：規(guī)則查詢、Gremlin 查詢、關聯(lián)分析、篩選/搜索畫布、查看詳情等；
無明確目的：無明確目的地探索是指基于已有數(shù)據(jù)內容，進行關系的 N 度擴展、下鉆分析、子圖探索、撤銷回退等操作，來挖掘數(shù)據(jù)中的特性，發(fā)現(xiàn)價值或機會點的分析過程；
特殊場景：
內置了 AI 算法能力的分析場景：這類分析場景通常需要借助內置的算法或規(guī)則推理能力來實現(xiàn)，從海量數(shù)據(jù)中快捷的挖掘出符合特定規(guī)則的目標節(jié)點和關系，常見的有：擔保圈、實控人、最短路徑等；
結合時間或地理信息的分析場景：在源數(shù)據(jù)中含有時間和地理維度的內容時，會出現(xiàn)結合時間或地理信息的分析場景。
回顧一下前面介紹的內容，從「全局樣式」到「分析模板」其實都是在做同一件事情：在面對一個「圖」這樣一個陌生的設計對象時，梳理其內在的邏輯，并在這個陌生的領域，定義清楚其運行和存在的邏輯。從最原子級的樣式和交互、組件再到一個完整的分析模式，從不同維度去定義圖產(chǎn)品的「規(guī)則」，以確保不論多復雜的場景，圖分析產(chǎn)品的體驗是可控且有序的。類似于積木一樣，有了統(tǒng)一的接口規(guī)范，無論積木的形狀如何變化，都能完美的拼裝出玩家想要的形狀。
從 ETCGG 的角度出發(fā)，介紹了「AntV 圖可視分析解決方案」設計相關的內容，解決方案還有非常重要一部分的內容就是「技術方案」，稍后會由我的搭檔 @山果 給大家?guī)砀敿毜慕榻B內容。
在整個分享中，我們介紹了圖分析產(chǎn)品的4個不同的業(yè)務應用領域、3種圖分析模式，定義出了4種圖分析產(chǎn)品的組件類型，同時以交互事件3要素的形式梳理出所有的圖交互事件，以及找到了所有影響「圖」樣式的基礎元素和參數(shù)。理想情況下，有了這些信息之后，我們再去設計一個圖分析產(chǎn)品時，可能就是一個從左到右的連線過程。為此我們也正在努力將這一理念轉化為現(xiàn)實，開源工具 Graphin 2.0 正在設計&開發(fā)中，也盡情期待。
「系統(tǒng)看上去混亂無序，但在其背后卻隱藏著一種非常微妙的秩序」 - 諾貝爾獎得主、物理學家 Murray Gell-Mann 曾經(jīng)說過這樣一句話來描述自然界中那些看上去混亂無序，實則內含秩序的系統(tǒng)現(xiàn)象。這句話用來描述「圖」這類產(chǎn)品也非常貼切，當前圖分析產(chǎn)品處于發(fā)展期，相關的設計領域更是一片不毛之地。AntV 圖方向的同學們此前的一些探索，以及沉淀下來的「設計指引」和「解決方案」就是在圖這類產(chǎn)品的混亂和無序的復雜中，找到其內在的秩序。
圖可視分析領域是一個小眾而又專業(yè)度很高的領域，希望以上的分享的實踐和思考能給在這個領域相關的同學一些啟發(fā)。目前設計在這一領域剛剛開始邁出一小步，還有巨大的未知和機會等著我們去探索，歡迎通過各種渠道隨時交流。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務