APP UI系统组件设计

王红蕾 北京市商业学校商贸信息系主任，国家电子商务精品课程资源共建共享项目负责人，国家教学团队负责人，市级专业带头人，市级职教名师。国家教学成果一等奖获得者，全国中等职业学校跨境电子商务专业教学标准主笔人、负责人。主要从事电子商务、平面广告设计、网页设计、网络广告设计、UI设计等教学工作。代表作品：《移动电子商务》十三五规划教材、《平面制作岗前培训》《完全掌握Photoshop CS5商业广告设计超级手册》《淘宝天猫网店美工实战》。

王建红 牡丹江技师学院教务处副处长，计算机高级讲师，参与国家、省级示范校和高技能项目建设，市级职业技能等级认定广告设计师高级评委，计算机广告专业学科带头人。主要从事平面广告设计、电子商务、网页设计、版式设计、UI设计等教学工作。代表作品：《手机网店美工实操》《视觉引流网店美工操作实战》《Photoshop+CorelDRAW商业案例项目设计完全解析》《Illustrator CC平面设计与制作教程》《CoreIDRAW平面设计与制作教程》《Photoshop CC平面设计与制作教程》。

时延辉，北京市商业学校教师、电子商务讲师、Inventor学科带头人，从事平面设计与网页设计教学多年。主要作品有《CorelDRAW X7实战从入门到精通》《网店视觉法宝》《深度：Photoshop CS5数码人像摄影后期精修108技》《网店宝贝抠图与店铺装修宝典》。

第1 章　初识UI 基础 1

1.1　认识UI 2

1.2　UI 的分类 3

1.3　UI 的色彩基础 4

1.3.1　颜色的概念 4

1.3.2　色彩三要素 4

1.3.3　色彩的混合 6

1.3.4　色彩的分类 8

1.4　不同色彩给人的心理影响 8

1.5　常用UI 设计单位解析 9

1.6　UI 设计常用的软件 9

1.7　UI 设计常用图像格式 11

1.8　UI 的设计原则 12

1.9　优秀作品欣赏 13

第2 章　使用基本形状绘制UI 元素 14

2.1　了解Photoshop 中的基本形状 15

2.1.1　通过选区创建几何图形 15

2.1.2　绘制工具 15

2.1.3　形状工具的不同模式 16

2.2　使用矩形选区制作下单按钮 17

2.3　使用椭圆选区制作圆形按钮 19

2.4　使用矩形工具制作简洁风格导航栏 23

2.5　使用圆角矩形工具和矩形工具制作提示窗口 25

2.6 使用圆角矩形工具和椭圆工具制作拖动条 30

2.7　使用多边形工具和椭圆工具制作播放按钮 32

2.8　使用自定形状工具和椭圆工具制作供电按钮 37

2.9　使用椭圆工具结合图层样式制作金属旋钮 43

2.10　使用路径与自定形状工具制作网页广告条 51

2.11　优秀作品欣赏 54

第3 章　扁平化设计风格 55

3.1　了解扁平化设计 56

3.1.1　扁平化设计是什么 56

3.1.2　扁平化风格的优缺点 56

3.1.3　扁平化风格的设计原则 57

3.2　扁平相机图标制作 59

3.3　扁平视频播放图标制作 62

3.4　扁平收音机图标制作 65

3.5　扁平化邮箱界面制作 69

3.6　扁平音乐播放器界面制作 73

3.7　时间APP 界面制作 76

3.8　天气预报控件制作 79

3.9　车载扁平UI 制作 83

3.10　扁平卡通生肖图标制作 87

3.11　优秀作品欣赏 91

第4 章　写实风格图标设计与制作 92

4.1　了解写实风格设计 93

4.1.1　写实的艺术表现 93

4.1.2　写实风格的优缺点 94

4.1.3　写实风格的设计原则 94

4.2　写实麦克风图标制作 96

4.3　写实钢琴图标制作 104

4.4　写实电视图标制作 111

4.5　写实滚动开关图标制作 118

4.6　写实日历图标制作 125

4.7　写实西瓜图标制作 129

4.8　优秀作品欣赏 134

第5 章　UI 小控件元素 135

5.1　了解UI 设计中的控件 136

5.1.1　UI 控件是什么 136

5.1.2　UI 设计中的控件 136

5.1.3　UI 控件的设计原则 137

5.2　重要人物电话簿控件制作 138

5.3　功能性图标控件制作 146

5.4　天气控件制作 152

5.5　时间控件制作 158

5.6　质感开关控件制作 165

5.7　视频播放控件制作 173

5.8　音量旋钮控件制作 175

5.9　优秀作品欣赏 180

第6 章　UI 导航设计与制作 181

6.1　了解UI 设计中的导航 182

6.1.1　导航是什么 182

6.1.2　导航的分类 182

6.1.3　移动端导航设计的几种形式 182

6.1.4　网页端导航设计的几种形式 185

6.2　水晶质感网页导航制作 188

6.3　底部导航制作 193

6.4　顶部导航制作 198

6.5　抽屉式导航制作 200

6.6　带搜索导航制作 204

6.7　APP 顶部导航制作 208

6.8　APP 网格式导航制作 211

6.9　优秀作品欣赏 213

第7 章　登录框设计与制作 215

7.1　了解UI 设计中的登录框 216

7.1.1　登录框是什么 216

7.1.2　UI 中登录框的分类 216

7.1.3　登录框的几种形式 216

7.2　传统登录框制作 216

7.3　企业登录框制作 221

7.4　漂浮感登录框制作 225

7.5　透明登录框制作 230

7.6　纯净扁平登录框制作 236

7.7　横幅登录框制作 238

7.8　皮质登录框制作 243

7.9　优秀作品欣赏 251

第8 章　UI 设计与制作 252

8.1　了解UI 设计中的界面 253

8.1.1　UI 设计中的界面是什么 253

8.1.2　常见的界面 253

8.1.3　屏幕尺寸 253

8.1.4　设计界面时需要注意的固定元素尺寸 255

8.1.5　什么是好的界面设计 256

8.2　手机开机界面制作 256

8.3　鞋子销售界面制作 259

8.4　扁平下载界面制作 266

8.5　手机界面制作 268

8.6　汽车服务APP 界面制作 272

8.7　天气预报界面制作 274

8.8　照片处理类APP 界面制作 277

8.9　优秀作品欣赏 280

《APP UI系统组件设计》是一本专门介绍使用Photoshop设计、制作APP元素的图书。

《APP UI系统组件设计》共分8章，包括初识UI界面基础、使用基本形状绘制UI元素、扁平化设计风格、写实风格图标设计与制作、UI小控件元素、UI导航设计与制作、登录框设计与制作、UI界面设计与制作等内容，通过案例讲解，使读者由浅入深、逐步地了解使用Photoshop设计与制作APP元素的整体设计思路和制作过程。本书将APP UI元素设计的相关理论与实例操作相结合，不仅能使读者学到专业知识，也能使读者掌握实际应用，全面掌握APP UI的元素设计。

《APP UI系统组件设计》不仅适合APP UI设计爱好者，以及准备从事APP UI设计的人员，也适合Photoshop的使用者，包括平面设计师、网页设计师等；同时也可作为相关培训机构的辅助教材。