比较Web App、Hybrid App与Native App的设计差异

比 较 设 计 差 异这 3 类 主 流 应 用 你 都 了 解 吗 ？ 设 计 师 除 了 要 有 视 觉 功 夫 ， 对 不 同 形 式 的 当 了 然 于 胸 ， 今 天 收 集 了 一 篇 非 常 全 面 的 总 结 ， 帮 你 迅 速 搞 定 3 类 主 流 计 方 法 ， 附 带 一 大 波 避 雷 针 ， 带 你 巧 妙 跳 过 计 的 雷 区 ， 涨 姿 势 是 分分 钟 刻 不 容 缓 的 事 咯 ！目 前 主 流 应 用 程 序 大 体 分 为 三 类 ： 、 向 对 比首 先 ， 我 们 来 看 看 什 么 是 . 采 用 言 写 出 的 不 需 要 下 载 安 装 。 类 似 于 现 在 所 说 的轻 应 用 。 生 存 在 浏 览 器 中 的 应 用 ， 基 本 上 可 以 说 是 触 屏 版 的 网 页 应 用 。优 点（ 1 ） 开 发 成 本 低 ，（ 2 ） 更 新 快 ，（ 3 ） 更 新 无 需 通 知 用 户 ， 不 需 要 手 动 升 级 ，（ 4 ） 能 够 跨 多 个 平 台 和 终 端 。缺 点 ：（ 1 ） 临 时 性 的 入 口（ 2 ） 无 法 获 取 系 统 级 别 的 通 知 ， 提 醒 ， 动 效 等 等（ 3 ） 用 户 留 存 率 低（ 4 ） 设 计 受 限 制 诸 多（ 5 ） 体 验 较 差2 . 是 半 原 生 半 合 类 需 要 下 载 安 装 ， 看 上 去 类 似 但 只 有 很 少 的 访 问 的 内 容 是 例 如 的 新 闻 类 视 频 类 遍 采 取 的 是 框 架 ， 内容 。 力 去 打 造 类 似 于 体 验 ， 但 仍 受 限 于 技 术 ， 网 速 ， 等等 很 多 因 素 。 尚 不 完 美 。3 . 的 是 原 生 程 序 ， 一 般 依 托 于 操 作 系 统 ， 有 很 强 的 交 互 ， 是 一 个 完 整的 可 拓 展 性 强 。 需 要 用 户 下 载 安 装 使 用 。优 点 ：（ 1 ） 打 造 完 美 的 用 户 体 验（ 2 ） 性 能 稳 定（ 3 ） 操 作 速 度 快 ， 上 手 流 畅（ 4 ） 访 问 本 地 资 源 （ 通 讯 录 ， 相 册 ）（ 5 ） 设 计 出 色 的 动 效 ， 转 场 ，（ 6 ） 拥 有 系 统 级 别 的 贴 心 通 知 或 提 醒（ 7 ） 用 户 留 存 率 高缺 点 ：（ 1 ） 分 发 成 本 高 （ 不 同 平 台 有 不 同 的 开 发 语 言 和 界 面 适 配 ）（ 2 ） 维 护 成 本 高 （ 例 如 一 款 更 新 至 本 ， 但 仍 有 用 户 在 使 用 本 ， 需 要 更 多 的 开 发 人 员 维 护 之 前 的 版 本 ）（ 3 ） 更 新 缓 慢 ， 根 据 不 同 平 台 ， 提 交 审 核 上 线 等 等 不 同 的 流 程 ， 需 要 经 过 的流 程 较 复 杂二 、 术 特 性由 上 图 可 见 ， 开 发 基 于 言 。 而 言 本 身 又 有 着 不 可避 免 的 局 限 性 。 正 是 这 些 局 限 性 的 存 在 ， 使 得 体 验 中 要 逊 于 、 限 制 因 素 及 设 计 要 点相 比 验 中 受 限 于 以 上 5 个 因 素 ： 网 络 环 境 ， 渲 染 性 能 ，平 台 特 性 ， 受 限 于 浏 览 器 ， 系 统 限 制 。1 . 网 络 环 境 ， 渲 染 性 能 网 络 环 境 的 依 赖 性 较 大 ， 因 为 的 面 ， 当 用 户 使 用 时 ，去 服 务 器 请 求 显 示 页 面 。 如 果 此 时 用 户 恰 巧 遇 到 网 速 慢 ， 网 络 不 稳 定 等 其 他 环 境时 ， 用 户 请 求 页 面 的 效 率 大 打 折 扣 ， 在 用 户 使 用 中 会 出 现 不 流 畅 ， 断 断 续 续 的不 良 感 受 。 同 时 ， 术 自 身 渲 染 性 能 较 弱 ： 对 复 杂 的 图 形 样 式 ， 多 样 的 动 效 ，自 定 义 字 体 等 的 支 持 性 不 强 。因 此 ， 基 于 网 络 环 境 和 渲 染 性 能 的 影 响 ， 在 设 计 面 时 ， 应 注 意 以 下 几 点 ： 简 化 不 重 要 的 动 画 /动 效 简 化 复 杂 的 图 形 文 字 样 式 减 少 页 面 渲 染 的 频 率 和 次 数从 下 图 移 动 比 后 可 以 看 出 ： 页 去 除冗 余 的 功 能 ， 回 溯 本 源 ， 只 给 用 户 提 供 了 初 的 本 质 需 求 电 台 。 既符 合 简 功 能 又 达 到 了 突 出 核 心 功 能 的 设 计 原 则 。 无 疑 给 用 户 眼 前 一 亮 的 气息 。重 要 的 并 不 是 我 们 提 供 的 信 息 量 有 多 大 ， 而 是 我 们 能 否 给 他 们 提 供 真 正 需 要 的 信息 。 用 户 是 否 真 的 在 意 准 确 的 信 息 ？再 如 ： 百 度 最 新 推 出 的 直 达 号 ， 以 良 子 健 身 为 例 ：从 百 度 直 达 号 ） 的 对 比 中 ， 我 们 可 以 看 出 子以 九 宫 格 的 形 式 展 现 ， 且 属 于 双 重 导 航 ， 功 能 入 口 太 多 ； 弊 端 是 用 户 不 知 道 聚 焦在 哪 里 ， 分 散 用 户 的 注 意 力 。 而 良 子 整 合 并 减 少 了 导 航 的 入 口 ， 增 强 用户 的 专 注 度 ； 界 面 清 爽 ， 整 洁 ， 很 好 地 传 达 了 良 子 本 身 的 寓 意 轻 松 、 愉 悦 、休 闲 、 舒 适 。2 . 受 限 于 浏 览 器通 常 存 于 浏 览 器 里 ， 宿 主 是 浏 览 器 。 不 同 的 浏 览 器 自 身 的 属 性 不 尽相 同 ， 如 ： 浏 览 器 自 带 的 手 势 ， 页 面 切 换 方 式 ， 链 接 跳 转 方 式 ， 版 本 兼 容 问 题 等等 。例 如 下 图 ： 览 器 和 百 度 浏 览 器 自 身 支 持 手 势 切 换 页 面 。 手 指 从 左 侧 滑 动 页面 ， 返 回 至 上 一 级 。 百 度 手 机 助 手 面 ， 顶 部 持 手 势 左 右 滑 动 切 换 。这 一 操 作 与 浏 览 器 自 身 手 势 是 冲 突 的 。再 如 ， 基 于 浏 览 器 的 打 开 新 的 模 块 中 的 页 面 时 ， 大 多 会 新 开 窗 口 来展 现 。 例 如 用 户 在 使 用 购 物 类 ， 浏 览 每 日 精 选 模 块 时 ， 每 当 打 开 新 的 商品 时 ， 默 认 新 开 一 个 窗 口 。 这 样 的 优 劣 势 显 而 易 见 ： 优 势 是 能 够 记 录 用 户 浏 览过 的 痕 迹 ， 浏 览 过 的 商 品 ， 以 便 后 续 横 向 对 比 ； 劣 势 是 过 多 的 页 面 容 易 使 用 户 迷失 在 页 面 中 。正 如 发 手 册 里 描 述 ： 当 用 户 打 开 一 个 时 候 ， 他 们 期 待 这 个应 用 就 像 是 一 个 单 个 应 用 ， 而 不 是 一 系 列 网 页 的 结 合 。 然 而 ， 什 么 情 况 下 需 要 跳转 页 面 ， 什 么 情 况 下 在 当 前 页 面 展 示 则 需 要 设 计 师 细 致 考 量 。因 此 ， 于 浏 览 器 的 特 性 ， 从 设 计 角 度 应 该 遵 循 以 下 了 两 点 ：少 用 手 势 ， 避 免 与 浏 览 器 手 势 冲 突 。减 少 页 面 跳 转 次 数 ， 尽 量 在 当 前 页 面 显 示 。3 . 系 统 限 制 ， 平 台 特 性由 于 言 的 技 术 特 性 ， 无 法 调 用 系 统 级 别 的 权 限 。 例 如 ， 系 统 级 别 的 弹 窗 ，系 统 级 别 的 通 知 ， 地 理 信 息 ， 通 讯 录 ， 语 音 等 等 。 且 与 系 统 的 兼 容 性 也 会 存 在 一些 问 题 。 以 上 限 制 通 常 导 致 拓 展 性 不 强 ， 体 验 相 对 较 差 。 例 如 百 度 地 图 ： 地 图 基 于 浏 览 器 展 现 ， 因 此 ， 不 能 全 屏 显 示 地 图 ， 给 用 户 的 眼 界 带 来 局限 感 ； 相 反 ， 地 图 以 全 屏 展 现 的 形 式 ， 很 好 的 拓 展 了 用 户 的 视 野 。 整个 界 面 干 净 简 洁 ， 首 页 去 除 冗 余 功 能 。在 制 定 路 线 的 体 验 中 ， 如 图 ： 地 图 耗 费 的 流 量 大 于 ， 且 不 能 预 先 缓 存 离 线 地 图 。 对 于 地 理 位置 的 判 断 也 是 基 于 宿 主 浏 览 器 ， 而 非 图 本 身 。 获 取 路 线 后 ， 对 于 更 换 到达 方 式 ， 相 对 来 说 是 不 便 利 的 。相 反 ， 地 图 ， 能 够 直 接 访 问 用 户 的 地 理 位 置 ， 能 够 很 清 晰 的 为 用 户 展现 划 的 路 线 ， 并 能 轻 松 的 查 看 多 种 路 线 方 案 ， 以 便 做 出 符 合 自 己 的 最 佳方 案 。 对 于 切 换 公 交 ， 走 路 ， 自 驾 等 路 线 方 式 也 是 只 需 一 键 操 作 。 地 图 相 对 于 地 图 增 加 更 多 情 感 化 ， 易 用 的 功 能 ， 如 ： 能 够 记 录用 户 的 生 活 轨 迹 ， 记 录 用 户 的 点 滴 足 迹 ， 能 够 享 受 躲 避 拥 堵 方 案 等 。 而 地 图 基 于 技 术 框 架 ， 很 难 实 现 以 上 功 能 ， 从 用 户 体 验 角 度 来 看 ， 弱 于 地 图 。四 、 小 结综 述 所 述 ， 在 设 计 ， 应 当 遵 循