目录 |
|
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 |