【美術專題】遊戲UI設計（下）

一.如何設計

遊戲界面設計，其設計目的以功能性爲主，視覺性爲輔。遊戲界面設計需根據遊戲特性傳達主次信息、規劃操做界面和互動模式，經過合理的設計，引導用戶進行方便快捷的操做。

遊戲界面設計，功能性爲主，視覺性爲輔。設計的時候要根據遊戲的特性，來傳達主次信息，規劃操做界面和互動模式，經過設計引導玩家遊玩。一個好的界面得兼顧美觀和易用這兩個條件，符合這兩個條件才能給玩家足夠的代入感。

下面咱們先來看幾個比較好的案例分析。

下圖界面用的是對稱式的佈局，界面很是的平衡，文字底板都作了斜切式的設計，有很強的拼接感。界面背景的顏色很亮，因此界面底板的顏色用了黑色透明底板，能夠從亮背景中突出出來。

左側界面UI控件都是圍繞着界面四周來佈置的，這麼佈局能夠提高玩家的遊戲體驗，界面的UI控件採用的高飽和度配色，使整個界面的氛圍很是的明快活潑。

下圖這個界面值得咱們參考的是它對總體UI控件的把控，界面UI控件都是圍繞着界面四周來佈置的，這樣的佈局能夠提高玩家的遊戲體驗，在顏色上都是採用的高飽和度配色，使整個界面的氛圍很是的明快活潑。這個界面的佈局方式和這種高飽和度的配色也都值得咱們來學習的。

學會合理的運用高飽和度配色可以對界面起到畫龍點睛的做用。

下圖界面是一個開始遊戲的界面，整個界面採用的墨綠色的的背景，在墨綠色背景上點綴一些小面積的高飽和度顏色，使整個界面對比很是的強烈。界面的LOGO設計的很是的講究,整個LOGO採用的摺紙風格來設計的，在配上旁邊的黃色小方塊，與遊戲的主題很契合。

下圖界面的配色很是的明快活潑、輕鬆休閒。由於是豎屏的遊戲玩法，因此界面中全部的UI控件都集中在界面的上部，使整個界面更加的易於玩家操做。

這兩個界面，右側的界面是開始遊戲的界面，整個界面採用的也是對稱式的佈局，使界面看起來很是的穩定、紮實。界面的的LOGO和開始遊戲按鈕都用了高飽和度的顏色，使整個界面的對比很是強烈。

在這個界面裏，LOGO的設計算是一個亮點，它採用了摺紙風格的設計，現代感十足，再搭配上旁邊的黃色幾何小方塊，使總體界面在符合遊戲主題的同時顯得時尚簡約。

上圖這個界面跟前面幾個有所不一樣，總體界面的UI控件都集中在上部，這麼設計是根據遊戲特殊的豎屏玩法來服務的。（不一樣的遊戲玩法界面的佈局也會有所區別，因此具體的界面佈局得根據遊戲玩法來定）

再看這個界面的總體效果，總體的顏色都採用了高飽和度來製做，使界面的總體氛圍輕鬆活潑。符合遊戲主題。（因此咱們在製做中的配色也得根據遊戲的主題風格來定義）。

下圖界面的UI控件總體集中在界面的上部，有利於玩家的豎屏遊戲體驗。界面背景配色採用的是比較強烈的黑白對比配色，界面的UI控件採用的是高飽和度橙黃色配色，配合上界面的暗色背景顯得UI控件很是突出。

下圖界面是一個開始遊戲界面，界面的總體佈局採用的上下對稱式的設計，界面的配色總體比較乾淨。界面中的一些圖標和控件都用了深灰色，在淺色背景的陪襯下，很是的突出。

這兩個界面，第一個界面的UI控件總體集中在界面的上部，有利於玩家的豎屏遊戲體驗。界面背景配色採用的是比較強烈的黑白對比配色，界面的UI控件採用的是高飽和度橙黃色配色，配合上界面的暗色背景顯得UI控件很是突出。

第二個界面是一個開始遊戲界面，界面的總體佈局採用的上下對稱式的設計，界面的配色總體比較乾淨。界面中的一些圖標和控件都用了深灰色，在淺色背景的陪襯下，很是的突出。

兩個界面使用的這種強對比的配色方法，都是值得咱們學習和借鑑的。

咱們的案例分析差很少也講完了，如今咱們來總結一下這些案例的共性。

你們看到我屏幕中的這些界面，和前面的界面都同樣是簡約扁平的風格。這種界面繪製方法簡單，操做快捷，容易出效果，符合如今大衆的審美。你們也知道，市場上每一年的流行趨勢都有所不同，大衆審美也在逐步提升。因此，但願你們製做遊戲界面的時候，能儘可能往這個方向多研究、靠攏。

介紹了這些比較有參考價值的界面案例，那接下來，咱們來看一下，怎樣去設計一個簡單界面。

案例-農場經營模擬UI

設計製做農場經營模擬UI界面，主要功能是遊戲操做與各功能入口。

一開始，咱們想要作一個遊戲界面，首先在肯定好遊戲類型的同時，須要一個初步的界面策劃案，如圖，或是去網上搜一下其餘同類遊戲的界面佈局，直接拿來借鑑一下。

如圖所示，咱們要設計一個農場經營模擬遊戲的主界面，首先肯定好整個界面的主要功能爲遊戲操做和各功能入口。

咱們在設計界面的時候必定要先想明白策劃案再來進行設計，這樣才能清晰製做邏輯。如今咱們來分析一下這個策劃案，左側這張圖就是咱們作好的界面策劃案，先肯定這個界面的佈局，根據

遊戲類型，UI控件圍繞着屏幕四周，這樣的佈局很符合玩家的操做習慣。

界面的金幣、地塊等資源信息放在了左上角，玩家能夠對金幣和地塊資源進行一些操做，玩家列表在界面的右上角，這樣能夠很直觀的在玩家列表中看到一些關於本身和其餘玩家的信息。

界面下方，分別是玩家的等級經驗值，操做圖標和一些功能圖標按鈕，由於這三種控件不是同一種控件，因此他們的距離會分隔的遠一些，互不干擾。

分析完整個策劃案，咱們開始尋找一些同類型遊戲的參考素材。

在找好素材以後，咱們就能夠開始繪製這個界面。

1.從界面上部開始設計，左側是一些資源類信息，右側是玩家列表。

2.設計界面的下部，等級經驗值和操做圖標。

3.設計界面下部右側的功能圖標按鈕。

這個界面的總體風格我採用了最近比較流行的Q版扁平風格進行設計，根據我的製做習慣，我從界面的上部開始繪製，先繪製出了左上的資源類信息底板和圖標，底板採用了高純度的顏色來進行搭配，圖標也一樣用了Q版卡通的風格來繪製，突出了整個界面的清新感，強調了整個畫面的設計風格。

出售和加號按鈕屬於充值按鈕，因此咱們用了很醒目的顏色來進行一個視覺上的突出，使玩家能一眼就看到他。

左側作完以後，咱們再來看看右側，右側的玩家列表底板用了黑色半透的設計，再把須要展現的信息獨立出來的同時也不會跟整個場景脫節，在設計的時候，須要多注意對文字節奏的把控，主要是注意文字的排版，對齊和大小的變化。

經驗值條，咱們放在了左下角，採用了高亮度的綠色，這樣設計比較符合玩家的習慣，由於大多數遊戲的經驗值條是綠色的，以後是中間的主要操做道具，耕地，澆水，收割。這三個圖標分別採用了簡單的鋤頭、水壺和鐮刀的外形，這麼設計是爲了讓玩家看到圖標的時候，就能對圖標有很直觀的認知。這種常常操做得圖標必定要作的簡單易懂，不能太過複雜。

最後，咱們來設計最右側的功能圖標按鈕，功能圖標按鈕也是用剪影的形式來設計的，由於這三個圖標和中間的圖標不是屬於同一類型的圖標，因此在設計的時候要作出明顯的區分。這三個圖標的底板咱們是用的圓形實體的白色底板，和中間的黑色半透底板不一樣。在圖標的顏色上也作出了明顯的區分，由於咱們製做的是比較休閒的小遊戲，因此，這幾個功能圖標都採用了比較明快的藍色。

如今，一個簡單的界面就已經作完了，讓咱們來看一下這個界面的總體效果。

這是花了兩個多小時來完成的一個可以知足玩家基礎操做的界面，畫面風格也較爲輕鬆明快。從分析策劃案、找素材一直到完成界面製做，其實並不會太過複雜，主要是得把控一下總體風格的統一，通常就小遊戲來講，最好的效果就是我前面提到的畫面簡潔，色彩明快。不要過多的去增長一些無用的元素堆砌。因爲還有一些關於PS的操做，在這裏我沒法面面俱到的講解，這裏還得須要大家在製做的過程當中本身多研究、琢磨、多去關注一下當下的潮流趨勢。

如今，整個遊戲UI的設計界面咱們就已經講完了，接下來讓咱們看看用戶的一些設計案例，來作一個簡單的分析。

二.用戶案例分析

《梗人生》是用戶自制的關於人生，關於選擇的劇情遊戲。

用戶把界面設計的很是有趣味性，設計出了一種復古的風格。

1.界面的總體風格清新活潑，全程基本保持了風格的高度統一。

2.登陸界面背景的設計元素搭配顯得尤其美觀。

部分建議：

遊戲內的界面配色有些單調，能夠考慮加一些跳躍性較強的顏色，好比把蛋糕圖標設計爲粉紅色，或是把頂部的圖標底變成黑色半透。這樣遊戲內部感覺會豐富不少。右側界面地板上的黑色的文字應該換成亮色的文字，這樣玩家在閱讀信息的時候很方便不少。

這是用戶作的一個小遊戲，玩法有點像AVG遊戲，這個遊戲界面設計的仍是能夠的，登陸界面的配色很明快，開始遊戲按鈕還設計出了一個閃動的小動效，讓人看着有點擊慾望。又稱的界面配色比較復古，圖標的風格也較爲統一，但有仇界面底板的文字最好不要使用黑色，把文字的顏色換的明亮一點，這樣玩家在閱讀的時候會更加清晰，不至於使眼睛過於疲勞，如今咱們來看一下，這個界面能夠如何的去優化。

!

下面的界面是優化後的界面，主要優化了文字和按鈕的顏色，由於整個界面的底板都是偏黃褐色的底板，再配上純黑色的文字，閱讀起來會產生視覺上的疲勞，因此我把原來底板上的純黑色文字都換成了比較淺的顏色，方便玩家的閱讀。並且黃褐色的底板，配色比較沉悶，因此我這邊加強了按鈕得亮度，使界面顯得明亮透氣了一點。

《碰撞法則》是用戶自制的一款躲避類小遊戲。

用戶設計的遊戲界面恰到好處，整個遊戲的界面風格統一。

1.界面風格色調統一，能體現出用戶有必定的手繪能力。

2.登陸界面的LOGO色彩搭配合理，用了黑色的粗描邊，使文字和場景拉開層次。

部分建議：

遊戲使用的背景顏色有些髒，能夠考慮換個顏色乾淨些的背景或是把背景的飽和度調的高一些，遊戲規則和道具按鈕能夠考慮提升對比作的更突出一點。

這個遊戲是用戶自制的一個躲避類的小遊戲，界面的風格比較統一，登陸界面LOGO的配色很響亮，但這個LOGO的尺寸過小了，沒法突出整個界面的主題，能夠在尺寸上作的再大一些，從這兩個界面的繪製能看出玩家是有必定手繪基礎的。但這兩個界面的背景太過粗糙，顏色有些髒，這是界面製做中比較忌諱的，能夠考慮換一個顏色乾淨一些的背景來搭配界面。

風格

界面設計的風格、結構必需要與遊戲的主題和內容相一致，優秀的遊戲界面設計都具有這個特色。

界面

界面設計要儘可能簡潔，目的是便於遊戲玩家使用，減小在操做上出現失誤。界面設計在操做上的難易程度儘可能不要超出大部分玩家的認知範圍，而且要考慮大部分遊戲玩家在與遊戲互動時的習慣。

配色

界面的配色很是重要，直接影響着界面的美觀度，在配色的時候必定要遵循前面提到過的「631配色原則」，這樣在給界面配色的時候，纔能有理可循，搭配出合理的界面配色。

如今咱們來作一個總結，咱們在設計界面的時候，有幾個問題是須要咱們注意的：

第一點，界面的風格，結構必定要與遊戲的主題和內容相一致，你設計什麼題材的遊戲，你的界面風格就要加入什麼題材的設計元素，這樣你設計的界面風格才能符合你的遊戲主題

第二點，界面的設計必定要儘可能簡潔，讓玩家便於使用，方便玩家的操做，還得考慮大部分遊戲玩家遊玩時的操做習慣。

第三點，界面的配色很是重要，直接影響着界面的美觀度，在配色的時候必定要遵循前面提到過的「631配色原則」，這樣在給界面配色的時候，纔能有理可循，才能搭配出合理的界面配色。