SVG數(shù)據(jù)可視化設計（AI）完全工作流解讀｜計育韜
AI 的 SVG 創(chuàng)作極限在哪里？絕不是那些初級的流程圖生成和粗糙的商業(yè)模型設計。以下是由我們 JZ Creative Studio 通過 Claude 和 Deepseek 開展的專業(yè)級 SVG Data Visualization 創(chuàng)作，應廣大讀者強烈要求，專程直播講授了一期 AI 工作流分享。長按識別上方卡片，可前往嗶哩嗶哩收看回放視頻，下方提供完整的授課知識點總結。
想現(xiàn)場聆聽我們的更多干貨分享？也可以關注《講座報名｜AIGC融媒體創(chuàng)作與SVG可視化交互設計｜高校公益巡講站點招募》，我們將開啟第九輪的全國技術普及授課，期待屆時與你在校園相見。
數(shù)據(jù)可視化項目中
AI 編程的應用與實踐
*講座實錄
本次課程由計育韜老師主講，聚焦于 AI 在數(shù)據(jù)可視化項目編程中的應用。課程將從前期準備開始，詳述基于 AI 開展數(shù)據(jù)可視化設計的基本條件，并將開發(fā)過程分解為確切的可執(zhí)行步驟。
一、前期準備
（一）上網(wǎng)方式與工具選擇
對于新手而言，無論是涉足 AI 編程領域，還是進行簡單的前端項目開發(fā)，確保正確的上網(wǎng)方式都是至關重要的前提條件。在編程工具的選擇上，若考慮人工智能編程，Cursor 是計育韜老師的優(yōu)先推薦選項。不過，需要明確的是，Cursor 和 Trae 并非傳統(tǒng)意義上純粹的編程工具。除了具備編程功能，它也在多種其他場景下發(fā)揮非編程作用，例如與 Blender 結合進行項目創(chuàng)作：
*Cusor MCP 控制 Blender 建模復旦大學光華樓
在實際使用中，Cursor 也存在一些局限性，當處理代碼量較大的單一文件時，其編程窗口可能會出現(xiàn)卡頓現(xiàn)象。相比之下，其他專業(yè)編程軟件，如 Sublime Text 或 VS Code，在代碼編寫過程中較少出現(xiàn)此類卡頓問題。
（二）模型選擇
在擁有 Cursor 和正確上網(wǎng)方式后，模型的選擇成為關鍵。當前，眾多大語言模型都宣稱擅長編程和數(shù)學，但實際應用效果參差不齊。計育韜老師認為在選擇模型時，不能僅僅依據(jù)其宣傳（Cherry-pick），還需綜合考慮多方面因素。以數(shù)據(jù)可視化項目為例，優(yōu)先推薦使用 Claude 3.5 和 Claude 3.7 模型。Claude 3.5 對指令的遵循度較高，更符合數(shù)據(jù)可視化嚴格遵循個人意圖進行內(nèi)容設計的需求；而 Claude 3.7 和 Deepseek 雖然具有一些行業(yè)新特性（如長思考模式），但在數(shù)據(jù)可視化場景下其發(fā)散性有時過強，相對不受控（甚至篡改數(shù)據(jù)），且思考過程產(chǎn)生的大量會話內(nèi)容堆積容易影響編程效率。此外，GPT 在編程方面表現(xiàn)欠佳，不建議用于數(shù)據(jù)可視化前端項目及大型應用系統(tǒng)開發(fā)；Grok 的編程功能雖有開發(fā)者認為尚可，但由于使用人數(shù)較少，難以進行全面評價。
二、數(shù)據(jù)可視化的概念與要點
（一）數(shù)據(jù)可視化的定義
數(shù)據(jù)可視化并非簡單地將數(shù)據(jù)以圖表形式呈現(xiàn)，它包含三個核心要點：
優(yōu)化信息傳達效率：數(shù)據(jù)可視化的首要目的是優(yōu)化信息傳達效率。在設計圖表時，不能僅僅追求美觀，而忽視了信息的可讀性。以矩形樹圖為例，當面對多維度且無法用同一坐標衡量的數(shù)據(jù)時，矩形樹圖能夠通過模塊大小區(qū)分數(shù)據(jù)的重要性，從而更直觀地展示數(shù)據(jù)重點，提高信息傳達效率。
表現(xiàn)特定數(shù)據(jù)特性：數(shù)據(jù)可視化應具有明確的態(tài)度，通過對數(shù)據(jù)的呈現(xiàn)突出特定重點。例如，在展示小 P 語音助手喚醒次數(shù)的數(shù)據(jù)時，通過視覺設計引導用戶關注除夕夜和元宵節(jié)這兩個節(jié)點，體現(xiàn)產(chǎn)品的智能特性和人機交互的和諧感。
具備圖形化視覺特征的靜動態(tài)表現(xiàn)：數(shù)據(jù)可視化可以是靜態(tài)圖表，也可以是動態(tài)圖表，甚至可以包含交互效果，如鼠標懸停時浮現(xiàn)窗口等。這些表現(xiàn)形式都有助于更生動地展示數(shù)據(jù)。
（二）使用 AI 進行數(shù)據(jù)可視化的優(yōu)勢：
數(shù)據(jù)與圖形的映射效率：傳統(tǒng)的數(shù)據(jù)可視化工具在數(shù)據(jù)與圖形的映射方面存在一定局限性，如在線軟件模板的可選項較少，當數(shù)據(jù)形式復雜時難以進行良好的映射。而 AI 能夠將數(shù)據(jù)準確地映射到坐標，有效提升映射效率。
可維護性：使用 AI 進行數(shù)據(jù)可視化，可維護性更強。當數(shù)據(jù)發(fā)生變化，如數(shù)據(jù)遺漏、需要調(diào)整或添加新內(nèi)容時，AI 能夠快速響應并進行修改。當對數(shù)據(jù)進行調(diào)整時，AI 可以在短時間內(nèi)完成整個圖表的修改。
創(chuàng)造性：AI 在數(shù)據(jù)可視化中展現(xiàn)出強大的創(chuàng)造性。它能夠設計出新穎的圖表，如雙 y 軸柱狀圖，這種圖表在表達兩組單位不同但具有確切關系的數(shù)據(jù)時非常有效。同時，AI 還能根據(jù)參考圖進行創(chuàng)作，借鑒原作的優(yōu)點并改進不足，實現(xiàn)內(nèi)容的優(yōu)化。
可執(zhí)行性：AI 在執(zhí)行數(shù)據(jù)可視化任務時效率較高，能夠快速處理大量數(shù)據(jù)和批量動畫。然而，大模型當下存在普遍幻覺問題，可能產(chǎn)生增加或篡改數(shù)據(jù)行為，因此在使用 AI 時需要仔細檢查。但總體而言，其執(zhí)行效率遠高于人工。
三、數(shù)據(jù)可視化項目的實施步驟
（一）確定開發(fā)環(huán)境
在開始數(shù)據(jù)可視化項目之前，首先要確定開發(fā)環(huán)境。開發(fā)環(huán)境主要分為兩種情況：純網(wǎng)頁式交互和特殊場景（如公眾號）。在純網(wǎng)頁式交互中，使用 AI 生成 HTML 文檔較為常見，因為內(nèi)聯(lián)式 HTML 用一個文檔就能解決大多數(shù)數(shù)據(jù)可視化呈現(xiàn)問題，方便分享。而在公眾號等特殊場景下，SVG 開發(fā)會受到一些限制，如需要遵循公眾號生態(tài)的 SVG AttributeName 白名單規(guī)則，否則可能導致開發(fā)的內(nèi)容無法正常導入公眾號。
（二）數(shù)據(jù)準備
在數(shù)據(jù)準備階段，需要注意數(shù)據(jù)格式。大多數(shù) AI 編程工具不能直接讀取 Excel 格式文件，建議使用 CSV 格式文件。CSV 格式文件剔除了 CSS 樣式，更便于 AI 編程工具學習。此外，當面對圖片和 PDF 等格式的數(shù)據(jù)時，也有相應的處理方法。對于圖片，建議使用 Claude 3.5 或 3.7 進行分析，若圖片清晰度不足，可以先使用如 Upscaly 等工具進行高清處理；對于 PDF 文件，如果直接交給 AI 編程工具效果不佳，計育韜老師建議將其截圖后交給豆包，讓豆包以 Markdown 語法返回內(nèi)容，再將該內(nèi)容喂給 Cursor 或 Trae 等工具，以提高 AI 對數(shù)據(jù)的理解和執(zhí)行準確性。
（三）設計構思
自然語言描述：自然語言描述是設計構思的一種方式。可以通過自然語言向 AI 明確設計要求，包括背景色、高亮色（建議提供色號）、設計風格（如高級感、科技感等）、閱讀方式（如適合豎屏閱讀）、是否添加網(wǎng)格線以及字體要求等。在描述過程中，可以先完成一個部分的設計并調(diào)整至滿意，后續(xù)部分 AI 會延續(xù)該風格進行設計，同時也可以根據(jù)需要進行微調(diào)。
投喂參考圖：給參考圖也是指導 AI 設計的基本方法。在給參考圖時，應先讓 AI 總結參考圖的內(nèi)容，然后再提出設計要求。同時，要注意約束尺寸和明確目的。例如，在設計考公備考材料的信息圖時，先給 AI 提供參考圖，讓其總結后，要求其基于具體應用場景并遵循給定尺寸先實現(xiàn)靜態(tài)數(shù)據(jù)可視化，提示需要突出的數(shù)據(jù)特性。在創(chuàng)作過程中，可能需要對生成的圖表進行一些調(diào)整，如調(diào)整模塊位置、矩形大小、字號等。
*以上為考公復習資料數(shù)據(jù)可視化參考圖
*以上為根據(jù)參考和 Prompts 產(chǎn)生的設計
（四）數(shù)據(jù)收集與處理
數(shù)據(jù)收集是項目的前置步驟，應做到極盡詳細。數(shù)據(jù)的詳細程度對數(shù)據(jù)可視化的效果至關重要，只有詳盡的數(shù)據(jù)才能制作出專業(yè)的數(shù)據(jù)可視化報告。例如，考公材料和小鵬汽車項目中的信息，都經(jīng)過了精心整理和篩選，數(shù)據(jù)嚴謹度高。而類似新聞報道中的一些內(nèi)容數(shù)字，由于維度不足、數(shù)據(jù)缺損，難以用于制作高質量的數(shù)據(jù)可視化內(nèi)容。所以在進行數(shù)據(jù)可視化項目時，應確保數(shù)據(jù)收集的顆粒度足夠細。
（五）板塊試錯與項目推進
在項目實施過程中，不要將整個數(shù)據(jù)集一次性喂給 AI，而應按照板塊進行試錯。先創(chuàng)建一個有限尺寸（如 1200*2000）的 SVG 畫板，并使用 viewBox 寫法，以適配移動端顯示。同時，建議補一個矩形作為背景色，并使用 RGB 寫法，避免在移動端深色模式下出現(xiàn)問題。在插入位圖時，可以使用 foreignObject 的寫法，通過編組嵌套并設置寬高、x 軸和 y 軸的關系來展示圖像。在生成與修改過程中，盡量給 AI 以具體參數(shù)，如移動的具體單位、顏色的具體數(shù)值等，以提高修改的準確性和效率。完成一個部分后，繼續(xù)下一部分的設計，并通過自然語言隔斷任務。如果需要中途修改，應指明位置或行數(shù)，以確保 AI 能夠準確修改目標內(nèi)容。整個項目的推進過程就是生成、修改、任務隔斷和中途修改的循環(huán)，若能明確所有前置條件和要求，項目將能夠順利推進。
最后，計育韜老師為大家特別帶來了一張工作截圖，展示了在多輪對話中僅輸入「是」，AI 就繼續(xù)自動執(zhí)行設計工作。
計育韜老師就此提出：如果你的 AI 在工作流中不會提出自己的計劃，不知道下一步應該做什么，那就說明你的 Prompts 存在問題；反之，如果 AI 開始在每輪執(zhí)行結束后提出自己的下一步計劃，提出需要你確認或調(diào)整，那么 AIGC 才真正進入了至高境界。
想現(xiàn)場聆聽我們的更多干貨分享？也可以關注《講座報名｜AIGC融媒體創(chuàng)作與SVG可視化交互設計｜高校公益巡講站點招募》，我們將開啟第九輪的全國技術普及授課，期待屆時與你在校園相見。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規(guī)范轉載侵權必究。
未經(jīng)授權嚴禁轉載，授權事宜請聯(lián)系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）