APP移动界面美化设计案例100+

前言

随着时代的发展，现代人类通信正步入一个全新的阶段，回首多年前，人们对于通信产品的需求还很原始，那些设备的功能十分单一，只具备简单的通信能力。而经过发展潮流的洗礼，到今天，人们对于通信设备的要求已经越来越高，比如更为宽屏幕的手机、多媒体设备、平板电脑等，这些通信、数码设备的功能正变得越来越强大，从多媒体应用、社交娱乐、智能应用甚至到移动支付等无所不包，丰富了人们的生活，带来了很多便利，而且这些设备的操作界面与多年前也大不一样了，变得更加友好、更加智能。本书所讲解的，正是关于当下智能设备界面的设计与制作。

本书全面讲解智能设备界面的设计、美化，通过大量的实例，全方位解读界面设计知识，从基础进阶到高级，循序渐进地依次解读界面设计与制作的重点及要领。

本书的目的，是讲解如何设计出精美漂亮的界面，专注于美学在界面设计中的应用，并与案例完美融合，让读者达到一个全新的设计水准。

本书特色与亮点

超全实例：本书在编写过程中以实际的界面设计案例为线索，内容从界面元素设计基础、界面元素制作、各类风格图标的设计再到后的综合UI界面设计实战，几乎囊括了所有与界面设计相关的专业知识，真正做到了超全面。

大量案例：本书的案例足足达到100 ，如此大量的案例可谓全面而丰富，每个案例都经过精心编写，对细节及整体的视觉表现做完美的讲解，是真正的超值之选。

超精细案例详解：本书中的所有案例全部采用与实际操作相结合的图文配合写作手法，读者通过对文字的阅读及观察操作步骤中的图像，可达到边学边操作的目的。

特色的段落讲解：作者根据多年的教学经验，将界面设计中常见的难点及疑点通过详解及提示的形式展现出来，使读者在学习的过程中能真正掌握所学。

超值附赠套餐：本书提供下载资源，内容包括所有案例的调用素材和源文件，读者可通过扫描手机二维码获得。书中各案例的有声教学视频皆可直接扫码观看。

本书由魏学智、吕小星共同编著，参与编写的还有余昊、桑晓洁、王世迪、吕保成、蔡桢桢、王巧伶、胡瑞芳、夏红军、王香、张田田等，在此感谢所有创作人员对本书付出的艰辛，特别感谢北京开放大学对本书的大力支持。

当然，在创作的过程中，限于作者水平，书中难免会有不足之处，希望广大读者批评指正。如果在学习过程中发现问题，或有更好的建议，欢迎发邮件到bookshelp@163.com与我们联系。

                                                                      编者

《APP移动界面美化设计案例100 》一书通过大量的综合案例，介绍了如何设计与制作APP移动界面，本书分为9章，从前至后依次讲解界面设计的基础知识及制作重点，每章都包括了界面及元素制作的细节，从界面元素设计基础、常用按钮及旋钮的制作、各类风格图标到综合UI界面设计实战逐一进行讲解，使读者由浅入深，逐步了解界面设计思路与制作过程。本书以一种全新的授受方式，为读者呈现界面设计中的重点与制作方法，使读者全面、深入地掌握各种风格界面的设计案例，从而成为界面设计的高手。

《APP移动界面美化设计案例100 》还为读者提供多媒体语音视频教学内容，读者可通过扫描手机二维码获得，不但收录了本书中所有的调用素材及源文件，同时还包含了本书所有实例的多媒体高清有声视频录像，让读者的界面学习之路更加顺达，让学习效率翻倍。

本书内容专业、简练，操作案例精美实用、讲解详尽，适合UI设计入门者及爱好者阅读，同时也适合各类院校设计专业的学生阅读使用，还可以作为高等院校平面设计、网站设计、游戏设计等相关专业的教辅图书及相关师生的参考用书。

魏学智：助理研究员，九三学社社员；北京市学习指导师，高级色彩搭配师；北京印刷学院艺术设计专业文学学士，北京工业大学软件工程专业硕士；现工作于北京开放大学，“京学网”课程资源建设主管；设计开发的课程多次获*及行业系统大奖，并著有多部畅销图书。

吕小星：教授，九三学社社员；沈阳工业大学工学学士，北京理工大学工学硕士；北京市高校教学名师，国家精品课程“多媒体技术基础及应用”主持、主讲。中国多媒体专业委员会委员，《中国图像图形学报》审稿专家。现任北京开放大学教授，校学术委员会委员。曾出版多部多媒体技术教材，并获得北京市精品教材奖。

目录

1

1 

2 

3 

4 

5 

6 

7 

8 

9 

10 

11 

12 

13 

2

14 

15 

16 

17 

18 

19 

20 

21 

22 

23 

24 

25 

26 

27 

28 

3

29 

30 

31 

32 

33 

34 

35 

36 

4

37 

38 

39 

40 

41 

42 

5

43 

44 

45 

46 

47 

48 

49 

50 

51 

52 

53 

54 

55 

56 

57 

58 

59 

60 

61 

62 

63 

6

64 

65 

66 

67 

68 

69 

70 

71 

72 

73 

74 

75 

76 

77 

7

78 

79 

80 

81 

82 

83 

84 

85 

8

86 

87 

88 

89 

90 mini

91 

92 

9

93 

94 

95 iPhone

96 

97 Android

98 

99 Windows 10

100 iPad

《APP移动界面美化设计案例100 》一书通过大量的综合案例，介绍了如何设计与制作APP移动界面，本书分为9章，从前至后依次讲解界面设计的基础知识及制作重点，每章都包括了界面及元素制作的细节，从界面元素设计基础、常用按钮及旋钮的制作、各类风格图标到综合UI界面设计实战逐一进行讲解，使读者由浅入深，逐步了解界面设计思路与制作过程。本书以一种全新的授受方式，为读者呈现界面设计中的重点与制作方法，使读者全面、深入地掌握各种风格界面的设计案例，从而成为界面设计的高手。

《APP移动界面美化设计案例100 》还为读者提供多媒体语音视频教学内容，读者可通过扫描手机二维码获得，不但收录了本书中所有的调用素材及源文件，同时还包含了本书所有实例的多媒体高清有声视频录像，让读者的界面学习之路更加顺达，让学习效率翻倍。

本书内容专业、简练，操作案例精美实用、讲解详尽，适合UI设计入门者及爱好者阅读，同时也适合各类院校设计专业的学生阅读使用，还可以作为高等院校平面设计、网站设计、游戏设计等相关专业的教辅图书及相关师生的参考用书。

魏学智：助理研究员，九三学社社员；北京市学习指导师，高级色彩搭配师；北京印刷学院艺术设计专业文学学士，北京工业大学软件工程专业硕士；现工作于北京开放大学，“京学网”课程资源建设主管；设计开发的课程多次获*及行业系统大奖，并著有多部畅销图书。

吕小星：教授，九三学社社员；沈阳工业大学工学学士，北京理工大学工学硕士；北京市高校教学名师，国家精品课程“多媒体技术基础及应用”主持、主讲。中国多媒体专业委员会委员，《中国图像图形学报》审稿专家。现任北京开放大学教授，校学术委员会委员。曾出版多部多媒体技术教材，并获得北京市精品教材奖。

第7章流行风图标界面的设计APP

本章介绍

本章讲解流行风图标界面设计，流行风，顾名思义，是指当下流行的图标设计风格，本章精选了当下流行的多个实例，从实用和流行的风格入手，对图标界面的制作进行完全展示，通过对此种风格的了解和学习，可以完全掌握当下流行风图标界面的设计方向。

要点索引

学会美丽拍图标的绘制

学习简洁时钟图标的绘制

了解财富应用图标的制作思路

掌握存储数据界面的设计

掌握游客统计界面的设计

实战78 美丽拍图标

本例讲解美丽拍图标制作，整个制作过程十分简单，重点在于图标的中细节的刻画，为平面图形添加相应的图层样式，制作出具有立体视觉效果的图形，终效果如图7.1所示。

图7.1 终效果

Step 01 绘制矩形并添加阴影

(1) 选择菜单栏中的【文件】|【新建】命令，在弹出的对话框中设置【宽度】为600像素，【高度】为450像素，【分辨率】为72像素/英寸，新建一个空白画布，将画布填充为深蓝色(R:9，G:18，B:32)。

(2) 选择工具箱中的【圆角矩形工具】，在选项栏中将【填充】更改为白色，设置【描边】为无，【半径】为60像素，在画布中按住Shift键绘制一个圆角矩形，此时将生成一个【圆角矩形 1】图层，如图7.2所示。

图7.2 绘制图形

(3) 在【图层】面板中，选中【圆角矩形 1】图层，单击面板底部的【添加图层样式】按钮，在菜单中选择【渐变叠加】命令，在弹出的对话框中将【渐变】更改为蓝色(R:35，G:160，B:254)到青色(R:62，G:255，B:248)，完成之后单击【确定】按钮，如图7.3所示。

图7.3 设置渐变叠加

( 4 ) 选择工具箱中的【椭圆工具】，在选项栏中将【填充】更改为蓝色(R:36，G:160，B:254)，设置【描边】为无，在【圆角矩形 1】图层中的图形底部位置绘制一个椭圆图形，此时将生

成一个【椭圆1】图层，如图7.4所示。

图7.4 绘制图形

(5) 选中【椭圆 1】图层，选择菜单栏中的【滤镜】|【模糊】|【高斯模糊】命令，在弹出的对话框中将【半径】更改为110像素，完成之后单击【确定】按钮，如图7.5所示。

图7.5 设置高斯模糊

(6) 选择工具箱中的【圆角矩形工具】，在选项栏中将【填充】更改为黑色，设置【描边】为无，【半径】为50像素，在图标底部后方位置绘制一个圆角矩形，此时将生成一个【圆角矩形 2】图层，如图7.6所示。

图7.6 绘制图形

(7) 选中【圆角矩形 2】图层，按Ctrl T组合键对其执行【自由变换】命令，单击鼠标右键，从弹出的快捷菜单中选择【透视】命令，拖动变形框将图形变形，完成之后按Enter键确认，如图7.7所示。

图7.7 将图形变形

(8) 选中【圆角矩形 2】图层，按Ctrl Alt F组合键打开【高斯模糊】命令对话框，在弹出的对话框中将【半径】更改为3像素，完成之后单击【确定】按钮，如图7.8所示。

图7.8 设置高斯模糊

(9) 在【图层】面板中，选中【圆角矩形 2】图层，单击面板底部的【添加图层蒙版】按

钮，添加图层蒙版，如图7.9所示。

(10) 选择工具箱中的【画笔工具】，在画布中单击鼠标右键，在弹出的面板中选择一种圆角

笔触，将【大小】更改为150像素，【硬度】更改为0%，如图7.10所示。

图7.9 添加图层蒙版图7.10 设置笔触

(11) 将前景色更改为黑色，在其图像上部分区域涂抹，将其隐藏，如图7.11所示。

图7.11 隐藏图像

Step 02 绘制标志图形

(1) 选择工具箱中的【圆角矩形工具】，在选项栏中将【填充】更改为白色，设置【描边】为无，【半径】为30像素，在图标位置绘制一个圆角矩形，此时将生成一个【圆角矩形 3】图层，如图7.12所示。

图7.12 绘制圆角矩形3

(2) 选择工具箱中的【圆角矩形工具】，在选项栏中将【填充】更改为黑色，设置【描边】为无，【半径】为5像素，在刚才绘制的图形靠左侧位置绘制一个圆角矩形，此时将生成一个【圆角矩形 4】图层，如图7.13所示。

图7.13 绘制圆角矩形4

(3) 选中【圆角矩形 4】图层，按Ctrl T组合键对其执行【自由变换】命令，当出现变形框以后，在选项栏中【旋转】后方的文本框中输入45，再分别将图形高度缩小，宽度增加，完成之后按Enter键确认，如图7.14所示。

(4) 选择工具箱中的【删除锚点工具】，单击图形左侧锚点将其删除，再将图形稍微移动，如图7.15所示。

图7.14 变换图形图7.15 删除锚点

(5) 在【图层】面板中，选中【圆角矩形 3】图层，单击面板底部的【添加图层蒙版】按

钮，为其添加图层蒙版，如图7.16所示。

(6) 按住Ctrl键单击【圆角矩形 4】图层缩览图，将其载入选区，将选区填充为黑色，将部分图形隐藏，完成之后按Ctrl D组合键将选区取消，如图7.17所示。

图7.16 添加图层蒙版图7.17 隐藏图形

提示

隐藏图形制作镂空效果之后【圆角矩形 4】图层无用，可以将其删除。

(7) 选择工具箱中的【圆角矩形工具】，在选项栏中将【填充】更改为白色，设置【描边】为无，【半径】为5像素，在刚才绘制的图形靠右侧位置绘制一个圆角矩形，此时将生成一个【圆角矩形 4】图层，如图7.18所示。

图7.18 绘制图形

(8) 以刚才同样的方法对【圆角矩形 4】图层中的图形进行变换并删除部分锚点后，适当移动图形，如图7.19所示。

图7.19 删除锚点并移动图形

Step 03 制作细节部分

(1) 选择工具箱中的【钢笔工具】，在选项栏中单击【选择工具模式】按钮，在弹出的选项中选择【形状】，将【填充】更改为无，【描边】更改为无，在图标位置绘制1个不规则

图形，此时将生成一个【形状1】图层，如图7.20所示。

图7.20 绘制图形

(2) 在【图层】面板中，选中【形状1】图层，单击面板底部的【添加图层样式】按钮，在菜单中选择【内阴影】命令，在弹出的对话框中将【颜色】更改为青色(R:56，G:210，B:254)，【不透明度】更改为50%，【距离】更改为6像素，【大小】更改为13像素，如图7.21所示。

图7.21 设置内阴影

(3) 在【图层】面板中，选中【形状 1】图层，单击面板底部的【添加图层蒙版】按钮，为图层添加图层蒙版，如图7.22所示。

(4) 选择工具箱中的【画笔工具】，在画布中单击鼠标右键，在弹出的面板中选择一种圆角笔触，将【大小】更改为50像素，【硬度】更改为0%，如图7.23所示。

图7.22 添加图层蒙版图7.23 设置笔触

(5) 将前景色更改为黑色，在其图像上部分区域涂抹将其隐藏，如图7.24所示。

图7.24 隐藏图像

(6) 在【图层】面板中，选中【形状 1】图层，将其拖至面板底部的【创建新图层】按钮上，复制1个【形状 1 拷贝】图层，如图7.25所示。

(7) 选中【形状 1 拷贝】图层，按Ctrl T组合键对其执行【自由变换】命令，单击鼠标右键，从弹出的快捷菜单中选择【垂直翻转】命令，完成之后按Enter键确认，将图形向下移动至与原图形相对的位置，双击其图层样式名称，在弹出的对话框中取消勾选【使用全局光】复选框，将【角度】更改为-120度，完成之后单击【确定】按钮，如图7.26所示。

图7.25 复制图层图7.26 变换图形

(8) 在【图层】面板中，选中【形状 1 拷贝】图层，将其拖至面板底部的【创建新图层】按钮上，复制1个【形状 1 拷贝2】图层，如图7.27所示。

(9) 选中【形状 1 拷贝2】图层，按Ctrl T组合键对其执行【自由变换】命令，将图形向右侧移动并适当旋转，完成之后按Enter键确认，再选择工具箱中的【直接选择工具】适当调整图形锚点，再双击其图层样式名称，在弹出的对话框中取消勾选【使用全局光】复选框，将【角度】更改为-60度，完成之后单击【确定】按钮，如图7.28所示。

图7.27 复制图层图7.28 变换图形

(10) 选择工具箱中的【矩形工具】，在选项栏中将【填充】更改为无，设置【描边】为无，在图标靠右侧位置绘制一个矩形，此时将生成一个【矩形 1】图层，将其移至【圆角矩形 4】图层上笔触，将【大小】更改为60像素，【硬度】更改为0%，如图7.34所示。

图7.33 添加图层蒙版图7.34 设置笔触

(16) 将前景色更改为黑色，在图像上部区域涂抹，将其隐藏，这样就完成了效果制作，终效果如图7.35所示。

图7.35 完成了制作