腾讯大讲堂62拇指下的精彩手机QQ交互设计经验分享.ppt

,腾 讯 大 讲 堂,第六十二期,研发管理部,大讲堂主页：/class 与讲师互动：/group/class,目录,什么是移动终端软件交互 手机交互与PC终端交互的差异 手机QQ交互工作很”简单” 我们的发展很”慢” 我们的目标用户是”文盲” 用户的意见”不重要” 手机QQ交互原则,目录,什么是移动终端软件交互 手机交互与PC终端交互的差异 手机QQ交互工作很”简单” 我们的发展很”慢” 我们的目标用户是”文盲” 用户的意见”不重要” 手机QQ交互原则,什么是移动终端软件交互,移动终端软件交互特指人与手持设备终端软件的操作对话与体验过程。,什么是移动终端,手提电脑？,遥控器？,什么是移动终端软件交互,移动终端软件交互包括了硬件与软件间的响应,甚至在没有可视界面的情况下完成对软件特定功能的操作。,一次洗头的灵感,目录,什么是移动终端软件交互 手机交互与PC终端交互的差异 手机QQ交互工作很”简单” 我们的发展很”慢” 我们的目标用户是”文盲” 用户的意见”不重要” 手机QQ交互原则,手机交互与PC终端交互的差异,硬件差异,PC,手机,手机交互与PC终端交互的差异,操作系统差异,PC,手机,手机交互与PC终端交互的差异,手机品牌在中国市场的格局,结论： 手机交互研究需要细化至品牌和型号。,目录,什么是移动终端软件交互 手机交互与PC终端交互的差异 手机QQ交互工作很”简单” 我们的发展很”慢” 我们的目标用户是”文盲” 用户的意见”不重要” 手机QQ交互原则,手机QQ交互工作”很简单”,手机QQ的交互不断追求简单。这并非煞有介事的传达什么高深概念，而是显示环境中，我们必须绞尽脑汁去解决操作可预期简化和功能全面的矛盾。,手机QQ交互工作”很简单”,手机QQ功能不断向PCQQ功能靠齐的今天，其中一份设计与用户体验中心的调查报告：,2008下半年手机QQ用户体验考核汇总,评价： 网络问卷中“可学习性”维度评分较高，达到4.39（总体满意度为3.71）。这说明用户觉得手机QQ功能设计简单易懂，用户比较容易上手。 联系看“操作合理”维度，操作是否合理与软件是否易学有着较强的关联性。操作合理的软件才会较易上手。从结果可见，“操作合理”维度在众多分维度中为第三高分维度（3.47），与“可学习性”维度的结果有较高的一致性，也间接印证了“可学习性”高的可信程度。 另外，从现场用户测试的结果中也发现，新手用户在首次使用手机QQ的过程基本流畅，没有遇到较大问题。,手机QQ交互工作”很简单”,为什么本课件叫”拇指工程”？,数字键盘手机为典型,手机QQ交互工作”很简单”,案例对比,目录,什么是移动终端软件交互 手机交互与PC终端交互的差异 手机QQ交互工作很”简单” 我们的发展很”慢” 我们的目标用户是”文盲” 用户的意见”不重要” 手机QQ交互原则 手机QQ交互方法,手机QQ交互发展”很慢”,2003,使用快捷键读取新消息和定位、滚屏,手机QQ交互发展”很慢”,2005,奠定了四向键纵横的交互风格,新消息到达和状态出现在菜单栏,手机QQ交互发展”很慢”,2007,九宫格环绕切换,内置浏览器,手机QQ交互发展”很慢”,2008,采用隐藏Tab方式兼容WAP浏览,多窗口聊天实现，通过焦点模块实现纵横切换,组合键定位,目录,什么是移动终端软件交互 手机交互与PC终端交互的差异 手机QQ交互工作很”简单” 我们的发展很”慢” 我们的目标用户是”文盲” 用户的意见”不重要” 手机QQ交互原则,我们的目标用户是”文盲”,用户教育的目标不是”扫盲”，用户教育的目标是把用户变成”文盲”。,印象使用,“盲打”,交互统一性,不看提示,提示有效性,无误操作,可预期性,我们的目标用户是”文盲”,用户教育还把用户培养成”圣斗士”。我们不介意第一次会带着尝试的心情，但是我们很介意用户每次都带着尝试的心情，战战兢兢。,我们的目标用户是”文盲”,非必要别强迫用户阅读。,目录,什么是移动终端软件交互 手机交互与PC终端交互的差异 手机QQ交互工作很”简单” 我们的发展很”慢” 我们的目标用户是”文盲” 用户的意见”不重要” 手机QQ交互原则,用户的意见”不重要”,每天手机QQ在论坛上的意见多达数百条，我们不会按照用户所有要求进行改造。关键是透过各种诉求，分析出表面诉求背后的核心需求。,看看用户想要什么？,08的皮肤太压抑了,那个白色背景的真扎眼,我的QQ怎么变成黑色的？,我喜欢粉红色 Kawayiii,有没有绿色的主题？,我觉得手机QQ太男性化了,用户的意见”不重要”,案例分析,用户诉求：能在手机QQ里打电话、收发短信？,用户的意见”不重要”,更多时候，用户是沉默的。所以我们更加要善于观察和发现。,总用户群落,找出核心价值用户群,角色一,角色二,角色三,用户的意见”不重要”,案例分析,目录,什么是移动终端软件交互 手机交互与PC终端交互的差异 手机QQ交互工作很”简单” 我们的发展很”慢” 我们的目标用户是”文盲” 用户的意见”不重要” 手机QQ交互原则,手机QQ交互原则和方法,1. 乐高肢解与合体原则,当交互进入项目分解后，必须联动主体体验设计。,手机QQ交互原则和方法,1. 乐高肢解与合体原则,流程分析,手机QQ交互原则和方法,1. 乐高肢解与合体原则,手机QQ交互原则和方法,2. 交互无对错，唯效率优先,每项操作都会有各种顾虑和情况。先确立任务目的、用户场景。以效率优先。,不可逆转操作除外,手机QQ交互原则和方法,2. 交互无对错，唯效率优先,每项操作都会有各种顾虑和情况。先确立任务目的、用户场景。以效率优先。,不可逆转操作除外,手机QQ交互原则和方法,2. 交互无对错，唯效率优先,每项操作都会有各种顾虑和情况。先确立任务目的、用户场景。以效率优先。,不可逆转操作除外,手机QQ交互原则和方法,3. 不要为了解决问题而去放大问题,可预见性或者可教育性的交互行为，可将操作控件轻量化、硬件化。成本越低越好,假设显示器可以一键关机？,手机QQ交互原则和方法,4. 菜单应当包含当前功能界面的所有期待操作,由于手机界面有限，菜单是非界面功能的集合体。同时也是不可预期操作以及逆转操作的重要教育渠道。,甚至可以弥补特殊硬件问题。,手机QQ交互原则和方法,5. 靠近操作原则,由于功能键的对应性，手机交互设计焦点移动应该避免跳跃或跨度过大。,手机QQ交互原则和方法,5. 靠近操作原则,案例分析,手机QQ交互原则和方法,1. 快捷键的使用,有奖问答,手机QQ交互原则和方法,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年开始也打造手机启动闪屏 除了