设计好用的触控手势需要知道的五件事【ui设计培训】

《设计好用的触控手势需要知道的五件事【ui设计培训】》由会员分享，可在线阅读，更多相关《设计好用的触控手势需要知道的五件事【ui设计培训】（14页珍藏版）》请在金锄头文库上搜索。

1、设计好用的触控手势需要知道的五件事【UI 设计培训】一网学设计教育小 编 ： 在 这 个 移 动 触 控 的 时 代 ， 什 么 是 触 控 手 势 ？ 好 用 的 手 势 是 怎 样 的 ？许 多 新 手 UI 设 计 师 可 能 没 有 全 方 位 的 学 习 ， 今 天 腾 讯 CDC 分 享 的 这 篇 如何 设 计 好 用 的 触 控 手 势 ， 从 什 么 是 手 机 触 控 到 手 势 设 计 应 用 过 程 中 需 要 注意 的 点 全 方 位 进 行 了 讲 解 。我 们 生 活 在 一 个 人 机 互 动 频 繁 ， 由 设 备 驱 动 的 世 界 中 。随 着 触 摸 屏

2、 逐 渐 成 为 移 动 设 备 的 标 配 ， 多 点 触 控 手 势 的 广 泛 应 用 ， 让 我 们与 手 机 、 平 板 电 脑 甚 至 是 笔 记 本 电 脑 之 间 建 立 起 了 一 种 更 宽 广 的 联 系 方 式 。我 们 通 过 模 拟 真 实 世 界 的 手 势 与 屏 幕 上 的 各 种 元 素 进 行 互 动 ， 使 许 多 曾 经不 曾 想 或 者 不 敢 想 的 人 机 交 互 方 式 变 成 了 现 实 ， 同 时 手 势 操 作 的 应 用 降 低了 人 与 物 理 设 备 之 间 的 沟 通 的 门 槛 。图 0. 婴 儿 几 乎 无 困 难 的 通 过

3、 屏 幕 玩 游 戏我 家 那 位 小 P 孩 ， 不 到 2 岁 就 已 经 能 够 很 自 然 轻 松 解 锁 iPad、 翻 页 找 到 他喜 欢 玩 的 熊 猫 餐 厅 ， 接 着 熟 练 地 在 各 种 食 材 选 折 他 喜 欢 的 ， 制 作 一 份 美 味的 虚 拟 美 食 ； 而 我 们 也 乐 于 买 各 种 大 屏 手 机 和 平 板 电 脑 送 给 我 们 的 长 辈 。移 动 设 备 及 手 势 交 互 方 式 给 我 们 带 来 革 命 性 体 验 和 便 捷 ， 移 动 的 触 控 时 代早 已 到 来 ， 您 是 否 也 与 时 俱 进 了 呢 ？ 值 得 我

4、们 每 一 位 设 计 师 反 思 。一、什么是触控手势触 控 手 势 是 自 然 用 户 界 面 （ NUI） 的 一 种 表 现 形 式 。自 然 用 户 界 面 （ Natural user interface, NUI） 是 指 一 类 无 形 的 用 户 界 面 。NUI 则 只 需 要 人 们 以 最 自 然 的 交 流 方 式 （ 如 语 言 和 文 字 ） 与 机 器 互 动 。 直观 的 说 ， 使 用 NUI 的 设 备 不 需 要 键 盘 或 鼠 标 。 特 别 是 触 控 技 术 将 使 人 机 交互 变 得 更 加 自 然 直 观 ， 更 为 人 性 化 。您 的 手

5、 机 、 平 板 电 脑 还 有 笔 记 本 拥 有 识 别 多 点 触 控 输 入 的 功 能 来 帮 助 你 实现 对 其 广 泛 的 运 用 。 这 种 输 入 方 式 帮 助 我 们 实 现 与 屏 幕 内 容 的 交 互 ， 而 模仿 真 实 中 的 操 作 手 势 可 以 降 低 我 们 对 操 作 屏 幕 对 象 的 认 知 障 碍 。在 PC 时 代 ， 我 们 需 要 他 人 或 者 一 个 说 明 教 程 去 教 会 我 们 怎 么 使 用 鼠 标 ， 移动 屏 幕 的 光 标 ， 而 这 些 在 现 实 世 界 里 几 乎 找 不 到 可 相 映 射 的 东 西 ， 然

6、后 学习 怎 么 双 击 打 开 一 个 文 件 ， 按 住 一 个 文 件 不 放 ， 把 它 拖 动 到 文 件 夹 里 面 。触 控 手 势 带 来 的 是 自 然 用 户 界 面 ， 支 持 触 控 的 移 动 设 备 能 够 自 然 直 观 的 被所 有 年 龄 层 ， 不 同 技 能 水 平 的 人 所 使 用 。 使 用 Multi-Touch 多 点 触 控 式 接口 技 术 ， 取 代 目 前 所 使 用 的 键 盘 （ 按 键 ） 、 鼠 标 ， 将 进 一 步 体 现 出 人 性 化操 控 接 口 的 未 来 趋 势 。图 1. 电 容 式 触 摸 屏 结 构 原 理 图

7、试 想 一 下 在 那 些 老 套 的 用 户 界 面 里 ， 需 要 你 把 鼠 标 悬 停 或 者 邮 件 点 击 目 标上 才 能 获 得 更 多 详 细 的 信 息 ， 而 这 些 在 手 机 设 备 上 将 不 再 起 作 用 。 如 何 摆脱 这 种 惯 用 的 设 计 呢 ？ 答 案 就 是 ， 创 建 移 动 先 行 体 验 。二、触控手势的的使用情景（移动的情景）移 动 情 景 指 的 是 用 户 使 用 时 的 环 境 和 状 态 也 就 是 任 何 可 以 影 响 用 户 与设 备 进 行 交 互 的 内 容 。 由 于 这 些 情 境 持 续 而 快 速 地 变 化 ，

8、 对 移 动 设 备 而 言就 显 得 尤 为 重 要 。 我 们 要 考 虑 用 户 分 心 、 多 任 务 、 手 势 操 作 、 低 电 量 条 件和 糟 糕 的 连 接 条 件 等 复 杂 环 境 下 的 通 用 设 计 。图 2. 移 动 中 的 互 动 语 境 （ 出 处 ： Nadav Savio | Giant Ant Design）各 种 移 动 环 境 下 会 影 响 到 用 户 使 用 触 屏 设 备 完 成 任 务 的 效 率 和 准 确 度 的 因素 有 ： 移 动 情 景 下 ， 注 意 力 容 易 被 分 散 （ 如 交 谈 ， 观 察 周 围 环 境 等 ） 移

9、 动 情 景 下 ， 操 作 手 机 的 时 间 碎 片 化 （ 各 种 事 情 打 断 ） 移 动 情 景 下 ， 任 务 容 易 被 中 断 （ 意 外 情 况 影 响 ） 移 动 情 景 下 ， 肢 体 可 能 被 其 他 物 体 被 占 用 （ 如 遛 狗 、 拎 包 等 ） 移 动 情 景 下 ， 噪 音 分 散 注 意 力 （ 车 水 马 龙 、 人 声 鼎 沸 的 路 边 ）三、触控手势的基本操作图 3. 钢 铁 侠 系 列 电 影 中 的 全 息 触 控 交 互所 谓 自 然 手 势 就 是 在 真 实 物 理 世 界 中 存 在 或 演 绎 而 来 的 手 势 。 例 如 上

10、 下 滑动 滚 动 列 表 ， 滑 动 以 平 移 等 。 这 类 手 势 是 自 然 的 ， 不 需 要 或 很 少 需 要 用 户去 学 习 的 。 长 按 以 查 看 更 多 操 作 (现 在 有 了 3D Touch， 同 长 按 操 作 相 比 ， 最 大 区 分是 需 要 是 有 一 定 的 按 压 力 度 ） 点 击 执 行 主 操 作 滑 动 以 平 移 轻 扫 以 选 定 ， 并 进 行 命 令 操 作 收 缩 和 拉 伸 以 缩 放 转 动 以 旋 转 边 缘 轻 扫 以 使 用 系 统 命 令四、好用的手势是怎样的？首 先 我 们 来 看 看 多 点 触 控 的 优 缺

11、点 。那 么 什 么 是 好 用 的 手 势 呢 ？好 用 的 手 势 一 来 简 单 ， 二 来 支 持 单 手 操 作 ， 它 们 该 如 由 Tweetie 创 始 人Loren Brichter 所 开 发 并 获 得 专 利 的 “下 拉 刷 新 ”一 样 受 欢 迎 。 或 者 像 iBook 的 翻 页 动 作 一 样 自 然 简 单 。 以 下 是 好 用 的 手 势 该 有 的 一 些 特 征 ： 简 单 易 用 。 不 仅 动 作 简 单 ， 还 要 能 在 拥 挤 的 交 通 工 具 上 单 手 操 作 容 易 记 忆 。 其 一 手 势 要 好 记 ， 其 二 要 让

12、人 愿 意 记 住 符 合 认 知 习 惯 。 也 就 是 说 ， 该 手 势 一 方 面 要 遵 循 人 的 自 然 习 惯 和 意 识 ，另 一 方 面 要 契 合 手 势 即 将 产 生 的 操 作 实 用 。 手 势 要 让 用 户 感 到 舒 服 ， 少 有 用 户 愿 意 点 两 次 才 看 到 想 看 的 东 西 ，让 会 让 他 们 感 到 麻 烦 愉 悦 的 体 验 。 Winkler 认 为 好 的 手 势 会 有 神 奇 的 感 觉 。 UX 总 是 个 未 知数 ， 而 且 难 于 言 传 。 但 这 恰 是 我 们 认 识 、享 受 科 技 的 一 种 表 现 及 时

13、 反 馈 。 反 馈 就 是 说 用 户 知 道 当 前 正 在 进 行 的 操 作 。 用 户 进 行 完 手 势操 作 后 有 明 确 的 状 态 信 息 告 知五、手势设计应用过程中需要注意的点：（手势设计准则）符 合 认 知 习 惯在 非 概 念 性 项 目 中 使 用 基 础 手 势 （ 组 合 ） 之 外 的 “创 新 ”手 势 ， 未 建 立 统 一规 范 的 情 况 下 ， 使 用 混 乱 会 导 致 用 户 困 惑 ， 学 习 成 本 稿 ， 增 加 记 忆 负 担 ，难 以 引 导 用 户 培 养 使 用 习 惯 ， 技 术 上 的 限 制 可 能 会 使 “创 新 ”变

14、成 不 便 。最 终 使 用 者 是 人 ， 手 势 操 作 是 基 于 人 的 行 为 来 定 义 的 。 手 势 操 作 是 人 们 现实 世 界 行 为 的 映 射 ， 因 此 ， 手 势 设 计 要 符 合 大 多 数 人 的 认 知 习 惯 ， 减 少 用户 的 认 知 成 本 。 比 如 有 方 向 性 的 手 势 操 作 ， 要 尽 量 符 合 拇 指 的 活 动 方 向 ，且 要 与 认 知 相 一 致 。图 4. iBooks 的 翻 页 体 验 与 翻 实 体 书记 忆 力 限 制因 为 这 些 手 势 操 作 不 能 明 白 的 显 示 在 界 面 上 ， 没 有 代 表

15、 动 作 的 可 视 元 素 ，需 要 用 户 记 住 哪 种 手 势 对 应 的 是 哪 些 操 作 ， 一 些 不 常 用 的 手 势 操 作 往 往 很难 发 现 。 如 果 手 势 直 观 常 用 自 然 没 问 题 ， 而 如 果 没 有 “自 然 ”的 手 势 去 代 表一 个 动 作 ， 用 户 就 会 感 到 困 惑 ， 于 是 便 需 要 记 忆 ， 就 像 在 使 用 命 令 行 界 面时 要 记 住 那 些 命 令 一 样 。一 个 App 中 手 势 数 量 需 保 持 在 5 个 数 量 以 下 ， 多 依 赖 与 界 面 的 引 导 和 暗 示 ，让 此 类 用 户

16、 根 据 情 境 记 忆 这 些 手 势 ， 从 而 增 加 手 势 的 易 记 忆 性 。如 果 用 户 对 其 缺 乏 认 知 ， 这 些 手 势 操 作 就 不 易 被 发 现 ， 也 便 不 会 为 人 所 用 ，甚 至 造 成 操 作 障 碍 。 （ 坏 的 例 子 ， 找 不 到 导 航 栏 ）图 5. Mozilla Firefox 4 版 本 右 划 呼 出 Tab不 同 应 用 场 景 采 用 不 同 的 手 势 设 计人 们 会 在 千 奇 百 怪 的 环 境 中 使 用 我 们 的 产 品 ， 我 们 的 产 品 在 和 周 围 环 境 争夺 用 户 的 注 意 力 ， 凭 借 一 个 3.55 寸 的 屏 幕 与 车 水 马 龙 、 人 声 鼎 沸 的 大 千世 界 作 斗 争 ， 因 此 在 实 际 的 手 势 设 计 中 还 需 考 虑 该 应 用 的 使 用 场 景 。效 率 型 和 实 用 型 应 用 ， 这 类 应 用 一 般 使