網頁 Dashboard 頁面往往要展示很多的圖表，在設計初期為了讓大家了解不同情境下的圖表會如何顯示，UI 設計師會畫出各式各樣的示意圖。
在聊天時發現有些設計師為了讓圖表擬真，花費了大量時間針對細節調整。
此時我才意識到，原來 AI 生成圖表的功能對 UI 設計師來說有很大的幫助！
以 ChatGPT-4o 來說，他能根據不同時間級距（年/月/周 📅）、圖表（圓餅圖/長條圖 📊）、數據（遞增/M型 📈）、顏色（同色系/互補色 🎨）等條件來客製化生成。
這邊文章會教大家如何靠「動嘴」來生成各式圖表；畢竟對筆者這種外行人來說，看到成品比較能判斷設計好壞。
下面的範例以 ChatGPT 4o 來做 Demo，大家可以用自己熟悉的 AI 工具，使用原理都差不多。
▋基礎運用：驅動程式來生成指定的 Chart 📊
下面用一個複雜邏輯的 Stack Bar Chart 來做示範。
🤖 Prompt：
請根據以下需求用 Python 撰寫程式後，最後用圖表呈現
- 時間長度: 1 個月
- 時間粒度: 1 小時
- 圖表類型: Stack Bar Chart
- 資料: Top10 的銷售產品
- 特殊要求: Top10 的顏色要不一樣，請使用亮色系呈現，並且每個 Bar 之間不要有間隔透過上面的 Prompt 就能驅動 ChatGPT 寫程式。
寫完程式後便會生成圖表，一開始你會發現圖表是空白的，別緊張，點擊上方的「Switch to Static Chart」便可看到圖表。
當然這個圖表也是可以放大與下載的。
▋進階運用 1：生成指定情境的 Chart、要求圖表細節 🔧
圖表生成後，你肯定會對一些細節不滿意，或是想以這張圖為基礎生成指定情境，下面就來做個示範。
🤖 Prompt：
請根據以下需求調整圖表細節
- X 軸: 列出月份與日期，時間間隔為 3 天，月份為 6 月，用斜 45% 顯示
- Y 軸: 顯示銷售數量，最大值為 2000，數量間隔為 200
- 數據波動: 希望數值成曲線向上的趨勢，第一天所有產品加總接近 0，最後一天所有產品加總接近 2000
- 產品名稱: 請用常見的電子產品來示意（ex: iphone、notebook）
過去 UI 設計師會需要花許多時間產生的示意圖，現在透過明確的 Prompt 就能直接產生！
如果想呈現一週的數據，直接跟他說就好：「請呈現 7 天的資料」
▋進階運用 2：產生極端情境的 Chart 📉
在規劃之初，我們就需要考量在極端情境下 Chart 會如何顯示。
有些設計其實大腦在想像時就已經被否決了，但如果你不做出來，有些人不認為這樣的設計是錯的。
這些讓人心累的設計，就交給 AI 來生成吧！
🤖 Prompt：
請根據以下需求用 Python 撰寫程式後，最後用圖表呈現
- 圖表類型: Pie Chart
- 資料: Top10 的銷售產品，請用常見的電子產品來示意（ex: iphone、notebook）
- 顏色要求: Top10 的顏色要不一樣，請使用同色系呈現
- 數值要求: Top1 佔比為 50%、Top2 佔比為 38%，請用程式計算出剩下 Top3~10 的百分比
- 名稱顯示: Pie Chart 的每個產品會有一條線往外拉顯示對應的產品名稱，切記產品名稱不要重疊
▋總結 & 使用心得
過去各式圖表、指定情境、極端畫面的設計會讓人覺得心累 😩
但現在有了 AI 輔助，可以讓 UI 設計師產生示意圖的效率增加不少 🚀
對 PM 來說，這個功能也能幫助他們生成自己心中的畫面，讓溝通更有效率 🗣️
當然，你心中期待的圖表通常無法一次就產生出來，會需要透過後續的對話來不斷優化。
但別忘記這只是生成示意圖的工具，不是最終的畫面，千萬不要鑽牛角尖。
如果這篇文章對你有幫助，可以對文章拍手讓我知道 👏🏻，也歡迎點擊「Follow」來追蹤我～
▶︎ 如果這篇文章有幫助到你
1. 可以點擊下方「Follow」來追蹤我～
2. 可以對文章拍手讓我知道 👏🏻
你們的追蹤與鼓勵是我繼續寫作的動力 🙏🏼
▶︎ 如果你對工程師的職涯感到迷茫
1. 也許我在iT邦幫忙發表的系列文可以給你不一樣的觀點 💡
2. 也歡迎您到書局選購支持，透過豐富的案例來重新檢視自己的職涯
