UI交互动效必修课 pdf epub mobi txt 电子书 下载 2025

简体网页||繁体网页

☆☆☆☆☆

Uegood 雪姐 著

图书标签:

• UI设计
• 动效设计
• 交互设计
• 用户体验
• 设计工具
• 动画原理
• 原型设计
• 视觉设计
• 前端开发
• 设计教程

出版社： 清华大学出版社

ISBN：9787302501541

版次：1

商品编码：12369040

包装：平装

开本：16开

出版时间：2018-06-01

用纸：特种纸

产品特色

编辑推荐

适读人群 ：适合从事UI视觉设计、GUI设计、平面设计、交互设计、用户体验、产品经理等专业的朋友阅读

《UI交互动效必修课》不仅适合从事UI视觉设计、GUI设计、平面设计、交互设计、用户体验、产品经理等专业朋友阅读，也可作为高等院校平面设计、网站设计、艺术设计、工业设计、游戏设计等相关专业的教辅用书及相关培训机构的参考用书。

★★花瓣网人气设计师、UEgood优蝶教育雪姐倾心打造的UI交互动效图书。
★★超值赠送MG动效 + APP动效视频小动画、260分钟UI交互动效基础操作视频、660分钟After Effects CC 2015影视合成与特效教学视频、60分钟Sketch交互设计必修课教学视频、60分钟Principle交互设计必修课教学视频、教学用PPT课件、全书案例素材文件。
★★专业团队随时随地为读者朋友答疑解惑。

内容简介

　　《UI交互动效必修课》是花瓣网人气设计师、UEgood优蝶教育雪姐倾情打造的关于UI交互动效的图书，书中结合了作者丰富的工作经验，通过大量交互动效的案例，从零开始全面阐述产品交互与动效表达的技术与方法。
　　《UI交互动效必修课》共10章。第1～5章分别讲解交互设计概念、交互设计师必备知识、交互设计需要掌握的工具、产品交互实用文档、交互设计原则等；第6、7章分别讲解After Effects交互动效表达的基础与案例；第8章讲解响应式网站和H5动画的实现；第9章讲解Sketch工具的学习和应用；第10章讲解当前*流行的VR（虚拟现实）和AR（增强现实）中的交互设计逻辑。同时，书中相关案例的动效图，读者都可以扫描书中相应二维码进行查看，方便读者学习使用。
　　《UI交互动效必修课》还赠送MG动效+APP动效视频小动画、260分钟UI交互动效基础操作视频、780分钟软件教学视频、教学用PPT课件以及《UI交互动效必修课》案例素材文件，除此之外，还有专业团队为读者答疑解惑，方便读者学习。
　　《UI交互动效必修课》不仅适合从事UI视觉设计、GUI设计、平面设计、交互设计、用户体验、产品经理等专业的朋友阅读，也可以作为高等院校平面设计、网站设计、艺术设计、工业设计、游戏设计等相关专业的教辅图书及相关培训机构的参考图书。

作者简介

UEgood雪姐

毕业于上海交通大学计算机科学与技术系，2006年进入UI设计行业，至今已有近12年的UI交互设计经验，UI中国产品交互版版主，曾任UI视觉设计师、APP产品交互设计师、高级用户体验设计师、3D UI引擎设计师、VR硬件软件项目经理等职务，参与过20余家国内外知名公司手机品牌项目，多年网站建设和运营工作。编写《潮流UI设计必修课》一书，广受UI新人学习者的好评及喜爱，擅长把知识点化繁为简，写作风格条理清晰，简洁易懂。

目录

第1章　交互设计是什么 001
1.1　人机交互设计概念 002
1.2　产品相关的各种岗位职能 003
第2章　交互设计师必备知识 004
2.1　交互设计师常用工具 005
2.2　产品硬件平台 005
2.3　信息架构学 006
2.4　用户角色建模 007
2.5　流程图符号意义 010
2.5.1　流程图符号 010
2.5.2　其他符号 012
2.6　手势与标签 012
2.7　网站线框图的信息层级 013
2.8　APP信息层级 013
第3章　交互设计工具和图 015
3.1　常见交互操作事件 016
3.2　头脑风暴和思维导图 018
3.3　交互设计师画的7种图 019
3.4　UML建模规范 023
3.5　任务及任务状态 024
3.6　用例设计 025
3.6.1　软件用例设计 025
3.6.2　用例中需要检查和定义的部分举例 025
3.7　原型设计中的用户可用性测试 027
3.8　缺陷反馈跟踪及版本迭代 030
3.9　四类不同的软件开发模式 031
3.9.1　瀑布开发模式 031
3.9.2　迭代开发模式 031
3.9.3　螺旋开发模式 032
3.9.4　敏捷开发模式 033
3.9.5　四类不同软件开发模式的优缺点 033
第4章　产品交互实用文档及功能分类 035
4.1　产品经理常见交付物 036
4.1.1　BRD（商业需求描述） 036
4.1.2　MRD（市场需求文档） 036
4.1.3　PRD（产品需求文档） 037
4.1.4　FRD（功能需求文档） 038
4.1.5　DRD（交互细节说明文档） 038
4.2　导航设计让用户不迷路 040
4.3　优化功能优先级的卡片分类法 044
4.4　布控数据采集节点及数据监测 045
第5章　交互设计原则 049
5.1　交互设计六原则 050
5.2　交互设计四要素 050
5.3　人类擅长归类 051
5.4　人的脑部结构和意识认知 051
5.5　用户需求分析 052
5.6　竞品分析 054
5.7　如何玩转运营 057
5.8　设计的价值所在 059
5.9　尼尔森可用性十原则 060
5.10　长尾理论和个性化设置 062
第6章　AE基础及MG动效 065
6.1　AE基础动画 066
6.1.1　导入素材输出格式 066
6.1.2　动态二维码的5个属性（视频小动画） 074
6.1.3　常用工具栏及摄像机功能 081
6.1.4　GIF生成 093
6.2　MG小动画 097
6.2.1　海豚动态二维码 097
6.2.2　微信图标修剪动画（视频小动画） 102
6.2.3　水滴融合动画（视频小动画） 105
6.2.4　小球组字（视频小动画） 111
6.2.5　蒙版水波（视频小动画） 115
6.2.6　鲤鱼路径动画（视频小动画） 118
6.2.7　汉堡走路（视频小动画） 124
6.2.8　烟花（视频小动画） 126
6.2.9　几何变形动画（视频小动画） 134
6.2.10　边角定位（视频小动画） 140
6.2.11　模糊效果（视频小动画） 144
6.2.12　发光（视频小动画） 145
第7章　酷炫插件及APP动效 147
7.1　酷炫插件 148
7.1.1　UEgood风景（视频小动画） 148
7.1.2　樱花天气（视频小动画） 163
7.1.3　宇宙星空（视频小动画） 168
7.1.4　山川天气（视频小动画） 174
7.2　APP动效 177
7.2.1　3D图层翻转（视频小动画） 177
7.2.2　启动页动效（视频小动画） 184
7.2.3　地图搜索（视频小动画） 201
7.2.4　加载刷新（视频小动画） 204
7.2.5　播放器翻页（视频小动画） 211
7.2.6　外卖（视频小动画） 217
第8章　响应式网站和H5动画 223
8.1　HTML 5的三个优势 224
8.2　HTML 5八大特性 225
8.3　HTML 5的应用及布局方式 226
8.4　CSS3视觉表现方面的新特性 227
第9章　Sketch学习捷径 233
9.1　初识Sketch 234
9.1.1　Sketch的安装 234
9.1.2　Sketch的界面 235
9.1.3　Sketch工具栏的自定义 236
9.1.4　Sketch的快捷键及自定义快捷键的方法 237
9.2　Sketch小试牛刀——界面 240
9.2.1　新建画布 241
9.2.2　图层列表面板的使用 243
9.2.3　检查器面板的使用 247
9.2.4　使用Sketch进行UI界面设计实例 253
9.3　Sketch渐入佳境——图标 263
9.3.1　布尔运算 263
9.3.2　实例一：搜索图标的绘制 265
9.3.3　实例二：星星的绘制 265
9.4　Sketch大师之路——插件 267
9.5　Sketch的切图、导出和资源推荐 274
9.5.1　Sketch的切图 274
9.5.2　Sketch的导出 275
9.5.3　Sketch的导出小技巧 276
9.5.4　Sketch的资源推荐 278
第10章　VR（虚拟现实）和AR（增强现实）交互 279
10.1　VR技术及其发展历史 280
10.2　VR的发展前景及体系 281
10.2.1　VR的发展前景 281
10.2.2　VR体系 282
10.3　VR硬件及盈利模式 282
10.3.1　VR硬件 282
10.3.2　VR的盈利方式 284
10.4　VR交互 284
10.5　VR项目设计流程及应用领域 287
10.5.1　VR项目设计流程 287
10.5.2　VR应用领域 287
附录　动效逻辑原理 291

前言/序言

随着智能大屏设备的普及，移动软件产品开发成本的降低，相关领域的大型公司纷纷成立了移动产品设计部，APP 创业型公司也如雨后春笋般崛起，如何快速地把市场需求转化成产品交互框架成为所有公司的迫切需求。这就要求无论是产品经理、程序员，还是UI界面设计人员，都需要学习相关的知识。传统的Axure RPPro软件虽然是一个非常好的交互流程线框原型工具，但是如果没有配套的业务知识来支撑，那么做出来的交互将会不够实用，商业性也不强。本书用一种新的思路和方式来阐述产品交互与动效表达的技术与方法。
本书从零开始，详细地讲解了和交互有关的实用知识，可读性强，注重逻辑思维培养和从用户需求角度来考虑产品功能，帮助读者快速地建立起自己的产品交互框架。同时，本书弥补了市场上相关书籍缺乏的现状。不仅讲解了交互方面的逻辑思维方法，还安排了大量交互动效表达的案例，具体内容包括：
第1～5章分别讲解交互设计是什么、交互设计师必备知识、交互设计工具和图、产品交互实用文档及功能分类、交互设计原则等；第6、7章分别讲解AE基础及MG动效、酷炫插件及APP动效；第8章讲解响应式网站和H5动画；第9章讲解Sketch学习捷径；第10章讲解VR（虚拟现实）和AR（增强现实）交互。
本书还赠送MG动效+APP动效视频小动画、260分钟UI交互动效基础操作视频、780分钟软件教学视频、教学用PPT课件以及全书案例素材文件，除此之外，还有专业团队为读者答疑解惑，方便读者学习。
本书售后
UEgood优蝶教育有着近20年IT、计算机图形图像和艺术设计领域相关图书的编写经验，善于提炼知识内容，总结教学方法，将实用的技术和职业技能用高效、快捷的方式传授给需要的用户。
本着“学习，使人进步”的信仰，秉承“授人以鱼，不如授之以渔”的核心教育思想，通过“教、学、产、研、人”五位一体的裂变规模化发展思路做好良心教育工程。
我们不仅仅是传道授业解惑者，更是学习、生活的良好组织者和促进者。
依托现有的约10000 名一线资深设计师、2000 名大学老师、3000 个互联网企业、400 个动漫与设计公司资源，欲打造50个精品教学网点，实现真正的“教、学、产、研、人”一体化构想。
目前开设UI/UE 设计精品必修班、UI/UE设计高级研修班、UI运营插画必修班、UI交互动效必修班、VR 虚拟现实项目实训班、HTML 5 前端工程师必修班、产品经理必修班、游戏原画美术必修班、影视动画全能就业班等系列课程。
图书交流QQ 群：387689345。我们将竭诚为您服务。
欢迎大家登录我们官网www.uegood.com获取更多的学习资料和资源。

《UI交互动效必修课》内容概述 引言 在当今高度视觉化的数字时代，用户界面的设计已经远远超越了静态布局和简单的交互。引人入胜的动效不仅能提升产品的整体美感，更能极大地优化用户体验，引导用户完成任务，并传达情感和信息。本课程旨在深入浅出地剖析UI交互动效的核心原理、设计方法和实践技巧，帮助设计师掌握将静态界面转化为生动、流畅、富有吸引力的数字体验的能力。我们将从基础概念出发，逐步深入到高级技巧，涵盖理论与实践的各个层面，为您的UI设计之路注入源源不断的活力。 第一章：动效设计的基石——为什么需要动效？ 本章将带领您探索UI交互动效的根本意义和价值。我们将深入分析动效在提升用户体验方面的关键作用，包括： 增强用户参与感与趣味性： 为什么恰到好处的动效能让用户更愿意停留和互动？我们将通过案例分析，揭示动效如何将枯燥的界面转化为富有生命力的体验。 引导用户视线与注意力： 如何利用动效的动态特性，在复杂信息流中自然地引导用户关注关键元素？我们将探讨视线追踪的心理学原理，以及如何将其转化为动效设计的策略。 提供即时反馈与状态指示： 用户在进行操作时，需要明确的反馈。动效如何提供比静态反馈更直观、更友好的状态提示？例如，按钮按下后的微小形变、加载过程的动态指示等。 传递信息与上下文： 有时，信息的传递需要通过动态的过程来完成。例如，元素从一个位置平滑地过渡到另一个位置，可以清晰地表明它们之间的关联。 建立品牌个性与情感连接： 动效是塑造品牌个性的重要载体。独特的动效风格能够传达产品的调性，例如活泼、专业、优雅等，从而与用户建立更深层次的情感连接。 减少用户的认知负荷： 合理的动效可以减少用户需要记忆的信息量，通过动态演示或过渡来帮助用户理解界面逻辑和操作流程。 第二章：动效设计的语言——核心原则与理论 要创造出优秀的动效，必须掌握其背后的基本原理。本章将深入探讨UI交互动效设计中的核心原则，并借鉴动画设计的经典理论： 十二条动画基本法则的UI应用：我们将详细解析迪士尼动画大师提出的十二条基本动画法则（如挤压与拉伸、预判、缓入缓出、弧线运动等），并探讨它们如何巧妙地应用于UI动效设计中，使动效看起来更自然、更具生命力。 动效的时间与节奏： 时间和节奏是动效的灵魂。我们将学习如何控制动效的持续时间、速度曲线，以达到最佳的视觉效果和用户体验。过快或过慢的动效都可能适得其反。 动效的空间与路径： 元素在界面中的移动路径和空间关系同样重要。我们将学习如何设计清晰、符合逻辑的运动轨迹，以及如何利用空间感来增强动效的表现力。 动效的形态与变化： 元素的形状、大小、透明度等属性在动效中如何变化？我们将探讨如何通过这些形态的变化来传达信息和情感。 动效的流畅性与一致性： 如何确保不同动效之间的平滑过渡和整体风格的一致性？我们将讨论动效系统的构建和维护。 微交互的艺术： 微交互是用户与产品之间最小的交互单元，但往往能在细节处展现产品的精致。我们将深入研究微交互的动效设计，如何通过微小的反馈和动画来提升用户满意度。 第三章：动效设计的工具箱——从概念到原型 理论结合实践，本章将聚焦于将动效设计理念转化为实际原型的工具和方法： 主流动效设计工具介绍与实践：我们将详细介绍目前行业内主流的UI动效设计工具，如After Effects (配合特定插件)、Framer、Principle、ProtoPie等。您将学习到这些工具的基本操作、核心功能以及如何利用它们快速创建高质量的动效原型。 动效原型的创建流程： 从概念草图到可交互原型，我们将梳理出一套完整的动效原型创建流程。这包括： 动效需求的分析与定义： 明确动效要解决的问题和达成的效果。 动效脚本的设计： 类似于电影分镜，绘制动效的运动轨迹、时间轴和状态变化。 关键帧动画的设置： 在工具中通过关键帧来定义元素的起始和结束状态。 缓动曲线的应用： 学习如何选择和调整缓动曲线，实现自然的加速和减速效果。 动态交互逻辑的实现： 如何将动效与用户操作关联起来，创建可交互的原型。 不同类型动效的实现技巧： 过渡动效： 页面切换、元素进出屏幕的流畅过渡。 状态变化动效： 按钮点击、开关切换、加载状态等。 反馈动效： 对用户操作的即时视觉响应。 引导性动效： 吸引用户注意力的动画元素。 动效资源与素材的应用： 了解如何寻找和使用高质量的动效素材，以及如何根据项目需求进行二次创作。 第四章：动效设计的进阶——优化与性能考量 优秀的动效不仅要美观，更要高效。本章将深入探讨动效设计的优化策略和性能考量： 动效性能优化原则： 理解渲染原理： 了解不同动效在设备上的渲染方式，如GPU加速，以及如何利用它们提高流畅度。 避免不必要的重绘与回流： 学习如何通过合理的CSS属性和JavaScript调用来减少性能损耗。 控制动效的复杂性： 哪些动效会显著影响性能？如何权衡视觉效果与性能？ 针对不同平台的性能调优： 移动端与桌面端在性能上有何差异？如何进行针对性优化？ 动效与可用性原则的平衡： 不过度动效： 认识到“少即是多”的原则，避免干扰用户视线和操作。 可控性与可中断性： 用户应该能够控制或中断不想要的动效。 可访问性考量： 为有特殊需求的用户（如对动效敏感的用户）提供关闭或简化动效的选项。 动效设计的A/B测试与用户反馈： 如何通过数据来验证动效设计的有效性？如何收集用户反馈来不断迭代优化动效？ 动效设计在不同场景下的应用： Web端动效设计： PC端浏览器和响应式设计中的动效实现。 移动端应用动效设计： iOS和Android平台特有的动效规范与最佳实践。 高级应用： 3D动效、数据可视化动效等前沿探索。 第五章：动效设计的未来与趋势 在快速发展的数字领域，UI交互动效的设计理念也在不断演进。本章将带领您展望UI交互动效的未来发展趋势： AI在动效设计中的应用： 探索人工智能如何辅助动效设计，例如自动生成动效、智能优化动画参数等。 沉浸式体验与XR（VR/AR）中的动效： 随着虚拟现实和增强现实技术的成熟，动效在沉浸式环境中的作用将更加凸显。 参数化动效与生成式设计： 学习如何利用参数化工具创建高度可定制和动态变化的动效。 响应式动效与个性化体验： 如何根据用户设备、网络环境甚至用户情绪来动态调整动效，提供更个性化的体验。 动效设计师的职业发展路径： 探讨UI交互动效设计师的职业前景和成长方向。 总结 《UI交互动效必修课》将为您提供一个全面、系统、深入的学习平台，帮助您掌握UI交互动效设计的所有关键要素。通过理论学习、工具实践和前沿趋势的探讨，您将能够自信地设计出令人印象深刻、能够真正提升用户体验的动效，从而在竞争激烈的数字产品设计领域脱颖而出。这不仅仅是一门课程，更是您通往卓越UI设计师之路的坚实基石。

评分☆☆☆☆☆

说实话，一开始我对这本书抱有怀疑，毕竟“必修课”这三个字听起来有点严肃，我担心会是那种枯燥乏味的理论堆砌。但翻开第一页，我就被深深吸引住了。作者的文笔非常流畅，而且充满激情，仿佛是一位经验丰富的老友在和我分享他的宝贵经验。他没有用那些晦涩难懂的专业术语，而是用生动形象的比喻，将复杂的动效概念娓娓道来。我最喜欢的是关于“物理定律在动效中的应用”那一章，真的太巧妙了！想象一下，一个按钮按下后，它不是瞬间消失，而是带着一点点“回弹”和“阻尼感”，这不就是现实世界中物体受力后的自然反应吗？这种从物理世界汲取的灵感，让动效变得更加真实可信，也更加赏心悦目。这本书真的颠覆了我对动效的认知，让我明白，好的动效，是服务于用户的，是让用户感到舒适、愉悦和高效的。

评分☆☆☆☆☆

我一直对那些流畅、自然的UI动效感到着迷，但自己尝试去做的时候，总觉得“差了点火候”。这本书就像一道光，照亮了我前进的道路。作者的讲解方式非常接地气，没有让人望而生畏的理论，更多的是将抽象的概念通过生动的案例来诠释。我尤其喜欢关于“引导性动效”的章节，原来一个小小的动画，就能巧妙地引导用户完成复杂的交互，这简直太神奇了！这本书让我明白，动效不仅仅是为了好看，更是为了“好用”。它能让用户更直观地理解界面的信息，更顺畅地完成操作，甚至在不经意间带来惊喜和愉悦。我感觉自己现在看UI动效的眼光都变了，能从更深的层次去理解背后的设计意图。

评分☆☆☆☆☆

这本书绝对是UI动效领域的“宝藏”！作为一个UI设计新人，我之前对于动效的理解非常片面，总觉得只要让东西动起来就行。但这本书彻底刷新了我的认知。作者以一种非常系统化、有条理的方式，将动效设计中的各种要素进行了梳理和讲解。从基础的运动规律、节奏控制，到如何运用动效来提升界面的信息层级、传递状态，再到不同平台和设备上的动效适配，都做了细致的阐述。书中提供的许多设计原则和方法论，让我能够跳出“模仿”的怪圈，开始“创造”属于自己的动效。而且，作者的语言非常简洁明了，没有多余的废话，每一句话都直击要点，让我受益匪浅。我现在对UI动效的设计有了更深刻的理解和更强大的信心。

评分☆☆☆☆☆

作为一名有几年经验的产品经理，我一直致力于提升产品的用户体验。在用户界面设计方面，我深知动效的重要性，但苦于没有系统性的理论指导。这本书的出现，恰好填补了我的知识空白。作者的讲解逻辑清晰，层次分明，从基础的动效原理，到进阶的动效设计策略，再到实际应用中的注意事项，都涵盖得非常全面。我特别欣赏书中关于“一致性”和“可预测性”的讨论，这对于构建一套有良好用户体验的动效系统至关重要。书中也分享了许多不同行业、不同类型产品的优秀动效案例，让我能够站在巨人的肩膀上，学习他们的成功经验。这本书不仅提供了“是什么”，更重要的是教会了“为什么”和“如何做”，让我能够举一反三，灵活运用到自己的实际工作中。

评分☆☆☆☆☆

这本书简直是我的救星！我之前一直在琢磨如何让我的App动起来，但总是感觉差了点什么，要么生硬，要么过于炫技。读了这本书，我才明白，动效不仅仅是视觉上的锦上添花，更是连接用户与产品、引导用户操作、提升用户体验的关键。作者用一种非常直观且易于理解的方式，把那些看似高深的动效原理拆解开来，让我这个菜鸟也能窥探到其中的奥妙。书中举的例子都非常贴切，无论是页面转场、按钮反馈，还是加载动画，都做了详尽的分析，让我能立刻理解“为什么”要这样设计，而不是仅仅“怎么”做。我尤其喜欢其中关于“隐喻”和“情感化设计”的部分，这让我看到了动效背后更深层次的思考，原来一个看似简单的微动效，也能传递出如此丰富的信息和情感。我迫不及待地想把这些知识应用到我的项目中，相信一定会带来惊喜。