PhotoshopCCUI設計案例教程全冊電子教案完整版教學設計第6章教案

1、YOUR LOGO原創(chuàng)力獨家文檔教材配套參考答案 課 題: 第6章 游戲界面設計課 時: 8課時授課類型: 講授+實訓教學目標: 了解軟件游戲界面設計的基礎知識 掌握游戲界面設計的規(guī)范 認識游戲界面常用界面類型教學重點:游戲界面設計的規(guī)范、游戲界面常用界面的設計方法教學難點:游戲界面常用界面的設計方法本章技能點：益智類游戲-商城界面、操作界面、勝利界面的繪制方法本章教學技巧：1.知識講解2.案例實訓教學過程：（一）課前準備1.授課前準備準備好教學用具和教學設備2.板書課題：第6章 游戲界面設計項目目標： 了解軟件游戲界面設計的基礎知識 掌握游戲界面設計的規(guī)范 認識游戲界面常用界面類型3.課程引

2、入通過“制作水果消消消游戲”案例效果展示引入游戲界面設計的概念 （二）課程內(nèi)容6.1 游戲界面設計的基礎知識游戲界面設計的基礎知識包括了游戲界面設計的概念、游戲界面設計的流程以及游戲界面設計的原則。6.1.1游戲界面設計的概念游戲界面，又被稱為“游戲UI”，英文名稱“GameU”，是界面設計的一個分支，用來專門設計游戲畫面內(nèi)容。游戲界面將必要的信息合理地設計在界面上，引導用戶進行交互操作，是玩家與游戲進行溝通的橋梁，如圖所示。游戲界面又可以分為網(wǎng)頁游戲界面、手機游戲界面、電視游戲界面等類型。 游戲界面6.1.2游戲界面設計的流程游戲界面的設計流程可以按照分析調(diào)研、交互設計、交互自查、視覺設計、

3、設計跟進、設計驗證的步驟來進行，如圖所示。游戲界面設計的流程1.分析調(diào)研游戲界面的設計是根據(jù)用戶的需求、游戲的定位以及類型而進行。不同游戲的定位和類型，設計風格也會有區(qū)別，如圖所示。因此先分析需求，了解游戲受眾，最后要通過同類型的游戲競品調(diào)研，明確設計方向。不同的游戲定位、不同的游戲類型，其設計風格也不同2.交互設計交互設計是對整個游戲設計進行初步構(gòu)思和制定的環(huán)節(jié)。一般需要進行架構(gòu)設計、流程圖設計、低保真原型、線框圖設計等具體工作，如圖所示。游戲界面草圖 3.交互自查交互設計完成之后，進行交互自查是整個游戲設計流程非常重要的一個階段?？梢栽趫?zhí)行界面設計之前檢查出是否有遺漏缺失的細節(jié)問題，具體可

4、以參考App中的交互自查。4.視覺設計原型圖審查通過，就可以進入視覺設計階段，這個階段的設計圖即產(chǎn)品最終呈現(xiàn)給用戶的界面。界面設計要求設計規(guī)范、圖片、內(nèi)容真實，如圖所示。俄羅斯設計師Dima Pazuk創(chuàng)作的游戲界面5.設計跟進設計跟進階段是需要設計人員和開發(fā)人員共同參與，主要保證設計細節(jié)的效果實現(xiàn)，如圖所示。該游戲的勝利界面加入了光束、圓點等細節(jié)，需要設計跟進，以保證細節(jié)的實現(xiàn)6.設計驗證設計驗證是最后一個階段，是為游戲進行優(yōu)化的重要支撐。在游戲正式上線后，通過用戶的數(shù)據(jù)反饋進行記錄，驗證前期的設計，并繼續(xù)優(yōu)化，如圖所示。巴基斯坦設計師Muhammad Naeem創(chuàng)作6.1.3游戲界面設計的

5、原則游戲界面設計的原則可以分為設計簡潔、風格統(tǒng)一、視覺清晰、用戶思維、符合習慣、操作自由六大原則。1.設計簡潔游戲界面設計要簡潔美觀，能夠令游戲玩家使用方便，在操作上減少錯誤，可以進行順暢的游戲交互，如圖所示。簡潔的游戲界面2.風格統(tǒng)一游戲界面的風格要符合游戲的主題，并且進行統(tǒng)一。制作一套風格統(tǒng)一的游戲界面非?？简炘O計師的把控能力與設計技巧，因為這其中包括了對按鈕、圖標以及色彩等各種元素，如圖所示。該游戲是一款投籃的體育類游戲，因此游戲風格整體充滿了運動活潑3.視覺清晰視覺清晰有利于游戲質(zhì)量的提升，加強游戲玩家對于游戲的認可。由于移動設備屏幕的特殊性，為了達到清晰度，需要游戲UI設計師制作不同

6、的界面資源，如圖所示。競速游戲中對于汽車的設計質(zhì)量往往要求較高，因此需要游戲UI設計師提供不同尺寸的設計資源，保證清晰度4.用戶思維游戲界面設計應該站在用戶的思考角度進行設計，滿足大部分玩家的想法。游戲的受眾不同，用戶對于界面的設計認知也不同，這些設計具體從元素造型、界面顏色、整體布局等方面表現(xiàn)，如圖所示。 由于游戲的用戶不同，設計風格也有很大分別5.符合習慣游戲界面的操作一定要符合用戶的認知與習慣，需要和用戶的現(xiàn)實世界進行匹配。另外用戶的年齡及生活方式不同，也會導致較大的習慣差異，因此游戲UI設計師要設計出符合用戶習慣的界面首先要進行目標用戶的定位，如圖所示。棋牌類游戲的用戶年齡普遍較大，而

7、且具有中國特色，因此設計風格比較傳統(tǒng)6.操作自由游戲的互動方式應保持高度的操作自由，其操作工具不僅可以是鼠標、鍵盤，還可以是手柄、體感游戲設備，令用戶充分沉浸在游戲體驗中，如圖所示。通過手柄進行游戲6.2 游戲界面設計的規(guī)范游戲界面設計基礎規(guī)范可以通過設計尺寸及單位、界面結(jié)構(gòu)、布局、字體及圖標五個方面進行詳盡的剖析。6.2.1游戲界面設計的尺寸及單位游戲界面根據(jù)設備主要有手機游戲界面、平板游戲界面、網(wǎng)頁游戲界面、電腦游戲界面以及電視游戲界面。這幾種界面的設計尺寸及單位在前面都進行過詳盡的剖析，因此結(jié)合項目需求，參考前面的App、網(wǎng)頁及軟件相關內(nèi)容即可，如圖所示。手機游戲 6.2.2游戲界面設計

8、的界面結(jié)構(gòu)游戲界面設計的界面結(jié)構(gòu)可以依據(jù)用戶對界面注意力的不同來進行劃分，通常分為主要視覺區(qū)域、次要視覺區(qū)域以及弱視區(qū)域，如圖所示。游戲界面設計結(jié)構(gòu)圖6.2.3游戲界面設計的布局游戲界面的布局可以根據(jù)啟動界面、主菜單界面、關卡界面、操作界面、勝利界面以及商店界面6種常用界面的布局來進行闡述。1.啟動界面啟動界面是游戲給予用戶的第一印象，決定了游戲的門面，其常用布局如圖所示。啟動界面2.主菜單界面游戲中的主菜單界面，主要包括游戲的設置、操作的選擇以及相關幫助等，其常用布局如圖所示。主菜單界面3.關卡界面關卡界面是令用戶進入游戲操作的界面，關卡主要是對一系列相同的元素有秩序的排版布局，其常用布局如

9、圖所示。關卡界面4.操作界面操作界面是用戶真正進行游戲的界面，主要包括角色控制、時間提醒、血量提示等內(nèi)容，其常用布局如圖所示。操作界面5.勝利界面勝利界面即玩家通關后的勝利顯示界面，其常用布局如圖所示。勝利界面6.商店界面商店界面，是販賣虛擬產(chǎn)品服務的界面，也是游戲盈利的主要來源，其常用布局如圖所示。商店界面6.2.4游戲界面設計的文字游戲界面中，正文閱讀類建議根據(jù)不同的平臺選擇對應的系統(tǒng)字體，標題展示類需要根據(jù)游戲的風格進行對應的設計，如圖所示。經(jīng)過設計的標題 字號在PC網(wǎng)頁中要大于14px,在移動設備中要大于20px。6.2.5游戲界面設計的圖標游戲界面中的圖標規(guī)范前面都進行過詳盡的剖析，

10、因此結(jié)合項目需求，參考前面圖標設計規(guī)范的相關內(nèi)容即可，如圖所示。游戲中的圖標6.3 游戲常用界面類型游戲界面設計是體現(xiàn)游戲品質(zhì)、吸引用戶的關鍵所在。在游戲界面中，常用界面類型為啟動界面、主菜單界面、關卡界面、操作界面、勝利界面以及商店界面。1.啟動界面啟動界面是游戲給予用戶的第一印象，決定了游戲的門面。游戲啟動界面需要合理地設計游戲風格、游戲場景及游戲功能鍵等，只有設計出精美的啟動界面才能夠迅速抓住用戶，如圖所示。啟動界面 2.主菜單界面游戲中的主菜單界面，主要包括游戲的設置、操作的選擇以及相關幫助等，如圖所示。這類界面突出了各元素間的分布關系，讓游戲玩家可以更好地接受游戲的信息，無障礙地了解

11、游戲。主菜單界面 3.關卡界面關卡界面是令用戶進入游戲操作的界面，關卡主要是對一系列相同的元素有秩序地排版布局，如圖所示。關卡在游戲中起到了承上啟下的作用，并能讓用戶清楚了解到自身進行游戲的進度及程度。關卡界面 4.操作界面操作界面是用戶真正進行游戲的界面，主要包括角色控制、時間提醒、血量提示等內(nèi)容，如圖所示。生動的操作界面能夠符合用戶的心理預期，產(chǎn)生良好的沉浸式體驗。操作界面 5.勝利界面勝利界面即玩家通關后的勝利顯示界面。勝利界面對玩家起到了鼓舞的作用，并伴隨著獎勵，令玩家產(chǎn)生喜悅，如圖所示。勝利界面 6.商店界面商店界面，是販賣虛擬產(chǎn)品服務的界面，也是游戲盈利的主要來源，如圖所示。游戲玩

12、家可以通過購買商店的物品，提升自身游戲的戰(zhàn)斗力。商店界面，右為英國UI/UX設計師Heather Murray創(chuàng)作6.4 課堂案例制作水果消消消游戲【案例學習目標】學習如何置入圖片，并使用移動工具移動調(diào)整圖片?！景咐R要點】使用新建參考線命令新建參考線，使用置入嵌入對象命令導入圖片調(diào)整大小位置，使用描邊命令給素材或文字添加邊框，使用內(nèi)陰影命令給圖形添加陰影，效果如圖所示。【效果所在位置】云盤/Ch06/效果/制作水果消消消游戲。 1制作水果消消消游戲商城界面（1）按Ctrl+N組合鍵，新建一個文件，寬度為750像素，高度為1334像素，分辨率為72像素/英寸，背景內(nèi)容為白色，如圖所示，單擊“

13、創(chuàng)建”按鈕，完成文檔新建。（2）選擇“視圖 新建參考線”命令，彈出“新建參考線”對話框，在40像素的位置新建一條水平參考線，設置如圖所示，單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（3）選擇“視圖 新建參考線”命令，彈出“新建參考線”對話框，在32像素的位置新建一條垂直參考線，設置如圖所示。單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。用相同的方法，在718像素（距離右邊32像素）的位置新建一條垂直參考線，如圖所示。 （4）選擇“文件 置入嵌入對象”命令，彈出“置入嵌入的對象”對話框，選擇云盤中的“Ch06 素材 制作水果消消消游戲 制作水果消消消游戲商城界面 01”文件。單擊“置

14、入”按鈕，將圖片置入到圖像窗口中，并調(diào)整其位置和大小，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“背景圖”。（5）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“顏色疊加”命令，彈出對話框，將疊加顏色設為黑色，其他選項的設置如圖所示。單擊“確定”按鈕，效果如圖所示。 （6）選擇“文件 置入嵌入對象”命令，彈出“置入嵌入的對象”對話框，選擇云盤中的“Ch06 素材 制作水果消消消游戲 制作水果消消消游戲商城界面 04”文件。單擊“置入”按鈕，將圖片置入到圖像窗口中，并調(diào)整其位置和大小，按Enter鍵確定操作，效果如圖6-40所示，在“圖

15、層”控制面板中生成新的圖層并將其命名為“商城底框”。使用相同的方法置入云盤中的“Ch06 素材 制作水果消消消游戲 制作水果消消消游戲商城界面 02”文件，在“圖層”控制面板中生成新的圖層并將其命名為“商城”，效果如圖所示。（7）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“描邊”命令，彈出對話框，將描邊顏色設為黃色（248、165、68），其他選項的設置如圖所示，單擊“確定”按鈕，效果如圖所示。 （8）選擇“橫排文字”工具，在適當?shù)奈恢幂斎胄枰奈淖植⑦x取文字。選擇“窗口 字符”命令，彈出“字符”面板，在“字符”面板中，將“顏色”設為白色，其他選項的設置如圖所示，按En

16、ter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。 （9）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“描邊”命令，彈出對話框，將描邊顏色設為黃色（248、165、68），其他選項的設置如圖所示，單擊“確定”按鈕，效果如圖所示。 （10）選擇“文件 置入嵌入對象”命令，彈出“置入嵌入的對象”對話框，選擇云盤中的“Ch06 素材 制作水果消消消游戲 制作水果消消消游戲商城界面 03”文件。單擊“置入”按鈕，將圖片置入到圖像窗口中，并調(diào)整其位置和大小，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“關閉按鈕”。（11）選

17、擇“圓角矩形”工具，在屬性欄的“選擇工具模式”選項中選擇“形狀”，將“填充”顏色設為粉色（250、191、188），“半徑”選項設置為16像素，在圖像窗口中繪制圓角矩形，效果如圖所示，在“圖層”控制面板中生成新的形狀圖層“圓角矩形1”。（12）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“內(nèi)陰影”命令，彈出對話框，將陰影顏色設為暗紅色（203、75、68），其他選項的設置如圖所示，單擊“確定”按鈕，效果如圖所示。 （13）將“圓角矩形 1”圖層拖曳到控制面板下方的“創(chuàng)建新圖層”按鈕上進行復制，生成新的形狀圖層“圓角矩形 1 拷貝”，如圖所示。選擇“移動”工具，按住Shif

18、t鍵的同時，拖曳復制的圖形到適當?shù)奈恢?，效果如圖所示。 （14）使用相同的方法再次復制三個形狀圖層，并分別拖曳到適當?shù)奈恢茫鐖D所示。選中“圓角矩形 1 拷貝 4”圖層，按住Shift鍵的同時，單擊“圓角矩形 1”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“分布框”，如圖所示。 （15）選擇“文件 置入嵌入對象”命令，彈出“置入嵌入的對象”對話框，選擇云盤中的“Ch06 素材 制作水果消消消游戲 制作水果消消消游戲商城界面 05”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，并調(diào)整其位置和大小，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層

19、并將其命名為“金幣1”。（16）使用相同的方法置入其他素材，效果如圖所示。選中“金幣5”圖層，按住Shift鍵的同時，單擊“金幣 1”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“金幣價格”。水果消消消游戲商城界面制作完成。2制作水果消消消游戲操作界面（1）按Ctrl+N組合鍵，新建一個文件，寬度為750像素，高度為1334像素，分辨率為72像素/英寸，背景內(nèi)容為白色，如圖所示，單擊“創(chuàng)建”按鈕，完成文檔新建。選擇“視圖 新建參考線”命令，彈出“新建參考線”對話框，在40像素的位置新建一條水平參考線，設置如圖所示，單擊“確定”按鈕，完成參考線的創(chuàng)建，如圖所示。 （2）

20、選擇“視圖 新建參考線”命令，彈出“新建參考線”對話框，在32像素的位置新建一條垂直參考線，設置如圖所示，單擊“確定”按鈕，完成參考線的創(chuàng)建，如圖所示。用相同的方法，在718像素（距離右側(cè)32像素）的位置新建一條垂直參考線，如圖所示。 （3）選擇“文件 置入嵌入對象”命令，彈出“置入嵌入的對象”對話框，選擇云盤中的“Ch06 素材 制作水果消消消游戲制作水果消消消游戲操作界面 01”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，并調(diào)整其位置和大小，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“底圖”。（4）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，

21、在彈出的菜單中選擇“顏色疊加”命令，將疊加顏色設為黑色，其他選項的設置如圖所示，單擊“確定”按鈕，效果如圖所示。 （5）選擇“文件 置入嵌入對象”命令，彈出“置入嵌入的對象”對話框，選擇云盤中的“Ch06 素材 制作水果消消消游戲制作水果消消消游戲操作界面 05”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，并調(diào)整其位置和大小，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“內(nèi)容區(qū)”。（6）按住Shift鍵的同時，單擊“底圖”圖層，將所需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“內(nèi)容區(qū)”，如圖所示。（7）選擇“文件 置入嵌入對象”命令，

22、彈出“置入嵌入的對象”對話框，選擇云盤中的“Ch06 素材 制作水果消消消游戲制作水果消消消游戲操作界面 02”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，并調(diào)整其位置和大小，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“桃心”。使用相同的方法置入其他素材，效果如圖所示。按住Shift鍵的同時，單擊“桃心”圖層，將所需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“菜單欄”。 （8）選擇“文件 置入嵌入對象”命令，彈出“置入嵌入的對象”對話框，選擇云盤中的“Ch06 素材 制作水果消消消游戲制作水果消消消游戲操作界面 06”文件，單擊“置

23、入”按鈕，將圖片置入到圖像窗口中，并調(diào)整其位置和大小，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“菜單背景”。（9）使用相同的方法置入其他素材，效果如圖所示。按住Shift鍵的同時，單擊“菜單背景”圖層，將所需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“導航欄”。水果消消消游戲操作界面制作完成。3制作水果消消消游戲勝利界面（1）按Ctrl+N組合鍵，新建一個文件，寬度為750像素，高度為1334像素，分辨率為72像素/英寸，背景內(nèi)容為白色，如圖所示，單擊“創(chuàng)建”按鈕，完成文檔新建。選擇“視圖 新建參考線”命令，彈出“新建參考線”對話框，

24、在40像素的位置新建一條水平參考線，設置如圖所示，單擊“確定”按鈕，完成參考線的創(chuàng)建。如圖所示。 （2）選擇“視圖 新建參考線”命令，彈出“新建參考線”對話框，在32像素的位置新建一條垂直參考線，設置如圖所示，單擊“確定”按鈕，完成參考線的創(chuàng)建，如圖所示。用相同的方法，在718像素（距離右側(cè)32像素）的位置新建一條垂直參考線，如圖所示。（3）選擇“文件 置入嵌入對象”命令，彈出“置入嵌入的對象”對話框，選擇云盤中的“Ch06 素材 制作水果消消消游戲 制作水果消消消游戲勝利界面 01”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，并調(diào)整其位置和大小，按Enter鍵確定操作，效果如圖所示，在“

25、圖層”控制面板中生成新的圖層并將其命名為“底圖”。使用相同的方法置入其他素材，效果如圖所示。 （4）選擇“橫排文字”工具，在適當?shù)奈恢幂斎胄枰奈淖植⑦x取文字。選擇“窗口 字符”命令，彈出“字符”面板，在面板中將“顏色”設為深藍色（11、94、120），其他選項的設置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。 （5）選擇“橫排文字”工具，在適當?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設為白色，其他選項的設置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。使用相同的方法輸入其他文字，效果如圖所示

26、。 （6）選擇“文件 置入嵌入對象”命令，彈出“置入嵌入的對象”對話框，選擇云盤中的“Ch06 素材 制作水果消消消游戲制作水果消消消游戲勝利界面 10”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，并調(diào)整其位置和大小，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“下一關”。（7）選擇“橫排文字”工具，在適當?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設為白色，其他選項的設置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。 （8）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“描邊”命令，將描邊顏色設為綠色（12、120、22），其他選項的設置如圖所示，單擊“確定”按鈕，效果如圖所示。 （9）選擇“文件 置入嵌入對象”命令，彈出“置入嵌入的對象”對話框，選擇云盤中的“Ch06 素材 制作水果消消消游戲 制作水果消消消游戲勝利界面 11”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，并調(diào)整其位置和大小，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“關閉按鈕”。按住Shift鍵的同時，單擊“底圖”圖層，將需要的