UI移动端界面动画创意与实现

作者
王红卫
丛书名
出版社
机械工业出版社
ISBN
9787111612582
简要
简介
内容简介书籍计算机书籍 本书内容涉及手机、移动设备的UI动效设计基础、自然反馈动效设计、层级关系动效设计、愉悦的等待动效设计及打造活力视觉动效设计。
目录
前言
第1章 动效设计基础知识 1
1.1 什么是动效设计 2
1.2 动效设计方法 2
1.2.1 理解动效 2
1.2.2 动态设计举例 2
1.3 动效在界面设计中的用途 3
1.3.1 观察系统状态 3
1.3.2 导航和过渡 4
1.3.3 使用者的视觉反馈 4
1.3.4 加深印象 5
1.3.5 增强操控感 5
1.4 动效设计原则 5
1.4.1 舒适度的建立 5
1.4.2 令人愉悦的提示功能 6
1.4.3 额外增加界面活力 6
1.4.4 吸引用户的注意力 6
1.4.5 让等待变得更愉快 7
1.4.6 界面衔接的延续感 7
1.5 动效制作要素 8
1.5.1 响应的反馈 8
1.5.2 快速灵敏 8
1.5.3 简明清晰 9
1.5.4 目的性 9
1.5.5 过渡流畅自然 9
1.5.6 关联性 10
1.5.7 增强操纵 10
1.5.8 引导帮助 10
1.5.9 升华体验 11
1.6 动效设计重点 11
1.6.1 材质与空间 11
1.6.2 运动轨迹 11
1.6.3 时间表现力 12
1.6.4 个性化元素 12
1.6.5 导向设计 12
1.6.6 背景关系 13
1.6.7 交互共鸣 13
1.6.8 情感表现 14
1.6.9 聚焦动效 14
1.7 动效设计表现手法 14
1.7.1 拉伸与挤压 14
1.7.2 期望 15
1.7.3 入场 15
1.7.4 连续动作与姿态对应 16
1.7.5 重叠与跟随动作 16
1.7.6 动势渐进/渐出 16
1.7.7 次级运动 17
1.7.8 节奏时态 17
1.7.9 夸张 18
1.7.10 立体造型 18
1.7.11 吸引力 18
1.8 动效设计趋势 19
1.8.1 个性化元素 19
1.8.2 有趣的运动方式 19
1.8.3 交互反馈的生命力 20
1.9 动效设计常用的软件 20
1.9.1 Adobe After Effects 20
1.9.2 Adobe Photoshop 21
1.9.3 Adobe Animate(Flash) 21
1.9.4 pixate 21
1.9.5 Hype 3 22
第2章 自然反馈动效设计 23
2.1 登录框输入动效设计 24
2.2 照片操作动效设计 25
2.3 名片界面动效设计 27
2.4 书写动效设计 29
2.5 密码输入动效设计 31
2.6 邮箱登录界面动效设计 33
2.7 图像切换动效设计 36
2.8 拨号界面动效设计 38
2.8.1 绘制触控元件 39
2.8.2 制作结果动画 40
2.9 翻滚动效设计 42
2.9.1 制作主视觉动效 42
2.9.2 制作触控动效 44
2.10 确认按钮动效设计 45
2.10.1 制作触控按钮 45
2.10.2 制作结束动效 47
2.11 开关控件动效设计 48
2.11.1 绘制控件图形 49
2.11.2 绘制切换动画 50
2.12 换歌界面动效设计 52
2.12.1 制作光盘控件效果 52
2.12.2 制作装饰动画 53
2.13 滑动解锁动效设计 54
2.13.1 编辑状态动画 55
2.13.2 绘制触控图形 56
2.14 刷新动效设计 57
2.14.1 制作滑动效果 57
2.14.2 制作拉伸动效 58
2.14.3 添加文字动画 59
第3章 层级关系动效设计 61
3.1 收音机启动界面动效设计 62
3.2 相册界面切换动效设计 64
3.3 票务界面动效设计 66
3.4 音乐播放界面动效设计 68
3.4.1 制作选择动画 68
3.4.2 绘制控制动画元素 69
3.5 好友列表动效设计 70
3.5.1 制作动效元素 71
3.5.2 处理动画细节 71
3.6 分享动效设计 72
3.6.1 处理主体动画效果 73
3.6.2 制作跟随元素动画 74
3.7 图表数据动效设计 75
3.7.1 处理细节元素动画 76
3.7.2 制作主体状态动画 77
3.8 手表界面切换动效设计 78
3.8.1 绘制主界面动画 78
3.8.2 制作触控动画 79
3.9 卡片切换动效设计 80
3.9.1 制作主体动画 81
3.9.2 处理触控元素动画 82
3.10 系统提示动效设计 83
3.10.1 绘制主体动效元素 84
3.10.2 制作主界面反馈动画 86
3.10.3 制作文字动画 87
3.11 功能交互动效设计 88
3.11.1 制作状态栏动画 88
3.11.2 制作主体动画控件 89
3.11.3 处理反馈动画 91
3.12 卡片式登录界面动效设计 92
3.12.1 制作触控动画 92
3.12.2 制作输入状态 93
3.12.3 编辑确认动画 95
3.12.4 制作切换动画 96
3.13 待机滑动动效设计 98
3.13.1 制作主体状态动画 98
3.13.2 添加文字动画 99
3.13.3 制作细节元素动画 100
3.13.4 制作结果动画 101
3.14 备忘便签动效设计 102
3.14.1 为素材图像添加装饰 102
3.14.2 制作滑动动画 103
3.14.3 制作进度条进度动画 105
3.14.4 为进度条进度动画添加装饰 105
第4章 愉悦的等待动效设计 107
4.1 时钟插件动效设计 108
4.2 上传图示动效设计 109
4.3 抽奖转盘动效设计 111
4.4 数据应用loading动效设计 113
4.4.1 绘制界面状态 113
4.4.2 制作loading动画 115
4.5 卡通加载动效设计 116
4.5.1 制作进度条动效 116
4.5.2 制作气球动画 117
4.6 加载进度条动效设计 119
4.6.1 绘制进度条动画 119
4.6.2 制作转圈动画 120
4.7 提示动效设计 123
4.7.1 制作触发动效 123
4.7.2 制作回应动效 124
4.8 对错控件动效设计 125
4.8.1 制作正确动画效果 125
4.8.2 绘制出错动画效果 126
4.9 时间过渡动效设计 127
4.9.1 编辑转换效果 128
4.9.2 制作动画元素 128
4.10 云存储动效设计 130
4.10.1 绘制状态动画 130
4.10.2 制作提示效果 132
4.11 加载动效设计 133
4.11.1 制作主体图形动画 133
4.11.2 制作装饰动画 135
4.12 数据加载动效设计 136
4.12.1 编辑状态动画 136
4.12.2 制作提示元素 138
4.13 圆环进度动效设计 139
4.13.1 绘制圆形动画 139
4.13.2 添加文字跟随动画 140
4.14 下载进度动效设计 141
4.14.1 制作下载进度图形动画 142
4.14.2 绘制动画装饰图形 144
4.14.3 添加文字跟随动效 144
4.15 刷新动效设计 145
4.15.1 绘制手指图形 146
4.15.2 制作刷新动画 146
4.15.3 绘制纸风车 148
第5章 打造活力视觉动效 151
5.1 天气界面装饰动效设计 152
5.2 卡片切换动效设计 154
5.3 指南针动效设计 156
5.4 WiFi扫描图示动效设计 158
5.5 写实风扇动效设计 160
5.6 导航动效设计 161
5.6.1 制作动画路径 161
5.6.2 绘制导航动画元素 163
5.7 平板电脑界面动效设计 164
5.7.1 制作中间部分动画 164
5.7.2绘制边缘图形动画 165
5.8 点赞动效设计 167
5.8.1 制作图形动画 167
5.8.2 制作文字动画 168
5.9 运动统计动效设计 169
5.9.1 绘制触控元件 170
5.9.2 制作状态动画 172
5.10 频谱动效设计 174
5.10.1 制作频谱动画 174
5.10.2 制作进度条 175
5.11 图案解锁动效设计 176
5.11.1 制作界面滑动效果 177
5.11.2 制作装饰图形动效 178
5.12 天气状态动效设计 179
5.12.1 制作太阳动画 179
5.12.2 制作闪电动画 181
5.13 动感滑动动效设计 182
5.13.1 制作发光动效 182
5.13.2 绘制界面动效 183
5.13.3 制作文字动画 185
5.14 天气插件动效设计 186
5.14.1 绘制插件元素 187
5.14.2 制作文字动画 188
5.14.3 制作下雨动效 190
5.15 状态反馈动效设计 191
5.15.1 绘制基础图形 192
5.15.2 制作界面动画 193
5.15.3 处理细节效果 195
5.15.4 绘制触控元件 195


推荐

车牌查询
桂ICP备20004708号-3