[2024更新] 心智圖、流程圖、AI 三合一的超好用工具 — Whimsical
進行介面設計之前，UX設計師需要研究統整、規劃頁面的元素以及結構，這時候常會需要用到心智圖來協助發想。在設計體驗的時候我們也需要視覺化用戶流程或系統邏輯，來跟團隊有效地討論。
很多不同的工具都可以幫助我們描製這些視覺輔助，諸如Miro、Figjam 等等，但實際用過之後這些產品之後，我還是覺得最適合設計師使用的是 Whimsical。
Whimsical
Whimsical 集心智圖、流程圖、便利貼與原型圖於一身，讓使用者可以在一個畫面上表示所有專案相關的資訊。
我喜歡 Whimsical 的主要如下：
- 他的免費版本功能就已經足夠可以滿足一般的需求，所以對初學者非常友善。
- 介面很簡單乾淨，操作也很直覺，這在進行創意發想的時候非常重要。
- 他是Webapp，只要有瀏覽器就可以使用，分享與跨裝置都很方便。還可以實時與多人進行編輯，非常利於多人的線上Brainstorming。
- 他有很強大的AI功能，這部分今天也會重點介紹。
如果你的團隊利用Notion來做項目的管理，那Whimsical更是超級方便，可以直接以嵌入的形式展示在Notion文件，補齊了 Notion 無法繪圖的缺點。
使用教學
Whimsical的使用相當輕鬆簡單。在登入（免費）並開啟專案之後，你就得到一張空白的畫布。我們會用到的所有工具都在左邊。從上到下分別是流程圖、便條紙、Wireframe工具箱以及 Mindmap。在下面還有一些基本的元素，像是添加連線、文字等等的，也有像是Trello一樣的卡片功能。這些都可以自己去探索唷。
1. 流程圖
Whimsical 的流程圖是我的最愛之一。一方面是他的配色賞心悅目，更重要的是他的操作也簡單方便，且有為數頗多但又不多到令人眼花撩亂的圖形可供選擇，只要稍做編輯，就可以繪製出很清晰的流程圖。
要建立一個新的流程圖，只需要點擊流程圖的圖像之後選擇自己想要的形狀就可以開始了。點選之後你的滑鼠會顯示你所選擇的形狀，並且可以把它放在任意地方。
在選中步驟方塊的時候可以看到新增步驟的選項，只要點一下就可以直接新增下一個步驟了。如果要改變步驟的形狀或顏色的話，也可以在步驟上方的控制選項操作唷。
除了方塊之外，步驟之間的連線也可以調整。除了可以客製化顏色、虛實線之外，只要點擊兩下就可以在連線上面增加文字，這對有很多選項分支的流程圖特別有用。
2. 心智圖
Whimsical的心智圖也做得十分出色。雖然沒有華麗的功能，但用起來卻十分順手。心智圖在工具區的第四個選項，一樣就點一下就可以拖曳出來使用了唷。
在新增節點之後。按下Enter就可以直接添加一個Sibling階層的節點，按下Tab就可以增加一個Child階層的節點。幾乎完全使用鍵盤來操作，所以超級流暢，我覺得這對創意發想的過程來說特別重要。
在需要整理的時候你可以拖曳節點，甚至可以把一個節點拖到圖的外面暫時存放這樣，需要用再拉回去就好。
3. 原型圖
Whimsical 也提供簡單的原型圖繪製功能。雖然成品無法與 Figma 相比，但仍然是一個可以用來釐清設計大方向的工具。
在進入原型圖繪製模式之後，可以選擇不同的裝置做為畫板（常用的裝置類別都有），然後在上面添加元素。網頁設計的相關控制元件幾乎都有，甚至還有一些進階的元素，如地圖、評價星級等。
心智圖 + Whimsical AI
好的，那接下來我們來說一下AI的部分，也是我覺得Whimsical最強大的地方，不管在你做方案發想、頁面元素設計，甚至是提案簡報都很有用。
接下來我們就用一個實際的情況來演示一下他的 AI 功能。假設我們現在要發想一個遛狗平台，功能可能有媒合遛狗需求、購買寵物用品，主要目標用戶是養狗人士與有空閑時間的人。
這樣的想法顯然是不夠完整的，這時候我就可以利用AI來幫我發想。例如我要發想更多的功能，就可以選中「主要功能」的節點，然後在選項這邊找到AI功能（中文也可以）。
點擊之後，Whimsical 會考慮上下節點的內容產生一到十個想法。如果你的選項已經很多的話，那產生的數量就可能會少一些。
我的習慣是在使用AI之後把想法整理過，加上自己的其他想法之後再生成一次。這樣就可以產生更詳細、更有針對性的點子。同時在過程中，也可以跟AI一起整理自己的想法。
經過幾次這樣的操作之後，我們就可以得到很細緻的想法了唷。
流程圖 + Whimsical AI
除了心智圖之外，Whimsical 也可以用來產生簡單的流程圖。你可以在左手邊的功能清單裡面找到AI功能的按鈕，點開之後就會看到下指令的對話筐了。
繼續以剛剛的例子來說，我可以請他幫我生成遛狗App的用戶流程：User flow for a dog walking platform service that allows users to find, suitable people to walk their dogs. The flow should start from browsing and ends with review.
在點擊之後，Whimsical就會在空白處插入幫我繪製的流程圖了喔。
在生成流程圖的時候需要注意，因為它不像是心智圖一樣可以修改之後再生成，所以在一開始的時候下Prompt就要寫得比較精準，否則可能會得到意料之外的結果喔。
價格
Whimsical 的免費方案可以無限制的繪圖空間，但沒有辦法與人協作，AI的操作數量也是限額100次（終身）。每月 10 USD 則可以開啟協作功能且有每個月2000次的AI操作量。
我覺得這樣的定價十分聰明，免費的版本完全滿足了個人用戶的使用需求，也給了試用AI操作的基本空間。
結尾
以上就是關於Whimsical的介紹了，希望大家喜歡。
我大概在2019年的時候就開始用這個軟體了，應該也算是資深用戶了。一直都很喜歡這個軟體的簡潔性，2022年底發現他新增了AI功能之後就更愛了。
我覺得一個好用的AI產品其實重點並不是他有多聰明，而是在使用上有沒有符合你的使用情境，在這方面 Whimsical 除了得益於他的使用情境（心智圖）本身也設計得很好。只要按一個鍵甚至不用輸入prompt，我覺得甚至比ChatGPT還好用。
還有想要知道什麼設計師會用的軟體，或是你有在用什麼AI工具嗎？歡迎留言或是在IG跟我討論喔。
Whimsical 值得一試的理由
- 免費
- 美觀易用
- 強大AI
- 易於分享
