1. 大 堂腾 讯 讲
第六十二期
研 管理部发
大 堂主 ：讲 页 http://km.oa.com/class
与 互 ：讲师 动 http://km.oa.com/group/class

3. 目录
• 什么是移 端 件交互动终 软
• 手机交互与 PC 端交互的差终 异
• 手机 QQ 交互工作很” ”简单
• 我 的 展很们 发 ”慢”
• 我 的目 用 是们 标 户 ”文盲”
• 用 的意户 见”不重要”
• 手机 QQ 交互原则

4. 目录
• 什么是移 端 件交互动终 软
• 手机交互与 PC 端交互的差终 异
• 手机 QQ 交互工作很” ”简单
• 我 的 展很们 发 ”慢”
• 我 的目 用 是们 标 户 ”文盲”
• 用 的意户 见”不重要”
• 手机 QQ 交互原则

5. 什么是移 端 件交互动终 软
移 端 件交互特指人与手持 端 件的操作 与体 程。动终 软 设备终 软 对话 验过
什么是移 端动终什么是移 端动终
手提 ？电脑手提 ？电脑 遥控器？遥控器？

6. 什么是移 端 件交互动终 软
移 端 件交互包括了硬件与 件 的响动终 软 软 间 应
甚至在没有可 界面的情况下完成视 对软
件特定功能的操作。
甚至在没有可 界面的情况下完成视 对软
件特定功能的操作。
一次洗 的 感头 灵

7. 目录
• 什么是移 端 件交互动终 软
• 手机交互与 PC 端交互的差终 异
• 手机 QQ 交互工作很” ”简单
• 我 的 展很们 发 ”慢”
• 我 的目 用 是们 标 户 ”文盲”
• 用 的意户 见”不重要”
• 手机 QQ 交互原则

8. 手机交互与 PC 端交互的差终 异
硬件差异
PCPC
手机手机

9. 手机交互与 PC 端交互的差终 异
操作系 差统 异
PCPC
手机手机

10. 手机交互与 PC 端交互的差终 异
手机品牌在中国市 的格局场
：结论
手机交互研究需要细
化至品牌和型号。
：结论
手机交互研究需要细
化至品牌和型号。

11. 目录
• 什么是移 端 件交互动终 软
• 手机交互与 PC 端交互的差终 异
• 手机 QQ 交互工作很” ”简单
• 我 的 展很们 发 ”慢”
• 我 的目 用 是们 标 户 ”文盲”
• 用 的意户 见”不重要”
• 手机 QQ 交互原则

12. 手机 QQ 交互工作”很 ”简单
手机 QQ 的交互不断追求简单。 并非 有介事的 什么高深概念，而是 示这 煞 传达 显
境中，我 必 尽 汁去解决操作可 期 化和功能全面的矛盾。环 们 须绞 脑 预 简

13. 手机 QQ 交互工作”很 ”简单
手机 QQ 功能不断向 PCQQ 功能靠 的今天，其中一份 与用 体 中心的 告：齐 设计 户 验 调查报
2008 下半年手机 QQ 用 体 考核户 验 汇总2008 下半年手机 QQ 用 体 考核户 验 汇总
价：评
网 卷中“可学 性” 度 分 高， 到络问 习 维 评 较 达 4.39 （ 体 意度总 满 为 3.71 ）。
明用 得手机这说 户觉 QQ 功能 易懂，用 比 容易上手。设计简单 户 较
系看“操作合理” 度，操作是否合理与 件是否易学有着 强的 性。联 维 软 较 关联
操作合理的 件才会 易上手。从 果可 ，“操作合理” 度在 多分 度中软 较 结 见 维 众 维
第三高分 度（为 维 3.47 ），与“可学 性” 度的 果有 高的一致性，也 接习 维 结 较 间
印 了“可学 性”高的可信程度。证 习
另外，从 用 的 果中也 ，新手用 在首次使用手机现场 户测试 结 发现 户 QQ
的 程基本流 ，没有遇到 大 。过 畅 较 问题
价：评
网 卷中“可学 性” 度 分 高， 到络问 习 维 评 较 达 4.39 （ 体 意度总 满 为 3.71 ）。
明用 得手机这说 户觉 QQ 功能 易懂，用 比 容易上手。设计简单 户 较
系看“操作合理” 度，操作是否合理与 件是否易学有着 强的 性。联 维 软 较 关联
操作合理的 件才会 易上手。从 果可 ，“操作合理” 度在 多分 度中软 较 结 见 维 众 维
第三高分 度（为 维 3.47 ），与“可学 性” 度的 果有 高的一致性，也 接习 维 结 较 间
印 了“可学 性”高的可信程度。证 习
另外，从 用 的 果中也 ，新手用 在首次使用手机现场 户测试 结 发现 户 QQ
的 程基本流 ，没有遇到 大 。过 畅 较 问题

14. 手机 QQ 交互工作”很 ”简单
什么本 件叫”拇指工程”？为 课
数字 手机 典键盘 为
型
数字 手机 典键盘 为
型

15. 手机 QQ 交互工作”很 ”简单
案例 比对

16. 目录
• 什么是移 端 件交互动终 软
• 手机交互与 PC 端交互的差终 异
• 手机 QQ 交互工作很” ”简单
• 我 的 展很们 发 ”慢”
• 我 的目 用 是们 标 户 ”文盲”
• 用 的意户 见”不重要”
• 手机 QQ 交互原则
• 手机 QQ 交互方法

17. 手机 QQ 交互 展发 ”很慢”
20032003
使用快捷 取新消息和定位、 屏键读 滚使用快捷 取新消息和定位、 屏键读 滚

18. 手机 QQ 交互 展发 ”很慢”
20052005
奠定了四向 横的交互 格键纵 风奠定了四向 横的交互 格键纵 风
新消息到 和状 出 在菜达 态 现 单栏新消息到 和状 出 在菜达 态 现 单栏

19. 手机 QQ 交互 展发 ”很慢”
20072007
九 格 切宫 环绕 换九 格 切宫 环绕 换
内置 器浏览内置 器浏览

20. 手机 QQ 交互 展发 ”很慢”
20082008
采用 藏隐 Tab 方式兼容 WAP 浏览采用 藏隐 Tab 方式兼容 WAP 浏览
多窗口聊天 ，通 焦点模实现 过 块实现纵
横切换
多窗口聊天 ，通 焦点模实现 过 块实现纵
横切换
合 定位组 键合 定位组 键

21. 目录
• 什么是移 端 件交互动终 软
• 手机交互与 PC 端交互的差终 异
• 手机 QQ 交互工作很” ”简单
• 我 的 展很们 发 ”慢”
• 我 的目 用 是们 标 户 ”文盲”
• 用 的意户 见”不重要”
• 手机 QQ 交互原则

22. 我 的目 用 是们 标 户 ”文盲”
用 教育的目 不是户 标 ” 盲”扫 ，用 教育的目 是把用 成户 标 户变 ”文盲”。
印象使用印象使用
“ 盲打”“ 盲打” 交互 一性统交互 一性统
不看提示不看提示 提示有效性提示有效性
无 操作误无 操作误 可 期性预可 期性预

23. 我 的目 用 是们 标 户 ”文盲”
用 教育 把用 培 成户 还 户 养 ”圣斗士”。我 不介意第一次会 着 的心情，但是我 很介意用 每次都们 带 尝试 们 户
着 的心情， 兢兢。带 尝试 战战

24. 我 的目 用 是们 标 户 ”文盲”
非必要 强迫用 。别 户阅读

25. 目录
• 什么是移 端 件交互动终 软
• 手机交互与 PC 端交互的差终 异
• 手机 QQ 交互工作很” ”简单
• 我 的 展很们 发 ”慢”
• 我 的目 用 是们 标 户 ”文盲”
• 用 的意户 见”不重要”
• 手机 QQ 交互原则

26. 用 的意户 见”不重要”
每天手机 QQ 在 上的意 多 数百条，我 不会按照用 所有要求 行改造。论坛 见 达 们 户 进 关
是透 各 求，分析出表面 求背后的键 过 种诉 诉 核心需求。
看看用 想要什么？户看看用 想要什么？户
08 的皮 太 抑了肤 压08 的皮 太 抑了肤 压
那个白色背景的真扎眼那个白色背景的真扎眼
我的 QQ 怎么变
成黑色的？
我的 QQ 怎么变
成黑色的？
我喜 粉 色欢 红
Kawayiii
我喜 粉 色欢 红
Kawayiii
有没有 色的主绿
？题
有没有 色的主绿
？题
我 得手机觉 QQ 太
男性化了
我 得手机觉 QQ 太
男性化了

27. 用 的意户 见”不重要”
案例分析
用 求：能在手机户诉 QQ 里打 、收 短信电话 发
？
用 求：能在手机户诉 QQ 里打 、收 短信电话 发
？

28. 用 的意户 见”不重要”
更多 候，用 是 默的。所以我 更加要善于 察和 。时 户 沉 们 观 发现
用 群落总 户用 群落总 户
找出核心价 用 群值 户找出核心价 用 群值 户
角色一角色一
角色二角色二
角色三角色三

29. 用 的意户 见”不重要”
案例分析

30. 目录
• 什么是移 端 件交互动终 软
• 手机交互与 PC 端交互的差终 异
• 手机 QQ 交互工作很” ”简单
• 我 的 展很们 发 ”慢”
• 我 的目 用 是们 标 户 ”文盲”
• 用 的意户 见”不重要”
• 手机 QQ 交互原则

31. 手机 QQ 交互原 和方法则
1. 高肢解与合体原乐 则1. 高肢解与合体原乐 则
当交互 入 目分解后，必 主体体 。进 项 须联动 验设计

32. 手机 QQ 交互原 和方法则
1. 高肢解与合体原乐 则1. 高肢解与合体原乐 则
流程分析

33. 手机 QQ 交互原 和方法则
1. 高肢解与合体原乐 则1. 高肢解与合体原乐 则

34. 手机 QQ 交互原 和方法则
2. 交互无 ，唯效率 先对错 优2. 交互无 ，唯效率 先对错 优
每 操作都会有各 和情况。先 立任 目的、用 景。以效率 先。项 种顾虑 确 务 户场 优
不可逆 操作除外转

35. 手机 QQ 交互原 和方法则
2. 交互无 ，唯效率 先对错 优2. 交互无 ，唯效率 先对错 优
每 操作都会有各 和情况。先 立任 目的、用 景。以效率 先。项 种顾虑 确 务 户场 优
不可逆 操作除外转

36. 手机 QQ 交互原 和方法则
2. 交互无 ，唯效率 先对错 优2. 交互无 ，唯效率 先对错 优
每 操作都会有各 和情况。先 立任 目的、用 景。以效率 先。项 种顾虑 确 务 户场 优
不可逆 操作除外转

37. 手机 QQ 交互原 和方法则
3. 不要 了解决 而去放大为 问题 问题3. 不要 了解决 而去放大为 问题 问题
可 性或者可教育性的交互行 ，可将操作控件 量化、硬件化。成本越低越好预见 为 轻
假 示器可以一 机？设显 键关假 示器可以一 机？设显 键关

38. 手机 QQ 交互原 和方法则
4. 菜 当包含当前功能界面的所有期待操作单应4. 菜 当包含当前功能界面的所有期待操作单应
由于手机界面有限，菜 是非界面功能的集合体。同 也是不可 期操作以及逆 操单 时 预 转
作的重要教育渠道。
甚至可以弥 特殊硬件 。补 问题

39. 手机 QQ 交互原 和方法则
5. 靠近操作原则5. 靠近操作原则
由于功能 的 性，手机交互 焦点移 避免跳 或跨度 大。键 对应 设计 动应该 跃 过

40. 手机 QQ 交互原 和方法则
5. 靠近操作原则5. 靠近操作原则
案例分析

41. 手机 QQ 交互原 和方法则
1. 快捷 的使用键1. 快捷 的使用键
有 答奖问有 答奖问

42. 手机 QQ 交互原 和方法则
2. 快捷 的 一键 统2. 快捷 的 一键 统

43. THANK YOU!

45. 目录

46. A. 平台开发
JAVA,Symbian,windowsmobile,mtk 等
B. 手机 示屏分辨率显
128x128 128x160 176x220 176x208 240x320 480x640
其中， 176x208 和 240x320 的屏幕最 常为 见
C. 格式图标
bmp,gif,png ，
D. 可支持 UI 式样
的 性 ， 色填充， 面 合等简单 线 渐变 纯 线 组

47. 等方法约 论目录

48. 等方法约 论

49. 等方法约 论目录

50. 手机的屏幕 示效果千差万 。显 别 偏黄，偏紫，偏灰是目前主要的手机屏幕偏色。

51. 手机的使用 景移 多 ，并不 局限在室内使用，场 动 变 仅仅
而手机 件的 示在不同 境下也会打上折扣，并不是什么 候都是理想的。软 显 环 时
比如：在 外强光下，手机屏幕的内容很 ，在黑暗的 境中操作，会 得刺眼户 难识别 环 觉
和疲 等等劳 .

52. 手机与 PC 的差异
面 偏色 ， 的 程中，需要增加互 色对 问题 设计 过 补 （即 色 比色）颜 对 来 平衡 色表协调 颜 现
如：偏黄 --- 增加紫色或 色蓝
偏紫 --- 增加 色或者黄色绿
偏灰 --- 提高 色的亮度和 比，不要 于暗淡。颜 对 过
由于手机 类繁多，屏幕表 效果也参差不 ，很 去固定把握 稿在各 手机中种 现 齐 难 设计 种
的 色，并且根据移 的特性，仍然需要采用一些相 保守的 色。颜 动设备 对 颜
相 用 而言，手机屏幕大小使得手机用 的 的集中度更高，任何 小的对电脑 户 户 视线 细 变
化，也很 逃 手机用 （起 是手机难 过 户 码 QQ 用 ）的眼睛。他 于一些 距， 色户 们对 间 颜
， 的 化都会非常敏感，同 ，手机用 在使用 件 ，也会考 到流量消耗的图标 变 时 户 软 时 虑
， 片 多，也会增加流量资费问题 图 过

53. 目录

54. 色彩：深 色系的使用蓝
1. 于深色关
外、移 中，即使室户 动
内，使用手机 以避时难
免晃 。理 上在光范动 论
捕捉移 黑点比黑范围 动
捕捉移 白点困 。围 动 难
但在日照下，白色底色
文字 比深色底透射阅读
强，不 像 示正好过图 显
相反。
2. 于 色关 蓝
色象征静， 人蓝 给 稳
定的感 。深邃的觉 蓝
色更适合 使用。长时间
我 可以在 代们 历
Windows 操作系 以统
及 Apple 机找到用蓝
色的答案。
3. 适 操作系应 统
从近几年主流手机操作
系 界面几乎都偏向深统
色甚至黑色的主基 。调
虽然作 件无必要与为软
操作系 一致。但是手统
机 QQ 具有其他 件不可软
比 的特殊性，就是手拟
机 QQ 本身就具 平台性备
质
4. 同行 比性对
目前手机 件主要软 竞
争 手当中 没有采对 还
用深 色背景最 主蓝 为
基 的 品。避免调 产 审
美同 化，吸引新用质
。户
深色基 容易出光的调
效果，能做出 多的较
特效。

55. 手机系 的表统 现

56. 手机 QQ2006 手机 QQ2007
手机 QQ2008
式：样 手机用 于流量的敏感， 包的大小限制，取决于在 程中，尽量 少户对 开发 设计过 减
片的使用，限制 感表 ，当然，随着 境的不断提升，图 复杂质 现 开发环 08 版增加 的简单
感 化渐变质 优

57. 追求自然，舒适体 的 下，手机验 设计趋势 QQ 推出了 景皮 的概念，用 可根据 境场 肤 户 环
的 化 行切 到最合适的皮 ，功能化体变 进 换选择 肤 现
改善 景 化 来的差场 变 带 异 .

58. 室外皮 ，白底黑字， 比强烈，肤 对
便于在强光下集中 ，易于视线 识别

59. 室内皮 ，深底可以增强内容表 ，肤 现
弱化 于 的刺激对 视觉

60. 夜 皮 ，降低文字明亮度，加深间 肤
底色，在黑暗的 境中，避免刺激环
和疲 感视觉 劳 .

61. 目录

62. 目录
用 是一个提升 品 和度的重要手段，手机户关怀 产 亲 QQ 从 08 年 始也打造手机 屏开 启动闪
除了 于 日，公益日等 播，也注重一些日常生活的情景表 ，深受手机对 传统节 传 现 QQ 用户
的喜爱

63. 目录

64. 用 的想法和需求是无止境的，作户 为 品 程中不可缺少的研究 象，产 设计过 对
在用 建 中，提出皮 意 的用 占有一定的比例，并且，在同行 件 比户 议 肤单调 见 户 软 对
中 ，均提供除保守色系之外色彩的皮 供用 ，而手机发现 肤 户选择 QQ 的三套皮 很大肤
限制了用 的 。所以，多 化 也将是手机户 选择 样 选择 QQ 新的尝试 .
其他手机 品 件产 软

65. 不会盲从，不断 化，优
精益求精，敬 期待请