腾讯案例三剑客探究HTML5页面的不同表现手法

《腾讯案例三剑客探究HTML5页面的不同表现手法》由会员分享，可在线阅读，更多相关《腾讯案例三剑客探究HTML5页面的不同表现手法（25页珍藏版）》请在金锄头文库上搜索。

1、腾讯案例三剑客！探究 HTML5 页面的不同表现手法雅 菲 ： 最 近 半 年 一 直 在 负 责 雷 霆 战 机 和 天 天 酷 跑 的 项 目 ， 以 偏品 牌 建 设 和 创 意 营 销 为 主 ， 在 风 格 上 尝 试 了 手 绘 的 表 现 形 式 ， 这次 和 大 家 分 享 下 其 中 的 设 计 经 验 。雷霆战机 TVC HTML5 页面文 艺 、 走 心 的 手 绘 风 格项 目 背 景雷 霆 战 机 周 年 庆 ， 项 目 组 为 雷 霆 进 行 了 拍 摄 了 一 部 品 牌 短 片 ， 围绕 整 个 影 片 策 划 了 一 个 HTML5 页 面 对 其 进 行 传

2、 播 。视 频 主 要 内 容 讲 述 几 个 小 朋 友 从 小 心 怀 对 星 空 的 梦 想 ， 通 过 不 断研 究 学 习 长 大 后 当 上 了 航 天 工 作 者 完 成 了 自 己 一 直 的 梦 想 ， 来 阐述 如 今 繁 华 社 会 里 仍 有 千 千 万 万 不 断 追 随 自 己 的 内 心 的 人 。 引 发大 家 对 天 空 的 梦 想 的 共 鸣 走 情 感 路 线 。前 期 构 思本 次 尝 试 了 2 套 方 向 展 现 围 绕 视 频 内 容 的 静 帧 截 图 直 接 展 示 ，主 打 宇 宙 情 怀 的 手 绘 风 格 文 艺 的 展 示 。此 前 移

3、 动 端 上 大 多 是 以 单 页 大 长 图 +视 频 按 钮 进 行 宣 传 的 方 式 ，作 为 首 个 尝 试 试 水 两 种 方 向 对 最 终 视 频 造 成 的 转 化 率 影 响 。风 格 推 导风 格 一视 频 元 素 提 取 ：根 据 其 视 频 提 取 关 键 元 素 ： 收 音 机 、 天 文 望 远 镜 、 宇 宙 飞 船 、 风铃 。整 体 氛 围 围 绕 四 个 关 键 词 科 幻 、 复 古 、 文 艺 和 走 心 。于 是 最 终 采 用 牛 皮 纸 背 景 来 展 现 复 古 +手 绘 主 元 素 使 科 幻 主 题 更添 亲 和 力 增 添 情 怀 ，

4、不 同 于 以 往 的 写 实 风 。为 了 在 手 机 上 更 生 动 的 展 示 ， 每 一 个 元 素 搭 配 小 动 画 来 使 手 绘 的物 件 更 具 有 生 命 力 （ 例 收 音 机 动 画 ： 打 开 天 线 搜 频 搜 到声 音 ） 。 一 段 描 述 性 的 文 案 搭 配 小 动 画 增 加 画 面 故 事 的 完 整 性 ，同 时 配 合 空 灵 的 背 景 声 效 ， 让 用 户 在 体 验 HTML5 页 面 的 时 候 ，在 符 合 移 动 端 用 户 体 验 同 时 让 用 户 在 视 觉 、 听 觉 上 感 受 到 情 怀 产生 共 鸣 。数 据 表 现 ：

5、周 累 计 PV： 103， ,662 周 累 计 UV： 80,799最 后 一 屏 触 达 率 ： 66% 启 动 游 戏 转 化 率 ： 23%丰 富 的 CSS3 场 景 动 画 以 及 走 心 的 文 案 加 上 风 铃 的 音 乐 ， 产 生 用户 的 共 鸣 。成 效 要 点 ：1. 一 共 7 屏 ， 最 后 一 屏 触 达 率 达 66%。2. 整 个 专 题 从 加 载 到 加 载 完 成 仅 23%的 流 失关于项目的思考：1. TVC 的 推 广 ， 使 用 视 频 本 身 元 素 和 再 创 作 元 素 ， 对 于 传 播 哪 一个 更 合 适 ？一 开 始 老 板

6、担 心 跟 视 频 本 身 的 结 合 度 不 够 ， 项 目 组 对 于 手 绘 风 格与 游 戏 内 风 格 差 异 大 有 所 担 忧 ， 于 是 首 推 的 是 静 帧 视 频 截 图 版 本 ，出 于 探 究 精 神 我 们 在 微 信 公 众 账 号 对 手 绘 版 本 进 行 传 播 。（ 当 时 老 板 的 担 心 ， 项 目 组 的 倾 向 ， 设 计 团 队 的 坚 持 ， 最 终 加 推后 的 数 据 反 馈 ）从 最 终 的 数 据 可 以 看 到 ， 手 绘 版 本 在 只 有 唯 一 宣 传 入 口 （ 微 信公 众 账 号 ） 和 视 频 静 帧 有 多 方 的

7、宣 传 渠 道 的 对 比 下 ， 两 者 的 数 据达 到 相 当 ， 且 手 绘 版 本 的 点 击 全 文 阅 读 量 远 高 于 以 往 文 章 点 击 量 ，由 此 可 见 在 创 作 元 素 来 宣 传 视 频 并 无 影 响 ， 游 戏 用 户 更 多 是 乐 于接 受 不 同 风 格 的 尝 试 。2. 手 绘 插 画 类 型 的 HTML5 页 面 ， 在 设 计 和 重 构 阶 段 应 该 注 意的 问 题A 给 到 重 构 的 psd 文 件 分 层 将 每 个 元 素 合 理 打 包 能 减 少 重 构 负担 提 高 工 作 效 率 ， 将 主 元 素 转 化 为 智

8、能 对 象 和 背 景 分 开 ， 若 主 元素 内 有 单 独 需 要 动 画 的 部 件 ， 再 另 外 区 分 开 来 。3. HTML5 页 面 需 要 的 插 画 类 型 与 传 统 插 画 的 区 别A 由 于 手 机 屏 幕 的 限 制 ， 一 屏 内 出 现 一 个 主 要 元 素 最 为 舒 适 ，更 容 易 引 导 用 户 在 体 验 中 看 到 重 点 。 画 面 排 版 过 满 容 易 分 散 用 户注 意 力 失 去 焦 点 。B 矢 量 扁 平 风 格 的 插 画 和 可 复 用 背 景 能 大 大 减 少 文 件 包 大 小 提升 加 载 速 度 。C 简 单 的

9、 图 形 加 上 微 妙 的 肌 理 感 能 瞬 间 提 升 画 面 质 感 。雷霆战机世界观神 秘 、 玄 幻 、 让 用 户 了 解 雷 霆 世 界 观项 目 背 景刘 慈 欣 为 雷 霆 战 机 撰 写 世 界 观 ， 整 个 故 事 阐 述 了 3 个 关 键 观 点 ：平 行 宇 宙 、 时 间 旅 行 及 黑 洞 。通 过 移 动 端 为 新 老 用 户 传 递 及 巩 固 雷 霆 世 界 观 。创 意 过 程以 往 的 雷 霆 风 格 比 较 偏 写 实 派 ， 与 游 戏 内 风 格 类 似 ， 而 这 次 世界 观 中 的 每 一 个 观 点 都 各 不 相 同 各 自 背

10、后 有 着 庞 大 的 科 学 背 景 支撑 ， 最 终 我 们 决 定 用 3 期 来 分 别 详 细 阐 述 每 一 个 观 点 ， 增 强 雷 霆科 幻 的 专 业 性 塑 造 品 牌 感 。 视 觉 上 分 别 用 不 同 的 展 现 风 格 来 对 其每 一 个 观 点 进 行 阐 述 。分 为 3 期 进 行 ： 平 行 宇 宙 时 间 旅 行 黑 洞 。我 们 不 希 望 用 纯 文 字 去 解 释 这 些 学 术 观 点 会 显 得 枯 燥 乏 味 且 未 必能 精 准 传 达 ， 最 终 我 们 决 定 将 HTML5 页 面 做 成 一 个 有 故 事 背 景贯 穿 的 轻

11、 游 戏 的 方 式 ， 在 过 程 中 设 计 了 几 个 互 动 点 让 用 户 能 潜 移默 化 从 中 感 受 到 我 们 所 传 达 的 “平 行 宇 宙 ”的 概 念 ， 其 中 讲 几 个 关键 节 点 设 计 了 互 动 设 计 ， 几 个 图 像 。我 们 把 HTML5 页 面 包 装 成 一 个 故 事 ， 用 第 一 人 称 视 角 带 领 用 户去 体 验 整 个 过 程 ， 故 事 中 主 人 翁 “我 ”代 表 用 户 ， 打 开 这 个 页 面 就表 示 “我 ”已 被 选 中 ， 在 太 空 中 漂 浮 了 100 年 ， 我 需 要 通 过 选 择 正确 的

12、 宇 宙 穿 越 才 能 找 到 平 行 宇 宙 中 的 同 盟 者 ， 将 其 带 回 来 完 成 拯救 地 球 的 任 务 整 个 HTML5 页 面 的 交 互 体 验 ：风 格 推 导整 个 HTML5 页 面 视 觉 与 文 案 的 比 重 为 1:1， 我 们 不 希 望 视 觉 过于 繁 琐 而 重 心 偏 离 ， 所 以 整 体 走 灰 白 +重 点 标 彩 色 的 水 彩 扁 平 风格 ， 让 画 面 与 文 案 重 心 相 当 互 不 干 扰 。互 动 设 计将 故 事 几 个 关 键 节 点 处 设 置 了 操 作 按 钮 与 用 户 进 行 互 动 ， 用 户 完成 点

13、 击 才 能 继 续 走 下 去 ， 强 调 用 户 “我 ”的 主 人 翁 意 识 加 强 身 临 其境 的 感 受 ， 让 故 事 更 加 立 体 感 。互 动 设 计 1： （ 醒 来 ）互 动 设 计 2： （ 拯 救 ）互 动 设 计 3： （ 搜 集 ）互 动 设 计 4： （ 激 活 ）互 动 设 计 5： （ 选 择 平 行 宇 宙 ）选 择 平 行 宇 宙贴 合 刘 慈 欣 的 世 界 观 里 指 出 的 观 点 ， 将 平 行 宇 宙 设 计 成 了 9 个宇 宙 ， 因 为 它 具 有 一 定 的 科 学 性 质 ， 所 以 把 整 个 生 物 进 化 论 与9 个 宇

14、宙 结 合 ， 为 了 表 达 出 其 观 点 “数 字 越 小 ， 离 本 宇 宙 差 异 越大 ”， 所 以 进 行 了 差 异 化 顺 序 排 列 ， 让 用 户 能 在 体 验 中 通 过 图 像来 理 解 其 奥 义 。1=意 识 时 空2=单 细 胞 宇 宙3=海 洋 生 物4=猿 人5=小 时 候 的 我6=人 工 智 能7=人 是 养 料8=全 机 器 时 期9=二 维 空 间穿 越 画 面 ：穿 越 到 每 个 平 行 宇 宙 中 搭 配 一 段 有 诱 导 性 的 文 案 来 混 淆 视 听 ， 增加 娱 乐 游 戏 感 ：故 事 最 终 会 有 两 种 结 果 状 态 ，

15、 未 找 到 盟 友 地 球 毁 灭 或 者 找 到 正 确的 盟 友 但 带 回 的 是 希 望 还 是 灾 难 ？ 敬 请 期 待 引 出 下 一 期 （ 时 间 旅行 ） 。整 个 HTML5 页 面 配 合 了 小 动 画 和 小 音 效 展 现 ， 然 而 故 事 最 后 是否 寻 找 到 正 确 答 案 并 不 是 页 面 的 重 点 ， 我 们 所 期 许 的 ， 是 通 过 这样 一 种 试 听 体 验 ， 更 直 观 的 传 达 “平 行 宇 宙 ”这 一 概 念 ， 引 发 思 考增 强 雷 霆 品 牌 感 。小 结 ：不 是 画 出 来 就 好 了 ， HTML5 页 面

16、 是 视 听 的 融 合 ， 巧 妙 的 动 画 可以 为 页 面 加 分 ， 适 当 的 音 效 让 故 整 个 验 能 更 加 生 动 和 立 体 。关于项目的思考：1. 较 大 型 的 互 动 HTML5 项 目 前 期 最 重 要 的 工 作A 对 于 交 互 的 梳 理刘 慈 欣 的 文 章 甚 至 可 以 拍 出 一 部 戏 来 ， 其 信 息 量 对 于 移 动 端 来说 巨 大 ， 何 不 帮 助 用 户 消 化 故 事 ， 将 剧 中 的 主 要 观 点 提 取 出 来 ，解 构 再 重 组 成 一 个 适 合 移 动 端 的 小 故 事 。而 故 事 性 HTML5 页 面 ， 与 以 往 普 通 的 页 面 有 所 不 同 ， 故 事 性 的流 畅 、 段 落 节 点 都 至 关 重 要 ， 前 期 的 交 互 草 图 就 必 不 可 少 了 ， 能避