<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>UI｜林鼎淵 Dean Lin</title>
    <link>https://deanlin.net/tags/ui/</link>
    <image><url>https://deanlin.net/images/author_hu_aa256fc934e9a932.jpg</url><title>UI｜林鼎淵 Dean Lin</title><link>https://deanlin.net/tags/ui/</link><width>144</width><height>144</height></image>
    <description>林鼎淵（Dean Lin）的部落格：生成式 AI 企業內訓講師、外商資安公司軟體專家、7 本書作者。400 多篇文章用白話分享生成式 AI 實戰、Claude Code 與 Vibe Coding 教學、團隊合作與職場成長。</description>
    <generator>Hugo</generator>
    <language>zh-tw</language>
    <copyright>© 2020–2026 林鼎淵 Dean Lin</copyright>
    <lastBuildDate>Tue, 23 Jul 2024 20:07:53 +0800</lastBuildDate>
    <atom:link href="https://deanlin.net/tags/ui/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>UI 設計師別錯過！原來用 AI 生成擬真圖表的示意圖這麼方便！</title>
      <link>https://deanlin.net/blog/202407/ai-generated-chart-mockups/</link>
      <pubDate>Tue, 23 Jul 2024 20:07:53 +0800</pubDate>
      <guid>https://deanlin.net/blog/202407/ai-generated-chart-mockups/</guid>
      <dc:creator>林鼎淵</dc:creator>
      <category>AI 實戰</category>
      <description>網頁 Dashboard 頁面往往要展示很多的圖表，而有些設計師為了讓圖表擬真，花費了大量時間調整細節。這時，AI 生成圖表功能對 UI 設計師非常有用！這邊文章會教大家如何靠「動嘴」來生成各式圖表！</description>
      <media:content url="https://deanlin.net/blog/202407/ai-generated-chart-mockups/images/ai-generated-chart-mockups-og_hu_a7f5bc36b60f52f9.jpg" medium="image" type="image/jpeg" width="1200" height="675" />
      <content:encoded><![CDATA[<p>網頁 Dashboard 頁面往往要展示很多的圖表，在設計初期為了讓大家了解不同情境下的圖表會如何顯示，UI 設計師會畫出各式各樣的示意圖。</p>
<p>在聊天時發現有些設計師為了讓圖表擬真，花費了大量時間針對細節調整。</p>
<p>此時我才意識到，原來 AI 生成圖表的功能對 UI 設計師來說有很大的幫助！</p>
<p>以 ChatGPT-4o 來說，他能根據不同時間級距（年/月/周 📅）、圖表（圓餅圖/長條圖 📊）、數據（遞增/M型 📈）、顏色（同色系/互補色 🎨）等條件來客製化生成。</p>
<p>這邊文章會教大家如何靠「動嘴」來生成各式圖表；畢竟對筆者這種外行人來說，看到成品比較能判斷設計好壞。</p>
<p><img src="https://deanlin.net/blog/202407/ai-generated-chart-mockups/images/ai-generated-chart-mockups-01.webp" width="1143" height="641" alt="UI 設計師別錯過！原來用 AI 生成擬真圖表的示意圖這麼方便！（圖 1）" fetchpriority="high" decoding="async"></p>
<blockquote>
<p>下面的範例以 ChatGPT 4o 來做 Demo，大家可以用自己熟悉的 AI 工具，使用原理都差不多。</p>
</blockquote>
<h2 id="基礎運用驅動程式來生成指定的-chart-">基礎運用：驅動程式來生成指定的 Chart 📊<a class="h-anchor" href="#%e5%9f%ba%e7%a4%8e%e9%81%8b%e7%94%a8%e9%a9%85%e5%8b%95%e7%a8%8b%e5%bc%8f%e4%be%86%e7%94%9f%e6%88%90%e6%8c%87%e5%ae%9a%e7%9a%84-chart-" aria-label="這個段落的連結"></a></h2>
<p>下面用一個複雜邏輯的 Stack Bar Chart 來做示範。</p>
<h3 class="h-nomark" id="-prompt">🤖 Prompt：<a class="h-anchor" href="#-prompt" aria-label="這個段落的連結"></a></h3>
<pre tabindex="0"><code>請根據以下需求用 Python 撰寫程式後，最後用圖表呈現
- 時間長度: 1 個月
- 時間粒度: 1 小時
- 圖表類型: Stack Bar Chart
- 資料: Top10 的銷售產品
- 特殊要求: Top10 的顏色要不一樣，請使用亮色系呈現，並且每個 Bar 之間不要有間隔
</code></pre><p>透過上面的 Prompt 就能驅動 ChatGPT 寫程式。</p>
<p><img src="https://deanlin.net/blog/202407/ai-generated-chart-mockups/images/ai-generated-chart-mockups-02.webp" width="883" height="554" alt="🤖 Prompt：（圖 2）" loading="lazy" decoding="async"></p>
<p>寫完程式後便會生成圖表，一開始你會發現圖表是空白的，別緊張，點擊上方的「Switch to Static Chart」便可看到圖表。</p>
<p><img src="https://deanlin.net/blog/202407/ai-generated-chart-mockups/images/ai-generated-chart-mockups-03.webp" width="737" height="547" alt="🤖 Prompt：（圖 3）" loading="lazy" decoding="async"></p>
<p><img src="https://deanlin.net/blog/202407/ai-generated-chart-mockups/images/ai-generated-chart-mockups-04.webp" width="737" height="519" alt="🤖 Prompt：（圖 4）" loading="lazy" decoding="async"></p>
<p>當然這個圖表也是可以放大與下載的。</p>
<p><img src="https://deanlin.net/blog/202407/ai-generated-chart-mockups/images/ai-generated-chart-mockups-05.webp" width="1400" height="701" alt="🤖 Prompt：（圖 5）" loading="lazy" decoding="async"></p>
<hr>
<h2 id="進階運用-1生成指定情境的-chart要求圖表細節-">進階運用 1：生成指定情境的 Chart、要求圖表細節 🔧<a class="h-anchor" href="#%e9%80%b2%e9%9a%8e%e9%81%8b%e7%94%a8-1%e7%94%9f%e6%88%90%e6%8c%87%e5%ae%9a%e6%83%85%e5%a2%83%e7%9a%84-chart%e8%a6%81%e6%b1%82%e5%9c%96%e8%a1%a8%e7%b4%b0%e7%af%80-" aria-label="這個段落的連結"></a></h2>
<p>圖表生成後，你肯定會對一些細節不滿意，或是想以這張圖為基礎生成指定情境，下面就來做個示範。</p>
<h3 class="h-nomark" id="-prompt-1">🤖 Prompt：<a class="h-anchor" href="#-prompt-1" aria-label="這個段落的連結"></a></h3>
<pre tabindex="0"><code>請根據以下需求調整圖表細節
- X 軸: 列出月份與日期，時間間隔為 3 天，月份為 6 月，用斜 45% 顯示
- Y 軸: 顯示銷售數量，最大值為 2000，數量間隔為 200
- 數據波動: 希望數值成曲線向上的趨勢，第一天所有產品加總接近 0，最後一天所有產品加總接近 2000
- 產品名稱: 請用常見的電子產品來示意（ex: iphone、notebook）
</code></pre><p><img src="https://deanlin.net/blog/202407/ai-generated-chart-mockups/images/ai-generated-chart-mockups-06.webp" width="1400" height="743" alt="🤖 Prompt：（圖 6）" loading="lazy" decoding="async"></p>
<p>過去 UI 設計師會需要花許多時間產生的示意圖，現在透過明確的 Prompt 就能直接產生！</p>
<p>如果想呈現一週的數據，直接跟他說就好：「請呈現 7 天的資料」</p>
<p><img src="https://deanlin.net/blog/202407/ai-generated-chart-mockups/images/ai-generated-chart-mockups-07.webp" width="1400" height="742" alt="🤖 Prompt：（圖 7）" loading="lazy" decoding="async"></p>
<hr>
<h2 id="進階運用-2產生極端情境的-chart-">進階運用 2：產生極端情境的 Chart 📉<a class="h-anchor" href="#%e9%80%b2%e9%9a%8e%e9%81%8b%e7%94%a8-2%e7%94%a2%e7%94%9f%e6%a5%b5%e7%ab%af%e6%83%85%e5%a2%83%e7%9a%84-chart-" aria-label="這個段落的連結"></a></h2>
<p>在規劃之初，我們就需要考量在極端情境下 Chart 會如何顯示。</p>
<p>有些設計其實大腦在想像時就已經被否決了，但如果你不做出來，有些人不認為這樣的設計是錯的。</p>
<p>這些讓人心累的設計，就交給 AI 來生成吧！</p>
<h3 class="h-nomark" id="-prompt-2">🤖 Prompt：<a class="h-anchor" href="#-prompt-2" aria-label="這個段落的連結"></a></h3>
<pre tabindex="0"><code>請根據以下需求用 Python 撰寫程式後，最後用圖表呈現
- 圖表類型: Pie Chart
- 資料: Top10 的銷售產品，請用常見的電子產品來示意（ex: iphone、notebook）
- 顏色要求: Top10 的顏色要不一樣，請使用同色系呈現
- 數值要求: Top1 佔比為 50%、Top2 佔比為 38%，請用程式計算出剩下 Top3~10 的百分比
- 名稱顯示: Pie Chart 的每個產品會有一條線往外拉顯示對應的產品名稱，切記產品名稱不要重疊
</code></pre><p><img src="https://deanlin.net/blog/202407/ai-generated-chart-mockups/images/ai-generated-chart-mockups-08.webp" width="1400" height="870" alt="🤖 Prompt：（圖 8）" loading="lazy" decoding="async"></p>
<hr>
<h2 id="總結--使用心得">總結 &amp; 使用心得<a class="h-anchor" href="#%e7%b8%bd%e7%b5%90--%e4%bd%bf%e7%94%a8%e5%bf%83%e5%be%97" aria-label="這個段落的連結"></a></h2>
<p>過去各式圖表、指定情境、極端畫面的設計會讓人覺得心累 😩</p>
<p>但現在有了 AI 輔助，可以讓 UI 設計師產生示意圖的效率增加不少 🚀</p>
<p>對 PM 來說，這個功能也能幫助他們生成自己心中的畫面，讓溝通更有效率 🗣️</p>
<p>當然，你心中期待的圖表通常無法一次就產生出來，會需要透過後續的對話來不斷優化。</p>
<p><strong>但別忘記這只是生成示意圖的工具，不是最終的畫面，千萬不要鑽牛角尖。</strong></p>
<a class="linkcard" href="https://deanlin.net/categories/ai/">
  <span class="lc-body">
    <span class="lc-title">AI 實戰</span>
    <span class="lc-desc">實測生成式 AI 工具、Vibe Coding 與自動化流程的第一手心得，把 AI 變成每天都用得上的即戰力。</span>
    <span class="lc-site"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 6l6 6-6 6"/></svg>林鼎淵 Dean Lin</span>
  </span>
</a>

<p><strong>想將 AI 導入自己的職場與生活嗎？歡迎<a href="https://www.books.com.tw/products/0011004216">購買筆者出版的新書</a></strong>，幫助您<strong>在 AI 的浪潮中站穩腳步，並在未來的職場競爭中佔據優勢！</strong></p>
<figure class="figure"><img src="https://deanlin.net/blog/202407/ai-generated-chart-mockups/images/ai-generated-chart-mockups-09.webp" width="1400" height="319" alt="林鼎淵著作《ChatGPT 與 AI 繪圖效率大師（新增 Copilot、Gamma、Runway、Suno）》" loading="lazy" decoding="async">
  <figcaption><a href="https://www.books.com.tw/products/0011004216">https://www.books.com.tw/products/0011004216</a></figcaption>
</figure>

]]></content:encoded>
    </item>
  </channel>
</rss>
