# UI 設計師別錯過！原來用 AI 生成擬真圖表的示意圖這麼方便！

- 作者：林鼎淵（Dean Lin）
- 網址：https://deanlin.net/blog/202407/ai-generated-chart-mockups/
- 發布：2024-07-23
- 主題：AI 實戰
- 標籤：ChatGPT、GPT-4o、AI、Charts、UI
- 摘要：網頁 Dashboard 頁面往往要展示很多的圖表，而有些設計師為了讓圖表擬真，花費了大量時間調整細節。這時，AI 生成圖表功能對 UI 設計師非常有用！這邊文章會教大家如何靠「動嘴」來生成各式圖表！

網頁 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 來說，這個功能也能幫助他們生成自己心中的畫面，讓溝通更有效率 🗣️

當然，你心中期待的圖表通常無法一次就產生出來，會需要透過後續的對話來不斷優化。

**但別忘記這只是生成示意圖的工具，不是最終的畫面，千萬不要鑽牛角尖。**

延伸閱讀：[AI 實戰](https://deanlin.net/categories/ai/)

**想將 AI 導入自己的職場與生活嗎？歡迎[購買筆者出版的新書](https://www.books.com.tw/products/0011004216)**，幫助您**在 AI 的浪潮中站穩腳步，並在未來的職場競爭中佔據優勢！**

  [https://www.books.com.tw/products/0011004216](https://www.books.com.tw/products/0011004216)

---

關於作者：林鼎淵（Dean Lin），台灣的生成式 AI 企業內訓講師、外商資安公司軟體專家，也是生成式 AI 創新學院發起人。出版 7 本書（包含全台第一本 ChatGPT 應用專書），兩度獲得 iThome 鐵人賽佳作，累積上百場授課與顧問經驗。（https://deanlin.net/about/）
引用時請附上原文網址：https://deanlin.net/blog/202407/ai-generated-chart-mockups/