- 移动游戏UI设计专业教程
- 葛林(大饼卷大葱)
- 831字
- 2020-11-21 11:28:21
1.1 游戏界面设计的基础知识
1.1.1 什么是游戏界面设计
游戏界面设计是根据游戏特性,把必要的信息展现在游戏主界面、操控界面和弹出界面上,通过合理的设计,引导用户进行简单的人机交互操作,如图1-1~图1-3所示。
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0009_0002.jpg?sign=1739358372-EoOfBNpAVUJqkZkFc1r1xPkMv7zvVcS2-0-aa745ddfc012c2cf4c0d0438f7a59121)
图1-1
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0009_0003.jpg?sign=1739358372-7RpV16sNKaVCnxsv80JwaU0ce6ZT2Ydp-0-2b7c94a3188ae9809c5e32bb0fac8af8)
图1-2
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0009_0004.jpg?sign=1739358372-D9Qhe1VO7njjoupnIljpqEj98TKFz5Rk-0-22210027b779f3d1873b21bc7aa5db7f)
图1-3
想要设计好游戏界面,不仅要有良好的审美观,更要有对人机交互的认知度。
一个好的游戏界面不仅在视觉上要有独特的美感,更要把游戏的层次感设计出来。交互的合理性、用户的体验感、元素的合理应用等都要把握得恰如其分,让游戏给用户足够的代入感。图1-4~图1-6所示分别是页游界面、网游界面和手游界面。
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0009_0005.jpg?sign=1739358372-VOszEnrHgSWKCyXl2CwnrlVlXNOjtOdU-0-49a94e6b6c37ebde21b949736d03761f)
图1-4
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0010_0006.jpg?sign=1739358372-KP1jNGCCW9sj4X5lKydIUPltVoDT8zP8-0-7e00af046be02c847211302f644b2211)
图1-5
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0010_0007.jpg?sign=1739358372-pw1cbDvogbOGBuPxasSJSv3IU6KSZqtF-0-24d522bd71907f282cb7577d3aa913c0)
图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=1739358372-oHFxOfxFnYDSqTnv3eDLpuGPZLvadoJS-0-abb0fb725917a9de2e3dab4d9872b84a)
图1-7
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0010_0009.jpg?sign=1739358372-gaeKDR8EmPySBCpf4GlYSIECzPiHkxzr-0-6d7f2de118efd94b8a99cfe7daa6d4ee)
图1-8
原则2:把控好游戏的界面风格,注意色彩对界面的影响。如果界面的颜色反差太大,会让用户有脱离游戏的感觉。当然有的游戏也会根据自己的特殊设定,大胆运用一些反差较大的色彩来增加游戏的视觉冲击力。色彩只是游戏设计中的一小部分,运用得好可以锦上添花,运用得不好会给用户带来不良的视觉体验,如图1-9~图1-12所示。
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0010_0010.jpg?sign=1739358372-z53sBvlIx9WGmIyRe6fKO60kq5EhJndH-0-953d8ad71f07882b30be3010ab82ceb8)
图1-9
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0010_0011.jpg?sign=1739358372-PNQCC1YE1BZ1q3ukFYt0pcUXXKb6d0Fm-0-5fdbab4dc78780f6a14fe02b01befcca)
图1-10
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0012.jpg?sign=1739358372-yvMWgfUZuZ61VjQf7WSv0R1NQb3L38DL-0-2edb318151a80651c7f7ac5ca181406a)
图1-11
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0013.jpg?sign=1739358372-Rw4iiBSJHLPHqHeokDIIGKKxEcxcJ5i5-0-b024cf833d9d3697ad7ea7d08e101935)
图1-12
原则3:引导界面的设计应言简意赅。每款游戏都有自己独特的操作特性,想让用户在最短的时间内了解游戏的操作,需要设计一些引导界面来帮助用户。引导界面的表现很直观,只需要用简单的指示图片和说明文字,言简意赅地说明游戏的独特性和操作习惯就好,不需要太多花哨的元素去修饰。让用户轻松理解到游戏的特性,引导界面的作用就已经达到了,如图1-13和图1-14所示。
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0014.jpg?sign=1739358372-ziZwPkJ1elw2D7NNYQE8n4RWPktVfsyy-0-4e37488b7aafd92b457bd97221468f56)
图1-13
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0015.jpg?sign=1739358372-rLxr8yWD25sRJ9pR8Q2waI4yDbX4BTUC-0-457ac0859de6b3d0391774c4aea70f5d)
图1-14
原则4:游戏设计师要懂得很多客观知识,如排版布局、色彩搭配和人机交互等。对一个界面的设计把控要趋向于产品本身和产品针对的用户。在了解产品的同时要对产品自身的各类因素进行设计,来达到人机交互自然流畅。让用户感觉得心应手,也是设计好一款游戏的初衷,如图1-15~图1-18所示。
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0016.jpg?sign=1739358372-gbvA1EKgXtrk3ca8cqCQvGBYWj7p9t0q-0-faa016d3d7d6893f6d28625b291b1833)
图1-15
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0017.jpg?sign=1739358372-fXpo2HX8T6Xb04SjvtXHbOctq8LsRQXa-0-1784d29f665b9536af65d18ce82ff6e2)
图1-16
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0018.jpg?sign=1739358372-ARfgqRq4PEczZng3p2GIJHUo778hYOhW-0-0ba7775a965e4b1039b26bc3a2ce97db)
图1-17
![](https://epubservercos.yuewen.com/691FF4/18553921908619606/epubprivate/OEBPS/Images/figure_0011_0019.jpg?sign=1739358372-1PInYU1sIEUBUBo1Q7oK7nVx78s5eEaF-0-21e85481dac54c0941ad3fdccc6e727c)
图1-18