大数跨境
0
0

如何学好UI交互动效?有它就足够了

如何学好UI交互动效?有它就足够了 视觉客AI
2018-05-26
2
导读:UI设计师进阶指南

随着互联网行业的发展,产品的动效设计已经由画龙点睛之笔变为非常基础且必要的内容,这也导致越来越多的公司要求设计师具备交互思维和动效设计的能力。


关于UI动效的好处根本无需赘言,只需要几张效果图就能感受到它的魅力。


《UI交互动效必修课》部分案例欣赏


相对于静图,有趣的动效往往更能吸引人,讨人喜欢。但即便都知道它的好处,不少设计师在学习UI动效时仍然感到力不从心。究其根本,是缺少系统的学习,网上一些教程零零散散,不成体系。


不过这个问题现在已经成为了历史,因为它出现了。

作者简介

UEgood雪姐

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


内容简介

本书是花瓣网人气设计师、UEgood优蝶教育雪姐倾情打造的一本关于UI交互动效的图书,书中结合了作者丰富的工作经验,通过大量交互动效的案例,从零开始全面阐述产品交互与动效表达的技术与方法。


全书共10章。第1~5章分别讲解交互设计概念、交互设计师必备知识、交互设计需要掌握的工具、产品交互实用文档、交互设计原则等;第6、7章分别讲解After Effects交互动效表达的基础与案例;第8章讲解响应式网站和H5动画的实现;第9章讲解Sketch工具的学习和应用;第10章讲解当前*流行的VR(虚拟现实)和AR(增强现实)中的交互设计逻辑。同时,书中相关案例的动效图,读者都可以扫描书中相应二维码进行查看,方便读者学习使用。


本书还赠送MG动效+APP动效视频小动画、260分钟UI交互动效基础操作视频、780分钟软件教学视频、教学用PPT课件以及全书案例素材文件,除此之外,还有专业团队为读者答疑解惑,方便读者学习。


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


大咖推荐

对于一名合格的设计师,无论是表达设计作品还是研发展示功能交互动效都很重要。本书作为入门级教材很好地讲述了平面UI动效的制作方法,通过大量有趣的小案例让初学者快速了解,软件基础和设计原理。

—— 网易游戏/视觉设计专家  Jack


UI设计师不仅要设计美观,更要从产品角度思考如何设计得更易用,操作更简单。但是往往大部分的设计师都缺乏系统的交互知识,导致工作交接的时候发生诸多不愉快,也无形中增加了设计师的工作量,导致常常加班改稿,苦不堪言。这本书从UI设计师实际工作出发,详细讲解了UI设计师在工作中要面对的各种设计任务,特别适合新手设计师阅读。

—— 学UI网  虎哥


UEgood优蝶教育是CCtalk平台上最受欢迎的设计类教育机构之一,有众多的铁杆粉丝,广受喜爱。本书凝结了交互、视觉、动效设计等理论和实操案例,融合当下火热的AR、VR知识,对交互设计从业人员具有非常全面的指导意义,并且配套有精品的网络课程,非常值得推荐。

—— 沪江CCtalk职业教育事业部总经理   景泉


随着互联网行业的发展,产品的动效设计已经由画龙点睛之笔变为非常基础且必要的内容,这也导致越来越多的公司要求设计师具备交互思维和动效设计的能力。雪姐不仅是一位非常资深的设计师和产品经理,同时也一直在关注和研究互联网的*动态,本书中的内容都是经过她精雕细琢才呈现在大家面前,本书把交互和动效结合在一起,不仅能帮助读者快速提升自己的技能,还能帮助大家更加全面系统化地构建知识体系,相信各位读完一定会有很大的收获。

—— 《动静之美——Sketch移动UI与交互动效详解》作者  黄方闻


UEgood是我们可靠的合作伙伴,在我们平台上拥有极高的用户口碑,质量好、价格优,本着一颗教育之心,惠及了众多渴望学习的同学,未来我们还将长期深入合作,让更多希望学习UI、UE,希望进入互联网领域的同学有知识可享,有好课可学,有能力的提升!

—— 虎课网


什么选择这本书?

随着智能大屏设备的普及,移动软件产品开发成本的降低,相关领域的大型公司纷纷成立了移动产品设计部,APP 创业型公司也如雨后春笋般崛起,如何快速地把市场需求转化成产品交互框架成为所有公司的迫切需求。这就要求无论是产品经理、程序员,还是UI界面设计人员,都需要学习相关的知识。传统的Axure RPPro软件虽然是一个非常好的交互流程线框原型工具,但是如果没有配套的业务知识来支撑,那么做出来的交互将会不够实用,商业性也不强。本书用一种新的思路和方式来阐述产品交互与动效表达的技术与方法。 


本书从零开始,详细地讲解了和交互有关的实用知识,可读性强,注重逻辑思维培养和从用户需求角度来考虑产品功能,帮助读者快速地建立起自己的产品交互框架。同时,本书弥补了市场上相关书籍缺乏的现状。不仅讲解了交互方面的逻辑思维方法,还安排了大量交互动效表达的案例,具体内容包括: 


第1~5章分别讲解交互设计是什么、交互设计师必备知识、交互设计工具和图、产品交互实用文档及功能分类、交互设计原则等;第6、7章分别讲解AE基础及MG动效、酷炫插件及APP动效;第8章讲解响应式网站和H5动画;第9章讲解Sketch学习捷径;第10章讲解VR(虚拟现实)和AR(增强现实)交互。 


本书还赠送MG动效+APP动效视频小动画、260分钟UI交互动效基础操作视频、780分钟软件教学视频、教学用PPT课件以及全书案例素材文件,除此之外,还有专业团队为读者答疑解惑,方便读者学习。 

诚意满满,包你满意。


如何购买


本书现已开启全网预售,下方渠道可直接购买,到货后第一时间通知并安排发货。手快有,手慢无,本书第一批印刷预定火爆,有意购买的朋友请抢先下手。


京东


特别提示,京东方面正在做促销活动,现在购买本书提供8.8折优惠,欲购从速。京东预售点到货通知,第一时间提醒您。


微店:


温馨提示,微店上架的是签名版,包邮!


淘宝:


京东链接也可以点下方原文阅读直接跳转。


为方便一些朋友了解本书,文末附上本书目录。


本书目录


第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 


最后祝大家学习快乐,早日掌握UI交互动效!

 


【声明】内容源于网络
0
0
视觉客AI
视觉客Imagekr:设计、教育、媒体、出版、产品..All In AI。中小企业服务设计平台、职业技能实训、新媒体、电商、平面、PPT、三维、视频、影视、动画、游戏、展览、AIGC、产品、HMI&UI设计,图书出版。
内容 298
粉丝 0
视觉客AI 视觉客Imagekr:设计、教育、媒体、出版、产品..All In AI。中小企业服务设计平台、职业技能实训、新媒体、电商、平面、PPT、三维、视频、影视、动画、游戏、展览、AIGC、产品、HMI&UI设计,图书出版。
总阅读44
粉丝0
内容298