方格精選

設計師必看:這款 Google Stitch 正在改寫你與工程師的溝通方式

更新於 發佈於 閱讀時間約 4 分鐘
任何開發模式,最終都是要解決「溝通」這個問題。


因此設計師著手製作 Wireframe 、功能架構圖、顧客旅程圖等方式,將產品需求,藉由各種視覺化的方式讓開發人員可以理解,確保設計與開發的一致性。


開發就像傳聲遊戲,過一手就可能完全不同

我自己再進行設計時,也會遇到這樣的問題,努力的將 Wireframe 與功能架構圖製作好。


與開發人員做會議的溝通,確保他已經理解產品的設計方向。


但最後實際製作的產品,仍與心中的設計有不小的差距。


顯見即便已經有眾多的工具與方法,「溝通」仍是最難的議題。


我們設計的圖,對方不見得有相同理解。


最後解決的方法,不是更努力專研工具的應用。而是持續溝通尋找彼此的默契,並加大溝通的深度與廣度,找到適合彼此的工作方法。


經由實際測試 Google Stitch ,我認為它是可以妥善的增加溝通效率的工具。而不單單只是一個新的設計工具

Google Stitch 是什麼?

Google 將 Stitch 定義為新的 UI 設計方式。


如 Google 的官方部落格所述:傳統上,要將設計理念跟程式碼連結起來,一直都是仰賴大量的努力與反覆。


現在藉由 Google Stitch ,我們可以用文字,就讓 Google Stitch 生成一定水準的畫面與程式碼。


就能加速在草圖製作流程的效率,讓溝通的效率可以上升。

Google Stitch 怎麼用?

1.首先要有 Google 帳號。並打開 Stitch 網址: https://stitch.withgoogle.com/

2.在 New Design 輸入你的設計概念,並點選 Gererate designs,如下圖:

raw-image

3.Stitch 大部分會直接開始進行繪圖,或者是向我們確認設計的細節,它才會開始進行製作,我們可以在下方的 Describe your design 輸入我們進一步的指示。

raw-image

4.最後就會進行 UI 圖像的製作。

raw-image

5.可以點選圖片,進一步的去看程式碼或是將圖像複製到 Figma ,再自行做進一步的精細修正。

raw-image

6.如果需要做細節的修正,仍可以針對單一圖像,點選圖像上的 Edit 提出修改建議:

raw-image

Google Stitch 的優勢

  • 自然語言與草圖的快速轉換:不只可以用自然語言做出圖像,也能用簡單的草圖就能快速轉換成圖像。
  • 溝通加快:讓設計師與開發人員的溝通可以更加快速。
  • 可連結開發:可轉換程式碼與 Figma 的檔案,做程式的轉換與細節的調整。

Google Stitch 對設計師影響

儘管 Google Stitch 讓更多人能輕鬆製作漂亮的設計,也縮短了設計師與一般人之間的實作落差。


但它無法取代設計師在「洞察需求」與「溝通協作」上的專業。


這些能力,正是設計價值的核心所在。隨著工具進步,設計師將能把更多心力放在策略與思考層面,發揮更大的影響力。

留言
avatar-img
留言分享你的想法!
李英華-avatar-img
2025/05/30
它無法取代設計師在「洞察需求」與「溝通協作」上的專業。 ** 設計師不會被取代,但須轉型,就像產業轉型。
玥瑜-avatar-img
2025/06/16
這個好像可以協助處理不少前期工作,省下時間來處理之後的細化和UX提升
這個相當好!
琉球人-avatar-img
2025/06/24
感覺未來UI被取代的機會蠻大的,或許轉UX比較安全呢。
0000 foxx-avatar-img
2025/05/31
我怎麼覺得不太對,工具透過自然語言互動來更快速從文字產生圖形,但溝通(人的問題)本身沒有改善的話,再100個工具也沒用 https://vocus.cc/article/68393380fd89780001e5df78
avatar-img
吱吱喳喳
76會員
51內容數
專注於研究 UX、行銷領域,用文字作為心得分享。
吱吱喳喳的其他內容
2025/04/03
競品研究是 UX 設計的重要工具,若未理解其背後的商業邏輯,可能會優化錯方向。透過分析發現 UI 設計雜亂,便進行資訊分類與介面優化。然而,實際測試卻顯示,使用者更偏好原本的「雜亂」設計,因為它能提升操作效率。這次經驗讓我反思:競品的缺陷可能是有意為之,UX 設計不能只憑專業判斷,還需考量實務需求。
Thumbnail
2025/04/03
競品研究是 UX 設計的重要工具,若未理解其背後的商業邏輯,可能會優化錯方向。透過分析發現 UI 設計雜亂,便進行資訊分類與介面優化。然而,實際測試卻顯示,使用者更偏好原本的「雜亂」設計,因為它能提升操作效率。這次經驗讓我反思:競品的缺陷可能是有意為之,UX 設計不能只憑專業判斷,還需考量實務需求。
Thumbnail
2025/03/01
本書探討多裝置體驗設計,作者 Michal Levin 提出 3C 框架(一致性、持續性、互補性設計),協助設計師打造更符合使用者需求的多裝置生態系統。文中強調在多裝置情境下,幫助產品設計師、產品經理和使用者研究員提升產品競爭力。
Thumbnail
2025/03/01
本書探討多裝置體驗設計,作者 Michal Levin 提出 3C 框架(一致性、持續性、互補性設計),協助設計師打造更符合使用者需求的多裝置生態系統。文中強調在多裝置情境下,幫助產品設計師、產品經理和使用者研究員提升產品競爭力。
Thumbnail
2025/01/17
《觀察的力量》一書,作者詹恩‧奇普切斯分享其一百九十一個國家的研究經驗,教導讀者如何從平凡情境中觀察市場商機,並透過顧客門檻地圖、物品分析、信任生態等方法,創造非凡產品。本書適合使用者研究員、設計研究者、產品設計師閱讀。
Thumbnail
2025/01/17
《觀察的力量》一書,作者詹恩‧奇普切斯分享其一百九十一個國家的研究經驗,教導讀者如何從平凡情境中觀察市場商機,並透過顧客門檻地圖、物品分析、信任生態等方法,創造非凡產品。本書適合使用者研究員、設計研究者、產品設計師閱讀。
Thumbnail
看更多
你可能也想看
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
本文探討2024年UI/UX設計趨勢,包括深色模式和色彩適應性、微互動和動畫、3D元素與虛擬現實整合,以及以用戶為中心的數據驅動設計、無障礙設計和情感設計的新方法。
Thumbnail
本文探討2024年UI/UX設計趨勢,包括深色模式和色彩適應性、微互動和動畫、3D元素與虛擬現實整合,以及以用戶為中心的數據驅動設計、無障礙設計和情感設計的新方法。
Thumbnail
隨著科技的發展,數位設計領域也日益進步,其中「透明度平面化」成為了設計師在處理完稿檔案時必須面對的一大挑戰。在這篇文章中,我們將一探究竟,揭開透明度平面化的神秘面紗,並探討它在當代設計中的重要性,以及如何巧妙應對可能遇到的問題。 透明度平面化 在數位設計的豐富世界裡,透明效果提供了無限的創意
Thumbnail
隨著科技的發展,數位設計領域也日益進步,其中「透明度平面化」成為了設計師在處理完稿檔案時必須面對的一大挑戰。在這篇文章中,我們將一探究竟,揭開透明度平面化的神秘面紗,並探討它在當代設計中的重要性,以及如何巧妙應對可能遇到的問題。 透明度平面化 在數位設計的豐富世界裡,透明效果提供了無限的創意
Thumbnail
這篇文章分享了許多好用的設計工具,包括Adobe、Canva和Mirosoft Designer,提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
Thumbnail
這篇文章分享了許多好用的設計工具,包括Adobe、Canva和Mirosoft Designer,提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
Thumbnail
實時繪圖(一)-安裝ComfyUI+krita心得與教學繼這一篇安裝完畢後,就是開始挑戰電商產品圖製作,意外的簡單,基本上素材找好,在調整個2分鐘,就完成了 接下來我就把我做的方法與步驟分享給大家巴 首先先找好的你的透明素材產品,那麼免費的素材網站我已經幫你找好了,可以商用,請注意一定要用去背的
Thumbnail
實時繪圖(一)-安裝ComfyUI+krita心得與教學繼這一篇安裝完畢後,就是開始挑戰電商產品圖製作,意外的簡單,基本上素材找好,在調整個2分鐘,就完成了 接下來我就把我做的方法與步驟分享給大家巴 首先先找好的你的透明素材產品,那麼免費的素材網站我已經幫你找好了,可以商用,請注意一定要用去背的
Thumbnail
這篇要搭建一個同時生成寫實照片跟動漫風格圖片的工作流,還可以幫線稿上色。
Thumbnail
這篇要搭建一個同時生成寫實照片跟動漫風格圖片的工作流,還可以幫線稿上色。
Thumbnail
在這個充滿創意與創新的時代,文字不僅僅是用來傳遞信息的工具,更是一種藝術表達方式。對於設計師來說,如何在視覺傳達中巧妙運用文字,使之成為設計中不可或缺的一部分,是一門需要精心學習的技藝。今天,讓捷可印帶領你們深入探索一項關鍵技術——文字的轉外框,並看看它如何在設計領域中發揮著重要作用。 首先就來探
Thumbnail
在這個充滿創意與創新的時代,文字不僅僅是用來傳遞信息的工具,更是一種藝術表達方式。對於設計師來說,如何在視覺傳達中巧妙運用文字,使之成為設計中不可或缺的一部分,是一門需要精心學習的技藝。今天,讓捷可印帶領你們深入探索一項關鍵技術——文字的轉外框,並看看它如何在設計領域中發揮著重要作用。 首先就來探
Thumbnail
在簡報設計中,我們有時需要視覺化去表達「語音」的概念,例如是講者介紹、客戶回饋、問答環節等。利用在常見的語音圖案是可行的做法,只是人手自己畫耗費時間,生成式人工智能又未必一下子做到想要的效果。要解決問題,還有第三種可行辦法,免費可商用的字體,同樣可以助你快速建立語音圖案,兼且保留設計的自由度。
Thumbnail
在簡報設計中,我們有時需要視覺化去表達「語音」的概念,例如是講者介紹、客戶回饋、問答環節等。利用在常見的語音圖案是可行的做法,只是人手自己畫耗費時間,生成式人工智能又未必一下子做到想要的效果。要解決問題,還有第三種可行辦法,免費可商用的字體,同樣可以助你快速建立語音圖案,兼且保留設計的自由度。
Thumbnail
建築3D圖固然能夠取代許多傳統圖說。值得多加利用!
Thumbnail
建築3D圖固然能夠取代許多傳統圖說。值得多加利用!
Thumbnail
草圖不只是紙上畫畫,它可以運用各種媒材和活動來展現概念,目的是快速獲得證據,證明設計概念的可行性,推進設計的演進。我們先快速展現設計概念,驗證它的可行性,才能避免後續花費太多成本在旁技末節上。
Thumbnail
草圖不只是紙上畫畫,它可以運用各種媒材和活動來展現概念,目的是快速獲得證據,證明設計概念的可行性,推進設計的演進。我們先快速展現設計概念,驗證它的可行性,才能避免後續花費太多成本在旁技末節上。
Thumbnail
插畫是設計中不可或缺的元素,可以幫助設計更加豐富,吸引讀者的注意力。近年來,隨著網路的普及,越來越多插畫網站出現,提供免費或付費的插畫素材。插畫可以應用在各種設計上,例如:網站、App 的 UI/UX 設計、海報、宣傳品的設計、書籍、雜誌的封面設計或社群媒體的圖片設計以及產品包裝的設計
Thumbnail
插畫是設計中不可或缺的元素,可以幫助設計更加豐富,吸引讀者的注意力。近年來,隨著網路的普及,越來越多插畫網站出現,提供免費或付費的插畫素材。插畫可以應用在各種設計上,例如:網站、App 的 UI/UX 設計、海報、宣傳品的設計、書籍、雜誌的封面設計或社群媒體的圖片設計以及產品包裝的設計
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News