第1章手机UI设计基本概念 1
1.1了解UI设计 2
1.1.1什么是UI设计 2
1.1.2手机UI与平面UI的区别 2
1.1.3手机UI设计的特点 2
1.2手机UI设计的相关知识 3
1.2.1手机的分类 3
1.2.2手机屏幕的分辨率 5
1.2.3手机屏幕的色彩 5
1.3 UI设计中的图形元素格式 6
1.3.1 JPEG格式 6
1.3.2 GIF格式 6
1.3.3 PNG格式 7
1.4 UI设计中的色彩搭配 7
1.4.1色彩的意象 7
1.4.2色彩的搭配原则 8
1.4.3常见的色彩搭配方法 9
1.4.4使用Kuler配色 11
1.5课堂练习——制作ioS锁屏界面 12
1.5.1案例分析 12
1.5.2制作步骤 12
1.6课堂提问 18
1.6.1问题1——手机UI设计常用软件 18
1.6.2问题2——手机UI设计分类 19
1.7课后练习——制作Android计算器界面 20
第2章常见手机系统 21
2.1苹果系统（iOS） 22
2.1.1 iOS的发展历程 22
2.1.2 iOS的基础UI组件 24
2.1.3 iOS的开发工具和资源 25
2.1.4 iOS界面风格 27
2.2安卓系统（Android） 29
2.2.1 Android的发展历程 29
2.2.2 Android的基础UI组件 31
2.2.3关于深度定制系统 31
2.2.4 Android APP设计概述 33
2.3 Windows Phone系统 36
2.3.1 Windows Phone的发展历程 36
2.3.2 Windows Phone特色 37
2.4其他系统 38
2.4.1黑莓系统 38
2.4.2塞班系统 39
2.5课堂练习——制作WP系统时间设置界面 40
2.5.1案例分析 40
2.5.2案例分析 40
2.6课堂提问 42
2.6.1问题1——Windows Phone界面设计框架 43
2.6.2问题2 ——Windows Phone应用商店的作用 43
2.7课后练习——制作WP通知界面 44
第3章手机UI设计风格与规范 45
3.1 iOS系统的基本图形 46
3.1.1线条的使用 46
3.1.2丰富的图形 46
3.2 iOS系统界面设计规范 47
3.2.1确保设计的通用性 48
3.2.2重新规划基于Web的设计 48
3.3 Android的界面设计风格 49
3.3.1主题样式 50
3.3.2优化用户界面 50
3.3.3触摸反馈 51
3.3.4合理使用字体 52
3.4 Android系统界面设计规范 53
3.4.1 UI栏 54
3.4.2通知 54
3.4.3 APP界面 54
3.5课堂练习——制作iOS系统播放器 55
3.5.1案例分析 55
3.5.2制作步骤 55
3.6课堂提问 60
3.6.1问题1——如何对设计稿切图 60
3.6.2问题2——如何通过优化控制图片的体积 60
3.7课后练习——绘制天气预报APP界面 62
第4章手机UI中的图标设计 63
4.1怎样才能设计出好图标 64
4.1.1图标设计的必要性 64
4.1.2图标属性 66
4.1.3优秀图标的共同点 68
4.2 iOS系统图标设计规则 69
4.2.1程序图标 69
4.2.2小图标 70
4.2.3文档图标 71
4.2.4 Web快捷方式图标 72
4.2.5导航栏、工具栏和Tab栏上用的图标 72
4.3 Android系统图标设计规则 73
4.3.1启动图标 73
4.3.2操作栏图标 73
4.3.3小图标 74
4.4课堂练习——制作iOS系统图标 74
4.4.1案例分析 74
4.4.2制作步骤 75
4.5课堂提问 79
4.5.1问题1——如何获得正确的图标尺寸 79
4.5.2问题2——选择图标的存储格式 80
4.6课后练习——设计手机便签APP图标 80
第5章了解手机UI中的APP控件 81
5.1设计iOS系统控件 82
5.1.1活动指示器 82
5.1.2日期和时间拾取器 82
5.1.3详情展开按钮 83
5.1.4信息按钮 83
5.1.5标签 83
5.1.6网络活动指示器 84
5.1.7页码指示器 84
5.1.8拾取器 84
5.1.9进度指示器 85
5.1.10圆角矩形按钮 85
5.1.11范围栏 85
5.1.12搜索栏 86
5.1.13分段控件 86
5.1.14滚动条 87
5.1.15切换器 87
5.1.16文本框 87
5.2 Android控件设计 88
5.2.1控件的分类 88
5.2.2控件的设计规范 90
5.3课堂练习——制作文本编辑器 96
5.3.1案例分析 96
5.3.2制作步骤 97
5.4课堂提问 105
5.4.1问题1——设计手机UI中控件的要点 105
5.4.2问题2——如何实现控件的交互设计 105
5.5课后练习——绘制Android锁屏界面 106
第5章手机UI中的图片和文字 107
6.1 iOS系统中的图片 108
6.1.1登录图片 108
6.1.2 Retina屏幕设计要求 108
6.2 iOS系统中的文字排版 109
6.3 iOS系统中的特效处理 110
6.3.1阴影和倒影 111
6.3.2发光与描边 111
6.3.3模糊 111
6.3.4折角效果 111
6.4 Android系统中的图片 112
6.5 Android系统中的字体 112
6.6 Android系统中的特效处理 113
6.6.1投影和阴影 113
6.6.2发光和光泽 113
6.6.3边框 114
6.7课堂练习——制作邮件浏览界面 114
6.7.1案例分析 114
6.7.2案例分析 114
6.8课堂提问 121
6.8.1习题1——字体和字号的选择要注意什么 121
6.8.2习题2——关于更改手机中的字体 121
6.9课后练习——制作Android天气APP界面 122
第7章iOS系统APP UI设计 123
7.1 iOS界面设计原则 124
7.1.1界面美观 124
7.1.2风格一致 124
7.1.3便于操控 125
7.1.4提供反馈 125
7.1.5暗喻明显 126
7.1.6用户控制 126
7.2 iOS界面设计概述 127
7.2.1关注主任务 127
7.2.2提升用户关注内容的权重 127
7.2.3提升用户关注内容的权重 128
7.2.4使用以用户为中心的术语 128
7.2.5减少对用户输入的需求 129
7.2.6弱化设置 130
7.2.7在APP Store中提供精练的描述 130
7.2.8界面元素要一致 131
7.2.9使用精美的图片 131
7.2.10启动与退出 132
7.3 iOS界面设计流程 133
7.3.1创意先行 133
7.3.2产品草图 134
7.3.3视觉设计 134
7.3.4设计指南 134
7.4课堂练习——制作iOS系统工作界面 135
7.4.1案例分析 135
7.4.2制作步骤 136
7.5课堂提问 142
7.5.1问题1—— iOS系统界面设计尺寸标准 142
7.5.2问题2—— iOS系统界面图形部件尺寸规格 143
7.6课后练习——制作iOS系统通知界面 143
第8章Android系统APP UI设计 145
8.1 Android系统的设计准则 146
8.1.1漂亮的界面 146
8.1.2更简单的操作 146
8.1.3更加完善的工作流程 147
8.2强调纯粹的Android APP设计 148
8.2.1不要模仿其他平台的UI元素 148
8.2.2不要延续其他平台的特定图标 149
8.2.3不要在操作栏中使用“返回”按钮 149
8.2.4不要在界面底部放置操作栏 149
8.2.5不要在列表项目中使用向右箭头 150
8.2.6设备的独立性 150
8.3 Android界面设计风格 150
8.3.1设备与显示 150
8.3.2主题样式 151
8.3.3触摸反馈 151
8.3.4单位和网格 152
8.3.5颜色 153
8.3.6图标 154
8.4 Android APP应用结构 155
8.5课堂练习——制作Android网页浏览界面 156
8.5.1案例分析 156
8.5.2制作步骤 157
8.6课堂提问 164
8.6.1问题1—— Android UI图标有哪些类型 164
8.6.2问题2 ——Android UI图标设计原则 164
8.7课后练习——Android APP天气预报界面 164
附录A 166
附录B 168
附录C 169