![移动游戏UI设计专业教程](https://wfqqreader-1252317822.image.myqcloud.com/cover/424/34740424/b_34740424.jpg)
1.1 游戏界面设计的基础知识
1.1.1 什么是游戏界面设计
游戏界面设计是根据游戏特性,把必要的信息展现在游戏主界面、操控界面和弹出界面上,通过合理的设计,引导用户进行简单的人机交互操作,如图1-1~图1-3所示。
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0009_0002.jpg?sign=1739324176-8OS7xRa9lArUQBfKbIBwMyd2s0EPOg8z-0-a7d55f1b4338625a759e309fea5fd1bd)
图1-1
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0009_0003.jpg?sign=1739324176-PKJsHL0G3RQZZb8jdhB6lr0KkE3LHfRF-0-4f78f2bd0627d1ba18fa4a5bdc1173b1)
图1-2
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0009_0004.jpg?sign=1739324176-kXcfneWM1lpMsBHI932ZP1GcQ0Mevb9E-0-87a6eee7797709a021be58622a9c415c)
图1-3
想要设计好游戏界面,不仅要有良好的审美观,更要有对人机交互的认知度。
一个好的游戏界面不仅在视觉上要有独特的美感,更要把游戏的层次感设计出来。交互的合理性、用户的体验感、元素的合理应用等都要把握得恰如其分,让游戏给用户足够的代入感。图1-4~图1-6所示分别是页游界面、网游界面和手游界面。
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0009_0005.jpg?sign=1739324176-lrkAFVrc3C4TovuHbS3JgP5tNvIUn0AC-0-01d5b9ab5d27e100e91c85b214961e0e)
图1-4
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0010_0006.jpg?sign=1739324176-dOKm8n2UpzE5FVUpFzp413yxPJTim1HK-0-41c550ab122bb6550f2e427c6caff63c)
图1-5
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0010_0007.jpg?sign=1739324176-IrpAPpc6SZEj0EtCCJ1CdLEhAUEPhiLJ-0-c0c1ed46d1d1b81011f0c45d89436d16)
图1-6
1.1.2 游戏界面的设计原则
游戏交互设计尽量不要烦琐,用最简单的方式去引导用户进行操作即可。
原则1:游戏中所有视觉元素都要为游戏本身服务。用户体验大多来源于游戏本身,游戏UI设计可为游戏带来视觉冲击,能让用户更直观地体验游戏,如图1-7和图1-8所示。
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0010_0008.jpg?sign=1739324176-tY4tdpms03D5ggALYWs51ObqtaERPL0p-0-1c14026ef47d49c1b98197c06267f24d)
图1-7
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0010_0009.jpg?sign=1739324176-gaPoo971Bvga7pyeLlHf3IwSOLWR1wgX-0-bac59dc5d2b2cc8eac97f27f60af63b8)
图1-8
原则2:把控好游戏的界面风格,注意色彩对界面的影响。如果界面的颜色反差太大,会让用户有脱离游戏的感觉。当然有的游戏也会根据自己的特殊设定,大胆运用一些反差较大的色彩来增加游戏的视觉冲击力。色彩只是游戏设计中的一小部分,运用得好可以锦上添花,运用得不好会给用户带来不良的视觉体验,如图1-9~图1-12所示。
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0010_0010.jpg?sign=1739324176-oNZnnACmFICHxmq9yqf0Q1paha6DoRju-0-3f9591188df17e900a5102cdbf6f60bf)
图1-9
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0010_0011.jpg?sign=1739324176-FnWDYQq1VKSYTTkDsUb56mCPeXE1RW3T-0-4ed62a3950fc98858c684951670fa141)
图1-10
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0012.jpg?sign=1739324176-Pp0RFK5BG5ntxR7o8Dl3IZJ7PFJBLtvf-0-b14eee395debf592f3b5ab80906e39b1)
图1-11
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0013.jpg?sign=1739324176-g6WQCiZSw2ZI7D5fZTbm0RWrm61bMpBe-0-6f89c22f1ec89abd761d87f77d1624cf)
图1-12
原则3:引导界面的设计应言简意赅。每款游戏都有自己独特的操作特性,想让用户在最短的时间内了解游戏的操作,需要设计一些引导界面来帮助用户。引导界面的表现很直观,只需要用简单的指示图片和说明文字,言简意赅地说明游戏的独特性和操作习惯就好,不需要太多花哨的元素去修饰。让用户轻松理解到游戏的特性,引导界面的作用就已经达到了,如图1-13和图1-14所示。
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0014.jpg?sign=1739324176-2Ym8YvADClWQgrGtZ3l5jiWR10s27D1F-0-5508a437b2ae9d2ecfe732299be90ea6)
图1-13
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0015.jpg?sign=1739324176-ZF2Gcpi91rSJQKcl8Io2x7SwUTk1GCKE-0-df841b1ada112a60effefc93538ef584)
图1-14
原则4:游戏设计师要懂得很多客观知识,如排版布局、色彩搭配和人机交互等。对一个界面的设计把控要趋向于产品本身和产品针对的用户。在了解产品的同时要对产品自身的各类因素进行设计,来达到人机交互自然流畅。让用户感觉得心应手,也是设计好一款游戏的初衷,如图1-15~图1-18所示。
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0016.jpg?sign=1739324176-pKXWA0luOUa6r3taRcYKcNr7PTvAksau-0-0a8d2cff7dcf6a9eb29a194200037ce8)
图1-15
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0017.jpg?sign=1739324176-0OMrRyCDqeU4d7QESm1AiSBdY4gpD9c1-0-a4847c6c80b8a75a9dca60f027d7f86d)
图1-16
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0018.jpg?sign=1739324176-1kOwmIoB6NCjZZyYlNseazRTDgze2D0X-0-061ef3f45c9d6c8bc55782a9b89266ca)
图1-17
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0019.jpg?sign=1739324176-UZVErcalGy4ILLqVcHtf3be3wKb7thkS-0-650c12db1ea6f7d81d12bed8030d17d3)
图1-18