内容提要 本书主要讲解了iOS和Android这2种主流智能手机操作系统界面和APP元素，基本风格，全面解析了各类APP界面的具体绘制方法与技巧。 本书共5章。第1章，主要讲解移动UI的设计概论，度量单位、图片格式、设计原则、设计流程以及当今三大主流系统的基本知识。第2章至第3章，分别讲解了iOS、Android2种主流智能手机操作系统设计规范和设计原则，以及图形、控件、图标和完整界面的集体制作方法。第4章，主要通过APP的应用实战来向用户展示如何制作不同类型的APP界面。 本书配套源文件和教学视频，读者可以结合书、练习文件和教学视频，提升APP界面设计学习效率。 本书适合UI设计爱好者、APP界面设计从业者阅读，也适合作为各院校相关设计专业的参考教材。

1.本书采用基础 操作实例的方式讲解。全面介绍移动UI界面设计的要点和制作技巧。知识点与案例完美结合，便于读者理解学习。 2.教材中通过使用提示、小技巧和知识链接等功能，帮助读者更好的学习内容。融会贯通全部知识点。 3. 书中通过专家支招帮助解决读者在学习中所遇到的问题。通过举一反三中的案例帮助读者复习本章所学内容。 4.通过大型的商业案例，帮助读者了解并掌握移动UI界面设计的综合银行。不止只停留在学习阶段，而是应用到应用阶段。 5.全书中的技术操作和综合案例都提供操作视频，当读者在学习过程中遇到困难时，可以借助教育视频快速解决难题。 6.全书配套的教学课件，可以方便的帮助教师完成教学课程。

张晓景资深作者,曾在北大、农大等培训机构任专职或兼职讲师。Adobe国际认证讲师资格,参与多本畅销书写作。Adobe专家组成员。国家软件协会会员， 国家863专业讲师。

第 1章 移动UI设计基础

1.1　UI设计概论　2

1.1.1　什么是UI设计　2

1.1.2　什么是APP　3

1.1.3　手机APP UI与平面UI的区别　6

1.1.4　用于制作APP UI的常用软件　7

1.2　手机界面设计尺寸的度量单位　13

1.2.1　英寸　13

1.2.2　分辨率　14

1.2.3　屏幕密度　15

1.2.4　网点密度　16

1.3　常见的图片格式　16

1.3.1　位图　16

1.3.2　矢量图　20

1.4　APP UI的设计原则　21

1.4.1　视觉一致性原则　21

1.4.2　视觉简易性原则　22

1.4.3　从用户的考虑角度出发　23

1.5　手机界面的色彩搭配与视觉效果　23

1.5.1　冷暖色调的对比　23

1.5.2　色彩的意向　24

1.5.3　色彩的搭配技巧　25

1.5.4　APP界面配色原则　26

1.5.5　APP UI设计的用色规范　28

1.6　APP的设计流程　29

1.6.1　简单大方的设计理念　29

案例　绘制相机图标　30

1.6.2　独一无二的设计创意　33

1.6.3　全面分析应用需求　34

1.6.4　确认APP的设计工作　34

1.7　APP移动端的设计趋势　35

1.7.1　专注用户体验　35

1.7.2　使用模糊的背景　36

案例　绘制登陆界面　36

1.7.3　简单的导航模式　40

1.7.4　大胆而醒目的字体运用　40

1.7.5　更简单的配色　41

1.7.6　用户界面的情景感知　41

1.8　三大主流手机系统的发展历程　42

1.8.1　iOS系统　42

1.8.2　Android系统　45

1.8.3　Windows Phone系统　49

1.9　不同系统UI视觉的主要组成要素及特征　51

1.9.1　iOS系统中的组成要素及特征　51

1.9.2　Android系统中的组成要素及特征　53

1.9.3　Windows Phone系统　55

1.9.4　三大手机系统的发展前景　57

1.10　专家支招　58

1.10.1　App屏幕设计禁忌　58

1.10.2　App文字设计禁忌　59

1.10.3　App按钮图标设计禁忌　59

1.10.4　APP选项设计禁忌　60

1.10.5　APP空间设计禁忌　60

1.11　总结扩展　61

1.11.1　本章小结　61

1.11.2　举一反三绘制时钟图标　61

第　2章 iOS APP系统应用

2.1　iOS UI设计基础　64

2.1.1　iOS的设计特色　64

2.1.2　适应性和布局　68

2.1.3　停止与启动　71

2.1.4　导航　72

2.1.5　模态情景　73

2.1.6　交互性与反馈　74

2.1.7　动画　76

2.1.8　颜色和字体　77

2.2　iOS的界面设计规范　80

2.2.1　iOS界面设计尺寸　80

2.2.2　iOS设计元素尺寸　81

2.2.3　iOS界面图标尺寸　81

2.2.4　iOS界面文本尺寸　82

2.3　iOS的图标运用　83

2.3.1　iOS图标设计的原则　83

2.3.2　iOS应用程序图标　85

案例　绘制日历图标　86

2.3.3　栏按钮图标　90

2.4　iOS用户界面元素　92

2.4.1　状态栏　92

2.4.2　导航栏　93

2.4.3　标签栏　94

案例　制作新闻界面　94

2.4.4　搜索栏　103

2.4.5　工具栏　103

案例　制作浏览器界面　104

2.4.6　表格视图　108

案例　制作表格视图　109

2.4.7　活动视图　114

2.4.8　动作　114

2.4.9　警告提醒　115

2.4.10　编辑菜单　116

2.4.11　浮动框　116

2.4.12　模态视图　116

2.5　控件的绘制　117

2.5.1　活动指示器　117

2.5.2　选择器　118

案例　制作闹钟界面　119

2.5.3　分段控件　124

案例　制作分段控件　125

2.5.4　滚动条　129

案例　制作滚动条　130

2.5.5　步进器　134

2.5.6　开关　134

2.5.7　页码指示器　134

案例　制作页码指示器　135

2.5.8　按钮　139

2.5.9　文本框　139

案例　制作登陆界面　140

2.5.10　进度条　144

案例　制作进度指示条　145

2.6　专家支招　151

2.6.1　新字体　151

2.6.2　圆角　152

2.6.3　分享界面　152

2.6.4　应用切换　152

2.6.5　应用切换Spotlight搜索　153

2.6.6　Siri的新界面　153

2.6.7　设置中的搜索　154

2.6.8　键盘大小写切换　154

2.6.9　链接的分享选项　155

2.6.10　听写界面　155

2.7　总结扩展　155

2.7.1　本章小结　155

2.7.2　举一反三制作音乐播放器界面　156

第3章　Android APP系统应用

3.1　Android UI设计基础　158

3.1.1　Android UI的设计特色　158

3.1.2　设备与显示　160

3.1.3　主题鲜明　161

3.1.4　触摸反馈　162

3.1.5　度量单位和网格　163

3.1.6　字体　164

3.1.7　Android的写作风格　165

3.1.8　色彩　166

3.2　Android界面设计规范　167

3.2.1　Android界面图标的设计尺寸　167

案例　绘制Android 6.0 浏览器图标　168

3.2.2　Android的界面基本组成元素　173

3.2.3　Android的文本规范　174

3.3　Android的图标运用　175

3.3.1　启动图标　176

案例　绘制启动图标　176

3.3.2　系统图标　179

3.3.3　系统图标的设计原则　180

3.4　Android用户界面元素　183

3.4.1　主屏幕和二级菜单　184

3.4.2　状态栏　184

3.4.3　导航抽屉　185

3.4.4　操作栏　185

案例　绘制音乐乐库界面　186

3.5　Android控件的绘制　192

3.5.1　选项卡　192

案例　绘制主题壁纸下载界面　196

3.5.2　列表　200

案例　绘制列表视图　202

3.5.3　网格列表　207

3.5.4　文本框　208

3.5.5　按钮　209

案例　绘制登陆界面　211

3.5.6　菜单　214

案例　绘制电子书籍界面　216

3.5.7　开关　220

3.5.8　滚动　223

案例　绘制好友联系人界面　223

3.5.9　活动指示器　229

3.5.10　滑块　230

案例　绘制音乐播放器界面　231

3.5.11　提示框　235

3.6　专家支招　237

3.6.1　锁屏界面　237

3.6.2　二级菜单界面　238

3.6.3　通知中心　238

3.6.4　小部件中心　238

3.6.5　Google now　239

3.6.6　新增联系人　239

3.6.7　权限管理　240

3.6.8　设置界面　240

3.7　总结扩展　240

3.7.1　本章小结　240

3.7.2　举一反三绘制个人主页界面　241

第4章　Windows Phone APP系统应用

4.1　Windows Phone系统的特点　238

4.1.1　支持PC/平板/手机/Xbox One多平台　238

4.1.2　磁贴界面　238

4.1.3　将办公软件整合其中　239

4.1.4　语音助手　240

4.1.5　浏览器　240

4.2　Windows Phone的设计风格　241

4.2.1　合理运用　241

4.2.2　注重细节　241

4.2.3　注意布局　242

4.2.4　快速流畅　242

4.2.5　数字法则　243

4.3　Windows Phone用户界面框架　243

4.3.1　主界面　243

案例　绘制社交APP主界面　244

4.3.2　屏幕方向　249

4.3.3　主题　250

4.3.4　字体　251

4.4.　Windows Phone用户界面元素　252

4.4.1　状态栏　252

4.4.2　页面标题　253

案例　绘制MV播放界面　253

4.4.3　进度指示器　258

4.4.4　滚动指示器　259

4.5　Windows Phone基本控件　259

4.5.1　开关　260

4.5.2　按钮　260

4.5.3　单选按钮　260

4.5.4　复选框　261

4.5.5　搜索框　262

4.5.6　命令栏　262

4.5.7　滚动控件　263

案例　绘制音乐播放界面　263

4.6　专家支招　266

4.6.1　界面　267

4.6.2　内置应用　267

4.6.3　输入法　268

4.6.4　相册应用　269

4.6.5　通知中心　269

4.7　总结扩展　269

4.7.1　本章小结　269

4.7.2　举一反三绘制电子书架界面　270

第5章　APP应用实战

5.1　APP的分类　271

5.1.1　实用功能类　271

5.1.2　游戏类　271

5.1.3　社交类　272

5.1.4　网购支付类　272

5.1.5　影音播放类　272

5.2　iOS应用实战　273

5.2.1　绘制日历界面　273

5.2.2　绘制音乐播放器界面　278

5.3　Android应用实战　283

5.3.1　绘制电商界面　283

5.3.2　绘制社交界面　289

5.4　Windows Phone应用实战　295

5.4.1　绘制游戏界面　296

5.5　专家支招　302

5.5.1　选用符合产品气质的字体　302

5.5.2　巧用排版技巧　302

5.5.3　图片的水印式装饰　303

5.5.4　海报式的图文分享　303

5.5.5　动起来的界面　304

5.6　总结扩展　304

5.6.1　本章小结　304

5.6.2　举一反三绘制酒店首页界面　305