3.6 游戏界面中的按钮设计
按钮是游戏界面中使用最多的交互设计元素，不仅仅在游戏登录界面，在游戏的操作界面中也会使用到。
3.6.1 按钮元素
在游戏界面中按钮一般分为选择按钮和事件激发按钮。不同形式的按钮适用于传递不同的信息。
◎ 单选按钮
单选按钮通常只提供一个唯一的选项，如“开”和“关”，“是”与“否”等选项，单选按钮应该在动态效果上给予玩家相应的提示，例如，在未单击之前显示为空心圆，而单击之后则变为实心圆，并伴随适当的音效，让玩家清楚地知道他的操作已得到响应。如图3-107所示为游戏界面中的单选按钮设计效果。
图3-107
◎ 滑块按钮
滑块按钮一般出现在有范围的选项中，例如，1～100的数值范围或是由低到高的抽象范围，因为不可能为玩家提供每一个数值的选项，因此滑块是最合适的按钮方式。通常在游戏界面中设置声音大小、设置画质高低时会使用滑块按钮，并在按钮上方显示目前所选数值的悬停界面。如图3-108所示为游戏界面中的滑块按钮设计效果。
图3-108
在有关卡设置的游戏中，按钮也作为一种对玩家的动态提示，对于玩家尚未激活的关卡，其关卡按钮一般显示为灰色或在按钮上用锁形图案表示有待解锁；对于尚未通关的关卡按钮将呈现出与完全通关关卡不同的色彩或图形。这一动态效果也适用于游戏道具的激活状态。如图3-109所示为游戏界面中的关卡按钮设计效果。
图3-109
3.6.2 游戏按钮的视觉表现
在游戏官网上，可以看到各式各样的按钮，相对于一般商务型按钮来讲，游戏按钮更加在意其质感上的表现，如金属、石头、玻璃、木头、塑胶等，通过质感的表现来表达游戏本身的特质，如图3-110所示。
图3-110
如图3-111所示，其中按钮使用的是金属质感进行表现的，浏览完整个网页，这些按钮给用户留下非常深刻的印象。
图3-111
究其原因，可以发现同样是金属质感，该款游戏的设计师从游戏本身出发，努力找到一些不同于常规金属按钮的特点，如圆角处的凸起、下面中间部分的延展图纹，然后进行细腻刻画，最后在整个网站里进行统一应用，让人印象深刻。
虽然只是页面里的一些功能按钮，却让用户记住了这个网站，记住了这款游戏。所以在对游戏按钮进行设计时，要尽可能结合游戏的特质，究其独特性，细腻地刻画，然后做到系统性应用，达到视觉的统一。
? 难点详解
韩版CF、AVA、特种部队同样是FPS游戏，在按钮的刻画上却相差甚远。仔细浏览更多的页面，大家会发现，就算是都属于CF的页面，不同页面的按钮表现也各有不同。但我们可以找到它们的共性，这些别样的按钮基本都是整个画面的重点视觉诉求，也是功能的重要点，设计师根据游戏的定位，然后再根据每次要表达的主题，变化性地设计按钮，也许有游戏特点，也许比较中性，但最终的效果是达到画面的整体协调与重点突出。
◎ 【自我测评】绘制手游开始按钮
本案例是设计一款游戏按钮，通过添加高光和阴影突出按钮的视觉效果，这也是按钮常用的表现方式，如图3-112所示。
图3-112
? 制作思路与要点
该游戏按钮以圆角矩形构成其基本轮廓形状，添加相应的图层样式，表现出高光和阴影效果，在设计制作过程中注意学习层次感和高光质感的表现方式。
? 色彩分析
该游戏按钮使用红色作为主色，与游戏背景形成对比，在该游戏按钮上使用白色的文字并绘制半透明白色高光图形，使得该游戏按钮的层次突出、质感鲜明。
? 操作步骤
步骤 01 打开素材图像“资源包\源文件\第2章\素材\401.jpg”，如图3-113所示。新建名称为“按钮”的图层组，使用“圆角矩形工具”，在选项栏中设置“填充”颜色为RGB（152、26、11），“半径”为30像素，在画布中绘制圆角矩形，如图3-114所示。
图3-113
图3-114
步骤 02 复制该图层，将复制得到的图形向上移动4个像素，为该图层添加“内发光”图层样式，对相关选项进行设置，如图3-115所示。继续添加“渐变叠加”图层样式，对相关选项进行设置，如图3-116所示。
图3-115
图3-116
步骤 03 单击“确定”按钮，完成“图层样式”对话框的设置，效果如图3-117所示。使用相同的制作方法，完成相似图形效果的绘制，效果如图3-118所示。
图3-117
图3-118
提示
使用“圆角矩形工具”在画布中绘制圆角矩形时，需要在选项栏中设置“半径”选项，该选项用于控制所绘制的圆角矩形的圆角半径大小，该值越大，圆角越大。
步骤 04 为该图层添加图层蒙版，使用“渐变工具”，在蒙版中填充黑白线性渐变，效果如图3-119所示。使用“圆角矩形工具”，“半径”为30像素，在画布中绘制一个白色圆角矩形，并设置该图层的“不透明度”为10%，效果如图3-120所示。
图3-119
图3-120
步骤 05 为“按钮”图层组添加“投影”图层样式，对相关选项进行设置，如图3-121所示。单击“确定”按钮，完成“图层样式”对话框的设置，效果如图3-122所示。
图3-121
图3-122
步骤 06 新建名称为“水珠”图层组，使用“自定形状工具”，在选项栏中的“形状”下拉面板中选择相应形状图形，在画布中绘制形状图形，如图3-123所示。执行“编辑>变换>旋转”命令，对该图形进行旋转操作，效果如图3-124所示。
图3-123
图3-124
步骤 07 为该图层添加“投影”图层样式，对相关选项进行设置，如图3-125所示。单击“确定”按钮，完成“图层样式”对话框的设置，效果如图3-126所示。
图3-125
图3-126
步骤 08 为该图层添加图层蒙版，使用“渐变工具”，在蒙版中填充黑白线性渐变，效果如图3-127所示。使用相同的制作方法，完成相似图形效果的绘制，效果如图3-128所示。
图3-127
图3-128
步骤 09 复制“圆角矩形1”图层得到“圆角矩形1拷贝2”图层，将该图层调整至所有图层上方，为该图层添加“渐变叠加”图层样式，对相关选项进行设置，如图3-129所示。单击“确定”按钮，设置该图层的“填充”为0%，效果如图3-130所示。
图3-129
图3-130
提示
设置图层的“不透明度”选项，可以调整图层、图层像素与形状的不透明度，包括该图层的图层样式。设置图层的“填充”选项，则只会影响图层中绘制的像素和形状的不透明度，而不会对图层样式产生影响。
步骤 10 使用相同的制作方法，完成相似图形效果的绘制，效果如图3-131所示。使用“横排文字工具”，在“字符”面板中设置相关选项，在画布中输入文字，如图3-132所示。
图3-131
图3-132
步骤 11 为该文字图层添加“内阴影”图层样式，对相关选项进行设置，如图3-133所示。继续添加“投影”图层样式，对相关选项进行设置，如图3-134所示。
图3-133
图3-134
步骤 12 单击“确定”按钮，完成“图层样式”对话框的设置，效果如图3-135所示。完成该游戏按钮的设计制作，最终效果如图3-136所示。
图3-135
图3-136