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