《游戏界面设计》03 多平台游戏UI设计

YOUXIJIEMIANSHEJI68%[F:]25.1GB17.0GBFreeYOUXIJIEMIANSHEJIYOUXIJIEMIANSHEJI一、网络游戏概述 网络游戏（onlinegame）也称在线游戏，简称“网游”，是指以互联网为传输媒介，以游戏运营商服务器和用户计算机为处理终端，以游戏客户端软件为信息交换窗口，旨在实现娱乐、休闲、交流目的的具有可持续性的个体性多人在线游戏。YOUXIJIEMIANSHEJI网络游戏与独立游戏的区别在于，网络游戏玩家必须通过网络连接，从而在线玩多人游戏。一般来说，它是指在虚拟环境中由多个玩家按照一定的规则进行操作，通过计算机网络达到娱乐和交互目的的游戏产品的集合，如图所示。经典网络游戏《英雄联盟》截图YOUXIJIEMIANSHEJI同一主题的反复开发我国网络游戏产业呈现多元化发展趋势我国网络游戏市场不断扩大我国网络游戏自主研发向海外出口▼我国游戏市场分析YOUXIJIEMIANSHEJI二、网络游戏产品分类及UI设计（一）在线游戏在线游戏主要是玩家与玩家的互动。大多数在线游戏需要让玩家明白3件事：我是谁、我要消灭谁、谁要消灭我。本文主要把在线游戏分为网络客户端游戏和网页游戏。YOUXIJIEMIANSHEJI1.网络客户端游戏网络客户端游戏是网络游戏和客户端游戏两个概念的合体。客户端游戏简称“端游”。网络游戏和客户端游戏两个名词的合体不是随意组合而成的。随着网络的飞速发展与普及，客户端游戏发展迅速。《使命召唤Online》画面截图YOUXIJIEMIANSHEJI网络客户端游戏针对的平台主要是PC端，因此在游戏UI设计中要注意以下原则：简易性用户语言尽量减少记忆负担一致性人性化安全性和灵活性排列从用户的角度考虑YOUXIJIEMIANSHEJI例如，第三人称射击类游戏《汤姆克兰西：全境封锁》的整体UI较扁平化，更简洁、大方，可谓简约而不简单。经典第三人称射击类游戏《汤姆克兰西：全境封锁》截图①经典第三人称射击类游戏《汤姆克兰西：全境封锁》截图②YOUXIJIEMIANSHEJI2.网页游戏网页游戏简称“页游”，是指无须下载和安装客户端程序，基于Web浏览器，使用PHP/ASP/Perl等解释语言建设的虚拟社区或者使用Flash/JAVA技术制作的游戏。经典网页游戏《九州志》截图YOUXIJIEMIANSHEJI网页游戏的平台固定为PC端，但是近年来随着技术发展，也出现了一些手机上的网页游戏。根据不同平台的需求，网页游戏的UI尺寸和分辨率也要适当调整。不同分辨率的游戏页面尺寸如表所示。屏幕分辨率和显示尺寸的对应关系表YOUXIJIEMIANSHEJI网页游戏UI设计中应注意以下内容：01由于其烦琐的界面，许多玩家在游戏过程中会碰到图标不好找、操作不能快速进行等问题。因此，不同类型的UI需要有较为明显的区别，并且在图标和操作等方面要有较强的指引性，能够让玩家得到更好的操作体验。由于其本身的特性，游戏类型相对于其他平台来说较少且较为固定。一般网页游戏的图标较多且密集，因为它需要的功能较为烦琐。因此在设计网页游戏UI时，除了要实现其基本需求外，还要尽可能地简化。02YOUXIJIEMIANSHEJI单机游戏一般是指仅使用一台计算机即可运作的电子游戏。随着网络的普及，许多单机游戏已经支持互联网功能。（二）单机游戏单机游戏YOUXIJIEMIANSHEJI单机游戏的传输媒介主要包括局域网、IP网络、本地服务器、游戏平台，因此也就有了一种新的说法——平台联机游戏。《饥荒》游戏截图YOUXIJIEMIANSHEJI

《侠盗猎车手》游戏截图《怪物猎人》游戏截图YOUXIJIEMIANSHEJI三、原创PC端角色扮演游戏UI设计案例（一）案例简介此案例主要为大家讲解设计思路与该角色展示界面的所有元素，具体绘制过程可参考微课视频。该游戏UI设计的最终效果如图所示。【微课视频】原创PC端角色扮演游戏UI设计案例原创PC端角色扮演游戏UI设计的最终效果YOUXIJIEMIANSHEJI（二）案例制作过程在开始进行游戏UI设计之前，应该先弄清楚一个最基本的概念：游戏UI设计不是把自己关在一个小黑屋里，拍一下脑袋，想怎么画就怎么画，必须先看游戏计划，了解要设计的是什么游戏、玩什么、给谁玩、怎么玩。这几点确定后才能确定游戏的艺术风格。1.项目需求分析YOUXIJIEMIANSHEJI2.设计定位分析在构建框架这部分，需要特别注意4个方面：根据要求进行风格设定，根据游戏类型进行框架构建；01先将界面模块的设计开发进行优先分级，让设计团队成员可以根据工作量和时间差安排好设计工作；02优先确定设计规范，否则等开工了再进行修改会导致工作进度缓慢；03菜单层控制在3级，不要超过4级。04YOUXIJIEMIANSHEJI3.草图设计与制作根据游戏风格制作界面草图，如图所示。要根据市场确认用户操作习惯，规划好显示区域、操作区域、执行按钮区域等。从主界面开始逐层深入设计，如一些常用的界面、弹出框、功能按钮、道具图标、技能图标等。对每个元素进行布局和草图设计YOUXIJIEMIANSHEJI（1）对设置按钮进行草图绘制，绘制时一定要注意造型、风格的统一，如图所示。4.局部细节的处理与展示设置按钮草图制作YOUXIJIEMIANSHEJI（2）选中设置按钮图层，对设置按钮草图进行线稿细化，然后用选框工具勾选出设置按钮最上面的造型部分，如图所示。用选框工具勾选出来YOUXIJIEMIANSHEJI（3）对选框工具勾选出来的造型部分进行固有色填充，如图所示。填色YOUXIJIEMIANSHEJI（4）对设置按钮进行全部固有色填充以及细节的绘制，注意要把设置按钮中的金属材质表现出来，如图所示。用选框工具勾选出来YOUXIJIEMIANSHEJI（5）对绘制好的设置按钮进行文字添加。为了与整体界面风格保持一致，这里的文字采用了手写，如图所示。配上文字YOUXIJIEMIANSHEJI（6）在界面中摆放好底座。这里的界面主要是选人界面，有一个角色的展示T台。因此，界面中的底座采用了T台展示的效果设计，并摆放在界面的最中心位置，如图所示。底座摆放YOUXIJIEMIANSHEJI（7）摆放好底座之后，对底座的整体进行完整的草图设计，如图所示。底座草图设计YOUXIJIEMIANSHEJI（8）基于整体界面的风格，给底座也填充一个深灰色的固有色，如图所示。底座填色YOUXIJIEMIANSHEJI（9）填充好固有色之后，对底座的细节进行草图绘制，如图所示。底座细节草图绘制YOUXIJIEMIANSHEJI（10）对绘制好的底座细节部分进行线稿优化与色彩填充。这里对底座细节部分的材质质感的表现与设置按钮保持一致，如图所示。底座细节的材质质感表现YOUXIJIEMIANSHEJI（11）在绘制好的底座箭头上面绘制锚点，处理好细节之后进行复制并水平翻转，如图所示。使用工具翻转、复制YOUXIJIEMIANSHEJI（12）用绿色对底座箭头的中间部分进行固有色填充，再对底座进行描边，如图所示。描边YOUXIJIEMIANSHEJI（13）对底座箭头中间部分填充的绿色进行色彩饱和度的调整，让整体看上去更加有光泽，如图所示。调整色彩饱和度YOUXIJIEMIANSHEJI（14）对所有的元素进行细节的调整并优化，最终效果如图所示。最终效果YOUXIJIEMIANSHEJI一、移动端游戏概述移动是一切事物的未来趋势。移动端游戏主要是指针对移动端平台的游戏产品。这里所说的移动端平台主要是能随身移动、体量小、轻便的设备，如手机、平板电脑、掌机（掌上游戏机）等。典型的移动端游戏有《阴阳师》《开心消消乐》，如图所示。《阴阳师》游戏截图YOUXIJIEMIANSHEJI（一）手机游戏和平板电脑游戏二、移动端游戏产品分类及UI设计手机是集通信、办公、娱乐等多样功能于一体的移动设备，全球的手机用户已超过10亿，并逐年增长。在生活节奏越来越快的当下，许多人其实并没有太多的空余时间和稳定的游戏场所去玩游戏。PixelHeroGames旗下作品《艾森霍恩：异形审判官》截图YOUXIJIEMIANSHEJI作为移动设备，手机的容量比计算机要小，因此游戏画面质量肯定不如一些主机游戏和单机游戏。而且手机的屏幕大小对游戏体验也有较大影响。韩国蓝洞工作室开发的手机游戏《绝地求生》截图YOUXIJIEMIANSHEJI移动游戏中始终有着较高用户人数和游戏时长的休闲益智类游戏，具有随开随玩、毫无心理负担的特点，正好满足了用户对移动游戏的要求。但随着一些重度游戏的发展，近几年也出现从端游转到手游的情况。网易游戏研发的手机游戏《荒野行动》截图YOUXIJIEMIANSHEJI基于以上需求，在手机游戏UI设计中需要掌握以下原则：01

在引导性这方面多花费功夫，因为移动手机屏幕较小，引导性按钮和文字应该更具有辨识度。在保证整体布局的基础上，尽量以图标代替文字，而且图标的引导性要强。02

移动端设备的屏幕尺寸非常多，考虑到用户的操作体验等，针对不同尺寸的移动设备设计的游戏UI的尺寸也应有所区别，如表所示。YOUXIJIEMIANSHEJI表3-2Android系统UI大小YOUXIJIEMIANSHEJI与其他设备相比，手机会有很大的操作局限，如怎么在一小块区域内实现移动以及转换视角。由于操作和屏幕大小的局限，某些手机游戏的操控类UI就需要更加精简、实用。腾讯开发并运营的多人在线战术竞技类手机游戏《王者荣耀》截图YOUXIJIEMIANSHEJI平板电脑作为大屏移动设备，其尺寸、分辨率与手机有较为明显的区别。为平板电脑开发游戏（非完全移植）时，用户操作体验是重要的考虑因素。在UI交互上，平板电脑其实与手机有共通之处（点击、滑动、拖拽等）。日本KLab公司开发的音乐节奏类与卡牌养成类游戏《LoveLive！学园偶像祭》YOUXIJIEMIANSHEJI表3-3所示为移动端游戏和网页游戏的区别。在了解移动端游戏和网页游戏的区别之后，还需要了解移动端游戏的系统，目前主要是Android和iOS。表3-3移动端游戏与网页游戏的区别YOUXIJIEMIANSHEJI仅以物理硬键控制操作的机型（以下简称按键机）；主要以触摸方式操作的机型（通常包括主页、挂机等物理键）；物理硬键齐全，但是支持触摸操作的机型（外形与按键机相同）。根据硬件来区分，移动电话的类型有：YOUXIJIEMIANSHEJI主流的可安装第三方应用的软件平台有：WindowsPhone、Android、iOS及其他。现如今，智能手机的主要交互方式为触控，手机游戏的UI设计需要在这一基础上向前延展，并且要充分考虑用户的实际操作体验，以及怎样的布局才能让用户使用起来更加顺手、便捷，如图所示。iPhone不同尺寸的界面展示YOUXIJIEMIANSHEJI

iPhone不同显示环境下的适应性布局YOUXIJIEMIANSHEJI从设计第三方应用程序的角度来看，大致可以归纳出以下设计规范：iOS的出现打破了以往平台固有的设计模式，大大简化了硬键和操作模式。然而，它缺乏一个固定的菜单模型，这对于第三方软件的设计是一个巨大的挑战，要么需要很大程度上脱离iPhone本身的设计规范系统，要么需要极其精简的功能。Android遵循iPhone中的一些经典手势，操作风格和页面布局相对保守，保留了菜单和返回两个硬键，虽然不够独特，但是功能和设计之间有很好的平衡，如下图所示。YOUXIJIEMIANSHEJI

Android系统的传统菜单YOUXIJIEMIANSHEJIiPhone打破了传统的触摸屏手机的交互模式，充分模拟了普通人操作物体的固有习惯和思维方式。如图所示，它运用了推、拉、按压和拨动等日常生活中操作物体的基本动作，使人们享受到愉悦的交互体验。游戏UI设计师必须掌握这些设备的基本交互方式，这样有助于游戏和玩家的互动，从而提升用户体验。界面布局的手势展示01YOUXIJIEMIANSHEJI界面布局的手势展示02YOUXIJIEMIANSHEJI（二）掌机游戏与手机、平板电脑相比，掌机的游戏机能（图形处理器、内存、按键等）是专业针对游戏性能而研发的。因此，玩家在使用掌机玩游戏时的体验会更好。任天堂公司推出的游戏《塞尔达传说：旷野之息》操作说明界面YOUXIJIEMIANSHEJI在掌机发展的几十年中，其根本交互方式是不变的，即都是以按键为基础，即便是摇杆，也可以说是按键的一种进化。当然，在近年触屏技术的冲击下，掌机也增加了触屏的操控方式，如索尼公司的PSV、任天堂公司的Switch。YOUXIJIEMIANSHEJI绝大多数掌机游戏的基本操作仍然依靠按键实现，既可以是单击按键，也可以是长按按键。在有些游戏中，摇杆也能有与鼠标类似的作用。在掌机中，不同的按键对应不同的功能或操作方式。随着掌机按键的增多，游戏内的部分界面甚至可以不用做出对应的UI图标，只需对应一个特殊的按键即可，具体引导也可以在游戏中实现。