ChatGPT必收指令,給 UI / UX 設計師

14 個 ChatGPT 必收指令,專給 UI / UX 設計師的秘笈!

許多人都已開始利用 AI 協助工作,ChatGPT 是近年來最受歡迎的 AI 軟體,可以協助許多領域的工作

UI / UX 設計師在工作前期,就需要花費大量的時間和精力來理解用戶需求,接著開始做大量的資料考察研究,與客戶、團隊進行溝通協作,通常就耗費了好幾天的工作時間。

本文將帶你了解 ChatGPT 可以如何協助 UI / UX 工作,我們整理了幾個實用的例子,並將告訴你該如何對 ChatGPT 下指令,讓你的設計過程更有效率。更多 網站設計觀念介紹

一起打開 ChatGPT 來試試吧:)

5 個給設計師的 ChatGPT 中文指令(影片學習)

1. 先賦予 ChatGPT 角色

在開始對 ChatGPT 提問前,我們建議你先賦予 ChatGPT 一個角色,例如:你是一名專業的  UI / UX  專家,稍後請給我詳細的建議。

這個指令將會使 ChatGPT 以該角色的角度提出專業建議,接下來的回答將會更有深度唷

開頭先賦予 ChatGPT 角色
開頭先賦予 ChatGPT 角色

2. 文案生成

Lorem ipsum 簡稱 Lipsum,這對身為  UI / UX  設計師的大家來說應該不太陌生,在設計階段時,常常會使用這串句子來測試文章版型。

這當然還是一個非常好用的測試文,不過請試著想想看,如果直接用符合案件主題的文章來做版型測試,那不是會更好嗎?

你不需要耗費時間構想文案,只需要把文案主題提供給 ChatGPT,它就能幫你快速生成符合的文章,讓你向客戶呈現時能有更棒、更貼近現實的效果

ChatGPT 快速生成符合案件主題的文案
ChatGPT 快速生成符合案件主題的文案

3. 尋找設計資源

在設計網站的過程,一定常常會遇到找不到圖片素材或耗費太多時間,查找相關設計資源的窘境吧!

現在你不必再浪費時間尋找素材資源,直接下一句簡單的指令,ChatGPT 就可以為你整理好相關設計資源網站

ChatGPT 快速搜集免費 UI 套件資源
ChatGPT 快速搜集免費 UI 套件資源

你甚至可以請 ChatGPT 將資料整理成表格,讓所有資訊更方便易讀。

此外,ChatGPT 還會貼心附上網站連結,只要點擊就會另開分頁前往網站,超級方便!

之後你也能將表格直接複製到 Word 或是截圖分享給協作的同事們,成為同事間的得力小助手:)

請 ChatGPT 以表格方式提供各種 UI 設計資源。
請 ChatGPT 以表格方式提供各種 UI 設計資源。
請 ChatGPT 以表格方式提供各種 UX 設計資源。
請 ChatGPT 以表格方式提供各種 UX 設計資源。

4. UX 研究資料

UX 設計師在開始設計網站功能前,通常會先進入查找研究資料階段,針對目標客群的使用習慣去設計介面,這個過程是非常耗時且累人的。

今天開始就讓 ChatGPT 來研究吧!把你想要知道的資訊、目標客群都丟給 ChatGPT,讓它來幫你統整分析。

請 ChatGPT 分析台灣人用手機 app 購物的使用率
請 ChatGPT 分析台灣人用手機 app 購物的使用率

需要注意的是,ChatGPT 沒有辦法提供實際的研究資料或統計數據,頂多可以建議你前往哪些網站查看研究資料

所以建議設計師們利用 ChatGPT 之餘,也還是要撥一點時間親自搜尋研究唷!

ChatGPT 無法提供即時研究資料或數據
ChatGPT 無法提供即時研究資料或數據

5. 了解網站使用者特質

當  UI / UX  設計師在設計一個網站時,事先了解使用者特質,並針對其特質去做設計,是非常重要的

例如使用網路購買機票的人,可能是因為想要訂購便宜的機票,那麼在設計機票網站時,就需要特別設計價格篩選器之類的功能,來符合使用者的需求。

你可以具體要求 ChatGPT 提出幾個例子,範例中我們請 ChatGPT 舉出 3 個例子,ChatGPT 就回覆了我們 3 個不同類型的客群,以及各客群不同的使用需求偏好。

請 ChatGPT 提出 3 個使用旅遊網站購買機票的用戶的特質
請 ChatGPT 提出 3 個使用旅遊網站購買機票的用戶的特質

透過了解網站客戶的需求特質,就可以製作出優質的 UX 設計網站,讓使用者順暢瀏覽網頁,並在下次有需求時,再次回到同一個網站。


6. 提供網站 Wireframe 想法

Wireframe( 線框稿 )是  UI / UX  設計師常用的設計方式之一,主要目的是在排除字型、顏色設計的狀態下,規劃網站架構、功能、內容等…。

在實際繪製 Wireframe 前,你可以使用 ChatGPT 來幫你規劃網站架構及功能,這可以省下許多塗塗改改的時間

請 ChatGPT 提出網站 Wireframe 建議
請 ChatGPT 提出網站 Wireframe 建議

完成網站基本結構和內容佈局後,就可以開始繪製 Wireframe,讓後續設計和開發工作更順利。

可惜的是,ChatGPT 只是一個語言模型,所以只能以文字回覆意見,還沒辦法替 UI / UX 設計師繪製實際的 Wireframe,所以設計師們還是要花點時間親自繪製囉!

ChatGPT 無法實際繪製網站 Wireframe
ChatGPT 無法實際繪製網站 Wireframe

7. 使用者流程建議

User Flow 是一個網站的使用者操作流程,描述用戶如何從一個步驟轉移到另一個步驟,從用戶進入網站,點擊按鈕到特定頁面,最後完成購物或表單提交等..。

大家一定都有使用購物網站購物的經驗,但當  UI / UX  設計師第一次要設計一個購物網站時,可能還是對購物網站的 User Flow 沒什麼頭緒。

這時可以請 ChatGPT 提供購物網站的 User flow,讓 UI / UX 設計師可以更了解某類型網站的使用者流程,進而設計流暢的使用者介面。更多 架設購物網站教學

請 ChatGPT 列出購物網站 User flow
請 ChatGPT 列出購物網站 User flow

8. Web 與 App UI / UX 差異比較

許多中小型、大型企業,除了架設官方網站外,也會再另外設計開發官方的 App 軟體。

你也許設計過許多大型網站,經驗豐富,但設計手機 App 介面就又是另一回事了!

網站設計因介面較大,可顯示的內容較多,所以可以做很多功能設計排版,但 App 介面空間有限,所以需要針對重要的功能做排版佈局。

許多看似同樣的功能,但在網站和 App 上都有不同的設計,像是導覽列的呈現方式、付款方式的不同等..( App 可能需要連接 Apple pay 等行動支付的功能 )。

這時你可以請 ChatGPT 協助你,列出 Web 和 App 的 UI / UX 差異比較,並以表格方式呈現,讓你可以清楚的比較各個差異

請 ChatGPT 以表格呈現服飾購物網站在網頁上和 App 上 UI / UX 差異
請 ChatGPT 以表格呈現服飾購物網站在網頁上和 App 上 UI / UX 差異

9. 給予設計建議

行動呼籲按鈕(CTA)用於引導使用者進行某項動作,例如「 註冊帳號 」、「 送出表單 」、「 前往結帳 」等..,幾乎每一個網站都有行動呼籲按鈕的設計。

要如何設計一個行動呼籲按鈕,按鈕又該放在哪裡,讓每一個使用者都注意到按鈕,並想要採取行動呢?

讓 ChatGPT 提供你意見吧!只需要告訴 ChatGPT 你想設計一個行動呼籲按鈕,以及設立這個按鈕的目的是什麼,ChatGPT 就能提供你詳細的建議。

包含按鈕設計、擺放位置,甚至連旁邊應該搭配什麼樣的文案,讓使用者採取行動的意願提升,ChatGPT 都會一併提供建議給你

請 ChatGPT 提供行動呼籲按鈕 UI / UX 設計建議
請 ChatGPT 提供行動呼籲按鈕 UI / UX 設計建議

10. Landing Page 標語構想

Landing Page 是使用者進入網站的第一個畫面,而在 Landing page 上的文字標題則是抓住使用者眼球的第一個項目。

優質的標語能加深使用者繼續瀏覽網站的意願,例如「 探索最新流行趨勢 」、「 在地達人旅遊秘境分享 」等…。

只需要告訴 ChatGPT 你的網站類型,就可以快速生成優質的標題文案,你可以具體指定 ChatGPT 要產出幾個標語文案,多產出幾個選項,就可以從中挑選最合你意的標語。

請 ChatGPT 提供讓人想瀏覽網站的標題文案
請 ChatGPT 提供讓人想瀏覽網站的標題文案

11. 直接請 ChatGPT 生成網站 UI / UX

初次嘗試某種風格的網站,毫無頭緒,或是經手了太多的案子,靈感枯竭嗎?

那就直接讓 ChatGPT 幫你設計吧!只需要把網站類型、目的需求等,提供 ChatGPT,讓它直接幫你構想所有字體、配色、元素、結構等..

假設你想建立一個美妝部落格,除了單純想分享美妝技巧外,主要還想吸引美妝業者談合作業配,那麼你可以告訴 ChatGPT 你想建立美妝部落格,目的是吸引美妝業者洽談合作,請 ChatGPT 提供 UI / UX 建議。

將網站類型、目的需求提供 ChatGPT,給予 UI / UX 建議
將網站類型、目的需求提供 ChatGPT,給予 UI / UX 建議

又或是你想設計一個日系風格的網站,用於食品販賣,那麼你可以請 ChatGPT 提供你清新、日系風格的食品網站設計建議。

向 ChatGPT 說明網站風格方向,請它給予設計建議
向 ChatGPT 說明網站風格方向,請它給予設計建議

12. 提案技巧

你擁有豐富的 UI / UX 網頁設計經驗及能力,但是不擅於呈現你的作品嗎?

那麼你也可以使用 ChatGPT 來給你一些可以吸引業主目光的提案小技巧與想法!ChatGPT 會列出細項並解釋為什麼應該要這麼做。

像是建議你提案時加上相關數據,透過數據分析競爭對手、市場趨勢等,來向業主證明你的設計提案是有經過深入研究而考量出來的設計,並不是空口說白話。

請 ChatGPT 提供可以吸引業主的設計提案建議
請 ChatGPT 提供可以吸引業主的設計提案建議

13. 設計術語解釋

Functional Map、Flow Chart、User Story、Prototype,這些 UI / UX 設計的專業術語你都知道嗎?

新手設計師在遇到一些設計術語時,可能不完全了解術語的意思,在和前輩溝通時,都一知半解。

又或是在向發案業主說明設計時,業主更不可能知道這些專業術語代表什麼意思,這時可以請 ChatGPT 解釋相關術語,並舉出實際例子,讓業主可以輕鬆理解

ChatGPT 解釋相關術語,並舉出實際例子
ChatGPT 解釋相關術語,並舉出實際例子

不過 ChatGPT 可能因為想要提供完善的解釋,所以有時回覆會比較長一點,但你或業主可能沒有時間和心力看落落長的解釋,這時你可以再請 ChatGPT 將回答精簡

請 ChatGPT 精簡解釋
請 ChatGPT 精簡解釋

透過 ChatGPT 的解釋,以後你就不必在頭痛如何向客戶解釋什麼是 User Story,或為什麼要製作 Prototype 了。


14. 尋找學習平台

科技發展快速,UI / UX 設計師也必須時時刻刻跟上最新趨勢,才能設計出符合當下流行、習慣的優質設計。

或是想更多鑽研 UI / UX 的設計技巧、專業知識,ChatGPT 都能幫你整理能夠進修學習 UI / UX 的網站平台

請 ChatGPT 提供可以進修學習 UI / UX 的平台
請 ChatGPT 提供可以進修學習 UI / UX 的平台

15. 談 ChatGPT 優缺點

舉了這麼多實用的例子,那 ChatGPT 是不是一個什麼都能解決的萬能 AI 工具呢?

很可惜,目前 ChatGPT 還稱不上萬能,還有一些沒辦法解決的問題,以下整理了幾個關於 ChatGPT 的優缺點比較,給大家參考看看。

優點缺點
生成速度快給出的資料不一定都正確
可以獲取不同的想法同樣的問題可能會給出不一樣的回答
省下許多前置工作時間無法針對外部網站網址給出 UI / UX 分析回饋
可用表格方式清晰回覆無法直接繪製流程圖

好啦!以上就是關於 UI / UX 設計師可以如何使用 ChatGPT 協助工作,以及幾個實用指令介紹,希望可以幫助設計師們工作更有效率唷:)


常見問題

我可以直接將 ChatGPT 的回答複製貼上給客戶嗎?

不建議,因為 ChatGPT 的回答並非百分之百正確,目前測試下來,偶爾還是會有錯誤訊息,建議還是要稍微檢查修改再提供。

任何 UI / UX 問題 ChatGPT 都能回答嗎?

不行,ChatGPT 無法提供外部網站的最新研究資料,也無法針對外部網站給予 UI / UX 建議,所以有些問題還是得靠設計師自行找尋答案唷!

ChatGPT 會取代 UI / UX 設計師的工作嗎?

就目前來看 ChatGPT 還沒辦法面面俱到( 回覆資訊錯誤、無法繪製實際框線圖等 ),所以 UI / UX 設計師還是有存在的必要唷!


WordPress 學習資源

學習網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項實用資源,可有效幫助大家做學習。

資源一:WP 高手架站課(線上課程)

這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等 .. 豐富內容,一次教會你。

課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!

點擊下面了解課程,立馬擁有自己的品牌網站,並增加網路曝光度!

WordPress 高手架站課|一堂課讓你變架站高手!
WordPress 高手架站課|一堂課讓你變架站高手!

資源二:SEO 排名飆升課(線上課程)

網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?

這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..,大幅提升行銷能力。

點擊下面了解課程,帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!

SEO 排名飆升課|帶你衝上 Google 第一頁!
SEO 排名飆升課|帶你衝上 Google 第一頁!

資源三:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源四:更多犬哥教學資源

如果你在操作過程中遇到問題,可以加入 犬哥研討社(目前有超過 9000+ 團員)。除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

如果你想學更多網頁設計、數位行銷知識,可關注 YouTube 頻道,或是歡迎追蹤 犬哥網站 IG

犬哥網站社團
犬哥網站社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端