數(shù)據(jù)小白秒變靈魂畫手

雙十一剁手節(jié)馬上就要到了，還在做數(shù)據(jù)可視化界面的你是不是也想剁手。抱怨數(shù)據(jù)圖標(biāo)搭建太難的你，沒接觸過數(shù)據(jù)可視化應(yīng)用也想擁有完美的可視化界面的你，趕緊抓緊這根救命稻草！

DataV重磅發(fā)布的可視化神器 ——“馬良”

概念：“馬良”是DataV內(nèi)嵌的智能識(shí)別設(shè)計(jì)產(chǎn)品，能夠迅速學(xué)習(xí)和識(shí)別手繪草圖、信息圖表、大屏截圖等資料，并在DataV內(nèi)自動(dòng)生成可配置的可視化應(yīng)用。也就是說，馬良的出現(xiàn)，能將過去數(shù)據(jù)可視化應(yīng)用搭建過程中痛苦的前端還原圖表設(shè)計(jì)稿的過程壓縮為秒級(jí)！

先給大家看一眼馬良的三好學(xué)生獎(jiǎng)狀

“媽耶，這也太厲害了”不顧形象地發(fā)出了土撥鼠尖叫

到底是哪些技術(shù)讓馬良獲得了獎(jiǎng)狀

圖表識(shí)別

通過DataV的數(shù)據(jù)訓(xùn)練了可以識(shí)別圖表位置及類型的物體識(shí)別模型，這也是物體識(shí)別模型首次應(yīng)用于數(shù)據(jù)圖表領(lǐng)域。同時(shí)，馬良不僅僅能夠識(shí)別圖表的類型及位置，還可以將可視化界面的顏色進(jìn)行提取。還使用Grid Design這樣的設(shè)計(jì)規(guī)范，來避免由識(shí)別導(dǎo)致的布局誤差。

顏色識(shí)別

馬良將從原始圖片中提取顏色并在優(yōu)化后加以應(yīng)用。根據(jù)WCAG對(duì)比度標(biāo)準(zhǔn)計(jì)算出使得和背景色對(duì)比度達(dá)到7:1的文本顏色。接著對(duì)提取到的顏色進(jìn)行過濾，去除背景色相似色和文本色相似色，然后對(duì)剩余的顏色進(jìn)行聚類得到主色。最后使用色板生成方案生成色板并應(yīng)用于大屏中。

文字及字體識(shí)別

馬良可以支持對(duì)文字及字體的識(shí)別，同時(shí)將識(shí)別到的文字及字體還原到生成可視化中。在字體識(shí)別中，我們使用了ResNet-18 作為識(shí)別的模型。從而實(shí)現(xiàn)了能夠識(shí)別案例可視化中的字體，例如包括襯線體及無襯線體等。同時(shí)使用了OCR等傳統(tǒng)方案對(duì)文字進(jìn)行了識(shí)別。

馬良生成 DataV 大屏的過程

第一步 將馬良識(shí)別得到的圖表類型映射為 DataV 中的組件類型，同時(shí)結(jié)合圖表的位置，使用默認(rèn)的圖表樣式配置和數(shù)據(jù)配置，生成一份“JSON”格式的大屏的基本配置。
第二步 將馬良識(shí)別得到色彩信息作為大屏的主題配色，修改大屏相關(guān)色彩配置（如背景顏色和文字顏色），并遍歷大屏中的每個(gè)組件，應(yīng)用當(dāng)前的主題配色。
第三步 根據(jù)識(shí)別得到的文字信息，修改文字類組件的字體、字號(hào)等樣式配置，并使用識(shí)別得到的文字內(nèi)容，作為文字組件的數(shù)據(jù)。
第四步 我們通過 DataV 提供的大屏生成接口，將最終的大屏配置導(dǎo)入到DataV 產(chǎn)品中生成為可交互的可視化大屏，用戶可以在此基礎(chǔ)上繼續(xù)優(yōu)化，完成最終的數(shù)據(jù)可視化

為了凸顯一下馬良有多優(yōu)秀，我決定給大家看一下流程對(duì)比

與傳統(tǒng)流程相比，馬良極大減少了傳統(tǒng)的設(shè)計(jì)流程，新的流程支持通過圖片進(jìn)行原型設(shè)計(jì)及前端還原，并且也支持后續(xù)的設(shè)計(jì)微調(diào)。

最后，我們一起來看一下馬良具體是怎么使用的
情況一：當(dāng)你已經(jīng)在紙上畫好手繪草圖，卻想馬上看到可視化的大屏?xí)r，可以靜靜等待馬良自動(dòng)識(shí)別。

如此簡(jiǎn)單抽象的圖秒變圖表的瞬間，有沒有“哇”的一聲哭出來?。。?/p>

情況二：當(dāng)你有奇思妙想，連圖都懶得畫時(shí)，可以找一些平面設(shè)計(jì)作品、截圖、設(shè)計(jì)稿作為參考，并上傳至馬良，接著靜靜等待馬良自動(dòng)識(shí)別。

圖片可以準(zhǔn)確識(shí)別出來，簡(jiǎn)直是解放了設(shè)計(jì)大大的雙手！

有沒有很想試一試，心動(dòng)不如行動(dòng)！趕緊來DataV變身“馬良”吧！

該功能已在企業(yè)版和專業(yè)版中上線，體驗(yàn)點(diǎn)擊鏈接哦！

鏈接：https://data.aliyun.com/visual/datav