动静之美 Sketch移动UI与交互动效设计详解

CHAPTER 01 移动UI设计师的入门 011
1.1　移动UI的发展　012
1.1.1　第一阶段：移动UI设计的目的是保证软件的可用　012
1.1.2　第二阶段：从可用到易用　012
1.1.3　第三阶段：内容为王的设计追求减法和好用　013
1.2　移动UI设计师的工作流程　014
· · · · · · (更多)

CHAPTER 01 移动UI设计师的入门 011
1.1　移动UI的发展　012
1.1.1　第一阶段：移动UI设计的目的是保证软件的可用　012
1.1.2　第二阶段：从可用到易用　012
1.1.3　第三阶段：内容为王的设计追求减法和好用　013
1.2　移动UI设计师的工作流程　014
1.3　不同移动平台之间的差异　015
1.4　移动UI设计师应了解的基本常识　018
1.4.1　移动UI设计中用到的单位　019
1.4.2　常用移动设备的尺寸　019
1.4.3　文字设计注意事项　021
1.4.4　为触控而设计　022
1.4.5　从iOS9的特点看设计趋势　023
1.5　本章小结　024
========================================================
CHAPTER　02 初识Sketch　025
2.1　Sketch的安装　026
2.2　Sketch的界面介绍　027
2.2.1　欢迎界面　028
2.2.2　Sketch的主界面　029
2.3　Sketch的快捷键　032
2.3.1　Sketch的快捷键列表　033
2.3.2　自定义快捷键　036
2.4　Sketch的常见问题　037
2.5　本章小结　038
========================================================
CHAPTER　03 从线框原型开始　039
3.1　线框原型的基本概念　040
3.2　绘制线框原型的注意事项　041
3.2.1　导航菜单的样式　041
3.2.2　线框原型中的层次　042
3.2.3　线框原型风格对设计的影响　043
3.3　使用Sketch绘制线框原型　044
3.3.1　注册页线框原型的绘制　044
引申知识点01——回到Sketch文档的历史版本　045
引申知识点02——Sketch的画板预设　046
引申知识点03——画板的检查器　048
引申知识点04——图层面板　049
引申知识点05——模板　052
引申知识点06——图层组的检查器　054
引申知识点07——形状图层的检查器　055
引申知识点08——文字图层的检查器　057
3.3.2　内容列表页线框原型的绘制　059
3.3.3　完整线框原型的绘制　061
3.3.4　绘制线框原型的思考　062
3.4　本章小结　062
========================================================
CHAPTER　04 移动UI界面的设计　063
4.1　iOS应用界面设计规范思考　064
4.2　安卓应用界面及Material Design设计规范思考　067
4.3　移动界面中文字的设计思考　069
4.4　移动界面中颜色的设计思考　071
引申知识点09——Sketch的颜色面板　072
引申知识点10——Sketch的插件及安装　076
4.5　使用Sketch设计移动界面　080
4.5.1　注册登录页面和注册页面的设计　081
引申知识点11——Sketch输入框的运算　081
引申知识点12——文本共享样式　082
引申知识点13——符号　084
引申知识点14——位图图层的检查器　086
引申知识点15——位图的插入　086
引申知识点16——毛玻璃效果　087
引申知识点17——图层共享样式　089
4.5.2　内容页面的设计　092
引申知识点18——内容填充插件Content-generator-sketch-plugin　097
4.5.3　使用Sketch设计移动界面的注意事项　098
4.6　移动界面的多分辨率适配　100
引申知识点19——自适应设计插件Fluid　for Sketch　101
4.7　本章小结　102
========================================================
CHAPTER　05 移动UI图标的设计　103
5.1　移动UI中图标设计的思考　104
5.1.1　功能型图标设计的思考　104
5.1.2　展示型图标设计的思考　106
5.2　功能型图标的绘制　107
5.2.1　绘制功能型图标之前　108
5.2.2　使用Sketch进行功能型图标的设计　108
引申知识点20——钢笔工具　110
引申知识点21——像素视图模式　113
引申知识点22——布尔运算　115
引申知识点23——剪刀工具　118
5.3　展示型图标的绘制　120
5.3.1　绘制展示型图标之前　120
5.3.2　使用Sketch进行展示型图标的绘制　121
5.4　图标资源的获取和使用　124
5.4.1　专业的图标网站　124
5.4.2　图标的源文件　125
5.5　本章小结　126
========================================================
CHAPTER　06 设计稿的后续处理　127
6.1　在移动设备上实时预览　128
6.2　将设计稿进行分享　129
6.3　交付给开发的文件　130
6.4　使用Sketch进行切图、标注和导出　131
6.4.1　Sketch画板和图层的导出　131
6.4.2　使用Sketch的切片工具进行切图　133
引申知识点24——切片图层检查器　134
6.4.3　使用Sketch进行标注　135
6.5　展示型图标的导出　141
6.6　本章小结　142
========================================================
CHAPTER　07 Apple Watch界面的设计　143
7.1　了解Apple Watch　144
7.2　使用Sketch设计Apple Watch的图标　147
7.2.1　主屏幕图标　148
7.2.2　菜单图标　151
7.3　使用Sketch设计Apple Watch的通知界面　153
7.3.1　Short Look界面　153
7.3.2　Long Look界面　154
7.4　使用Sketch设计Apple Watch的速览界面　157
7.5　使用Sketch设计Apple Watch的App界面　159
7.5.1　Page-based导航方式的设计　159
7.5.2　Hierarchical导航方式的设计　161
引申知识点25——蒙版　162
7.6　Apple Watch中常见界面内容设计方法　165
7.6.1　圆形进度条的设计方法　165
引申知识点26——Sketch中图层的旋转　168
7.6.2　表盘的设计方法　170
7.7　展示Apple Watch中的界面　173
7.7.1　扁平风格界面展示　173
7.7.2　模拟真实使用场景　175
7.8　本章小结　178
========================================================
CHAPTER　08 Sketch知识点补充及使用技巧　179
8.1　Sketch知识点的补充　180
8.1.1　Sketch的系统偏好设置　180
8.1.2　Sketch的标尺、参考线、网格和布局　183
8.1.3　Sketch工具的补充介绍　186
8.2　Sketch的使用小技巧　194
8.2.1　灵活运用描边属性　194
8.2.2　复制图层的CSS属性　196
8.2.3　Sketch对位图文件的处理　197
8.2.4　按一定规律复制图层　200
8.2.5　背景模糊　200
8.2.6　路径文本　203
8.2.7　按指定尺寸导出　204
8.3　本章小结　204
========================================================
CHAPTER　09 移动交互动效设计基础知识　205
9.1　从AE来看动画是怎么形成的　206
9.2　更加真实的动效　210
9.3　理解移动交互动效设计　213
9.3.1　移动交互动效设计的概念　213
9.3.2　移动设备的手势　213
9.4　移动交互动效设计的注意事项　217
9.5　本章小结　220
========================================================
CHAPTER　10 让界面动起来　221
10.1　常见UI动效软件介绍　222
10.1.1　快速交互原型的动效软件　222
10.1.2　时间轴为设计导向的动效软件　224
10.1.3　信号流式的动效软件　225
10.1.4　编程类动效软件　227
10.2　使用Keynote进行动效设计　229
10.2.1　Keynote的基础入门　229
10.2.2　Keynote设计UI动效的初始化设置　234
10.2.3　元素变形——Keynote的神奇移动　235
10.2.4　Keynote和Sketch的无缝衔接　238
10.3　使用Principle进行动效设计　244
10.3.1　Principle的基础入门　244
10.3.2　Principle的动效设计　250
10.3.3　Principle的导出和分享　264
10.4　使用Pixate进行动效设计　266
10.4.1　Pixate的基础入门　267
10.4.2　使用Pixate设计动效　273
10.4.3　Pixate的导出和共享　281
10.5　探索更多的交互动效设计软件　282
10.5.1　值得期待的Silver Flows　282
10.5.2　快速上手全新的设计软件　287
10.6　本章小结　290
========================================================
CHAPTER　11 移动UI设计师的成长　291
11.1　设计参考资源的收集和对Sketch源文件的分析　292
11.2　动效资源的获取和对动效图的分析　296
11.3　UI设计思维的提升　298
后记　300
· · · · · · (收起)