身為企劃，隨身帶著XX也是很合理的吧？
翻翻壓箱底，聊聊遊戲設計需要的實用工具
看了一下之前寫的文章，大都聚焦在一些理論和設計面的東西，沒有分享過筆者個人在遊戲研發時使用的工具。
這篇會分享一些個人工作常用的輔助軟體和參考網站，後面也會補充一些篇營運向的工具組合。
如果大家有不錯的工具推薦也可以在留言區補充，非常感謝～
那廢話不多說，直接上主菜囉！
企劃設計工具
心智圖（Mind Map）
心智圖（Mindmap，也稱為思維導圖）幾乎可以說是近代設計師最重要的工具之一。
人類的大腦是有限的，把大腦的「Ram」解放出來，用視覺化的方式協助設計者思考，能讓使用者在短時間內建構大量要素之間的系統關係。
除此之外，現在專案研發也很常見建立一個「產品最終要素的心智圖」，這張圖會隨時更新，方便團隊內所有成員理解產品完成會有的要素和樣貌（註一）。
個人比較常使用的就是 Xmind，除此之外 Google 搜尋 Mindmap 也能找到很多不錯用的免費工具。
Xmind 的好處除了免費之外，還方便繪製「循環圖」和「流程圖」等，只要是單純文字方塊之間的連結，這款軟體都非常適合。
註一在研發進程中，很重要的一點是「團隊每個成員對產品的終極想像是否一致」，為了這件事情，才需要有美術統整視覺風格、企劃收束遊戲機制，降低遊戲核心發散等等。若彼此的終極想像不一致，會導致在研發中後期發生嚴重的分歧以及內耗，這往往是導致一個產品在尚未完成前就腰斬的主要原因。
循環圖（Cycle）
循環圖，是協助設計師釐清玩家意圖和資源循環的重要工具，以上面這張圖來說，是我之前在『謠傳「大頭菜」可能成癮！？』一文中用來分析動森三大遊戲核心之間的關聯性所拆解的循環圖。
遊戲設計師常會需要拆解循環圖的主要有兩種：
- 資源循環圖
資源循環圖指的是遊戲中玩家各種資源的消耗和獲取循環，例如RPG遊戲中常見的「經驗值」、「金幣」等資源。
當循環圖被建立後，才比較容易釐清玩家在遊戲中的體驗循環和操作順序。 - 動機循環圖
動機循環是比資源循環更深一層的考量，用來釐清玩家在每一個遊戲階段的意圖和需求。
例如「因為玩家需要打贏魔王」所以「玩家升級」所以「玩家需要打怪來獲取更好的裝備和貨幣」等等，這樣的循環圖能夠協助設計師確認玩家在遊戲中是否能時刻處於「有明確目標」的狀態，避免因為茫然而流失。
循環圖用心智圖工具（例如上面提到的Xmind）是最合適的，可以在畫布上新增各種系統節點，然後用線條連起來，線條上也可以備註文字或是替換顏色、粗細等，方便設計師一覽無遺。
流程圖（Flowchart）
所謂的流程圖，通常是指以類巢狀結構，以圖表的方式表達邏輯判別和流程的示意圖。
例如玩家在遊戲中，「受到攻擊」時，判斷是否命中、是否爆擊、計算造成傷害，一直到最後死亡判定，這樣的順序就能用流程圖來表達。
企劃在跟程式溝通的時候，在判斷順序上，能用流程圖來表達是最好的，能最大程度避免誤解的發生。
繪製流程圖的工具，除了也可以使用上面提到的Xmind之外，我也推薦 Diagram.drawio 和 Axure RP 這兩套工具。
Diagrams
Diagrams 是個非常輕量的線上協作工具，可以在 Google 雲端內找到，這是在 Diagram.net 底下的 Google 套件，允許權限後就可以免費使用。
這套工具可以繪製流程圖、架構圖等需要矩形和直線的圖表，除此之外用來繪製簡易的建築平面圖等圖表也相當好用。
Axure RP
Axure 系列是針對設計、研發和報表等需求，提供彈性完整工具的軟體。但上手比較困難，加上並不是免費的，所以以新手而言並不是特別推薦。
但如果需要一套整合性的工具，是可以考慮看看的。以功能健全度來說目前應該是最完整的一套，也可以方便製作Mockup，對電商或一般商務app的開發來說挺有幫助的。
線框稿（Wireframe）+介面流程（UI Flow）
Wireframe 和 UI Flow，是UIUX設計中用來溝通的重要工具之一。而在實務上常見會將兩者結合在一起，方便快速查找和一覽。
線框稿往往捨棄圖片等資訊，僅留下重點元素，例如按鈕、切換開關或是捲軸等元件。而UI Flow會將UI介面用線條連起來，用來傳遞「點擊什麼按鈕會跳轉到什麼介面」這種交互的訊息。
以遊戲研發來說，Wireframe+UI Flow通常由企劃或是UI美術進行維護，在傳達美術需求與預估開發量的時候相當好用。
可以參考一下小熊的這篇文章：
可互動模型（Mockup）
所謂的 Mockup，雖然在中文中也被稱為「原型」，但和 Prototype 的作用不相同（註二）。
- Prototype
用來驗證「核心操作和體驗」是否與預期一致。
例如橫向捲軸的移動操作等。
Prototype 通常沒有精緻的美術，例如角色都使用白模，場景物件採用白色方塊等作法也是可以的。 - Mockup
用來驗證「UX和介面交互」是否與預期一致。
例如做一套假介面，只能點擊按鈕進行跳轉，但沒有實際的連網和運算功能，類似簡報呈現的形式。
Mockup通常會有相對更精緻一些的美術資源，也方便美術人員對產品的視覺風格控管。
以 Mockup 來說，我個人推薦的工具是 Adobe Xd。
雖然是 Adobe 推出的工具，但這款 Xd 在使用上是免費的，相當親民，也支持雲端存檔等功能。
Xd 方便的地方在於 Mockup 的製作，如果付費購買進階版本的話，可以直接上傳到一個網址，讓所有知道網址的人員都能查看這個交互模型。
這邊附上Youtube上的一個簡短教學，讓大家可以理解一下 Xd 能作到什麼樣的效果：
註二Demo也稱為原型，但Demo和Protptype的差異在於，Demo是給研發團隊以外的人看的，例如投資者或預購玩家。而Protptype是團隊內部自己用來驗證玩法的可運作模型。
協作/輕量專案管理工具
這篇主要不是分享專案管理相關的內容，但還是帶一下常用的工具組。
- Trello
Trello是一款模擬便利貼的協作平台，諸如Scrum等敏捷開發，或是自己用來紀錄靈感都很方便。
有分隔河道和工作單追蹤等功能。
P.S.進階一點的團隊我會推薦使用Jira和Asana，但需要付費，所以這邊就不聊太多。
- Miro
（感謝阿星和頭皮推薦）
Miro是一款模擬白板的協作平台，免費帳號也可以擁有最多三個無限大的白板，可以做任意塗鴉。
筆者試用了一下挺方便的，可以作到模擬敏捷開發那種貼便條紙的功能，也可以作為頭腦風暴使用。
也有便捷的備註功能，可以在任意位置附上一段提醒用的文字。
- Figma
（感謝Bruce推薦）
這款筆者還沒用過，但看起來有點像是 Miro + Adobe Xd 的合體版本，可以線上多人協作，也適合快速兜出 Mockup 來看看效果。
規格撰寫工具
以遊戲設計師來說，規格的撰寫通常可以簡單的分為「邏輯流程」和「表現需求」。
闡述邏輯和流程的除了上面提到的圖表繪製工具之外，我們熟悉的 Office 三神器（Word、Excel 和 Powerpoint）其實就可以解決工作上99%的問題了。
因此底下這邊會提供一些額外的輔助用工具，有需要的朋友自行挑選囉。
P.S.加上現在 Google 雲端硬碟的三神器可以直接網路協作，也很多團隊連 Office 費用都省了。
數值設計
數值設計大部分用 Excel 或 Google 試算表就可以搞定一切，不過這邊附上一個方便快速做曲線對照以及計算的網站：
用法很簡單，把表格複製之後貼進去就可以了。
可以用來快速生成曲線數值，就不需要在表單上建立圖表，可以快速做對比參考。
此外也推薦一個小軟體 Setuna，可以複製螢幕上任意區域的截圖，然後擺在螢幕任意位置，在做表格或設計對照的時候，搭配雙螢幕有如神助，可以很快速的來回參照節省時間（一位程式朋友說用來做Code對照也很方便）。
不過現在這個軟體官方似乎已經沒有在維護了，所以找不到正式版本，如果有資安疑慮的話建議不要亂找資源會比較好。
字符編輯
- Notepad ++
文字編輯軟體基本上只需要 Word 和 Google 雲端文件即可。
這邊介紹的 Notepad ++ 是方便用來開啟任意文字格式（包括CSV，或腳本）的編輯軟體，在不需要複雜功能的場合還可以替代 IDE 來寫Code。
特殊的功能包括像是可以豎向的反白所有段落文字的前幾個字符等等，非常有趣。
類似的工具還有像是 UltraEdit 也不錯用。
靈感紀錄
- Milanote
（感謝馬韶卿推薦）
Milanote是一款可以方便作筆記、整理連結和打包資訊的好幫手。
比較特別的特色是可以無限制的巢狀封包，也就是可以把一些筆記打包丟到另一份筆記，然後再打包放到另一份筆記內......
參考文章
截靜態圖
螢幕截圖功能除了最暴力的鍵盤PrintScreen按鈕之外，其實Win10有內建截圖快捷鍵。
Win10快捷鍵：Shift+Window+S
按下這三個按鈕後，會直接靜止當前的螢幕狀態，然後按住滑鼠拉出你要擷取的範圍就可以了，非常方便。
若是需要額外繪製加工，例如寫上備註文字之類的，推薦使用通訊軟體如QQ、微信、Line等也都有這些快捷功能。
不想用通訊軟體截圖，需要功能比較齊全的獨立軟體，也可以考慮 Snipaste 和 Picpick，這兩款都是個人用過覺得很不錯的。
- Snipaste
- Pickpic
截 GIF 圖
GIF可以說是現代人網路瀏覽必備的格式之一了，不只社群網站常用這種格式，規格書（例如特效需求）也常常會用到。
GIF在PPT、Excel檔案中也可以使用，相當方便。
這邊推薦幾個用來截GIF圖的軟體：
- Line
嘿嘿沒想到吧，Line的桌面版其實可以很方便的鎖定一個範圍，然後錄製短時間的GIF檔案，如果本來就會用這個平台聊天，不妨試試他的動態截圖功能。
- Screen to Gif
這也是一款比較常見的免費軟體，可以框選螢幕範圍後輸出成各種格式的GIF和影片檔案。
比較特別的是輸出之前可以刪減影格，在需要調整動畫長度的時候很方便。
影片
錄製影片的選擇就比較多了，Google 隨便搜尋都有非常多選擇，個人這邊只介紹一下使用過的 OBS 和 Bandicam。
- OBS
OBS是一款免費的實況串流軟體，但其實也有本地端錄製影片的功能，由於是串流需求，所以輸出尺寸、檔案品質和擷取的範圍等功能都非常齊全，很推薦的一款。
- Bandicam（試用版會有浮水印）
Bandicam應該是比較知名的錄影軟體，可以免費使用，但最上面會有一段浮水印文字。
如果不想升級成正式版，也可以考慮錄製的範圍上方多一點空間，後製時切掉就行。
表現設計工具/網站
遊戲設計師通常也會需要做各種美術表現上的調研和收集參考資料，這邊推薦幾個非常不錯的網站。
Behance
Behance 是一個集大成的美術資源參考網站，裡面有包括UIUX、平面設計、建築和藝術等等各種參考資源。
個人比較常用的是用這個網站找 UI 動效和特效等參考圖。
缺點是同一個頁面會有非常多高解析度的圖片或動畫，因此建議在不限網路流量的情況下瀏覽該網站。
推薦參考類別：UI設計、特效設計、平面設計、圖標設計等。
Pinterest 應該也是大家耳熟能詳的，這個網站以標籤的形式來做圖案篩選，打上關鍵字來搜尋可以獲得挺多的結果，點進每一張圖片後的關聯推薦也很不錯，適合用來尋找靈感。
推薦參考類別：角色概念設計、場景氛圍設計、圖標設計、特效設計等。
Art station
Art Station 應該也是比較知名的美術網站了，是一個讓你可以看到各方大神作品的地方。
推薦參考類別：角色概念設計、場景氛圍設計、3D模型、攝影電影等。
UI參考
一般來說 UI 設計常常會需要查看其他遊戲的作法，這邊列幾個可以用來查找遊戲UI，收集的比較齊全的網站。
一樣要留意網路流量喔。
動態/特效參考
一般來說遊戲設計師會需要動態和特效參考的場合，通常是要開需求給美術同仁。
最好的辦法是直接找遊戲截圖，或是到 Youtube 甚至是 Unity 和 Unreal 的資源商店，找給特效同學看。（但通常只是得到一個白眼：人家都做好了為什麼不直接買來用就好）
此外上面提到的 Behance 和 Pinterest 其實也不少特效範例可以參考喔。
營運調研工具/網站
最後來聊聊營運和市調的工具包。一般來說，競品和市場分析需要對某款已經上市的產品做全面的理解，底下這幾個網站或許可以幫到你的忙。
競品分析用（手遊）
- App Annie
非常老牌的數據商，免費情況下可以看到一些簡單的排行榜數據，主要用來查看發行商資訊用。
付費額度非常非常貴，基本上只有大型公司才付的起。
- Sensor Tower
SensorTower是一個方便快速查詢產品綜合評價的網站，如果需要更多詳細資訊則需要付費。
- App Magic
這是目前看起來最佛心的數據商，能看到如LTV和各地區營利佔比等相當珍貴的資訊。（真不知道是怎麼算出來的XD）
收費目前看起來也是最低的。
競品分析用（Steam）
- SteamDB
目前比較齊全的Steam資料統整網站，可以看到願望清單人數、同時在線玩家以及Twitch實況觀看人數等等，也可以查詢同一款遊戲產品過往的相關數據，很不錯的網站。
- SteamSpy
SteamSpy算是比較老牌的Steam監測網站，利用共同好友持有遊戲的大數據來做遊戲販售套數的猜測。（只是推估，不是實際數量）
廣告投放
- Big Big Ads
用來查看各種廣告素材和效果的網站，不過需要註冊才能使用。
- 臉書廣告檔案庫
能夠即時查看目前臉書上投放的廣告資料的監測網站，這是臉書官方提供的工具。（但你也知道的，臉書提供的工具常常出問題）
缺點是不能查看已經結束投放的廣告素材。
其他工具
- 線上蕃茄鐘 Pomofocus
網頁版本的蕃茄鐘，會在設定好的時間發出響聲提醒你轉換工作狀態。
- I Miss My Bar（酒吧白噪音）
前一陣子因為疫情關係，有很多人需要遠端工作。
缺乏社交但又想要聽到一些人聲的話，可以考慮開著這個網頁當背景白噪音。（雖然我覺得開Youtube找ASMR的大自然聲音更快啦XD）
小結
每隔一段時間就會出現更厲害的工具，遊戲這一行就是需要不停的更新，才能繼續在戰場上奮勇殺敵。
但設計工具百百種，重點還是要回歸本身，唯有掌握核心設計的能力，這些工具們才能輔助你做出更好的產品。
拋磚引玉，希望有更多人能做些分享囉。
那麼這篇就先到這邊。
我是水狼，我們下次見。
也可以到臉書追蹤我喔： 粉絲專頁連結
最後，請多利用我的個人文章列表，會持續更新：
