【视频教学】 动静之美 Sketch移动UI与交互动效设计详解 移动UI设计师入门教程书籍 sketch软件视频教程书籍 app界面设计素材.

编辑推荐

本书内容分为两部分：首部分是UI界面的设计教程，遵循iOS、Material Design、Apple Watch设计规范，读者可以在该部分中学习如何使用Sketch进行移动UI界面、图标和Apple Watch界面的设计；第二部分是交互动效教程，读者可以在该部分学习如何将Sketch、Keynote、Principle和Pixate四大交互设计软件搭配进行动效设计，从UI到UX，让界面由静到动。随书附赠案例源文件，另外赠送近600分钟的辅助教学视频。 

内容推荐

《动静之美——Sketch移动UI与交互动效设计详解》全面、细致地介绍了Sketch软件的使用方法，以及和Sketch软件无缝衔接的几款交互动效软件的使用方法。本书不局限于软件本身的使用方法，更多的是设计思路和设计规范等内容的分享，让读者在掌握UI设计和交互动效设计精髓的同时彻底掌握Sketch，并能用Keynote、Principle和Pixate等软件进行交互动效设计。《动静之美——Sketch移动UI与交互动效设计详解》的配套学习资源包括案例源文件和近600分钟的辅助教学视频，帮助读者快速理解书中的知识点。读者可通过在线方式获取这些资源，具体方法请参看本书前言。《动静之美——Sketch移动UI与交互动效设计详解》适合广大初、中级UI设计师，交互设计师和产品经理等相关从业人员阅读使用，同时也适合需要学习Sketch软件的设计爱好者阅读。

作者简介

黄方闻高级交互设计师，国内早一批 Sketch 使用者，并致力于该软件的推广与研究。从 2007 年 iPhone 诞生起便专注于移动交互设计领域的研究，对移动交互设计领域有深刻的思考与独到的见解，倡导设计师的工作高效率化，多次翻译并分享国外前沿设计文档及交互说明。

目录

目录

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

媒体评论

Sketch是一款非常适合UI设计师的潮流工具，而这本书不但深度讲解了Sketch的设计技巧和规范，还巧妙搭配了其他新的互联网设计工具。可以说这是一本设计师的枕边书。

——史晨旭  时光创新联合创始人  工信部“中国用户体验联盟”理事  

这是一本 Sketch 和交互动效结合的参考书，不高大上，也不小清新，但满满干货。不仅谈“怎样做 （how-to）” ，更告诉你“为什么 （why）”。

—— onez  sketch.im 创始人

本书不仅是一本简单的Sketch使用说明书，作者站在设计之“道”的角度，来帮助你活学活用，尤其对我这种程序员来说，更是，让我真正做到以道驭器！

——张汉东  杰出程序员、Rubyist、《诱人的Ruby》视频作者、《Ruby原理剖析》译者

本书是Sketch和交互动效结合的参考书，为我们设计师转型提供了非常好的学习资料，让我们一起跟上时代步伐。——陶振兴  诺班策划创始人

Sketch是UI、UE设计师常用的设计工具，在高效输出设计和辅助制作动效上有良好的表现。本书不仅详细地讲述了Sketch的基础知识，还从应用场景、规范思考和动效设计的角度进行了深刻的讨论，为想要了解学习Sketch的人带来了。

——张钰  百度高级交互设计师

身为设计师了解流行的设计趋势以及高效实用的设计软件是必修之课。Sketch是新晋神器，功能完备，轻量宜用。扁平化设计的流行和屏幕分辨率的提升推动了Sketch这款软件的流行。本书中有详细的基础介绍，还从流行趋势、设计规范、动效，以及更多方面进行思考分析，并总结出来分享给大家，想了解更多关于UI、UE 和产品的人，此书必看。        

——汤微  美丽说高级UI设计师

这是一本对UI界面和交互动效设计进行全面介绍的书，面向移动应用的设计师和产品经理。特别是在操作系统上有详细的介绍和分析。看完这本书，你可以在实际的工作中更好地使用移动设计的模式和基础规范。把这本书当作移动界面设计和交互设计的源泉，好好享受这本书带来的乐趣吧！        

——王铎  MICU创始人

对于设计工作者来说，这是一本很好的工具书，它可以帮助你推进项目；而对于初学者，它则是一本很好的参考书，能在设计道路上助你一臂之力！

——张玲  泊藏优选首席UI设计师

当阅读完本书的内容后，在我的脑海中蹦出的关键词是“实用”，第二个关键词是“方法”。当然，肯定还会有更多的关键词，等你来发现。

——阁楼妖怪-奚郁浩

看得出来这是一本十分用心写的书。 在移动网络日渐发达的今天，能够有一本专门讲解UI设计的启蒙书籍真抒大设计爱好者及向往UI设计同仁们的。本书由浅入深地帮助读者剖析了UI设计的来龙去脉，从行业发展到设计核心无一不全！不得不说这是一本能够帮助诸多迷途中渴望求学的设计师找到明亮方向的灯塔！这不仅是一本能够带你进入UI设计世界的书，更是一本能够让你读懂UI设计的书。           本书融合了作者多年的从业实战经验以及个人对UI设计的独到理解，真实地讲解了设计体验、出稿流程、理论知识和个人技巧等。更加惊喜的是本书结合实例，带领大家进入一个犹如工作的环境，通过实战更有代入感地让大家学会实践操作。一本书能够做到“动静结合”地传递知识是很难得的。不断地学习，不断地进铂这是作为设计师不被淘汰的基本！而学习是个十分困难、长久的过程。这本书精而不枯，相信一定能够给大家带来一种新的学习感受和学习思维。相信您仔细阅读此书后一定能与我产生共鸣！

——慕歌

………………………………………………………………