一款手机APP能否吸引住用户，关键在于其APP界面制作，因为手机APP界面对用户的第一印象非常重要。专业APP界面制作，需要从细节开始设计。手机屏幕大小有限，但如果应用产品的功能太强大，十多个页面都装不下，于是人们总会面对一级又一级的次级界面，并迷失在其中。在手机APP制作之前，图标非常重要，图标的功能是进行图标造型设计的标准和依托。设计图标的目的是实用和美观，同时要考虑图标的隐喻性，它代表的意思必须是用户可知的、熟知的。图标一般先用Photoshop进行绘制，然后进行图标设计的后期效果处理。所有界面上同级、同类的图标要保证表现形式的统一，避免用户视觉上的紊乱。
开关图标如图3.80所示。
下拉选框图标如图3.81所示。
图3.80
图3.81
滑动条图标如图3.82所示。
对话框图标如图3.83所示。
图3.82
图3.83
3.2.1 开 关
在Photoshop中绘制开关主要采用圆角矩形工具和图层样式相结合的方式，在制作时注意细节的设置、开关按钮的结构和质感效果，最后叠加杂点素材，使整个开关图标绘制得更加真实。
利用Photoshop绘制开关的流程如下。
①执行“文件”→“新建”命令，在弹出的“新建”对话框中设置各项参数及选项，设置完成后单击“确定”按钮，新建空白图像文件（图3.84）。
图3.84
②双击“背景”图层，在弹出的对话框中单击“确定”按钮。再次双击“图层0”，分别勾选“颜色叠加”“图案叠加”选项并设置各项参数，完成后单击“确定”按钮（图3.85）。
图3.85
③单击圆角矩形工具，在其属性栏上选择“形状”选项，在属性栏上设置“填充”为黑色，按住Shift键在画面上绘制圆角矩形形状。双击“圆角矩形1”，分别勾选“投影”“内阴影”选项并设置各项参数，完成后单击“确定”按钮（图3.86）。
图3.86
④复制“圆角矩形1”，生成“圆角矩形1副本”，图像阴影加深，效果发生细微改变（图3.87）。
图3.87
⑤单击画笔工具，在属性栏上选择“柔边圆角”，设置前景色为白色，绘制白色色块。设置其“填充”为40%（图3.88）。
图3.88
⑥单击圆角矩形工具，在其属性栏上选择“形状”选项，在属性栏上设置“填充”为黑色，绘制圆角矩形形状（图3.89）。
图3.89
⑦双击“圆角矩形1”，分别勾选“斜面和浮雕”“阴影”选项并设置各项参数，完成后单击“确定”按钮（图3.90）。
图3.90
⑧单击圆角矩形工具，在其属性栏上选择“形状”选项， 在属性栏上设置“填充”为白色，绘制圆角矩形形状（图3.91）。
图3.91
⑨双击“圆角矩形1”，分别勾选“内阴影”“渐变叠加”选项并设置各项参数，完成后单击“确定”按钮（图3.92）。
图3.92
⑩单击钢笔工具，在属性栏中选择“形状”选项，并设置“填充”为白色，在画面上勾勒出梯形图案（图3.93）。
图3.93
k双击“形状1”，勾选“渐变叠加”选项并设置各项参数，完成后单击“确定”按钮（图3.94）。
图3.94
l复制“圆角矩形2”，生成“圆角矩形2副本”，右键单击该图层，在弹出的对话框中选择“清除图层样式”。复制“圆角矩形3”，生成“圆角矩形3副本”，右键单击该图层，在弹出的对话框中选择“清除图层样式”（图3.95）。
图3.95
m双击“圆角矩形3副本”，分别勾选“渐变叠加”“内阴影”选项并设置各项参数，完成后单击“确定”按钮（图3.96）。
图3.96
n单击横排文字工具，在打开的字符面设置各项参数，完成后在画面适当位置输入文字（图3.97）。
图3.97
o双击文字图层，分别勾选“投影”“颜色叠加”选项并设置各项参数，完成后单击“确定”按钮（图3.98）。
图3.98
p复制文字图层，生成文字图层副本。双击该图层，分别勾选“内阴影”“外发光”“颜色叠加”选项并设置各项参数（图3.99）。
图3.99
q继续勾选“投影”选项并设置各项参数，完成后单击“确定”按钮。使用以上相同方法，添加下排文字效果（图3.100）。
图3.100
r执行“文件”→“打开”命令，打开“杂点.jpg”文件。将其拖至当前画面中，生成“图层2”。设置其“填充”为“5%”，图像效果发生改变。至此，本实例制作完成（图3.101）。
图3.101
[技巧点拨]
图层样式的设置为本案例的写实效果制作提供了快速实现的可能。在对文字进行设置时，颜色叠加及外发光图层样式的制作突出地显示了按钮所处的状态，展现了灯光的效果。
3.2.2 下拉选框
下拉选框由圆角矩形按钮、分隔线、下拉三角和选项文字组成。下拉选框的长度比一般按钮要长，在绘制圆角矩形按钮时注意拉长按钮，留出摆放选项文字的空间。
下拉选框制作流程如下。
①执行“文件”→“新建”命令，在弹出的“新建”对话框中设置各项参数及选项，设置完成后单击“确定”按钮，新建空白图像文件（图3.102）。
图3.102
②双击背景图层，在弹出的对话框中单击“确定”按钮。再次双击“图层0”，勾选“渐变叠加”选项并设置各项参数，完成后单击“确定”按钮（图3.103）。
图3.103
③单击圆角矩形工具，在其属性栏上选择“形状”选项，在属性栏上设置“填充”为白色，绘制圆角矩形形状。双击“圆角矩形1”，勾选“渐变叠加”选项并设置各项参数，完成后单击“确定”按钮（图3.104）。
图3.104
④单击圆角矩形工具，在其属性栏上选择“形状”选项，在属性栏上设置“填充”为灰色，在画面上绘制圆角矩形形状。按住Alt键在绘制的形状上重叠绘制，减去绘制的多余区域（图3.105）。
图3.105
⑤复制“圆角矩形1”，生成“圆角矩形1副本”，拖至最上层。按住Alt键在绘制的形状上重叠绘制，减去多余区域。双击“圆角矩形1副本”，添加投影效果（图3.106）。
图3.106
⑥单击直线工具，在画面中绘制直线。双击“形状1”，勾选“投影”选项并设置各项参数，完成后单击“确定”按钮（图3.107）。
图3.107
⑦单击矩形工具，在其属性栏上选择“形状”选项，在属性栏上设置“填充”为白色，在画面上绘制矩形形状。双击“矩形1”，勾选“投影”选项并设置各项参数，完成后单击“确定”按钮。将其拖至“图层0”的上方（图3.108）。
图3.108
⑧复制“形状1”，生成“形状1副本”，将其拖至“矩形1”的上层。按快捷键Ctrl+T，在显示的自由变换编辑框中右击，选择“旋转90度（顺时针）”，并适当左右拉伸线条至画面适当位置（图3.109）。
图3.109
⑨复制“圆角矩形2”，生成“圆角矩形2副本”。将其拖至画面适当位置，并置于“形状1副本”的上层（图3.110）。
图3.110
⑩单击多边形工具，在属性栏中选择“形状”选项，分别设置“填充”为橘红色，“边”为3边，在画面上勾勒出三角图案。双击该图层，分别勾选“内阴影”“投影”选项并设置各项参数，完成后单击“确定”按钮（图3.111）。
图3.111
k复制“多边形1”，生成更多副本，分别等距排列在下方。单击横排文字工具，在打开的字符面设置各项参数，完成后在画面适当位置输入文字（图3.112）。
图3.112
l双击文字图层，勾选“投影”选项并设置各项参数，完成后单击“确定”按钮。使用相同方法，输入更多文字。至此，本实例制作完成（图3.113）。
图3.113
[技巧点拨]
多边形工具可以通过在属性栏“边”选项中设置任意边数来对图案进行绘制，不同的边数对应相应边数的图案效果。
3.2.3 滑动条
滑动条由3个部分组成：手指按住进行操作的滑块、已滑动的长度及滑动条的全长。在制作时注意滑动条的质感设计，充分运用图层样式及形状工具绘制具有真实质感的滑动条。
滑动条制作流程如下。
①执行“文件”→“新建”命令，在弹出的“新建”对话框中设置各项参数及选项，设置完成后单击“确定”按钮，新建空白图像文件（图3.114）。
图3.114
②双击背景图层，在弹出的对话框中单击“确定”按钮。再次双击“图层0”，勾选“渐变叠加”选项并设置各项参数，完成后单击“确定”按钮（图3.115）。
图3.115
③单击圆角矩形工具，在其属性栏上选择“形状”选项，在属性栏上设置“填充”为紫色，绘制圆角矩形形状。双击“圆角矩形1”，勾选“渐变叠加”选项并设置各项参数，完成后单击“确定”按钮（图3.116）。
图3.116
④复制“圆角矩形1”，生成“圆角矩形1副本”，适当向上拖移图层。双击“圆角矩形1”，勾选“渐变叠加”选项并设置各项参数，完成后单击“确定”按钮（图3.117）。
图3.117
⑤复制“圆角矩形1副本”，生成“圆角矩形1副本2”，清除其原有的图层样式。双击“圆角矩形1副本2”，勾选“渐变叠加”选项并设置各项参数，完成后单击“确定”按钮（图3.118）。
图3.118
⑥单击圆角矩形工具，绘制圆角矩形形状。双击“形状3”，勾选“颜色叠加”“内阴影”选项并设置各项参数，完成后单击“确定”按钮（图3.119）。
图3.119
⑦单击圆角矩形工具，绘制圆角矩形形状。双击“形状4”，勾选“内阴影”选项并设置各项参数（图3.120）。
图3.120
⑧继续勾选“投影”“渐变叠加”选项并设置各项参数，完成后单击“确定”按钮（图3.121）。
图3.121
⑨单击椭圆工具，在其属性栏上选择“形状”选项，在属性栏上设置“填充”为紫色，绘制圆形。双击“椭圆1”，勾选“投影”“渐变叠加”选项并设置各项参数，完成后单击“确定”按钮（图3.122）。
图3.122
⑩连续复制“形状3”，生成形状副本。分别拖曳复制的形状至画面适当位置，注意排列间距（图3.123）。
图3.123
k连续复制“形状4”，生成形状副本。结合自由变换命令对复制滑动条进行左右长度的缩放，并分别拖曳复制形状至画面适当位置，注意排列与下层形状相贴合（图3.124）。
图3.124
l连续复制“椭圆1”，生成形状副本。分别拖曳复制形状至画面适当位置，注意排列位置。至此，本实例制作完成（图3.125）。[技巧点拨]
图3.125
滑动条的制作在界面设计中会经常用到，制作时注意形状工具与图层样式的结合，制作出具有立体真实质感的滑动条。
3.2.4 对话框
对话框常见于短信、微博等应用中，主要功能是用于文字内容的展示。
对话框的制作流程如下。
①执行“文件”→“新建”命令，在弹出的“新建”对话框中设置各项参数及选项，设置完成后单击“确定”按钮，新建空白图像文件（图3.126）。
图3.126
②单击渐变工具，在属性栏上选择“径向渐变”，完成后设置渐变颜色，然后在背景图层上从右上至左下绘制“红色到暗红色”渐变（图3.127）。
图3.127
③单击钢笔工具，在属性栏中选择“路径”选项，在画面上勾勒出梯形图案。完成后按快捷键Ctrl+Enter将路径转化为选区（图3.128）。
图3.128
④单击渐变工具，新建“图层1”，从右下至左上绘制“红色到暗红色”渐变，完成后取消选区（图3.129）。
图3.129
⑤按Ctrl键将其载入选区，设置前景色为灰色，新建“图层2”，按快捷键Alt+Delete填充背景图层，完成后取消选区（图3.130）。
图3.130
⑥执行“滤镜”→“模糊”→“动感模糊”命令，在弹出的对话框中设置各项参数，完成后单击“确定”按钮（图3.131）。
图3.131
⑦设置“图层2”的混合模式为“正片叠底”，并将其拖至“图层1”的下层，适当调整其位置（图3.132）。
图3.132
⑧复制“图层1”，生成“图层1副本”。对其进行自由变换处理，并填充为白色。将“图层1副本”载入选区，单击画笔工具，绘制右侧阴影，完成后取消选区（图3.133）。
图3.133
⑨复制“图层2”，生成“图层2副本”。对其进行自由变换处理，并拖至“图层1”的上层，制作阴影效果（图3.134）。
图3.134
⑩复制“图层1”，生成“图层1副本2”。对其进行自由变换处理，并拖至画面最上层。双击“图层1副本2”，勾选“内阴影”选项并设置各项参数，完成后单击“确定”按钮（图3.135）。
图3.135
k复制“图层2”，生成“图层2副本2”。对其进行自由变换处理，并拖至“图层1副本2”的下层，完成后单击“添加图层蒙版”按钮。结合画笔工具，在添加的蒙版中适当涂抹黑色，隐藏右上角部分阴影图像（图3.136）。
图3.136
l单击椭圆工具，在其属性栏中设置其属性为“形状”，“填色”为白色，然后在画面适当位置绘制圆形。分别拖曳复制形状至画面适当位置，注意排列位置。至此，本实例制作完成（图3.137）。
图3.137
[技巧点拨]
对话框的绘制是较为简单的操作，如何制作有设计感的对话框，需要更多的设计灵感。灵活运用所学知识，可以轻松制作出具有设计感的对话框造型。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
