寫在遊戲設計前, UI & UX 如何應用在遊戲製作中

基礎介紹篇

小熊 Kumama
THAT GAME DESIGNER - 遊戲設計師
9 min readFeb 18, 2020

--

GoNNER

這篇的起源是之前在公司的時候所撰寫的,主要是為了寫給同部門的人一起瞭解不同領域的知識,同時也是用來檢驗自己有沒有足夠瞭解,剛好挖到就整理起來當個筆記。

而從基礎開始瞭解,有助於提升在製作遊戲相關內容時,與美術、程式人員能夠更流暢的溝通,也能夠幫助企劃優化在規劃、設計介面時的製作流程,正所謂送禮自用兩相宜(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

當你看到遠處有高塔時,會情不自禁地想要往那邊前進,這也是屬於某種體驗
UI與UX的示意圖

其他名詞定義

接著來一段比較痛苦的名詞介紹,不過這裡只會先簡單帶過,想讀更詳細的可以參考附上的連結,裡面已經有很多前輩提供很棒的文章內容。

Guideline — 規範

官方提供一些設計上的規範與指南,雖然遊戲類型的 APP 不在 Guideline 的限制規範中,但是同樣有可以參考的地方。

官方提供的 Guideline:iOS DesignAndroid Grids
在遊戲製作中,也有類似的規範,用來確認專案想要得以及不想要的 圖片來源

User Story — 使用者描述

透過簡單的描述,將使用者的觀點撰寫成有價值的功能。非規格文件,僅算是需求內容。

不過在遊戲製作中,基本上會是先根據上層的需求來進行製作,所以這部份就自行轉換概念。

詳細內容可閱讀:User Stories(1)什麼是User Story?

Functional Map — 功能心智圖

類似於初步的架構圖,從 User Story 中整合出所有程式中所需要的功能與資訊,並且區分出層級。

詳細內容可閱讀:初學者的Functional Map
Functional Map 示意圖

Flow Chart — 流程圖

將從 Functional Map 中所整理出來的清單繪製成 Flow Chart ,用來檢視整個程式的流程是否有問題。流程圖的圖形有其制定的規範標準,不可依喜好任意更換圖形樣式。

同時也可以開始與程式人員進行功能上的討論,以及製作可行性。

詳細內容可閱讀:Flow Chart和UI Flow流程圖(Flow Chart)常用符號說明
Flow Chart 示意圖

UI Flow — 頁面流程

透過從 Flow Chart 所規劃的流程圖來繪製 UI Flow 。

UI Flow 屬於頁面與頁面之間的操作流程,藉由 UI Flow 來妥善安排各頁面之前的操作動線。一般這時候會採用文字版本,因為此時尚未開始製作 Wireframe 。

有點類似於程式撰寫前的 UML ,透過這個流程可以更好的掌握設計的框架,但要注意 UI Flow 會因為設計的需求而調整,不是做完就固定不改動。

詳細內容可閱讀:初學者的UI Flow
UI Flow 示意圖

Wireframe — 線框圖

一種低保真的設計原型,一般會採用最原始的線框圖來呈現,避免被畫面影響判斷,同時也能節省時間。

Wireframe 的重點在於確認每一個頁面的構成、行為說明、畫面上需要呈現甚麼樣的內容以及各頁面轉場、特效的表現。

詳細內容可閱讀什麼是Wireframe
Wireframe 示意圖

Mockup — 樣品

依照 Wireframe 中所定版的內容繪製精緻詳細的介面,如果在這部分出現問題,必須返回 Wireframe 重新製作。

基本上 Mockup 出來的樣式就是定稿的樣式,除了內容可能是採用假圖、假字以及各內容串接的方式。

詳細內容可閱讀:什麼是Mockup
Mockup 示意圖,有些東西未公開所以打黑處理

Prototype — 原型

可操作的介面原型,配合 Wireframe 或是 Mockup 製作。

主要用途在於測試使用者對於該程式的流程感受,以及各項操作是否有任何不流暢的地方。

詳細內容可閱讀:初學者的Prototype

Wireframe& 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個介面設計上的改良方案。雖然是以網頁為主的設計規範,但其中也有許多共通可以參考的地方,是很棒的研究資料。

The 75 GoodUI ideas網頁截圖
網站連結: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的遊戲介面,並根據其頁面類型進行分類。

--

--

小熊 Kumama
THAT GAME DESIGNER - 遊戲設計師

Game Designer || 在遊戲業界努力生存的小小設計師。