首页 理论教育 APP设置界面设计流程及步骤

APP设置界面设计流程及步骤

时间:2023-11-21 理论教育 版权反馈
【摘要】:设置界面在APP中的应用也很多,主要是用于设置各项参数的,用户根据自己的习惯设置后能提升用户体验。设计思路本实例制作的设置界面中用线性图标标记主要设置项,以列表的形式列出设置的内容,简洁、明了。图449 制作流程制作步骤图450 绘制圆角矩形01 新建文档,使用“圆角矩形工具”绘制圆角矩形,如图450所示。图452 确定后的效果图453 添加“投影”图层样式图454 文字效果03 复制图层样式。

APP设置界面设计流程及步骤

设置界面在APP中的应用也很多,主要是用于设置各项参数的,用户根据自己的习惯设置后能提升用户体验。

设计思路

本实例制作的设置界面中用线性图标标记主要设置项,以列表的形式列出设置的内容,简洁、明了。制作流程如图4‑49所示。

978-7-111-54283-4-Chapter04-51.jpg

图4‑49 制作流程

制作步骤

978-7-111-54283-4-Chapter04-52.jpg

978-7-111-54283-4-Chapter04-53.jpg

图4‑50 绘制圆角矩形

01 新建文档,使用“圆角矩形工具”绘制圆角矩形,如图4‑50所示。为图层添加“内阴影”和“渐变叠加”图层样式,如图4‑51所示。

978-7-111-54283-4-Chapter04-54.jpg

图4‑51 添加图层样式

02 确定操作后的图像效果如图4‑52所示。使用“横排文字工具”输入文字,并为图层添加“投影”图层样式,如图4‑53所示。确定后的文字效果如图4‑54所示。

978-7-111-54283-4-Chapter04-55.jpg

图4‑52 确定后的效果

978-7-111-54283-4-Chapter04-56.jpg

图4‑53 添加“投影”图层样式

978-7-111-54283-4-Chapter04-57.jpg

图4‑54 文字效果

03 复制图层样式。绘制图形并输入文字,为文字图层粘贴图层样式,如图4‑55所示。设置形状图层的“填充”为0%,为图层添加“内阴影”图层样式,如图4‑56所示。

978-7-111-54283-4-Chapter04-58.jpg

图4‑55 绘制图形并输入文字

978-7-111-54283-4-Chapter04-59.jpg

图4‑56 添加“内阴影”图层样式

04 继续为图层添加“内发光”“渐变叠加和“投影”图层样式,如图4‑57所示。

978-7-111-54283-4-Chapter04-60.jpg

978-7-111-54283-4-Chapter04-61.jpg

图4‑57 继续添加图层样式

05 单击“确定”按钮后的图像效果如图4‑58所示。使用“直线工具”绘制线条并复制多个,然后绘制矩形,并对线条进行对齐和排列,如图4‑59所示。

978-7-111-54283-4-Chapter04-62.jpg

图4‑58 确定后的效果

978-7-111-54283-4-Chapter04-63.jpg

图4‑59 绘制线条和矩形

06 使用“圆角矩形工具”绘制圆角矩形,并复制多个,分别修改颜色,如图4‑60所示。

978-7-111-54283-4-Chapter04-64.jpg

图4‑60 绘制圆角矩形

07 使用多种绘图工具绘制图标,并使用“横排文字工具”输入文字,如图4‑61所示。

978-7-111-54283-4-Chapter04-65.jpg

图4‑61 绘制图形并输入文字(www.xing528.com)

978-7-111-54283-4-Chapter04-66.jpg

图4‑62 绘制箭头

08 继续输入文字,并使用“直线工具”绘制箭头,如图4‑62所示。使用“圆角矩形工具”绘制圆角矩形,如图4‑63所示。

978-7-111-54283-4-Chapter04-67.jpg

图4‑63 绘制圆角矩形

09 为图层添加“斜面和浮雕”“内阴影”“颜色叠加”和“投影”图层样式,如图4‑64所示。

978-7-111-54283-4-Chapter04-68.jpg

图4‑64 添加图层样式

10 确定操作后的效果如图4‑65所示。

978-7-111-54283-4-Chapter04-69.jpg

图4‑65 确定操作后的效果

11 使用“椭圆工具”绘制正圆,如图4‑66所示。

978-7-111-54283-4-Chapter04-70.jpg

图4‑66 绘制正圆12 为图层添加“描边”“渐变叠加”和“投影”图层样式,如图4‑67所示。

978-7-111-54283-4-Chapter04-71.jpg

图4‑67 添加图层样式

13 确定后操作的图像效果如图4‑68所示。复制图层,在图层上单击鼠标右键,选择“转换为智能对象”命令,然后设置图层的“填充”为0%。为图层添加“渐变叠加”图层样式,如图4‑69所示。

978-7-111-54283-4-Chapter04-72.jpg

图4‑68 确定操作后的效果

978-7-111-54283-4-Chapter04-73.jpg

图4‑69 添加“渐变叠加”图层样式

14 执行“滤镜”|“模糊”|“高斯模糊”命令,在弹出的对话框中设置相关参数,如图4‑70所示。

15 执行“滤镜”|“模糊”|“动感模糊”命令,在弹出的对话框中设置相关参数,如图4‑71所示。确定后的图像效果如图4‑72所示。

978-7-111-54283-4-Chapter04-74.jpg

图4‑70 高斯模糊

978-7-111-54283-4-Chapter04-75.jpg

图4‑71 动感模糊

978-7-111-54283-4-Chapter04-76.jpg

图4‑72 图像效果

16 将3个图层选中,单击鼠标右键,选择“从图层建立组”命令。复制组两次,并调整位置,并将副本1的圆向右移动,如图4‑73所示。

17 双击副本1中的圆角矩形,打开“图层样式”对话框,修改“渐变叠加”和“外发光”图层样式,如图4‑74所示。

978-7-111-54283-4-Chapter04-77.jpg

图4‑73 复制并移动

978-7-111-54283-4-Chapter04-78.jpg

图4‑74 修改图层样式

18 单击“确定”按钮完成设置界面的绘制,如图4‑75所示。

978-7-111-54283-4-Chapter04-79.jpg

图4‑75 完成绘制

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈