APP UI系统组件设计

第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