![移动游戏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=1739529618-ztpUhczTKx86tVRhkImTyCUpeww9pIrX-0-b132ae5ca459931cd39990a21be58213)
图1-1
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0009_0003.jpg?sign=1739529618-s9HdO83g0Wz3FexP4KlUuaTWvBSxG0Y7-0-1438f106d1eb534ffe495d8434c65457)
图1-2
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0009_0004.jpg?sign=1739529618-iMSlewpYYx9ZO6GplgPeXcVVDDHtdFBj-0-9598a8ce91eb415bf47043471bcbac24)
图1-3
想要设计好游戏界面,不仅要有良好的审美观,更要有对人机交互的认知度。
一个好的游戏界面不仅在视觉上要有独特的美感,更要把游戏的层次感设计出来。交互的合理性、用户的体验感、元素的合理应用等都要把握得恰如其分,让游戏给用户足够的代入感。图1-4~图1-6所示分别是页游界面、网游界面和手游界面。
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0009_0005.jpg?sign=1739529618-riAFslqJiDR2MmlQULIX9pc8yjCnRqs9-0-fd9d2ad6230a8f27becdac68edbd6261)
图1-4
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0010_0006.jpg?sign=1739529618-sMLe7Vt32mfCAVjHIqZmiakxENwN96V0-0-327d836fd794147b4c990f92e0652a0e)
图1-5
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0010_0007.jpg?sign=1739529618-TtGpq3nASswIgf9w5HRNykosjymJu81b-0-f0c0f1d2af6d4d27e252a75b517d313e)
图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=1739529618-v8ZInBKzzKTQHzv8gjoyvntd1GgwQmGJ-0-76ba707478b311d8f8158283d36c1a56)
图1-7
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0010_0009.jpg?sign=1739529618-zAvWJgHptQPel7pmLRAIKYna8RIh9poZ-0-d447a18aa537689a6c15f2103104b0db)
图1-8
原则2:把控好游戏的界面风格,注意色彩对界面的影响。如果界面的颜色反差太大,会让用户有脱离游戏的感觉。当然有的游戏也会根据自己的特殊设定,大胆运用一些反差较大的色彩来增加游戏的视觉冲击力。色彩只是游戏设计中的一小部分,运用得好可以锦上添花,运用得不好会给用户带来不良的视觉体验,如图1-9~图1-12所示。
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0010_0010.jpg?sign=1739529618-OAmfaRWPG4mjjanuAJUMK36eevVDr1pw-0-24121a216717f3a13f97769605131b02)
图1-9
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0010_0011.jpg?sign=1739529618-zvU9dyxOFgvtQcKNFF9Yz49r11k1rWv0-0-1eb77581eb7a71213ac32527bc01b86d)
图1-10
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0012.jpg?sign=1739529618-JranFjKqzSGDcOTNqx5Mjsvzrm0T5WMX-0-89fdbf824b2778890f59fa0eabd90bdc)
图1-11
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0013.jpg?sign=1739529618-dhb0wOTKK213oarItU2kCKPvOyTyUetx-0-ec0f30efcf93fe2e1eafa8614d17fe1b)
图1-12
原则3:引导界面的设计应言简意赅。每款游戏都有自己独特的操作特性,想让用户在最短的时间内了解游戏的操作,需要设计一些引导界面来帮助用户。引导界面的表现很直观,只需要用简单的指示图片和说明文字,言简意赅地说明游戏的独特性和操作习惯就好,不需要太多花哨的元素去修饰。让用户轻松理解到游戏的特性,引导界面的作用就已经达到了,如图1-13和图1-14所示。
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0014.jpg?sign=1739529618-Cs1aM5dCo9K2exkK3JTOSTlqA9OmAUxw-0-83ac8e0fcd8ccad92b5e918dabe27ab2)
图1-13
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0015.jpg?sign=1739529618-F6FosjS3FSSN3zdx2zysriMs5VIdSNfg-0-e5ff4388b958268016d497d39f8a0e16)
图1-14
原则4:游戏设计师要懂得很多客观知识,如排版布局、色彩搭配和人机交互等。对一个界面的设计把控要趋向于产品本身和产品针对的用户。在了解产品的同时要对产品自身的各类因素进行设计,来达到人机交互自然流畅。让用户感觉得心应手,也是设计好一款游戏的初衷,如图1-15~图1-18所示。
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0016.jpg?sign=1739529618-w28ngkUwTxeJrGv7zO3JSFMbkJqU6nQg-0-5fb2cf98ecafc5b7baed5252e5ca401f)
图1-15
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0017.jpg?sign=1739529618-JT8WoJwy7DjWBMydMQMPXfsR2N1u3GsM-0-d1f77448217a428ea0d137544e4bce25)
图1-16
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0018.jpg?sign=1739529618-SiHNh7X5ufiSNES8Nmvzs3irQbqyDmP9-0-f72f116f0e52cd051d24165fa6d59aac)
图1-17
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0019.jpg?sign=1739529618-Ozw1bWonfCGA1yvjK3kAVNEwtK0ZAvut-0-84b29df752509cfb4d37d48244e927fd)
图1-18