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

动静之美 Sketch移动UI与交互动效设计详解
分享
扫描下方二维码分享到微信
打开微信,点击右上角”+“,
使用”扫一扫“即可将网页分享到朋友圈。
作者:
2016-08
版次: 1
ISBN: 9787115426208
定价: 88.00
装帧: 平装
开本: 16开
纸张: 胶版纸
页数: 299页
正文语种: 简体中文
70人买过
  • 《动静之美——Sketch移动UI与交互动效设计详解》全面、细致地介绍了Sketch软件的使用方法,以及和Sketch软件无缝衔接的几款交互动效软件的使用方法。本书不局限于软件本身的使用方法,更多的是设计思路和设计规范等内容的分享,让读者在掌握UI设计和交互动效设计精髓的同时彻底掌握Sketch,并能用Keynote、Principle和Pixate等软件进行交互动效设计。 
    《动静之美——Sketch移动UI与交互动效设计详解》的配套学习资源包括案例源文件和近600分钟的辅助教学视频,帮助读者快速理解书中的知识点。读者可通过在线方式获取这些资源,具体方法请参看本书前言。 
    《动静之美——Sketch移动UI与交互动效设计详解》适合广大初、中级UI设计师,交互设计师和产品经理等相关从业人员阅读使用,同时也适合需要学习Sketch软件的设计爱好者阅读。 黄方闻 
    高级交互设计师,国内早一批Sketch使用者,并致力于该软件的推广与研究。 
    从2007年iPhone诞生起便专注于移动交互设计领域的研究,对移动交互设计领域有深刻的思考与独到的见解,倡导设计师的工作高效率化,多次翻译并分享国外前沿设计文档及交互说明。
     
    CHAPTER01移动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 安卓应用界面及MaterialDesign设计规范思考 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 forSketch 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 07AppleWatch界面的设计 143 
    7.1 了解AppleWatch 144 
    7.2 使用Sketch设计AppleWatch的图标 147 
    7.2.1 主屏幕图标 148 
    7.2.2 菜单图标 151 
    7.3 使用Sketch设计AppleWatch的通知界面 153 
    7.3.1 ShortLook界面 153 
    7.3.2 LongLook界面 154 
    7.4 使用Sketch设计AppleWatch的速览界面 157 
    7.5 使用Sketch设计AppleWatch的App界面 159 
    7.5.1 Page-based导航方式的设计 159 
    7.5.2 Hierarchical导航方式的设计 161 
    引申知识点25——蒙版 162 
    7.6 AppleWatch中常见界面内容设计方法 165 
    7.6.1 圆形进度条的设计方法 165 
    引申知识点26——Sketch中图层的旋转 168 
    7.6.2 表盘的设计方法 170 
    7.7 展示AppleWatch中的界面 173 
    7.7.1 扁平风格界面展示 173 
    7.7.2 模拟真实使用场景 175 
    7.8 本章小结 178 
    CHAPTER 08Sketch知识点补充及使用技巧 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 值得期待的SilverFlows 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软件无缝衔接的几款交互动效软件的使用方法。本书不局限于软件本身的使用方法,更多的是设计思路和设计规范等内容的分享,让读者在掌握UI设计和交互动效设计精髓的同时彻底掌握Sketch,并能用Keynote、Principle和Pixate等软件进行交互动效设计。 
    《动静之美——Sketch移动UI与交互动效设计详解》的配套学习资源包括案例源文件和近600分钟的辅助教学视频,帮助读者快速理解书中的知识点。读者可通过在线方式获取这些资源,具体方法请参看本书前言。 
    《动静之美——Sketch移动UI与交互动效设计详解》适合广大初、中级UI设计师,交互设计师和产品经理等相关从业人员阅读使用,同时也适合需要学习Sketch软件的设计爱好者阅读。
  • 作者简介:
    黄方闻 
    高级交互设计师,国内早一批Sketch使用者,并致力于该软件的推广与研究。 
    从2007年iPhone诞生起便专注于移动交互设计领域的研究,对移动交互设计领域有深刻的思考与独到的见解,倡导设计师的工作高效率化,多次翻译并分享国外前沿设计文档及交互说明。
  • 目录:

     
    CHAPTER01移动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 安卓应用界面及MaterialDesign设计规范思考 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 forSketch 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 07AppleWatch界面的设计 143 
    7.1 了解AppleWatch 144 
    7.2 使用Sketch设计AppleWatch的图标 147 
    7.2.1 主屏幕图标 148 
    7.2.2 菜单图标 151 
    7.3 使用Sketch设计AppleWatch的通知界面 153 
    7.3.1 ShortLook界面 153 
    7.3.2 LongLook界面 154 
    7.4 使用Sketch设计AppleWatch的速览界面 157 
    7.5 使用Sketch设计AppleWatch的App界面 159 
    7.5.1 Page-based导航方式的设计 159 
    7.5.2 Hierarchical导航方式的设计 161 
    引申知识点25——蒙版 162 
    7.6 AppleWatch中常见界面内容设计方法 165 
    7.6.1 圆形进度条的设计方法 165 
    引申知识点26——Sketch中图层的旋转 168 
    7.6.2 表盘的设计方法 170 
    7.7 展示AppleWatch中的界面 173 
    7.7.1 扁平风格界面展示 173 
    7.7.2 模拟真实使用场景 175 
    7.8 本章小结 178 
    CHAPTER 08Sketch知识点补充及使用技巧 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 值得期待的SilverFlows 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+Principle UI设计基础教程
张怡琪(张小碗儿
动静之美 Sketch移动UI与交互动效设计详解
动静之美:形体动作的规范
郭可愚 著
动静之美 Sketch移动UI与交互动效设计详解
动静干涉流动数值模拟技术与应用
刘春宝 编著
动静之美 Sketch移动UI与交互动效设计详解
动静组合加载下的岩石破坏特性\左宇军
张义平 著;左宇军;李夕兵
动静之美 Sketch移动UI与交互动效设计详解
动静之间
修济刚 著
动静之美 Sketch移动UI与交互动效设计详解
动静:卢文悦诗歌集
卢文悦 著
动静之美 Sketch移动UI与交互动效设计详解
动静之间
文尔邻 著
动静之美 Sketch移动UI与交互动效设计详解
动静有道养天年 传统养生运动精选
薛安日 著
动静之美 Sketch移动UI与交互动效设计详解
动静乐寿话养生
董汉良 编
动静之美 Sketch移动UI与交互动效设计详解
动静北京夜(英文版)
李潇堃、朱萍 译;朱洪宇 绘