寫在遊戲設計前， UI & UX 如何應用在遊戲製作中
基礎介紹篇
這篇的起源是之前在公司的時候所撰寫的，主要是為了寫給同部門的人一起瞭解不同領域的知識，同時也是用來檢驗自己有沒有足夠瞭解，剛好挖到就整理起來當個筆記。
而從基礎開始瞭解，有助於提升在製作遊戲相關內容時，與美術、程式人員能夠更流暢的溝通，也能夠幫助企劃優化在規劃、設計介面時的製作流程，正所謂送禮自用兩相宜(X。
前言
首先先來認識 UI&UX 中的各種名詞定義，畢竟不清楚名詞的話很容易產生誤會或是雞同鴨講。
接著要來瞭解介面相關基礎的製作流程，但是上面有說過，請將這個流程視為一個基礎範例，需要再依照自身的條件與環境去進行修改或調整，畢竟沒有完美的流程，只有適合你的流程。
那就開始吧。
⭐️撰寫的內容僅供參考，實際製作時必須根據不同的工作模式或是成員組成有所調整。同時以下內容資料參考自網路與WIKI，相關技術會隨著時間而有所改變，需多注意。⭐️何謂UI&UX
UI 全名為 User Interface，中文為使用者介面。
從產品的角度來解讀，就是使用者所必須接觸到的任何媒介。像是介面的操作選單、產品的外觀、互動設計等等。
而 UI 必須包含輸入、輸出、運作內容，可以進行互動才可被稱為 UI 。
有一點需要注意，這邊講的 UI 比較偏定義上的，而一般在遊戲設計中，大多是將介面通稱為 UI，需特別注意。
UX 全名為 User Experience，中文為使用者體驗。
十分容易與 UI 搞混，但是 UX 著重的是整體流程的「體驗」，是屬於無形中的感受，而 UI 則是著重在具體的功能互動與視覺效果。
如果想要更細分的話，UI 還能再拆分成 VD(Visual Designer) 視覺設計，以及 ID(Interaction Design) 互動設計， UX 也能夠再細分為 UX 研究與 UX 設計。
「UI設計是互動設計與視覺設計的組合。」- Dan Saffer
「UX包含產品或服務的整體經驗，而且也包含UI。」- Dan Saffer
其他名詞定義
接著來一段比較痛苦的名詞介紹，不過這裡只會先簡單帶過，想讀更詳細的可以參考附上的連結，裡面已經有很多前輩提供很棒的文章內容。
Guideline — 規範
由官方提供一些設計上的規範與指南，雖然遊戲類型的 APP 不在 Guideline 的限制規範中，但是同樣有可以參考的地方。
官方提供的 Guideline：iOS DesignAndroid Grids
User Story — 使用者描述
透過簡單的描述，將使用者的觀點撰寫成有價值的功能。非規格文件，僅算是需求內容。
不過在遊戲製作中，基本上會是先根據上層的需求來進行製作，所以這部份就自行轉換概念。
詳細內容可閱讀：User Stories(1)什麼是User Story?Functional Map — 功能心智圖
類似於初步的架構圖，從 User Story 中整合出所有程式中所需要的功能與資訊，並且區分出層級。
詳細內容可閱讀：初學者的Functional Map
Flow Chart — 流程圖
將從 Functional Map 中所整理出來的清單繪製成 Flow Chart ，用來檢視整個程式的流程是否有問題。流程圖的圖形有其制定的規範標準，不可依喜好任意更換圖形樣式。
同時也可以開始與程式人員進行功能上的討論，以及製作可行性。
詳細內容可閱讀：Flow Chart和UI Flow、流程圖(Flow Chart)常用符號說明
UI Flow — 頁面流程
透過從 Flow Chart 所規劃的流程圖來繪製 UI Flow 。
UI Flow 屬於頁面與頁面之間的操作流程，藉由 UI Flow 來妥善安排各頁面之前的操作動線。一般這時候會採用文字版本，因為此時尚未開始製作 Wireframe 。
有點類似於程式撰寫前的 UML ，透過這個流程可以更好的掌握設計的框架，但要注意 UI Flow 會因為設計的需求而調整，不是做完就固定不改動。
詳細內容可閱讀：初學者的UI Flow
Wireframe — 線框圖
一種低保真的設計原型，一般會採用最原始的線框圖來呈現，避免被畫面影響判斷，同時也能節省時間。
Wireframe 的重點在於確認每一個頁面的構成、行為說明、畫面上需要呈現甚麼樣的內容以及各頁面轉場、特效的表現。
詳細內容可閱讀：什麼是Wireframe
Mockup — 樣品
依照 Wireframe 中所定版的內容繪製精緻詳細的介面，如果在這部分出現問題，必須返回 Wireframe 重新製作。
基本上 Mockup 出來的樣式就是定稿的樣式，除了內容可能是採用假圖、假字以及各內容串接的方式。
詳細內容可閱讀：什麼是Mockup
Prototype — 原型
可操作的介面原型，配合 Wireframe 或是 Mockup 製作。
主要用途在於測試使用者對於該程式的流程感受，以及各項操作是否有任何不流暢的地方。
詳細內容可閱讀：初學者的PrototypeWireframe& Mockup& Prototype的差異
- Wireframe線框圖：空白的網頁框架
- Mockup樣品：空白的網頁框架加上彩繪
- Prototype原型：空白的網頁框架加上彩繪再加上動態效果
製作流程
有了上述的名詞瞭解後，就可以開始來執行製作流程了。
製作流程大致上的流程可分為四大部分:
1. 討論功能需求
須制定好 UI 的規範與指南，同時透過大量的溝通去瞭解 User Story ，避免再後面製作其他項目時出現認知差異。在確定了 User Story 後，開始規劃 Functional Map 。
Functional Map 也可以視為功能規格書，所以在此階段必須充分瞭解 User Story，以免規劃出不符合需求的功能。如果 Functional Map 繪製出來有誤，則必須重新去進行 User Story 的討論。
2. 繪製架構與流程
基礎的 Functional Map 完成以後，根據其所列出來的功能與資料，開始繪製成 Flow Chart ，藉由有邏輯的流程圖來檢視是否有缺漏掉的頁面與功能，接著參照 Flow Chart 來進行 UI Flow 的配置。
這兩項算是互補性的，並沒有強制的製作順序，主要是方便後面程式人員進行製作時更清楚瞭解其規範與內容，也能夠避免出錯。
3. 製作線框圖
有了 UI Flow 的頁面流程就可以開始製作 Wireframe ，透過單純的線與簡單的顏色來呈現頁面基礎的樣式。同時在此階段，開始需要將各個細節透過文字進行描述，像是A頁面切換到B頁面如何轉場、C頁面的按鈕如何進場等等。
4. 製作介面原型
再來就是會由 UID(User Interface Designer) 將 Wireframe 上的內容繪製成 Mockup ，同時必須考慮到後面如何切版以及進入遊戲引擎進行拼裝。
而 Prototype 要不要製作，以及是使用 Wireframe 或是 Mockup 製作，這部分就端看團隊如何抉擇。有製作的話就是方便團隊對介面流程進行檢驗，同時可以透過 Prototype 去做一些 UX 上的驗證，減少上市所會出現的問題。
額外補充：The 75 GoodUI ideas
在 GOODUI 網站中，提供了75個介面設計上的改良方案。雖然是以網頁為主的設計規範，但其中也有許多共通可以參考的地方，是很棒的研究資料。
網站連結:GOODUI中文翻譯:最強UI設計守則:遵守以下75點，讓你擁有完美界面設計
延伸閱讀
最後再放上一些當初整理時所用的資料。
設計大舌頭
分享許多UI&UX以及設計相關的知識文章。
有病測驗的動態介面設計心得
介紹了許多介面設計上的動態相關技巧。
UI設計流程_適合的流程，可以避免發散、加快速度
簡單說明UI設計流程。
工程師也能懂的前端美學
提供了許多美學相關的網站以及方法，推薦閱讀。
Color Hunt
配色小幫手，很實用的網站工具。
DESINION
用來取得樣本的設計網站，透過調查獲得相關的統計資料。
MATERIAL DESIGN
由 Google 所提出來的設計語言，追求本質上的設計方式。
Dribbble
類似 PIXIV 的畫廊網站，擁有非常多優質的UI作品，適合搜尋來作為臨摹、參考的範本。
Behance
Adobe 軟體設計師的作品發表平台，內容涵蓋更廣，可專注搜尋再用戶介面/用戶體驗這類別。
Pttrns
Mbile Patterns
以上兩個為收集 iOS 相關介面 Pattern 並且分類的網站，主要適用於軟體設計。
iOS Icon Gallery
專門收集 iOS 的 Icon 。
GAMEUI
根據遊戲類型分類整理出一些遊戲的介面。
GAMEUI.CN
除了介面設計以外，還有提供許多的教學內容。
1000 App Design
收錄了1000款APP的遊戲介面，並根據其頁面類型進行分類。
