动静之美 Sketch移动UI与交互动效设计详解 pdf epub mobi txt 电子书 下载 2025

简体网页||繁体网页

☆☆☆☆☆

黄方闻 著

图书标签:

• UI设计
• 动效设计
• 交互设计
• Sketch
• 移动UI
• 用户体验
• 设计工具
• 动静之美
• 界面设计
• 视觉设计

出版社： 人民邮电出版社

ISBN：9787115426208

版次：1

商品编码：11993080

品牌：数艺社

包装：平装

开本：16开

出版时间：2016-08-01

用纸：胶版纸

页数：299

正文语种：中文

产品特色

编辑推荐

本书内容分为两部分：首部分是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移动UI与交互动效设计详解》并非一本简单的工具书，它是一场深入探索设计本质、解锁动效潜能、构建触感交互艺术的系统性旅程。本书致力于为读者提供一个全面、深入且实用的视角，去理解、学习和实践Sketch软件在现代移动UI与交互动效设计中的强大应用，从而创作出既具视觉冲击力又富含逻辑美感的产品。 核心价值与独特视角： 本书的核心价值在于其“动静结合”的理念。它深刻认识到，静态的UI设计是交互的基础，而动态的交互动效则是赋予产品灵魂、提升用户沉浸感、引导用户行为的生命力所在。我们不将动效视为锦上添花的点缀，而是视其为产品体验的有机组成部分，与UI设计一同构成一个完整、流畅的沟通系统。 本书的独特视角体现在： 理论与实践的深度融合： 摒弃空泛的理论说教，我们从实际的设计场景出发，将前沿的设计理论、心理学原理与Sketch软件的具体操作紧密结合。每一项动效的设计，都旨在解决实际的用户痛点，提升用户效率，或强化情感连接。 Sketch作为核心工具的精细打磨： Sketch作为当前移动UI设计的主流工具，其强大的矢量编辑能力、组件化设计理念以及丰富的插件生态，为交互动效的设计提供了坚实的基础。本书将深入剖析Sketch在实现复杂动效过程中的关键功能、技巧与工作流程，例如如何利用组件、符号、智能布局、原型联动以及第三方插件来高效地构建和预览动效。 循序渐进，由浅入深的学习路径： 本书的学习曲线设计得十分平缓，从基础的UI元素设计和静态布局，逐步过渡到动画的基本原理、关键帧动画、转场动画、微交互动效，再到更高级的交互逻辑和情感化设计。无论您是初学者还是有一定经验的设计师，都能找到适合自己的学习节奏。 聚焦“用户体验”的动效设计： 本书的重中之重在于，设计的每一个动效都必须服务于用户体验。我们会详细探讨不同类型动效的设计原则、常见误区以及如何通过动效来： 提供清晰的反馈： 让用户知道他们的操作是否被系统理解和执行。 引导用户注意力： 在恰当的时间突出重要信息或操作。 增强界面的生命力： 让界面不再冰冷，而是生动、有趣且富有情感。 优化导航与信息层级： 使复杂的信息结构变得易于理解和浏览。 营造品牌个性和情感连接： 通过独特的动效风格，塑造产品的品牌形象，触动用户的情感。 精选案例的深度解析： 本书不只是罗列技巧，而是精选了大量来自一线互联网公司的实际应用案例。我们会对这些案例进行细致的剖析，讲解其设计思路、动效逻辑、在Sketch中的具体实现步骤，以及其背后所体现的设计哲学。读者可以通过模仿和实践这些案例，快速掌握核心技能。 本书内容概览： 第一部分：奠定基石——Sketch中的UI设计基础 在深入探讨动效之前，扎实的UI基础是不可或缺的。本部分将： Sketch工作区与核心功能精讲： 从新建文档、画布设置、矢量工具、文本编辑、颜色填充、描边样式等基础操作入手，确保读者熟悉Sketch的方方面面。 组件化设计与符号系统： 讲解如何构建可复用的UI组件，运用符号系统实现设计效率和一致性的最大化，为后续的动效制作打下坚实基础。 响应式布局与栅格系统： 掌握在Sketch中创建适应不同屏幕尺寸的响应式布局，以及如何运用栅格系统保证界面的整体协调性和专业感。 图层管理与优化： 高效的图层管理是复杂项目顺利进行的关键，本节将介绍命名规范、分组技巧、智能参考线等，为动效的精确控制提供便利。 共享与协作： 探讨Sketch的团队协作功能，如共享库、评论等，如何让设计流程更加顺畅。 第二部分：动起来的艺术——交互动效设计理论与实践 本部分将是本书的重点，将带领读者进入令人兴奋的动效设计世界： 动效设计的通用法则： 借鉴迪士尼动画原理，讲解“缓入缓出”（Easing）、“延时”（Delay）、“预判”（Anticipation）、“二次动作”（Secondary Action）等经典动画原则，并分析它们如何应用于UI动效，使其更自然、更符合用户预期。 关键帧动画的奥秘： 深入讲解Sketch中创建关键帧动画的方法，包括时间轴的使用、属性变化（位置、大小、透明度、旋转、颜色等）的控制，以及如何制作出流畅、富有表现力的动画序列。 转场动画的设计： 探索不同场景下的转场动效，如页面切换、元素进入/退出、模态框弹出等。我们将分析不同转场方式对用户体验的影响，并演示如何在Sketch中实现平滑、富有逻辑的转场。 微交互的力量： 聚焦于那些细微但至关重要的交互细节，如按钮点击的反馈、加载动画、下拉刷新、滑动删除等。这些微小的动效能够显著提升界面的友好度和响应感。 利用Sketch插件赋能动效设计： 介绍并实操几款主流的Sketch动效插件（例如，动态预览、自动动画生成等），它们能极大地提升设计效率和创意实现的可能性。 动效的性能与优化： 讨论在设计动效时需要考虑的性能问题，如何避免过度动画导致卡顿，以及如何设计出既美观又高效的动效。 第三部分：深入探索——高级交互与情感化设计 本部分将带领读者突破基础，进入更具挑战性和创造性的领域： 原型联动与复杂交互流程： 学习如何通过Sketch的Artboard和链接功能，构建复杂的交互原型，模拟真实的用户流程，并为动效的应用提供上下文。 数据驱动的动效设计： 探讨如何根据数据的变化来驱动动效，例如列表的动态加载、图表的实时更新等，使界面更具动态性和信息量。 动效在特定场景的应用： 引导式教程与新手引导： 如何利用动效让用户更轻松地理解产品功能。 游戏化与奖励机制： 如何通过动效增强用户参与感和趣味性。 信息可视化与数据呈现： 如何用动效清晰地展示复杂数据。 品牌叙事与情感表达： 如何通过动效传递品牌故事和情感温度。 跨平台设计与动效的一致性： 考虑在不同平台（iOS, Android）下，动效设计的差异与共通点，以及如何保持品牌在不同平台上的统一体验。 未来趋势展望： 探讨人工智能、AR/VR等新兴技术对移动UI与交互动效设计可能带来的影响。 本书的受众： 《动静之美：Sketch移动UI与交互动效设计详解》面向所有对移动应用设计充满热情的设计师、产品经理、UI/UX研究员，以及希望提升自身设计能力和作品竞争力的从业者。无论您是初入设计领域的新人，还是寻求突破的资深设计师，本书都将为您提供宝贵的知识、实用的技能和启迪灵感的视角。 结语： 在这个瞬息万变的数字世界里，优秀的设计不仅能解决问题，更能创造惊喜，触动人心。《动静之美》将引导您在Sketch的画布上，挥洒创意，以“动”赋予“静”以生命，用灵动的交互为用户打造令人难忘的体验。这是一场关于视觉、触感与情感的深度对话，一次对现代移动产品生命力的全新诠释。让我们一同踏上这段精彩纷呈的设计之旅，解锁“动静之美”的无限可能。

评分☆☆☆☆☆

长期以来，我一直认为一个出色的移动UI设计，不仅仅在于其静态的美感，更在于其动态的生命力。《动静之美：Sketch移动UI与交互动效设计详解》这个书名，让我看到了将这两种元素完美结合的可能性。我特别好奇书中是如何阐述“动静之美”的，是仅仅将动效作为一种装饰，还是将其视为提升用户体验的核心要素？我期望书中能够提供一些关于如何设计“有意义”的动效的思路，而不是仅仅堆砌一些炫技式的动画。例如，如何通过动效来传达产品的核心价值？如何用动效来增强用户对信息的重要程度的感知？又或者，如何利用动效来营造一种品牌特有的气质？对于Sketch的使用，我更希望它能超越基础的画板和图层操作，深入讲解如何利用Sketch的插件生态，以及其组件化、响应式设计等高级功能来高效地实现复杂的交互动效。我希望这本书能提供一些关于动效设计的“最佳实践”，以及如何根据不同的设备、屏幕尺寸和用户场景来调整动效的表现。总而言之，我期待这本书能够给我带来一种全新的视角，让我能够将Sketch这款强大的工具，与富有灵魂的交互动效设计融会贯通，创造出真正能够打动用户、提升产品竞争力的移动UI。

评分☆☆☆☆☆

一直以来，我对视觉传达和用户体验设计都抱有浓厚的兴趣，尤其是在移动端日益复杂的交互场景下，如何通过设计让用户感受到流畅、愉悦的体验，是我一直在探索的课题。最近有幸接触到一本名为《动静之美：Sketch移动UI与交互动效设计详解》的书，虽然还没有深入阅读，但从其书名和初步翻阅的感受来看，它似乎触及到了我一直以来关注的核心痛点。我非常期待书中能够系统地讲解Sketch在UI设计中的强大功能，特别是如何利用其工具集来创建高保真的原型。更重要的是，我希望这本书能够深入剖析“动效设计”这一块，这是移动UI设计中提升用户体验、传递情感、引导操作的关键。我希望书中不仅仅是罗列一些炫酷的动效案例，而是能从设计原理出发，解释动效背后的逻辑，比如时间、缓动、形变等元素如何影响用户的感知，以及如何根据不同的场景和目标来选择和设计合适的动效。例如，一个简单的按钮点击反馈，一个小小的过渡动画，都可能在潜移默化中影响用户对产品的好感度。我特别想了解书中是否有关于如何运用动效来优化信息层级、增强用户反馈、甚至传达品牌个性的具体方法和实践。另外，对于“详解”二字，我抱有很大的期待，希望它能提供足够详尽的步骤和技巧，让我能够快速上手，并在实际项目中加以运用。

评分☆☆☆☆☆

作为一名长期在交互设计领域摸爬滚打的从业者，我一直在寻找能够提升我工作效率和设计深度的“利器”。《动静之美：Sketch移动UI与交互动效设计详解》这个名字，恰恰点出了我当前最需要提升的方向：如何将静态的UI设计转化为富有生命力的交互体验。我希望这本书能给我带来一些“干货”，而不仅仅是“知道了”的层面。我尤其关注“详解”两个字，它意味着这本书应该能够深入到Sketch的每一个关键功能，并解释这些功能在动效设计中的应用。比如，书中是否会讲解如何利用Sketch的配合插件，或者一些高级的布尔运算、组件化思维来高效地构建复杂的动效原型？更重要的是，我希望它能提供一套系统性的动效设计流程，从需求分析、动效概念设计，到动效的实现与测试，都有清晰的指导。我期待书中能分享一些关于“动”的哲学，比如什么是好的动效，什么是糟糕的动效，以及如何避免动效设计中的常见误区。对于“静”的部分，我也希望它能有独到的见解，比如如何通过精妙的留白、色彩搭配和排版来营造一种宁静而专注的用户体验。我希望能从这本书中学习到如何将“动”与“静”巧妙地融合，创造出既有活力又不失优雅的移动UI。

评分☆☆☆☆☆

我是一名初入UI设计行业的新人，对于Sketch的使用还算熟练，但如何在实际的项目中做出更具吸引力和用户友好度的设计，一直是我苦恼的问题。《动静之美：Sketch移动UI与交互动效设计详解》这个书名，让我感觉它可能正是我所需要的“启蒙”读物。我非常希望这本书能够从最基础的动效原理讲起，比如动效的速度、节奏、方向感对用户心理的影响，以及如何通过动效来引导用户的视线和操作。同时，我也希望书中能够提供大量的实操案例，通过Sketch的截图和步骤演示，教会我如何一步一步地实现这些动效。比如，如何制作一个平滑的页面过渡动画？如何设计一个有反馈感的按钮点击效果？如何实现一个生动的产品列表动画？这些都是我非常想掌握的技能。我希望这本书能够帮助我理解，动效不仅仅是为了“好看”，更是为了让产品“更好用”。我期待它能教会我如何用动效来降低用户的学习成本，提高用户对信息的理解效率，以及增加用户与产品之间的情感连接。看到“详解”两个字，我心底是充满期待的，希望它能像一位耐心的老师，一步步地指导我，让我能够真正地掌握Sketch在动效设计中的应用，并将其运用到我未来的设计工作中。

评分☆☆☆☆☆

说实话，我是一名对设计颇为“挑剔”的读者，我总觉得市面上很多关于UI/UX的书籍，要么流于表面，要么过于理论化，缺乏实践指导。当我看到《动静之美：Sketch移动UI与交互动效设计详解》这个书名时，我的第一反应是：“又一本讲Sketch的书？” 但再细看，它强调的是“动静之美”和“交互动效设计详解”，这引起了我的好奇。我希望这本书能够真正做到“详解”，不仅仅是教你如何使用Sketch的工具，而是深入讲解“为什么”要这么做。比如，在动效设计方面，我希望能看到关于如何建立一套统一的动效规范，如何根据用户的行为习惯来设计响应式的动效，以及如何平衡动效的丰富度和应用的性能。我更关注的是，书中是否能提供一些“思维模型”，帮助我理解动效在整个产品生命周期中的作用，以及如何将其与业务目标、用户需求相结合。例如，什么样的动效能有效地引导用户完成某个关键操作？什么样的动效能提升用户的沉浸感？什么样的动效又能让产品显得更加精致和专业？我非常期待书中能够有一些案例分析，通过对具体产品的动效进行解剖，来揭示其设计理念和实现思路，让我能够举一反三，触类旁通。同时，我也希望它能分享一些关于如何评估动效效果的方法，避免过度设计或者无效动效的出现。

评分☆☆☆☆☆

书挺不错的，可以学习很多

评分☆☆☆☆☆

好好好好好好

评分☆☆☆☆☆

学习是人进步的阶梯。我已经原地踏步好久了

评分☆☆☆☆☆

书挺好的， 书挺好的， 书挺好的， 书挺好的，

评分☆☆☆☆☆

发货速度很快，内容很好，很喜欢

评分☆☆☆☆☆

书还没看，视频保存到云盘还没下载下来，这装订我也是醉了，后期容易散页啊

评分☆☆☆☆☆

看书的目录还可以，但是买回来网上评价不是很好，希望不要让我失望

评分☆☆☆☆☆

看书的目录还可以，但是买回来网上评价不是很好，希望不要让我失望

评分☆☆☆☆☆

正打算买mac，希望这本书有用