当前位置:经管资料网行业分类IT互联网网页设计:H5开发设计与运营教程-472页

网页设计:H5开发设计与运营教程-472页

45.7 MB
中文
70
计点资料
2020
472页
PDF [下载阅读器]
2022-09-02 10:03:40
推荐星级
IT互联网计算机|网页设计
行业分类 | IT互联网

网页设计:H5开发设计与运营教程简介

在移动社交媒体爆棚的时代,H5以其独特的形态,在资讯传播、用户互动、信息可视化等方面具有无可比拟的优势,能够帮助企业与用户迅速建立情感联系,帮助用户加深对品牌和产品的认知,已成为当下重要的信息传播渠道与手段之一。本书从H5运营与设计入手,系统地介绍了H5的开发流程与策略,以及H5页面风格设计、图文设计、影音设计、动效设计、创意优化和推广引流等知识。

本书内容新颖,结构清晰,既适合各个行业的H5设计人员、新媒体广告美工,以及H5设计初学者和爱好者等阅读学习,也可作为本科院校及职业院校新媒体相关专业的教学用书。

目录
第1章 H5:强互动的微场景体验
1.1 什么是H5
1.1.1 认识H5
1.广义上的H5
2.狭义上的H5
1.1.2 H5与App的区别
1.App和H5的优势和劣势
2.App中的H5
3.H5设计的局限性
1.2 H5营销的优势
1.跨平台
2.低成本
3.高传播
1.3 H5的应用场景
1.商业促销
2.互动活动
3.海报宣传
4.活动邀请
5.客户管理
6.电商引流
7.分享展示
8.简历吊片
9.节日贺卡
10.公益宣传
1.4 H5的应用类型
1.4.1 展示类
1.4.2 全景/VR类
1.4.3 视频类
1.4.4 动画类
1.4.5 交互动画类
1.4.6 模拟类
1.4.7 合成类
1.4.8 数据应用类
1.4.9 游戏类
1.4.10 跨屏类
1.4.11 综合类
课后习题
第2章 运营规划:开发H5的流程与策略
2.1 开发H5的基本流程
1.项目经理:统筹全局
2.策划:方案制作
3.设计:视觉设计
4.开发:技术开发、测试、上线、数据监控反馈
2.2 开发H5的细节规范
2.2.1 选择合适的浏览器
2.2.2 页面尺寸匹配手机屏幕
2.2.3 优化设计细节
1.设置提示
2.设计分享浮层
3.文案符合主题
4.返回按钮设置
5.分段设置
6.增加彩蛋
2.2.4 优化H5的性能
1.加载优化
2.脚本执行优化
3.CSS优化
4.JavaScript优化
5.渲染优化
2.3 打造爆款H5的策略
2.3.1 充电增值
2.3.2 娱乐消遣
2.3.3 情感共鸣
2.3.4 利益驱使
2.3.5 自我展示
2.3.6 创意创新
2.3.7 热门话题
2.3.8 内容精致
2.3.9 多样交互
2.3.10 风格统一
第3章 H5页面风格设计:营造极具冲击力的视觉氛围
3.1 常见的H5页面风格
3.1.1 简约风格
3.1.2 扁平化风格
3.1.3 科技感风格
3.1.4 卡通手绘风格
3.1.5 水墨风格
3.1.6 手绘风格
3.1.7 混合风格
3.2 H5页面色彩设计
3.2.1 H5页面设计中常用的配色方案
1.三阶配色方案
2.多色调搭配方案
3.2.2 H5页面色彩设计策略
1.H5页面色彩的整体布局
2.色彩是页面主题氛围传达的关键
3.重视用户对色彩的情感体验
3.2.3 常用的H5配色工具
1.Coolors
2.Adobe Kuler
3.ColorDrop
4.Colormind
第4章 图文设计:用高颜值图文提升画面质感
4.1 H5页面版式设计
4.1.1 页面有层级,元素要统一
4.1.2 页面信息排版
1.对齐
2.重夊
3.对比
4.亲密性
4.1.3 可视化页面信息
4.1.4 适当的留白
4.1.5 保持页面视觉平衡
4.1.6 运用插画
4.1.7 版面符合视觉心理
4.2 H5页面图片设计
4.2.1 提高或降低图版率
4.2.2 使用全图和局部细节图片
4.2.3 使用图标
4.2.4 压缩图片大小
4.3 H5页面文本设计
1.标题的格式
2.标题的设计
3.控制正文信息量
4.设置字体
5.设置正文字号和颜色
6.设置间距
7.设置对齐方式
8.添加文字装饰
9.设置文字层级
4.4 实战案例——制作邀请函H5页面
4.4.1 使用Photoshop制作邀请函首页
4.4.2 将PSD文件导入H5页面
第5章 影音设计:增强H5画面的张力氛围
5.1 H5动画/视频设计
5.1.1 H5动画/视频制作策略
1.增强用户与H5视频的交互体验
2.添加有趣的loading画面
3.视频时长与大小要符合用户心理接受范围
4.合理设置视频页面功能
5.1.2 常用的H5动画/视频制作工具
1.After Effects
2.Premiere
3.模板制作工具
5.1.3 实战案例——使用易企秀制作健身会所宣传视频
5.2 H5背景音乐/音效设计
5.2.1 H5背景音乐/音效的重要性
1.推动视频情节发展
2.渲染H5场景氛围
3.符合H5主题和内容
5.2.2 为H5页面添加背景音乐/音效
1.选择纯音乐而非歌曲
2.音乐的长度与体积适中
3.为音乐设置过渡效果
5.3 H5音乐素材的搜集与编辑
5.3.1 搜集音效素材的渠道
1.Adobe免费音效库
2.FindSounds
3.FreeSFx
4.OpenGameArt
5.5ound Jay
6.音乐网站搜索平台
5.3.2 实战案例——使用Audition制作H5背景音乐
第6章 动效设计:打造H5页面交互体验
6.1 H5页面动效实现方法
1.GIF动画
2.视频动画
3.逐帧动画
4.CSS3动画
5.5VG动画
6.canvas动画
7.JavaScript
8.Animate CC动画转canvas
6.2 优化H5页面动效
6.2.1 翻页动效
6.2.2 页面元素动效
1.设置动效展示的层级
2.限制动效的种类
3.根据素材类型选用动效
4.控制动效展示时间
6.2.3 功能性动效
6.2.4 对象的线性运动动效
6.2.5 元素的形变动效
6.2.6 平移与缩放动效
6.2.7 视差动效
6.2.8 维度动效
6.3 实战案例——使用易企秀制作H5动效页面
第7章 创意优化:用高端创意打造刷屏级H5
7.1 创作富有“情感”的H5
7.1.1 挖痛点
7.1.2 戳泪点
7.1.3 找共鸣
7.1.4 代入感
7.2 借助超级IP形成创意主题
7.2.1 人气公知IP主题
7.2.2 古文化IP主题
7.3 H5创意文案的撰写
7.3.1 确定主题
1.根据目标确定主题
2.根据受众确定主题
7.3.2 拟定标题
7.3.3 创意内容
7.4 运用热门技术打造H5炫酷画面
7.4.1 基于传感器
1.陀螺仪
2.地理位置
3.人脸识别
4.webRTC
7.4.2 基于触摸屏操作
1.单屏滚动
2.手势操作
3.全景交互
4.多屏互动
7.4.3 基于画面呈现
1.视频/动画展示
2.图片裁剪和形变
7.5 设计趣味玩法增加H5的互动性
7.5.1 抽奖活动
7.5.2 抢红包活动
7.5.3 投票问卷
7.5.4 趣味小游戏
7.5.5 场景模拟
第8章 H5制作工具:易企秀的使用
8.1 H5基本编辑
8.1.1 认识易企秀H5编辑器
8.1.2 文本编辑
8.1.3 图片编辑
8.1.4 背景编辑
8.1.5 形状编辑
8.1.6 添加音乐
8.1.7 页面设置
8.1.8 使用特效
8.1.9 使用动画
8.1.10 使用触发
8.2 使用易企秀H5编辑器组件
8.2.1 使用常用组件
1.“视频”组件
2.“外链视频”组件
3.“图集”组件
4.“链接”组件
8.2.2 使用基础组件
1.“电话”组件
2.“音效”组件
3.“计数”组件
4.“统计”组件
8.2.3 使用高级组件
1.“计时”组件
2.“地图”组件
3.“二维码”组件
4.“日期”组件
5.“快闪”组件
6.“点击截图”组件
7.“画板”组件
8.“投票”组件
9.“随机事件”组件
10.“动态数字”组件
8.2.4 使用微信组件
1.“头像”组件
2.“声音”组件
3.“照片”组件
4.“照片墙”组件
8.2.5 使用AI组件
1.“自说字画”组件
2.“立体魔方”组件
8.3 使用易企秀H5编辑器表单
8.3.1 使用常用表单组件
1.“联系人”和“输入框”表单组件
2.“提交按钮”表单组件
3.“短信验证”表单组件
4.“留言板”表单组件
8.3.2 使用基础表单组件
1.“单选”表单组件
2.“多选”表单组件
3.“下拉列表”表单组件
4.“评分”表单组件
5.“上传附件”表单组件
8.3.3 使用高级表单组件
第9章 H5制作实战:使用易企秀制作H5
9.1 实战案例——企业宣传与邀请函翻页型H5的制作
9.1.1 制作企业宣传H5
1.选择并设置模板
2.制作H5首页
3.制作快闪页面
4.使用模板页面并进行修改
5.制作长页面
9.1.2 制作邀请函H5
9.2 实战案例——企业招聘长页型H5的制作
9.3 实战案例——调查问卷表单型H5的制作
9.4 实战案例——翻牌游戏互动型H5的制作
第10章 推广引流:优质渠道诱发H5裂变式传播
10.1 微信推广引流
10.1.1 通过微信好友推广H5
10.1.2 通过微信群推广H5
10.1.3 通过朋友圈推广H5
10.2 App推广引流
10.3 新媒体平台推广引流
10.4 线下活动推广引流
10.5 二维码推广引流

全部

  • 热门评论
  • 全部评论
       评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论
    [回复] 7游客   打分:100 分  发表时间:2022-09-23
    · 很好
    [回复] 6游客   打分:100 分  发表时间:2022-09-23
    · 122
    [回复] 5游客   打分:100 分  发表时间:2022-09-23
    · 能否免费下载
    [回复] 4*7713557392   打分:100 分  发表时间:2022-09-18
    · 我也要下载
   评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论
[回复] 7游客   打分:100 分  发表时间:2022-09-23
· 很好
[回复] 6游客   打分:100 分  发表时间:2022-09-23
· 122
[回复] 5游客   打分:100 分  发表时间:2022-09-23
· 能否免费下载
[回复] 4*7713557392   打分:100 分  发表时间:2022-09-18
· 我也要下载
发表评论
10085分70分55分40分25分10分
*

勾选,报告编辑

热门标签