1、#*概 要微 信 小 程 序 设 计 的 基 本 原 则 是 微 信 设 计 中 心 针 对 在 微 信 内 上 线 的 小 程 序 页 面 总 结 的 设计 指 南 及 建 议 。 以 下 设 计 原 则 都 是 基 于 对 用 户 的 尊 重 的 基 础 上 的 ， 旨 在 微 信 生 态 内 建 立友 好 、 高 效 、 一 致 的 用 户 体 验 的 同 时 ， 最 大 程 度 顺 应 和 支 持 各 业 务 需 求 设 计 ， 实 现 用 户与 程 序 的 共 赢 。一 、 友 好 礼 貌为 了 避 免 用 户 在 微 信 中 使 用 小 程 序 服 务 时 ， 注 意 力 被 周
2、围 复 杂 环 境 干 扰 ， 小 程 序 在 设计 时 应 该 注 意 减 少 无 关 的 设 计 元 素 对 用 户 目 标 的 干 扰 ， 礼 貌 地 向 用 户 展 示 程 序 侧 提 供 的服 务 ， 友 好 地 引 导 用 户 进 行 操 作 。1. 重 点 突 出每 个 页 面 都 应 有 明 确 的 重 点 ， 以 便 于 用 户 每 进 入 一 个 新 页 面 的 时 候 都 能 快 速 地 理 解 页面 内 容 ， 在 确 定 了 重 点 的 前 提 下 ， 应 尽 量 避 免 页 面 上 出 现 其 他 干 扰 项 影 响 用 户 的 决 策 和操 作 。反 例 示 意此
3、 页 面 的 主 题 是 查 询 ， 却 添 加 了 诸 多 与 查 询 不 相 关 的 业 务 入 口 ， 与 用 户 的 预 期 不 符 ，易 造 成 用 户 的 迷 失 。#*纠 正 示 意去 掉 任 何 与 用 户 目 标 不 相 关 的 内 容 ， 明 确 页 面 主 题 ， 在 技 术 和 页 面 控 件 允 许 的 前 提 下提 供 有 助 于 用 户 目 标 的 帮 助 内 容 ， 比 如 最 近 搜 索 词 ， 常 用 搜 索 词 等 。反 例 示 意操 作 没 有 主 次 ， 让 用 户 无 从 选 择#*纠 正 示 意首 先 要 避 免 并 列 过 多 操 作 让 用 户
4、 选 额 ， 在 不 得 不 并 列 多 个 操 作 时 ， 需 区 分 操 作 主 次 ，减 轻 用 户 的 选 择 难 度 。#*2. 流 程 明 确为 了 让 用 户 顺 畅 地 使 用 页 面 ， 在 用 户 进 行 某 一 个 操 作 流 程 时 ， 应 避 免 出 现 用 户 目 标 流程 之 外 的 内 容 而 打 断 用 户 。反 例 示 意用 户 本 打 算 进 行 搜 索 ， 在 进 入 页 面 时 却 被 突 如 其 来 的 抽 奖 弹 窗 所 打 断 ； 对 于 抽 奖 没 有兴 趣 的 用 户 是 非 常 不 友 好 的 干 扰 ， 平 添 一 份 对 开 发 团 队
5、 的 恼 怒 ； 而 即 便 有 部 分 用 户 确实 被 “诱 人 ”的 抽 奖 活 动 所 吸 引 ， 离 开 主 流 程 去 抽 奖 之 后 可 能 就 遗 忘 了 原 本 的 目 标 ， 进而 失 去 了 对 产 品 真 正 价 值 的 利 用 和 认 识 。二 、 清 晰 明 确作 为 一 个 负 责 任 的 开 发 者 ， 一 旦 用 户 进 入 我 们 的 小 程 序 页 面 ， 就 有 责 任 和 义 务 清 晰 明确 地 告 知 用 户 身 在 何 处 、 又 可 以 往 何 处 去 ， 确 保 用 户 在 页 面 中 游 刃 有 余 地 穿 梭 而 不 迷 路 ，这 样 才
6、 能 为 用 户 提 供 安 全 的 愉 悦 的 使 用 体 验 。#*1. 导 航 明 确 ， 来 去 自 如导 航 是 确 保 用 户 在 网 页 中 浏 览 跳 转 时 不 迷 路 的 最 关 键 因 素 。 导 航 需 要 告 诉 用 户 ， 我 在哪 ， 我 可 以 去 哪 ， 如 何 回 去 等 问 题 。 首 先 在 微 信 系 统 内 的 所 有 小 程 序 的 全 部 页 面 ， 均 会自 带 微 信 提 供 的 导 航 栏 ， 统 一 解 决 我 在 哪 ， 如 何 回 去 的 问 题 。 在 微 信 层 级 导 航 保 持 体 验一 致 ， 有 益 用 户 在 微 信 内
7、 形 成 较 为 统 一 的 体 验 和 交 互 认 知 ， 无 需 在 各 小 程 序 和 微 信 切 换中 新 增 学 习 成 本 或 使 用 习 惯 。微 信 导 航 栏微 信 导 航 栏 ， 直 接 继 承 于 客 户 端 ， 除 导 航 栏 颜 色 之 外 ， 开 发 者 无 需 亦 不 可 以 对 其 中 的内 容 进 行 自 定 义 。 但 开 发 者 需 要 规 定 小 程 序 各 个 页 面 的 跳 转 关 系 ， 让 导 航 系 统 能 够 以 合理 的 方 式 工 作 。微 信 导 航 栏 分 为 导 航 区 域 、 标 题 区 域 以 及 操 作 区 域 。 其 中 导
8、 航 区 控 制 程 序 页 面 进 程 。目 前 导 航 栏 分 深 浅 两 种 基 本 配 色 ， 在 iOS 和 Android 展 示 有 所 不 同 ， 如 下 图 所 示 ：导 航 区 （ iOS）导 航 区 通 常 只 有 一 个 操 作 ， 即 返 回 上 一 级 界 面 。 开 发 者 可 定 义 其 内 容 ， 不 可 对 样 式 进行 修 改导 航 区 （ Android）通 常 情 况 下 ， 系 统 导 航 左 侧 唯 一 的 操 作 为 “离 开 小 程 序 ， 回 到 微 信 ， 程 序 后 台 运 行 ”。#*当 用 户 进 入 小 程 序 次 级 页 面 后
9、， 我 们 建 议 小 程 序 自 身 可 以 设 计 返 回 操 作 ， 同 时 用 户 也可 以 通 过 安 卓 系 统 自 带 的 硬 件 返 回 按 钮 返 回 上 一 级 。微 信 导 航 栏 自 定 义 颜 色 规 则 （ iOS 和 Android）小 程 序 导 航 栏 支 持 基 本 的 背 景 颜 色 自 定 义 功 能 ， 选 择 的 颜 色 需 要 在 满 足 可 用 性 前 提 下 ，和 谐 搭 配 微 信 提 供 的 两 套 主 导 航 栏 图 标 。 建 议 参 考 以 下 选 色 效 果 ：选 色 方 案 示 例#*页 面 内 导 航开 发 者 可 根 据 自
10、身 功 能 设 计 需 要 在 页 面 内 添 加 自 有 导 航 。 并 保 持 不 同 页 面 间 导 航 一 致 。但 是 受 限 于 手 机 屏 幕 尺 寸 的 限 制 ， 小 程 序 页 面 的 导 航 应 尽 量 简 单 ， 若 仅 为 一 般 线 性 浏 览的 页 面 建 议 仅 使 用 微 信 导 航 栏 即 可 。微 信 控 件 库 提 供 tab 导 航 供 开 发 者 选 择 。 tab 栏 可 固 定 在 页 面 顶 部 或 者 底 部 ， 便 于用 户 在 不 同 的 tab 页 面 间 做 切 换 。 为 确 保 点 击 区 域 ， tab 项 不 得 超 过 4
11、项 。 一 个 页 面 也不 应 出 现 一 组 以 上 的 tab 栏 。2. 减 少 等 待 ， 反 馈 及 时页 面 的 过 长 时 间 的 等 待 会 引 起 用 户 的 不 良 情 绪 ， 使 用 微 信 小 程 序 项 目 提 供 的 技 术 已 能很 大 程 度 缩 短 等 待 时 间 。 即 便 如 此 ， 当 不 可 避 免 的 出 现 了 加 载 和 等 待 的 时 候 ， 需 要 予 以及 时 的 反 馈 以 舒 缓 用 户 等 待 的 不 良 情 绪 。启 动 页 设 计小 程 序 启 动 页 是 小 程 序 在 微 信 内 容 一 定 程 度 上 展 现 品 牌 特
12、征 的 页 面 之 一 。本 页 面 将 突 出 展 示 小 程 序 品 牌 特 征 和 加 载 状 态启 动 页 除 LOGO 品 牌 展 示 外 ， 页 面 上 的 其 他 所 有 元 素 如 加 载 进 度 指 示 ， 由 微 信 统 一 提供 且 不 能 更 改 。 无 需 开 发 者 开 发#*下 拉 标 示 区微 信 内 所 有 小 程 序 页 面 ， 都 会 在 下 拉 时 出 现 微 信 为 其 统 一 设 计 的 标 示 区 。 品 牌 展 示 区由 品 牌 名 称 和 微 信 小 程 序 提 示 组 成 。 目 的 是 强 化 品 牌 和 用 户 对 小 程 序 的 产 品
13、 感 知 。#*下 拉 标 示 （ iOS 深 浅 两 色 方 案 ）微 信 提 供 深 浅 两 套 配 色 方 案 ， 如 此 处 标 示 所 示 ， 文 字 颜 色 不 可 自 定 义 ， 开 发 者 在 自 定义 背 景 色 时 ， 应 注 意 保 证 下 拉 标 示 的 辨 识 度 。下 拉 标 示 （ Android 深 浅 两 色 方 案 ）微 信 下 拉 提 示 用 于 给 用 户 明 确 的 小 程 序 归 属 者 ， 防 止 造 假 与 作 弊 。 此 处 标 示 提 供 深 浅两 套 方 案 ， 文 字 颜 色 不 可 自 定 义 ， 开 发 者 在 自 定 义 背 景 色
14、 时 ， 应 注 意 保 证 下 拉 标 示 的 辨识 度 。页 面 刷 新 交 互 （ iOS）开 发 者 可 自 定 义 需 要 通 过 下 拉 交 互 完 成 刷 新 的 页 面 ， 此 类 交 互 微 信 将 提 供 标 准 能 力 和样 式 。 在 样 式 上 ， 刷 新 图 标 与 下 拉 标 示 配 色 已 捆 绑 ， 分 为 深 浅 两 套 方 案 ， 开 发 者 在 使 用时 ， 应 注 意 头 部 文 字 、 下 拉 标 识 与 刷 新 图 标 的 和 谐 统 一 。 当 用 户 在 该 类 页 面 做 出 下 拉 交互 时 ， 出 现 微 信 小 程 序 页 面 标 准
15、加 载 动 画 。 开 发 者 无 需 自 行 开 发 样 式#*在 开 发 者 没 有 在 页 面 顶 部 设 计 tab 的 情 况 下 ， 若 定 义 该 页 面 可 通 过 下 拉 动 作 刷 新 ，则 刷 新 后 加 载 状 态 提 示 与 小 程 序 品 牌 展 示 区 出 现 在 标 题 栏 之 下 ， 页 面 顶 部 。开 发 者 暂 无 法 自 行 定 义 此 加 载 效 果在 开 发 者 定 义 了 页 面 顶 部 tab， 并 定 义 该 Tab 下 的 内 容 页 面 可 通 过 下 拉 动 作 刷 新 ，则 刷 新 后 加 载 状 态 提 示 与 小 程 序 品 牌 展 示 区 出 现 在 顶 部 Tab 之 下 ， 且 仅 刷 新 当 前 页 面 内容 。 开 发 者 暂 无 法 自 行 定 义 此 加 载 效 果
