作為一枚設(shè)計民工，不僅要面對甲爸們的百般刁難，遇到難搞的數(shù)據(jù)圖表時更是苦不堪言：一份合格的數(shù)據(jù)圖表，在有創(chuàng)意、讓信息一目了然的同時，還要兼具頁面美觀，真是令人頭大。

之前給大家安利過不少好用的圖表生成工具，比如免費(fèi)下載、簡單好上手的「PS拉框神器」：

也有可以光速出圖的在線制作圖表神器「圖表工廠ChartsFactory」：

當(dāng)然，還有可以輕松實(shí)現(xiàn)動態(tài)圖表的「Flourish」：

但在線的神器總是依賴于網(wǎng)絡(luò)，所以今天要給大家介紹的神器就是上面介紹的第一款神器制作團(tuán)隊(duì)的新作：Xd 拉框助手。Xd 算得上目前最全面可靠的 UX 設(shè)計應(yīng)用之一，這下 UI 設(shè)計師們在哪都能快速做出好看、可直接編輯的圖表了。

是不是被這豐富的模板整心動了？那么怎么使用呢？跟上，別掉隊(duì)！往下看~

首先，打開還是熟悉的頁面，簡潔明了。

點(diǎn)擊「下載插件 V1.0.1」下載壓縮按照順序安裝這款 Xd 擴(kuò)展插件。

安裝完成后，在左側(cè)的菜單欄找到 「插件」選項(xiàng)點(diǎn)擊打開，打開后的頁面是這個樣子滴~

界面頂端是圖表的種類選項(xiàng)可按需要選擇相對應(yīng)的圖表；界面底端則是「導(dǎo)入導(dǎo)出 JSON 數(shù)據(jù)」，以及方便新手小白使用的「教程查看」功能非常貼心~

接下來看看具體操作方法~

折線圖

首先使用 Xd 的矩形工具在界面上繪制一個矩形。（大小按照自己需要哦）

勾選插件內(nèi)需要繪制的內(nèi)容，比如圖表 XY 軸的參數(shù)、文字信息、線條設(shè)置等（小提示：底部的文字內(nèi)容需要用英文逗號隔開~）

基本信息設(shè)置完成后，就可以把數(shù)據(jù)往上填啦。

按照自己需要選擇繪制的數(shù)據(jù)，這里可以選擇「隨機(jī)數(shù)據(jù)」和「固定點(diǎn)的數(shù)據(jù)」，（小提示：「隨機(jī)數(shù)據(jù)」的數(shù)字范圍不要超過 Y 軸的整個范圍，「固定點(diǎn)的數(shù)據(jù)」則需要手動填寫，還是要用英文逗號隔開~）

以上的步驟完成后，就是見證奇跡的時刻！

點(diǎn)擊「自動繪制」就能獲得我們所需要繪制的折線圖啦！

是不是很好用？

柱狀圖

還是先用同樣的方式繪制一個矩形框，勾選基本信息，設(shè)置文字信息，在「數(shù)據(jù)」設(shè)置下可以設(shè)置「柱子寬度」與「柱子間距」等參數(shù)，根據(jù)所需數(shù)據(jù)可選擇「添加一根柱子」柱狀圖柱子數(shù)量。

最后小手輕輕點(diǎn)擊「自動繪制」，看！

餅狀圖

繪制方法一致，不管是「普通餅圖」還是牛逼閃閃的「南丁格爾玫瑰圖」都可以繪制~

接著在「數(shù)據(jù)」選項(xiàng)處填寫相應(yīng)的「數(shù)據(jù)名稱」、「數(shù)值」、「顏色」等

最后的自動生成的效果！

雷達(dá)圖

與上面兩種數(shù)據(jù)圖表繪制方法相同，風(fēng)格上有「多邊形」和「圓形」兩種可選，可以對「雷達(dá)背景」、「數(shù)據(jù)頂點(diǎn)」進(jìn)行設(shè)置。

（小提示：頂點(diǎn)的位置分布如圖示~）

然后根據(jù)自己的需求進(jìn)行「數(shù)據(jù)」的參數(shù)設(shè)置。

最后一鍵生成！

地圖繪制

最厲害的來了！不僅支持多種圖表在線生成，還可以制作中國各省市區(qū)的地圖，上方可以進(jìn)行基礎(chǔ)的「顏色」、「文字信息」設(shè)置。

點(diǎn)擊「去下載對應(yīng)數(shù)據(jù)」拉框助手就會打開對應(yīng)的網(wǎng)站，然后進(jìn)行 JSON 數(shù)據(jù)的復(fù)制粘貼到拉框助手就能獲得圖形。

看看一鍵生成的效果吧！還不錯吧~

以上就是 Xd 拉框助手的操作方法啦！

有了這個插件，不管是網(wǎng)頁還是 Office，都可以生成精準(zhǔn)的數(shù)據(jù)圖表，功能強(qiáng)大，簡單好上手~不僅安裝方便、體積小，還無需梯子、免費(fèi)下載，這么好用的神器，絕對能幫你達(dá)到事半功倍的效果！

據(jù)說過段時間還會有 sketch 版拉框神器，搓搓手，期待一下

再次附上 Xd 拉框神器的鏈接：https://www.pslkzs.com/xd/index.php?快用起來吧~

歡迎同學(xué)們關(guān)注最充滿智（dou）慧（bi）的設(shè)計賬號：