UI视觉设计(适用培训、教学)-第6章-游戏界面设计

第6章

游戏界面设计SummaryOfMacaronsColorMatchingWork章前导读02

随着科学技术的发展和人们对精神生活的追求不断提高，我国已进入了游戏产业的蓬勃发展时期，各种界面美观、功能清晰的端游、页游和手游都如雨后春笋般涌现出来。那么如何设计出优秀的游戏界面呢？本章首先介绍游戏界面设计的基础知识和规范，通过实战案例讲解游戏界面的一般设计方法和技巧。学习目标ReviewOfWorkContent·了解游戏的基本界面·了解游戏界面的布局·了解游戏界面的风格·掌握游戏界面设计的要点·了解游戏界面设计的规范·掌握游戏界面的一般制作方法6.2界面设计规范6.3

案例实战6.1基础知识第6章游戏界面设计6.1游戏界面设计的基础知识6.1.1游戏的基本界面

常见游戏的基本界面有启动界面、主菜单界面、关卡界面、操作界面、胜利/失败界面、商店界面和背包界面等。启动界面：玩家启动游戏时第一眼看到的画面，常用于展示游戏人物或游戏场景等。主菜单界面：玩家进入游戏后看到的第一个画面，游戏的活动、玩法、设置、公告、资源等内容集中展示于此。设计时要分清主次。关卡界面：是玩家开始游戏前展示游戏进度的界面，可以让玩家清楚地了解当前的游戏进度。操作界面：是游戏的核心界面，玩家可以在该界面体验游戏的乐趣。设计时应尽可能地满足玩家的心理预期。胜利/失败界面：胜利页面应该能让玩家产生愉悦感；失败界面最好能提供几种提升思路，帮助玩家快速成长。商店界面：主要作用是罗列商品，方便玩家挑选和购买。设计时，可根据商品特点分类展示，不同类别的商品界面，布局应当一致。背包界面：用来整合玩家道具的界面。设计时，除了要安排物品展示区域和物品介绍区域外，还应根据物品的类别在合适位置添加纵向或横向导航栏，将物品分门别类整理清楚，以便玩家快速查看6.1.2游戏界面的布局

可将游戏界面划分为主要视觉区域、次要视觉区域和弱视区域。主要视觉区域集中在界面中心，次要视觉区域集中在界面的左侧和右侧，弱视区域集中在界面的顶部和底部，如图6-8所示。图6-8《崩坏3》主菜单界面6.1.3游戏界面的风格写实风格：游戏画质细腻、精美，从人物到场景都贴近现实，能给予玩家极强的代入感，更容易让玩家沉浸其中。卡通风格：将游戏人物和场景等内容卡通化处理，游戏中的人物多为Q版，游戏场景则可能是一幅插画或均匀排列的几何图形。日韩风格：UI设计师在设计这类风格的游戏界面时，交互按钮的配色可首选浅色，外形要尽量避免带有尖角。欧美风格：该风格的游戏角色表情丰富，体型一般非常夸张，拥有强健的肌肉或健美的身材，游戏场景偏写实，标题字体一般用粗体。像素风格：设计这类风格的游戏界面时，需要将图标、血条等一并设计为像素风格，以呼应主题，但用于解释说明的文案不可像素化。6.1.4游戏界面的设计要点1．界面风格契合游戏主题。

游戏界面的整体风格应该与游戏主题相契合。《风暴英雄》游戏界面2．突出界面主体内容。

UI设计师应明确界面内容的主次，并站在玩家的角度考虑界面内容的实用性和可操作性。《王者荣耀》结算界面3．界面效果简洁易操作

UI设计师可通过轮廓对比、色相对比、明度对比、虚实对比、主次对比、疏密对比等手法提高界面的视觉清晰度，通过隐藏或删除可有可无的功能，让界面更加清爽、整洁、便于操作。《荒野乱斗》主界面

优秀的游戏界面设计会通过易理解、表意准确的按钮将功能清晰地表达出来。4．按钮表意明确《战双帕弥什》战斗界面5．转化需求，为界面效果加分

一般由游戏策划统筹并给UI设计师分配任务，由于他们不参与界面的制作，其给出的需求有时会不符合界面的视觉美感。《守望先锋》结算界面6．增强同类物品的连续性

设计一组有关联的物品时，可在原有物品的基础上加强质感、完善造型和丰富色彩。6.2游戏界面的设计规范游戏主要可分为手机游戏、平板游戏、网页游戏和电脑游戏等。不同种类的游戏，其界面尺寸及单位与其对应的载体相同，而App、网页和软件等尺寸前面均已介绍，读者可参考前面的内容决定游戏界面的尺寸。6.2.1尺寸规范

游戏界面中，正文可根据应用平台（如iOS、Android、PC端等）的规定选择对应的字体和字号，而标题可根据需要选择特殊字体或单独设计字体，字号可适当夸张放大。6.2.2字体运用本案例通过制作主菜单界面和关卡详情界面，介绍PC端游戏界面的一般制作方法。作品展示6.3案例实战—设计《吃鸡小分队》游戏界面设计思路1.分析基本结构图。以主菜单界面为起点。2.确定风格。游戏采用卡通风格。3.确定配色。界面的主色以蓝色和绿色（冷色）为主，提示功能以黄色和红色（暖色）为主。4.确定布局。据玩家对界面中不同区域注意力的不同，可将界面划分为主要视觉区域和次要视觉区域。设计页首区设计内容区设计页尾区设计关卡详情界面本章总结1.常见游戏的基本界面有启动界面、主菜单界面、关卡界面、操作界面、胜利/失败界面、商店界面和背包界面等。2.游戏界面划分为主要视觉区域、次要视觉区域和弱视区域。3.常见的游戏界面风格有写实风格、卡通风格、日韩风格、欧美风格和像素风格等。4.界面风格契合游戏主题、突出界面主体内容、界面效果简洁易操作、按钮表意明确、转化需求，为界面效果加分和增强同类物品的连续性。5.游戏界面中，正文可根据应用平台（如iOS、Android、PC端等）的规定选择对应的字体和字号，而标题可根据需要选择特殊字体或单独设计字体，字号可适当夸张放大。设计思路2.确定配色。采用比较鲜艳、具有活力的颜色，如将主色设为蓝色，按钮和图标颜色设为黄色。3.页面布局。主要功能按钮都安排在页面底部，用户在双手持机时可以便捷地操作；页面顶部不易触碰的区域安排金币和钻石版块，既可以时刻提醒用户代币数量，又不影响操作。2131.分析基本结构图本章实训——设计《酷玩小萌兽》游戏页面