1.1 认识UI ........................................................2

1.1.1 UI设计的基本概念 ..........................2

1.1.2 UI设计的名词 ...................................3

1.2 UI设计的分类 ...........................................6

1.2.1 移动端UI设计 ...................................6

1.2.2 PC端UI设计 ......................................7

1.2.3 游戏UI设计 .......................................8

1.2.4 其他端UI设计 ...................................8

1.3 UI的设计原则 ...........................................9

1.4 UI设计的知识储备 .................................10

1.4.1 技术基础 .........................................10

1.4.2 手绘基础 .........................................14

1.4.3 移动端操作系统 .............................15

1.4.4 用户体验 .........................................17

1.4.5 交互设计 .........................................18

1.4.6 沟通理解能力 .................................19

1.5 UI设计的设计流程 .................................19

1.5.1 研究和分析 .....................................20

1.5.2 制定设计原则和目标 ....................21

1.5.3 创意和草图 .....................................21

1.5.4 交互设计 .........................................22

1.5.5 视觉设计 .........................................22

1.5.6 设计评审和测试 .............................22

1.5.7 实施和开发 .....................................23

1.5.8 验收和优化 .....................................23

本章总结 ...........................................................23

课后习题 ...........................................................23

第 2 章 UI设计的基本要素

2.1 图标在UI设计中的应用 ........................26

2.1.1 图标类型 .........................................26

2.1.2 图标尺寸 .........................................30

2.1.3 图标设计原则 .................................31

2.2 色彩在移动UI中的应用 ........................32

2.2.1 色彩的基础知识 .............................32

2.2.2 色彩的属性 .....................................35

2.2.3 颜色模型 .........................................35

2.2.4 色彩的情感 .....................................38

2.2.5 色彩的搭配 .....................................41

2.2.6 色彩搭配的注意事项 ....................43

2.3 文字在移动UI中的应用 ........................44

2.3.1 文字类型 .........................................44

2.3.2 文字字号 .........................................44

2.3.3 字体行高 .........................................45

2.3.4 文字颜色 .........................................45

2.3.5 文字使用规范 .................................45

2.4 UI设计的尺寸规范 .................................46

2.4.1 iOS平台的尺寸要求 ......................46

2.4.2 Android平台的设计尺寸 ...............48

本章总结 ...........................................................48

课后习题 ...........................................................49

第 3 章 UI图标设计

3.1 图标的概念 ..............................................51

3.2 图标、标志、标识的区别 ....................52

3.2.1 图标 ..................................................52

3.2.2 标志 ..................................................53

3.2.3 标识 ..................................................54

3.3 UI图标的分类 .........................................54

3.3.1 按抽象程度分类 .............................54

3.3.2 风格分类 .........................................55

3.3.3 类型分类 .........................................56

3.4 UI图标设计的原则 .................................57

3.5 图标设计的流程 .....................................58

3.5.1 确定设计样式 .................................58

3.5.2 确定UI图标颜色 ............................58

3.5.3 绘制草图 .........................................59

3.5.4 数字化设计 .....................................59

3.5.5 测试UI图标 .....................................59

3.6 图标设计 ..................................................60

项目一　线性风格图标设计 ....................... 60

项目二　扁平化风格图标设计 ................... 67

项目三　MBE风格图标设计 ....................... 72

本章总结 ...........................................................79

课后习题 ...........................................................79

第 4 章 手机主题图标设计

4.1 项目定位 ..................................................82

4.2 项目优势 ..................................................83

4.3 素材选择 ..................................................84

4.4 风格设定 ..................................................85

4.5 “小黄鸡”主题图标设计 ....................86

项目一 “小黄鸡”主题图标 —— 音乐图标 ...................................... 87

项目二 “小黄鸡”主题图标 —— 电话图标 ...................................... 93

项目三 “小黄鸡”主题图标 —— 短信图标 ...................................... 97

本章总结 .........................................................100

课后习题 .........................................................101

第 5 章 阅读类APP设计

5.1 项目定位 ................................................103

5.2 项目优势 ................................................103

5.3 项目思维导图........................................104

5.4 项目功能 ................................................104

5.5 项目原型图 ............................................105

5.5.1 原型图 ............................................105

5.5.2 “绿蝶文学”APP原型图 ..........105

5.6 “绿蝶文学”APP项目设计 ...............108

项目一 “绿蝶文学”APP—— 启动图标 ..................................... 109

项目二 “绿蝶文学”APP —— “广场”页 ..................................111

项目三 “绿蝶文学”APP —— “藏书阁”页 ............................. 128

本章总结 .........................................................139

课后习题 .........................................................139

第 6 章 电商购物类APP设计

6.1 项目定位 ................................................142

6.2 项目优势 ................................................144

6.3 项目功能介绍........................................145

6.4 项目思维导图........................................146

6.5 项目原型图 ............................................147

6.6 “小黄蜂”APP项目设计解析...........149

6.7 “小黄蜂”APP项目设计 ...................151

项目一 “小黄蜂”APP ——logo .......... 152

项目二 “小黄蜂”APP ——登录页 .... 156

项目三 “小黄蜂”APP —— 首页........ 164

本章总结 .........................................................174

课后习题 .........................................................175

第 7 章 游戏UI设计

7.1 项目定位 ................................................177

7.1.1 游戏类APP的优势 .......................177

7.1.2 游戏的类型 ...................................177

7.2 项目优势 ................................................178

7.3 项目功能介绍........................................179

7.4 “筑梦前行”APP ................................179

项目一 “筑梦前行”APP —— 启动图标 .................................. 180

项目二 “筑梦前行”游戏APP —— “注册”页 .................................. 186

项目三 “筑梦前行”APP —— “首屏”页 .............................. 192

项目四 “筑梦前行”APP —— “竞技”页 .................................. 200

项目五 “筑梦前行”APP —— “换装”页 .................................. 212

本章总结 .........................................................217

课后习题 .........................................................217

第 8 章 投票小程序界面设计

8.1 项目定位 ................................................219

8.1.1 小程序设计的重要性 ..................219

8.1.2 小程序设计的应用价值 ..............221

8.1.3 小程序设计的核心要素 ..............222

8.2 项目优势 ................................................225

8.3 项目功能介绍........................................226

8.4 “湖鲜节画展”投票小程序设计 .....227

项目一 “湖鲜节画展”投票小程序—— banner ........................................ 227

项目二 “湖鲜节画展”APP —— 首页 ........................................... 235

项目三 “湖鲜节画展”APP —— “规则”页 .................................. 245

项目四 “湖鲜节画展”APP —— “排行”页 .............................. 253

项目五 “湖鲜节画展”APP —— 作品详情页 .............................. 263

本章总结 .........................................................268

课后习题 .........................................................268

参考答案..................................................................................................................269

参考文献..................................................................................................................273