UI设计必修课：Sketch移动界面设计教程（全彩）

本书采用循序渐进的方式指引设计者了解并掌握Sketch 4设计制作移动UI的方法和技巧。 

本书通过大量的案例分析,详细介绍了Sketch 4在设计移动UI中的一样分别针对Sketch绘制线框原型、设计图标、设计移动UI、设计网站UI和UI的输出与交互进行了讲解。通过学习读者应该熟悉移动UI设计的规范和设计要点。同时掌握移动UI的输出以及交互动效的添加方法。本书在每一章中都根据该章节内容添加专家支招，为读者解答一些与实际工作相关的疑难问题。

李万军：北京市骨干教师 北京市骨干教师 北京市骨干教师北京市重点专业申报人 、负责北京市重点专业申报人 、负责北京市重点专业申报人 、负责北京市重点专业申报人 、负责北京市重点专业申报人、负责中国商业统计学会 中国商业统计学会 中国商业统计学会理事。平面设计、网页设计专家，出版专业教材多本，有丰富的教学经验。

Chapter 01　移动UI设计师的入门
1.1 移动UI的发展 ……………………………………………………………. 2
1.1.1　早期设计保证软件可用性 ……………………………………………………. 2
1.1.2　中期设计保证软件易用性 ……………………………………………………. 2
1.1.3　后期设计保证软件实用性 ……………………………………………………. 4
1.1.4　未来UI设计的展望 ………………………………………………………………. 5
1.2 移动UI设计师的工作流程 ………………………………………….. 6
1.3 iOS和Android设计特色 ……………………………………………… 7
1.3.1　iOS的设计特色 ……………………………………………………………………. 7
1.3.2　Android的设计特色 ……………………………………………………………. 11
1.4　 移动UI设计师应了解的基本常识 ……………………………….14
1.4.1　移动UI设计中用到的单位 ………………………………………………….. 14
1.4.2　iOS的界面设计规范 …………………………………………………………… 16
1.4.4　Android的界面设计规范 …………………………………………………….. 18
1.4.5　为触控而设计 ……………………………………………………………………. 20
1.4.6　从iOS10的特点看设计趋势 ………………………………………………… 20
1.5 专家支招 …………………………………………………………………..22
1.5.1　移动UI设计师常用的设计工具有哪些？ …………………………….. 22
1.5.2　什么是屏幕密度？ …………………………………………………………….. 23
1.6 本章小结 ……………………………………………………………………23
Chapter 02　初识Sketch
2.1　Sketch的安装和启动 …………………………………………………..26
2.1.1　实战——安装Sketch ………………………………………………………….. 26
2.1.2　实战——启动Sketch ………………………………………………………….. 27
2.2　Sketch的欢迎介绍 ………………………………………………………28
2.3　Sketch的主界面 ………………………………………………………….29
2.3.1　菜单栏 ………………………………………………………………………………. 29
2.3.2　工具栏 ………………………………………………………………………………. 31
实战——自定义工具栏 ………………………………………………………………… 32
2.3.3　工具介绍 …………………………………………………………………………… 33
2.3.4　画布 ………………………………………………………………………………….. 33
2.3.5　检查器 ………………………………………………………………………………. 35
2.3.6　图层面板 …………………………………………………………………………… 36
2.3.7　画板 ………………………………………………………………………………….. 36
2.3.8　蒙板 ………………………………………………………………………………….. 37
2.3.9　布尔运算 …………………………………………………………………………… 37
2.3.10　符号与共享样式 ………………………………………………………………. 37
2.4　Sketch的快捷键 ………………………………………………………….38
2.4.1　Sketch的快捷键列表 ………………………………………………………….. 39
2.4.2　实战——自定义快捷键 ……………………………………………………… 43
2.5　Sketch的系统偏好设置 ……………………………………………….44
2.5.1　通用选项卡 ……………………………………………………………………….. 45
2.5.2　画布选项卡 ……………………………………………………………………….. 46
2.5.3　图层选项卡 ……………………………………………………………………….. 47
2.5.4　插件选项卡 ……………………………………………………………………….. 48
2.5.5　预设选项卡 ……………………………………………………………………….. 49
2.5.6　Cloud选项卡 ……………………………………………………………………… 49
2.6　Sketch的标尺、参考线和网格 ………………………………………… 49
2.6.1　标尺 ………………………………………………………………………………….. 49
2.6.2　参考线 ………………………………………………………………………………. 50
2.6.3　网格 ………………………………………………………………………………….. 51
2.7　Sketch的常见问题 ………………………………………………………53
2.7.1　Sketch是否支持Windows系统？ …………………………………………. 53
2.7.2　Sketch能否替代Photoshop？ ………………………………………………. 53
2.7.3　Sketch是否有汉化版 ………………………………………………………….. 53
2.7.4　Sketch如何升级？ ……………………………………………………………… 53
2.7.5　Sketch价格能不能优惠？ …………………………………………………… 54
2.8　专家支招 ……………………………………………………………………54
2.8.1　Sketch怎么兼容低版本文件？ ……………………………………………. 54
2.8.2　Sketch是否有类似Axure的组件库的功能？ ………………………… 55
2.9　本章小结 ……………………………………………………………………55
Chapter 03　从线框原型开始
3.1　线框原型的基本概念 ………………………………………………….58
3.2　绘制线框原型的注意事项 …………………………………………..59
3.2.1　巧用明暗对比的运用 …………………………………………………………. 59
3.2.2　不使用截图和颜色 …………………………………………………………….. 60
3.2.3　标记屏高度 ………………………………………………………………… 60
3.2.4　合理的布局和间距 …………………………………………………………….. 61
3.3　Sketch绘制线框原型 …………………………………………………..61
3.3.1　文件的新建和保存 …………………………………………………………….. 61
3.3.2　回到Sketch文档的历史版本 ……………………………………………….. 63
3.3.3　画板预设 …………………………………………………………………………… 64
3.3.4　画板检查器 ……………………………………………………………………….. 65
3.3.5　图层面板 …………………………………………………………………………… 66
3.3.6　关于模版 …………………………………………………………………………… 70
3.3.7　图层组的检查器 ………………………………………………………………… 71
3.3.8　形状图层的检查器 …………………………………………………………….. 73
3.3.9　文字图层的检查器 …………………………………………………………….. 76
3.4　使用Sketch绘制线框原型 ……………………………………………78
3.4.1　实战——计步APP线框图的绘制 ………………………………………… 78
3.4.2　实战——内容列表页线框图的绘制 ……………………………………. 82
3.5　完整线框原型的绘制 ………………………………………………….86
3.5.1　实战——注册页1线框图的绘制 …..

本书遵守广大设计者的需求，采用循序渐进的方式指引设计者了解并掌握Sketch 4设计制作移动UI的方法和技巧。本章共分为7章，逐级渗透的讲解方法，全面的向读者讲解Sketch 4的使用。
第1章　移动UI设计师入门。主要讲解了移动UI的发展、移动UI设计师的工作流程、iOS和Android设计特色、移动UI设计师应了解的基本常识等内容。第2章　初识Sketch。主要讲解了Sketch的安装和启动、Sketch的欢迎介绍、Sketch的主界面、Sketch的快捷键、Sketch的系统偏好设置、Sketch的标志、参考线和网格和Sketch的常见问题等内容。第3章　使用Sketch绘制线框原型。主要讲解了线框原型的基本概念、绘制线框原型的注意事项、Sketch绘制线框原型、使用Sketch绘制线框原型和完整线框原型的绘制等内容。第4章　使用Sketch设计图标。主要讲解了图标的设计准则、图标集的制作过程、使用Sketch插入面板、图形的布尔运算、绘制iOSAPP图标、绘制音乐应用图标和图标的源文件格式等内容。第5章　使用Sketch设计移动UI。主要讲解了移动UI的设计原则、移动界面的色彩搭配与视觉效果、Ios应用界面设计规范、安卓界面及Material Design设计规范、移动界面中色彩应用、文字的创建与编辑、使用共享样式、文字的导出、绘制iOS音乐播放器界面、绘制iOS社交APP界面和绘制iOS支付APP界面等内容。第6章　使用Sketch设计网站UI。主要讲解了网页设计PC端和移动端的区别、扁平化设计在UI设计中的应用、编辑绘制的图形、位图的编辑、应用样式、组件、绘制企业PC端网站界面、绘制企业PC端网站界面等内容。第7章　UI的输出与交互设计。主要讲解了适配多分辨率移动界面、实现在设备上实时预览、分享设计稿、交付给开发的文件、使用Sketch切图、使用Sketch标注、设计移动交互特效、使用Sketch插件等内容。本书的目的在于编写一本对读者真正有帮助的移动界面设计教材，让读者在阅读过本书以后可以轻松的掌握Sketch设计移动界面的方法。在制作移动界面的过程中起到事半功倍的作用，由于互联网的更新较快，书中所提供的网址仅供参考。