遊戲UI設計方法與案例應用解析

張吉航（HHANG），曾任上海域起網絡科技有限公司GUI設計師，現任上海樂亞米藝術設計有限公司設計師。 主要從事遊戲開發設計工作，專註實踐交互設計研究。曾主導設計十餘款成功上線的遊戲，並參與南京電視臺《我是摜蛋王》等多個項目。

1初識遊戲界面設計
1.1 理解交互002
1.1.1 什麼是交互行為002
1.1.2 交互核心002
1.2 適配顯示002
1.2.1 分辨率002
1.2.2 適配規範003
1.通用屏003
2.拉伸屏004
3.曲面屏008
4.折疊屏010
5.系統控件適配011
1.3 操作區間012
1.3.1 信息傳遞013
1.3.2 視點行為015
1.3.3 指向操作017
1.設備握持017
2.操作手勢018
1.3.4 操作熱區021
1.設備熱區021
2.陀螺操作022
1.3.5 盲區023
1.通用屏023
2.拉伸屏024
3.曲面屏025
1.3.6 記憶識別025
1.3.7 操作踏頻027
1.4 空間設計028
1.4.1 視覺空間028
1.信息空間處理028
2.視覺環境空間029
1.4.2 視覺平衡029
1.4.3 落差空間030
1.4.4 矩陣格測試031
1.空間平衡線032
2.界面中心線032
3.矩形規格線033
4.單元素中軸線034
5.視覺出血線034
1.5 界面動畫035
1.5.1 從動作出發035
1.5.2 元素特效037
1.6 情感設計037
1.6.1 情感關係037
1.6.2 解析情感038
1.6.3 設計情感039
1.形式化情感039
2.色彩情感039
3.語言情緒040
4.不同的角度040
1.6.4 反饋情感041
1.7 色彩法則041
1.7.1 慎用色042
1.7.2 暢用色043
1.7.3 反運用原理043
1.固定元素顯示043
2.通用元素顯示044
1.7.4 取色技巧044
1.8 布爾運算045
1.8.1 什麼是布爾運算045
1.並集045
2.交集046
3.去除046
1.8.2 實際操作示例047
1.9 實景測試050
1.9.1 什麼是實景測試050
1.9.2 測試知識050
1.9.3 測試環境050
1.固定測試環境051
2.測試環境051
1.9.4 測試工具052
1.9.5 實景測試的意義052
2遊戲界面的設計規範
2.1 遊戲界面054
2.1.1 登錄界面054
2.1.2 Loading頁面054
2.1.3 主界面055
2.1.4 二級界面055
2.1.5 玩法界面055
2.1.6 結算界面056
2.1.7 設置界面057
2.1.8 商城界面057
2.1.9 背包界面058
2.1.10 個人信息界面058
2.1.11 技能界面059
2.1.12 活動界面059
2.1.13 分享界面059
2.1.14 排行榜059
2.1.15 好友系統061
2.1.16 聊天界面061
2.2 遊戲彈框062
2.2.1 常態框與偽全屏框062
1.常態框062
2.偽全屏框063
2.2.2 一、二、三級彈框064
2.2.3 拖曳框064
2.2.4 提示框065
2.3 遊戲按鈕066
2.3.1 系統按鈕066
2.3.2 主按鈕067
2.3.3 頁簽按鈕068
2.3.4 選擇按鈕068
1.單選按鈕設計069
2.多選按鈕設計069
2.3.5 擬物按鈕070
2.3.6 文字按鈕070
2.4 遊戲字體071
2.4.1 系統字071
1.常態系統字071
2.藝術系統字071
2.4.2 藝術字071
2.5 文本規範072
2.5.1 類多字文本處理073
1.友好的信息處理073
2.反饋處理狀態074
2.5.2 類輸入文本處理075
1.輸入前075
2.輸入時075
3.輸入後075
4.反饋處理狀態076
2.5.3 類數量提示文本處理077
1.文本處理077
2.狀態處理077
2.5.4 多環境文字處理078
2.6 提示標識078
2.6.1 系統提示078
1.輕彈提示078
2.公告提示079
3.界面提示080
2.6.2 小紅點提示080
1.無信息的小紅點080
2.有信息的小紅點081
2.6.3 氣泡類型082
2.6.4 標籤類型082
2.7 不同功能的圖標083
2.7.1 入口圖標083
2.7.2 主入口圖標084
2.7.3 活動圖標084
2.8 關閉操作085
2.8.1 常態關閉086
2.8.2 延伸關閉086
2.9 進度條088
2.10 切圖方法089
2.10.1 什麼是切圖089
2.10.2 切法089
1.整切089
2.對半切089
3.拼合切090
4.切邊090
5.九宮切091
6.填補091
2.10.3 切圖輸出092
1.常用方法092
2.自創方法094
2.10.4 半像素094
2.11 輸出管理095
2.11.1 善於使用已知工具095
1.圖層重命名095
2.分組096
2.11.2 命名與編號096
1.常用命名097
2.編號097
2.11.3 劃分遊戲模塊098
2.11.4 三叉樹原理100
2.11.5 輸出信息100
2.11.6 快速疊代資源管理101
2.11.7 信息記憶103
2.12 美術線前測試文檔反饋規範103
2.12.1 什麼是美術線前測試文檔反饋103
2.12.2 測試文檔反饋規範103
1.測試文檔名稱規範103
2.測試文檔內容規範104
3 遊戲附加功能
3.1 音頻106
3.2 振動106
3.3 視頻106
3.4 截圖107
3.5 分享107
3.6 五圖107
4 遊戲界面繪製案例
4.1 設計準備109
4.1.1 硬件設備109
4.1.2 設計軟件109
4.1.3 設計插件Photoshop Mirror 110
4.1.4 精準透視輔助工具110
1. Perspective Tools插件110
2. 2.5D六邊立體透視輔助線111
3. 3D全景透視輔助線112
4.2 設計案例—元素篇113
4.2.1 繪製光源114
1.繪製徑向光114
2.繪製放射光118
4.2.2 繪製彩帶123
4.3 設計案例—按鈕篇129
4.3.1 繪製水晶按鈕129
4.3.2 繪製透視按鈕137
4.4 設計案例—圖標篇151
4.4.1 繪製金幣151
4.4.2 繪製金幣寶箱165
4.4.3 繪製財寶車169
4.5 設計案例—角色繪製篇174
4.6 設計案例—界面篇204
4.6.1 繪製匹配界面204
4.6.2 繪製古風效果的活動界面214
4.7 設計案例—綜合篇221
4.7.1 繪製五子棋大廳221
1.繪製頭像221
2.繪製公告欄223
3.繪製返回按鈕和菜單按鈕223
4.繪製入口按鈕225
4.7.2 繪製設置對話框226
1.繪製框體227
2.添加信息229
3.繪製關閉按鈕231
4.7.3 繪製匹配畫面233
1.繪製底框234
2.添加文字信息235
4.7.4 繪製五子棋對局效果237
1.繪製棋子、棋盤238
2.繪製頭像信息240
3.繪製常態按鈕241
4.7.5 繪製五子棋結算頁面243
1.繪製雲朵243
2.繪製彩帶和星星圖形244
3.繪製玩家信息頁面245