UI设计必修课：Sketch移动界面设计教程

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线框图的绘制 .....