腾讯大讲堂：62 拇指下的精彩（手机qq交互设计经验分享）

腾讯大讲堂

第六十二期

研发管理部

大讲堂主页： http://km.oa.com/class与讲师互动： http://km.oa.com/group/class

目录

• 什么是移动终端软件交互

• 手机交互与 PC 终端交互的差异

• 手机 QQ 交互工作很”简单”

• 我们的发展很”慢”

• 我们的目标用户是”文盲”

• 用户的意见”不重要”

• 手机 QQ 交互原则

目录








什么是移动终端软件交互

移动终端软件交互特指人与手持设备终端软件的操作对话与体验过程。

什么是移动终端什么是移动终端

手提电脑？手提电脑？遥控器？遥控器？

什么是移动终端软件交互

移动终端软件交互包括了硬件与软件间的响应

甚至在没有可视界面的情况下完成对软件特定功能的操作。

甚至在没有可视界面的情况下完成对软件特定功能的操作。

一次洗头的灵感

目录








手机交互与 PC 终端交互的差异

硬件差异

PCPC

手机手机


操作系统差异

PCPC

手机手机


手机品牌在中国市场的格局

结论：手机交互研究需要细化至品牌和型号。

结论：手机交互研究需要细化至品牌和型号。

目录








手机 QQ 交互工作”很简单”

手机 QQ 的交互不断追求简单。这并非煞有介事的传达什么高深概念，而是显示环

境中，我们必须绞尽脑汁去解决操作可预期简化和功能全面的矛盾。


手机 QQ 功能不断向 PCQQ 功能靠齐的今天，其中一份设计与用户体验中心的调查报告：

2008 下半年手机 QQ 用户体验考核汇总

2008 下半年手机 QQ 用户体验考核汇总

评价：

网络问卷中“可学习性”维度评分较高，达到 4.39 （总体满意度为 3.7

1 ）。这说明用户觉得手机 QQ 功能设计简单易懂，用户比较容易上手。联系看“操作合理”维度，操作是否合理与软件是否易学有着较强的关联性。操作合理的软件才会较易上手。从结果可见，“操作合理”维度在众多分维度中为第三高分维度（ 3.47 ），与“可学习性”维度的结果有较高的一致性，也间接印证了“可学习性”高的可信程度。另外，从现场用户测试的结果中也发现，新手用户在首次使用手机 QQ 的过程基本流畅，没有遇到较大问题。

评价：

网络问卷中“可学习性”维度评分较高，达到 4.39 （总体满意度为 3.7

1 ）。这说明用户觉得手机 QQ 功能设计简单易懂，用户比较容易上手。联系看“操作合理”维度，操作是否合理与软件是否易学有着较强的关联性。操作合理的软件才会较易上手。从结果可见，“操作合理”维度在众多分维度中为第三高分维度（ 3.47 ），与“可学习性”维度的结果有较高的一致性，也间接印证了“可学习性”高的可信程度。另外，从现场用户测试的结果中也发现，新手用户在首次使用手机 QQ 的过程基本流畅，没有遇到较大问题。


为什么本课件叫”拇指工程”？

数字键盘手机为典型数字键盘手机为典型


案例对比

目录








• 手机 QQ 交互方法

手机 QQ 交互发展”很慢”

20032003

使用快捷键读取新消息和定位、滚屏使用快捷键读取新消息和定位、滚屏


20052005

奠定了四向键纵横的交互风格奠定了四向键纵横的交互风格

新消息到达和状态出现在菜单栏新消息到达和状态出现在菜单栏


20072007

九宫格环绕切换九宫格环绕切换

内置浏览器内置浏览器


20082008

采用隐藏 Tab方式兼容 WAP浏览采用隐藏 Tab方式兼容 WAP浏览

多窗口聊天实现，通过焦点模块实现纵横切换多窗口聊天实现，通过焦点模块实现纵横切换

组合键定位组合键定位

目录








我们的目标用户是”文盲”

用户教育的目标不是”扫盲”，用户教育的目标是把用户变成”文盲”。

印象使用印象使用

“ 盲打”“ 盲打” 交互统一性交互统一性

不看提示不看提示提示有效性提示有效性

无误操作无误操作可预期性可预期性


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

带着尝试的心情，战战兢兢。


非必要别强迫用户阅读。

目录








用户的意见”不重要”

每天手机 QQ 在论坛上的意见多达数百条，我们不会按照用户所有要求进行改造。关键

是透过各种诉求，分析出表面诉求背后的核心需求。

看看用户想要什么？看看用户想要什么？

08 的皮肤太压抑了08 的皮肤太压抑了

那个白色背景的真扎眼那个白色背景的真扎眼

我的 QQ怎么变成黑色的？

我的 QQ怎么变成黑色的？

我喜欢粉红色Kawayiii

我喜欢粉红色Kawayiii

有没有绿色的主题？

有没有绿色的主题？

我觉得手机 QQ太男性化了

我觉得手机 QQ太男性化了


案例分析用户诉求：能在手机 QQ里打电话、收发短信？用户诉求：能在手机 QQ里打电话、收发短信？


更多时候，用户是沉默的。所以我们更加要善于观察和发现。

总用户群落总用户群落找出核心价值用户群找出核心价值用户群

角色一角色一

角色二角色二

角色三角色三


案例分析

目录








手机 QQ 交互原则和方法

1. 乐高肢解与合体原则1. 乐高肢解与合体原则

当交互进入项目分解后，必须联动主体体验设计。



流程分析




2. 交互无对错，唯效率优先2. 交互无对错，唯效率优先

每项操作都会有各种顾虑和情况。先确立任务目的、用户场景。以效率优先。不可逆转操作除外







菜单关闭

头像设置

修改系统头像

A

此处所有交互同【超级QQ头像设置流程】

菜单关闭

头像设置

手机QQ系统头像

设置

上一页下一页

设置设置设置

设置设置设置设置

（n/m)

菜单项目：1.我的超级QQ2.返回选择【关闭】，回到【好友列

表界面】

n为当前第几页，M为总共几页

菜单返回

头像设置

确认

A 预览头像

选择【返回】后回到上一层页面

菜单项目：1.我的超级QQ2.返回

点击【确认】后回到【头像设置】首页，并显示出最新设置头像。

菜单关闭

头像设置

修改系统头像

超级QQvi p专区

A

更多头像


修改设置后请重新登录查看最新头像

设置成功!

设置失败:设置失败,请尝试重新设置.



超级QQvi p专区

更多头像


超级QQ其余特权功能介绍

1.页面下方为【超级QQ】其余特权功能用户教育，请tamehuang提供内容

菜单关闭

头像设置

修改系统头像

A

此处所有交互同【超级QQ头像设置流程】

菜单关闭

头像设置

手机QQ系统头像

B

选择

上一页下一页

选择选择选择

选择选择选择选择

（n/m)

菜单项目：1.我的超级QQ2.返回选择【关闭】，回到【好友列

表界面】

n为当前第几页，M为总共几页

菜单关闭

头像设置

修改系统头像

超级QQvi p专区

A

更多头像


修改设置后请重新登录查看最新头像

设置成功!

设置失败:设置失败,请尝试重新设置.

点击【选择】后



超级QQvi p专区

更多头像



3. 不要为了解决问题而去放大问题3. 不要为了解决问题而去放大问题

可预见性或者可教育性的交互行为，可将操作控件轻量化、硬件化。成本越低越好

假设显示器可以一键关机？假设显示器可以一键关机？


4. 菜单应当包含当前功能界面的所有期待操作4. 菜单应当包含当前功能界面的所有期待操作

由于手机界面有限，菜单是非界面功能的集合体。同时也是不可预期操作以及逆转操作的重要教育渠道。甚至可以弥补特殊硬件问题。


5. 靠近操作原则5. 靠近操作原则

由于功能键的对应性，手机交互设计焦点移动应该避免跳跃或跨度过大。


5. 靠近操作原则5. 靠近操作原则

案例分析


1. 快捷键的使用1. 快捷键的使用

有奖问答有奖问答


2. 快捷键的统一2. 快捷键的统一

THANK YOU!

目录

A.开发平台JAVA,Symbian,windowsmobile,mtk等

B. 手机显示屏分辨率128x128 128x160 176x220 176x208 240x320 480x640

其中， 176x208 和 240x320 的屏幕最为常见C.图标格式bmp,gif,png，

D. 可支持 UI样式简单的线性渐变，纯色填充，线面组合等

约等方法论目录

约等方法论

约等方法论目录

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

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

手机与 PC 的差异

面对偏色问题，设计的过程中，需要增加互补色（即颜色对比色）来协调平衡颜色表现如：偏黄 ---增加紫色或蓝色偏紫 ---增加绿色或者黄色偏灰 --- 提高颜色的亮度和对比，不要过于暗淡。

由于手机种类繁多，屏幕表现效果也参差不齐，很难去固定把握设计稿在各种手机中的颜色，并且根据移动设备的特性，仍然需要采用一些相对保守的颜色。

相对电脑用户而言，手机屏幕大小使得手机用户的视线的集中度更高，任何细小的变化，也很难逃过手机用户（起码是手机 QQ 用户）的眼睛。他们对于一些间距，颜色，图标的变化都会非常敏感，同时，手机用户在使用软件时，也会考虑到流量消耗的资费问题，图片过多，也会增加流量

目录

色彩：深蓝色系的使用

1. 关于深色户外、移动中，即使室内，使用手机时难以避免晃动。理论上在光范围捕捉移动黑点比黑范围捕捉移动白点困难。但在日照下，白色底色文字阅读比深色底透射强，不过图像显示正好相反。

2. 关于蓝色蓝色象征静，给人稳定的感觉。深邃的蓝色更适合长时间使用。

我们可以在历代Windows 操作系统以及 Apple 机找到用蓝色的答案。

3. 适应操作系统从近几年主流手机操作系统界面几乎都偏向深色甚至黑色的主基调。虽然作为软件无必要与操作系统一致。但是手机 QQ具有其他软件不可比拟的特殊性，就是手机 QQ 本身就具备平台性质

4. 同行对比性目前手机软件主要竞争对手当中还没有采用深蓝色背景最为主基调的产品。避免审美同质化，吸引新用户。深色基调容易出光的效果，能做出较多的

特效。

手机系统的表现

手机 QQ2006 手机 QQ2007

手机 QQ2008

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

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

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

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

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

目录

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

目录

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

其他手机产品软件

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

腾讯大讲堂：62 拇指下的精彩（手机qq交互设计经验分享）

Documents