移动端UI设计

严磊有将近二十年大专、本科的一线教学经验。多年来专注于高等学校数字出版艺术设计领域复合应用型人才培养，主要围绕交互设计、数字出版、数字体验与文创设计、新媒体艺术等领域的研究。数十篇论文及多件艺术设计作品在国内重要期刊、核心期刊发表。担任北京市及校级科研项目研究工作。

第 1 章 UI版式布局与形式美 

1.1 导航设计 002
1.1.1 跳板式 002
1.1.2 列表菜单式 003
1.1.3 陈列馆式 003
1.1.4 仪表式 004
1.1.5 超级菜单式 004
1.1.6 图标轮盘式 004
1.1.7 图片式 005
1.2 界面布局设计 006
1.2.1 竖排列表 006
1.2.2 横排方块 006
1.2.3 九宫格 007
1.2.4 Tab 007
1.2.5 多面板 007
1.2.6 手风琴 008
1.2.7 弹出框 008
1.2.8 侧边栏 008
1.2.9 标签式 009
1.3 界面设计的形式美法则 009
1.3.1 重复与近似 009
1.3.2 渐变与节奏 010
1.3.3 对比与调和 010
1.3.4 比例与适度 011
1.3.5 变化与统一 011
1.3.6 虚实与留白 012
V

移动端UI设计
  第 2 章 UI情感化设计与视知觉原则 

2.1 UI中的情感化设计 014
2.1.1 何为情感化设计 014
2.1.2 苹果公司UI设计的情感化之路 014
2.1.3 情感化设计在UI设计中的作用 016
2.2 格式塔视知觉原则 018
2.2.1 相似性 018
2.2.2 接近性 018
2.2.3 连续性 019
2.2.4 闭合性 019
2.2.5 图形与背景 019
  第 3 章 UI色彩设计与心理效应 

3.1 色彩原理 022
3.1.1 色彩的概念 022
3.1.2 色彩的属性 023
3.1.3 数字色彩 023
3.2 色彩的对比与调和 024
3.2.1 色彩对比 025
3.2.2 色彩对比的种类 026
3.2.3 色彩的调和 028
3.2.4 色彩调和的种类 029
3.3 色彩的心理效应 030
3.4 色彩搭配的技巧 034
3.4.1 主色、副色、点缀色构成原则 034
3.4.2 色彩搭配的原则 034
3.4.3 主体色搭配的技巧 035
3.4.4 色环搭配指南 036
  第 4 章 图标的创意设计 

4.1 图标色彩搭配与应用 040
4.1.1 经典色系 040
4.1.2 图标与界面配色注意事项 043
4.2 图标的基本知识 046
VI

目 录
4.2.1 图标概述 046
4.2.2 图标分类 046
4.2.3 图标设计流程 049
4.3 图标风格表达 050
4.3.1 扁平化设计 050
4.3.2 拟物化设计 053
4.3.3 扁平化+拟物化 055
4.4 图标创意表达 056
4.4.1 图标创意构想―头脑风暴 056
4.4.2 图形轮廓联想――图形联想 057
4.4.3 图标草图表达――视觉手绘 058
4.5 图标制作基础实训――时钟图标 058
  第 5 章 流行元素设计案例 

5.1 UI的字体效果 067
案例1：星星字体效果 067
案例2：牛仔布料字体效果 069
案例3：烟雾水墨字体效果 076
案例4：霓虹灯字体效果 080
案例5：斑点字体效果 083
案例6：立体字效果 084
案例7：车灯字体效果 086
5.2 UI图标的质感表现 089
案例8：瓷器质感效果 089
案例9：木纹质感效果 093
案例10：金属质感效果 097
案例11：布料质感效果 101
案例12：玻璃质感效果 106
案例13：塑料质感效果 113
案例14：皮质质感效果 118
5.3 立体UI图标设计 137
案例15：3D字体图标设计 137
案例16：手机应用图标设计 140
案例17：面具表情图标设计 144
VII

移动端UI设计
案例18：企业Logo图标设计 148
案例19：VR实验室Logo设计 154
5.4 功能图标案例设计与制作 156
案例20：汽车HMI图标制作 156
案例21：办公文件管理图标制作 162
案例22：收音机图标制作 167
案例23：手电筒图标制作 173
案例24：天气预报图标设计 176
5.5 UI局部功能设计与案例制作 179
案例25：登录UI设计 179
案例26：导航图标UI设计 179
案例27：导航栏设计 181
案例28：主题图标设计 187
  第 6 章 主题式UI创作案例研究 

6.1 民间工艺主题UI设计 193
案例1：一石砖 193
案例2：民艺 196
6.2 怀旧主题UI设计 200
案例3：老物件 200
案例4：时光π 207
6.3 书卷文化主题UI设计 210
案例5：余音 210
6.4 汉像画主题UI设计 214
案例6：汉像画 214
6.5 六一儿童节主题UI设计 219
案例7：童说童画 219
案例8：糖友记 223
6.6 亲子阅读主题UI设计 225
案例9：Light·House 225
案例10：檬阅 230
6.7 保护小动物主题UI设计 233
案例11：Pet-life 233
案例12：爱宠 236
VIII

目 录
6.8 快乐涂鸦主题UI设计 238
案例13：乐涂 238
案例14：萌叽 241
  第 7 章 优秀作品展示 

作品1 《木活字》 246
作品2 《北京楼燕儿》 248
作品3 《龙龙带你识九城》 249
作品4 《千年活字VR虚拟体验馆设计》 250
作品5 《收集年味》 251
作品6 《晓红豆》 253

移动端UI设计是数字媒体艺术专业的必须课程。本书通过对数字移动媒体UI设计理论知识与制作规范，详实的案例讲解使读者具备一定设计界面与图标的审美能力与制作能力。能较好的将学习理论知识与实际案例相结合，使读者更容易理解同时也容易掌握制作软件的能力。本书共分为11章，第1章对数字移动媒体基础理论知识进行介绍。第2章介绍UI设计的基础知识、第3章介绍了图形创意表达方法。第4章介绍了图标设计的方法规范与流程。第5章介绍了图标设计的风格表达。第6章介绍了数字移动媒体UI设计规范。第7章介绍了数字媒体UI的板式构成。第8章介绍了数字移动媒体UI的色彩设计。第9章主要介绍了不同风格的UI图标设计与制作案例。第10章介绍了数字移动媒体的主题式UI整体设计。第11章介绍了优秀UI界面设计赏析。