SlideShare ist ein Scribd-Unternehmen logo
1 von 66
腾 讯 大 讲 堂 第六十二期 研发管理部 大讲堂主页: http://km.oa.com/class 与讲师互动: http://km.oa.com/group/class
 
目录 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
目录 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
什么是移动终端软件交互 ,[object Object],什么是移动终端 手提电脑? 遥控器?
什么是移动终端软件交互 ,[object Object],甚至在没有可视界面的情况下完成对软件特定功能的操作。 一次洗头的灵感
目录 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
手机交互与 PC 终端交互的差异 ,[object Object],PC 手机
手机交互与 PC 终端交互的差异 ,[object Object],PC 手机
手机交互与 PC 终端交互的差异 ,[object Object],结论: 手机交互研究需要细化至品牌和型号。
目录 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
手机 QQ 交互工作 ”很简单” 手机 QQ 的交互不断追求简单 。这并非煞有介事的传达什么高深概念,而是显示环境中,我们必须绞尽脑汁去解决操作可预期简化和功能全面的矛盾。
手机 QQ 交互工作 ”很简单” 手机 QQ 功能不断向 PCQQ 功能靠齐的今天,其中一份设计与用户体验中心的调查报告: 2008 下半年手机 QQ 用户体验考核汇总 评价: 网络问卷中“可学习性”维度评分较高,达到 4.39 (总体满意度为 3.71 )。这说明用户觉得手机 QQ 功能设计简单易懂,用户比较容易上手。 联系看“操作合理”维度,操作是否合理与软件是否易学有着较强的关联性。操作合理的软件才会较易上手。从结果可见,“操作合理”维度在众多分维度中为第三高分维度( 3.47 ),与“可学习性”维度的结果有较高的一致性,也间接印证了“可学习性”高的可信程度。 另外,从现场用户测试的结果中也发现,新手用户在首次使用手机 QQ 的过程基本流畅,没有遇到较大问题。
手机 QQ 交互工作 ”很简单” 为什么本课件叫”拇指工程”? 数字键盘手机为典型
手机 QQ 交互工作 ”很简单” 案例对比
目录 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
手机 QQ 交互发展 ”很慢” 2003 使用快捷键读取新消息和定位、滚屏
手机 QQ 交互发展 ”很慢” 2005 奠定了四向键纵横的交互风格 新消息到达和状态出现在菜单栏
手机 QQ 交互发展 ”很慢” 2007 九宫格环绕切换 内置浏览器
手机 QQ 交互发展 ”很慢” 2008 采用隐藏 Tab 方式兼容 WAP 浏览 多窗口聊天实现,通过焦点模块实现纵横切换 组合键定位
目录 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
我们的目标用户是 ”文盲” ,[object Object],印象使用 “ 盲打” 交互统一性 不看提示 提示有效性 无误操作 可预期性
我们的目标用户是 ”文盲” ,[object Object]
我们的目标用户是 ”文盲” ,[object Object]
目录 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
用户的意见 ”不重要” 每天手机 QQ 在论坛上的意见多达数百条,我们不会按照用户所有要求进行改造。关键是透过各种诉求,分析出表面诉求背后的 核心需求 。 看看用户想要什么? 08 的皮肤太压抑了 那个白色背景的真扎眼 我的 QQ 怎么变成黑色的? 我喜欢粉红色 Kawayiii 有没有绿色的主题? 我觉得手机 QQ 太男性化了
用户的意见 ”不重要” 案例分析 用户诉求:能在手机 QQ 里打电话、收发短信?
用户的意见 ”不重要” 更多时候,用户是沉默的。所以我们更加要善于观察和发现。 总用户群落 找出核心价值用户群 角色一 角色二 角色三
用户的意见 ”不重要” 案例分析
目录 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
手机 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 样式 简单的线性渐变,纯色填充,线面组合等
约等方法论 目录
约等方法论
约等方法论 目录
手机的屏幕显示效果千差万别。 偏黄,偏紫,偏灰是目前主要的手机屏幕偏色。
手机的使用场景移动多变,并不仅仅局限在室内使用, 而手机软件的显示在不同环境下也会打上折扣,并不是什么时候都是理想的。 比如:在户外强光下,手机屏幕的内容很难识别,在黑暗的环境中操作,会觉得刺眼和疲劳等等 .
[object Object],面对偏色问题,设计的过程中,需要增加互补色 (即颜色对比色) 来协调平衡颜色表现 如:偏黄 --- 增加紫色或蓝色   偏紫 --- 增加绿色或者黄色   偏灰 --- 提高颜色的亮度和对比,不要过于暗淡。 由于手机种类繁多,屏幕表现效果也参差不齐,很难去固定把握设计稿在各种手机中的颜色,并且根据移动设备的特性,仍然需要采用一些相对保守的颜色。 相对电脑用户而言,手机屏幕大小使得手机用户的视线的集中度更高,任何细小的变化,也很难逃过手机用户(起码是手机 QQ 用户)的眼睛。他们对于一些间距,颜色,图标的变化都会非常敏感,同时,手机用户在使用软件时,也会考虑到流量消耗的资费问题,图片过多,也会增加流量
目录
色彩:深蓝色系的使用 1.  关于深色 户外、移动中,即使室内,使用手机时难以避免晃动。理论上在光范围捕捉移动黑点比黑范围捕捉移动白点困难。 但在日照下,白色底色文字阅读比深色底透射强,不过图像显示正好相反。 2.  关于蓝色 蓝色象征静,给人稳定的感觉。深邃的蓝色更适合长时间使用。 我们可以在历代 Windows 操作系统以及 Apple 机找到用蓝色的答案。 3.  适应操作系统 从近几年主流手机操作系统界面几乎都偏向深色甚至黑色的主基调。虽然作为软件无必要与操作系统一致。但是手机 QQ 具有其他软件不可比拟的特殊性,就是手机 QQ 本身就具备平台性质 4.  同行对比性 目前手机软件主要竞争对手当中还没有采用深蓝色背景最为主基调的产品。避免审美同质化,吸引新用户。 深色基调容易出光的效果,能做出较多的特效 。
手机系统的表现
手机 QQ2006 手机 QQ2007 手机 QQ2008 样式: 手机用户对于流量的敏感,开发包的大小限制,取决于在设计过程中,尽量减少图片的使用,限制复杂质感表现,当然,随着开发环境的不断提升, 08 版增加简单的渐变质感优化
追求自然,舒适体验的设计趋势下,手机 QQ 推出了场景皮肤的概念,用户可根据环境的变化进行切换选择到最合适的皮肤,功能化体现 改善场景变化带来的差异 .
室外皮肤,白底黑字,对比强烈, 便于在强光下集中视线,易于识别
室内皮肤,深底可以增强内容表现, 弱化对于视觉的刺激
夜间皮肤,降低文字明亮度,加深 底色,在黑暗的环境中,避免刺激 视觉和疲劳感 .
目录
目录 用户关怀是一个提升产品亲和度的重要手段,手机 QQ 从 08 年开始也打造手机启动闪屏 除了对于传统节日,公益日等传播,也注重一些日常生活的情景表现,深受手机 QQ 用户 的喜爱
目录
用户的想法和需求是无止境的,作为 产品设计过程中不可缺少的研究对象, 在用户建议中,提出皮肤单调意见的用户占有一定的比例,并且,在同行软件对比 中发现,均提供除保守色系之外色彩的皮肤供用户选择,而手机 QQ 的三套皮肤很大 限制了用户的选择。所以,多样化选择也将是手机 QQ 新的尝试 . 其他手机产品软件
不会盲从,不断优化, 精益求精,敬请期待
 

Weitere ähnliche Inhalte

Ähnlich wie 腾讯大讲堂:62 拇指下的精彩(手机qq交互设计经验分享)

移动应用的陷阱
移动应用的陷阱移动应用的陷阱
移动应用的陷阱
rockcody
 
移动应用的陷阱
移动应用的陷阱移动应用的陷阱
移动应用的陷阱
rockcody
 
Inspire dgt 網路技術分享_手機版網頁製作簡介_20111221
Inspire dgt 網路技術分享_手機版網頁製作簡介_20111221Inspire dgt 網路技術分享_手機版網頁製作簡介_20111221
Inspire dgt 網路技術分享_手機版網頁製作簡介_20111221
inspire digital
 
IxDC 中国交互设计体验日-C3a_钟磊_手持终端交互设计方法2_钟磊
IxDC 中国交互设计体验日-C3a_钟磊_手持终端交互设计方法2_钟磊IxDC 中国交互设计体验日-C3a_钟磊_手持终端交互设计方法2_钟磊
IxDC 中国交互设计体验日-C3a_钟磊_手持终端交互设计方法2_钟磊
IxDC
 
設計報告 黃維光 陳隸
設計報告 黃維光 陳隸設計報告 黃維光 陳隸
設計報告 黃維光 陳隸
taya86315
 
中華民國科技管理個案競賽 Motivate our taiwan
中華民國科技管理個案競賽 Motivate our taiwan中華民國科技管理個案競賽 Motivate our taiwan
中華民國科技管理個案競賽 Motivate our taiwan
孟賢 顏
 
2013 phind corp. 公司簡介
2013 phind corp. 公司簡介2013 phind corp. 公司簡介
2013 phind corp. 公司簡介
Chia-Yu Kuo
 
快速成为用户体验“专家”
快速成为用户体验“专家”快速成为用户体验“专家”
快速成为用户体验“专家”
btpig
 
APP行銷術
APP行銷術APP行銷術
APP行銷術
jessmylov
 
指尖之美 如何打造优秀的移动应用
指尖之美 如何打造优秀的移动应用指尖之美 如何打造优秀的移动应用
指尖之美 如何打造优秀的移动应用
isnofate
 
Web design trends 2012
Web design trends 2012Web design trends 2012
Web design trends 2012
Baidu
 

Ähnlich wie 腾讯大讲堂:62 拇指下的精彩(手机qq交互设计经验分享) (20)

移动应用的陷阱
移动应用的陷阱移动应用的陷阱
移动应用的陷阱
 
移动应用的陷阱
移动应用的陷阱移动应用的陷阱
移动应用的陷阱
 
Inspire dgt 網路技術分享_手機版網頁製作簡介_20111221
Inspire dgt 網路技術分享_手機版網頁製作簡介_20111221Inspire dgt 網路技術分享_手機版網頁製作簡介_20111221
Inspire dgt 網路技術分享_手機版網頁製作簡介_20111221
 
IxDC 中国交互设计体验日-C3a_钟磊_手持终端交互设计方法2_钟磊
IxDC 中国交互设计体验日-C3a_钟磊_手持终端交互设计方法2_钟磊IxDC 中国交互设计体验日-C3a_钟磊_手持终端交互设计方法2_钟磊
IxDC 中国交互设计体验日-C3a_钟磊_手持终端交互设计方法2_钟磊
 
設計報告 黃維光 陳隸
設計報告 黃維光 陳隸設計報告 黃維光 陳隸
設計報告 黃維光 陳隸
 
中華民國科技管理個案競賽 Motivate our taiwan
中華民國科技管理個案競賽 Motivate our taiwan中華民國科技管理個案競賽 Motivate our taiwan
中華民國科技管理個案競賽 Motivate our taiwan
 
2010中国互联网创新产品评选暨论坛:李开复演讲
2010中国互联网创新产品评选暨论坛:李开复演讲2010中国互联网创新产品评选暨论坛:李开复演讲
2010中国互联网创新产品评选暨论坛:李开复演讲
 
互联网产品精神
互联网产品精神互联网产品精神
互联网产品精神
 
2013 phind corp. 公司簡介
2013 phind corp. 公司簡介2013 phind corp. 公司簡介
2013 phind corp. 公司簡介
 
行動與雲端科技在圖書館的應用
行動與雲端科技在圖書館的應用行動與雲端科技在圖書館的應用
行動與雲端科技在圖書館的應用
 
快速成为用户体验“专家”
快速成为用户体验“专家”快速成为用户体验“专家”
快速成为用户体验“专家”
 
APP行銷術
APP行銷術APP行銷術
APP行銷術
 
行動技術開發概論
行動技術開發概論行動技術開發概論
行動技術開發概論
 
如何在敏捷開發的同時,落實用戶體驗設計團隊的價值
如何在敏捷開發的同時,落實用戶體驗設計團隊的價值如何在敏捷開發的同時,落實用戶體驗設計團隊的價值
如何在敏捷開發的同時,落實用戶體驗設計團隊的價值
 
指尖之美 如何打造优秀的移动应用
指尖之美 如何打造优秀的移动应用指尖之美 如何打造优秀的移动应用
指尖之美 如何打造优秀的移动应用
 
如何打造品牌热门App案例篇
如何打造品牌热门App案例篇如何打造品牌热门App案例篇
如何打造品牌热门App案例篇
 
移动互联网的微时代
移动互联网的微时代移动互联网的微时代
移动互联网的微时代
 
界面线索性设计
界面线索性设计界面线索性设计
界面线索性设计
 
名片碰碰产品介绍
名片碰碰产品介绍名片碰碰产品介绍
名片碰碰产品介绍
 
Web design trends 2012
Web design trends 2012Web design trends 2012
Web design trends 2012
 

Mehr von d0nn9n

腾讯大讲堂:55 企业法律风险防范
腾讯大讲堂:55 企业法律风险防范腾讯大讲堂:55 企业法律风险防范
腾讯大讲堂:55 企业法律风险防范
d0nn9n
 
腾讯大讲堂:56 qzone安全之路
腾讯大讲堂:56 qzone安全之路腾讯大讲堂:56 qzone安全之路
腾讯大讲堂:56 qzone安全之路
d0nn9n
 
腾讯大讲堂:59 数据蕴含商机,挖掘决胜千里
腾讯大讲堂:59 数据蕴含商机,挖掘决胜千里腾讯大讲堂:59 数据蕴含商机,挖掘决胜千里
腾讯大讲堂:59 数据蕴含商机,挖掘决胜千里
d0nn9n
 
腾讯大讲堂:57 超级qq的千万之路
腾讯大讲堂:57 超级qq的千万之路 腾讯大讲堂:57 超级qq的千万之路
腾讯大讲堂:57 超级qq的千万之路
d0nn9n
 
蔡学镛 Rebol漫谈
蔡学镛   Rebol漫谈蔡学镛   Rebol漫谈
蔡学镛 Rebol漫谈
d0nn9n
 
赵泽欣 - 淘宝网前端应用与发展
赵泽欣 - 淘宝网前端应用与发展赵泽欣 - 淘宝网前端应用与发展
赵泽欣 - 淘宝网前端应用与发展
d0nn9n
 
Yanggang wps
Yanggang wpsYanggang wps
Yanggang wps
d0nn9n
 
熊节 - 软件工厂的精益之路
熊节 - 软件工厂的精益之路熊节 - 软件工厂的精益之路
熊节 - 软件工厂的精益之路
d0nn9n
 
谢恩伟 - 微软在云端
谢恩伟 - 微软在云端谢恩伟 - 微软在云端
谢恩伟 - 微软在云端
d0nn9n
 
去哪儿平台技术
去哪儿平台技术去哪儿平台技术
去哪儿平台技术
d0nn9n
 
吴磊 - Silverlight企业级RIA
吴磊 - Silverlight企业级RIA吴磊 - Silverlight企业级RIA
吴磊 - Silverlight企业级RIA
d0nn9n
 
Tom - Scrum
Tom - ScrumTom - Scrum
Tom - Scrum
d0nn9n
 
Tim - FSharp
Tim - FSharpTim - FSharp
Tim - FSharp
d0nn9n
 
Tiger oracle
Tiger oracleTiger oracle
Tiger oracle
d0nn9n
 
Paulking groovy
Paulking groovyPaulking groovy
Paulking groovy
d0nn9n
 
Paulking dlp
Paulking dlpPaulking dlp
Paulking dlp
d0nn9n
 
Patrick jcp
Patrick jcpPatrick jcp
Patrick jcp
d0nn9n
 
Nick twitter
Nick twitterNick twitter
Nick twitter
d0nn9n
 
Marc facebook
Marc facebookMarc facebook
Marc facebook
d0nn9n
 
Kane debt
Kane debtKane debt
Kane debt
d0nn9n
 

Mehr von d0nn9n (20)

腾讯大讲堂:55 企业法律风险防范
腾讯大讲堂:55 企业法律风险防范腾讯大讲堂:55 企业法律风险防范
腾讯大讲堂:55 企业法律风险防范
 
腾讯大讲堂:56 qzone安全之路
腾讯大讲堂:56 qzone安全之路腾讯大讲堂:56 qzone安全之路
腾讯大讲堂:56 qzone安全之路
 
腾讯大讲堂:59 数据蕴含商机,挖掘决胜千里
腾讯大讲堂:59 数据蕴含商机,挖掘决胜千里腾讯大讲堂:59 数据蕴含商机,挖掘决胜千里
腾讯大讲堂:59 数据蕴含商机,挖掘决胜千里
 
腾讯大讲堂:57 超级qq的千万之路
腾讯大讲堂:57 超级qq的千万之路 腾讯大讲堂:57 超级qq的千万之路
腾讯大讲堂:57 超级qq的千万之路
 
蔡学镛 Rebol漫谈
蔡学镛   Rebol漫谈蔡学镛   Rebol漫谈
蔡学镛 Rebol漫谈
 
赵泽欣 - 淘宝网前端应用与发展
赵泽欣 - 淘宝网前端应用与发展赵泽欣 - 淘宝网前端应用与发展
赵泽欣 - 淘宝网前端应用与发展
 
Yanggang wps
Yanggang wpsYanggang wps
Yanggang wps
 
熊节 - 软件工厂的精益之路
熊节 - 软件工厂的精益之路熊节 - 软件工厂的精益之路
熊节 - 软件工厂的精益之路
 
谢恩伟 - 微软在云端
谢恩伟 - 微软在云端谢恩伟 - 微软在云端
谢恩伟 - 微软在云端
 
去哪儿平台技术
去哪儿平台技术去哪儿平台技术
去哪儿平台技术
 
吴磊 - Silverlight企业级RIA
吴磊 - Silverlight企业级RIA吴磊 - Silverlight企业级RIA
吴磊 - Silverlight企业级RIA
 
Tom - Scrum
Tom - ScrumTom - Scrum
Tom - Scrum
 
Tim - FSharp
Tim - FSharpTim - FSharp
Tim - FSharp
 
Tiger oracle
Tiger oracleTiger oracle
Tiger oracle
 
Paulking groovy
Paulking groovyPaulking groovy
Paulking groovy
 
Paulking dlp
Paulking dlpPaulking dlp
Paulking dlp
 
Patrick jcp
Patrick jcpPatrick jcp
Patrick jcp
 
Nick twitter
Nick twitterNick twitter
Nick twitter
 
Marc facebook
Marc facebookMarc facebook
Marc facebook
 
Kane debt
Kane debtKane debt
Kane debt
 

腾讯大讲堂:62 拇指下的精彩(手机qq交互设计经验分享)

Hinweis der Redaktion

  1. 蓝色是一种稳定的颜色,给人以宁静感觉,同时,也是一种较为融合的色彩, 由于在手机屏幕显示效果与电脑屏幕相差甚远,使用融合的蓝色并不会出现较为明显的偏色
  2. 蓝色是一种稳定的颜色,给人以宁静感觉,同时,也是一种较为融合的色彩, 由于在手机屏幕显示效果与电脑屏幕相差甚远,使用融合的蓝色并不会出现较为明显的偏色
  3. 蓝色是一种稳定的颜色,给人以宁静感觉,同时,也是一种较为融合的色彩, 由于在手机屏幕显示效果与电脑屏幕相差甚远,使用融合的蓝色并不会出现较为明显的偏色
  4. 蓝色是一种稳定的颜色,给人以宁静感觉,同时,也是一种较为融合的色彩, 由于在手机屏幕显示效果与电脑屏幕相差甚远,使用融合的蓝色并不会出现较为明显的偏色
  5. 蓝色是一种稳定的颜色,给人以宁静感觉,同时,也是一种较为融合的色彩, 由于在手机屏幕显示效果与电脑屏幕相差甚远,使用融合的蓝色并不会出现较为明显的偏色
  6. 蓝色是一种稳定的颜色,给人以宁静感觉,同时,也是一种较为融合的色彩, 由于在手机屏幕显示效果与电脑屏幕相差甚远,使用融合的蓝色并不会出现较为明显的偏色
  7. 蓝色是一种稳定的颜色,给人以宁静感觉,同时,也是一种较为融合的色彩, 由于在手机屏幕显示效果与电脑屏幕相差甚远,使用融合的蓝色并不会出现较为明显的偏色
  8. 蓝色是一种稳定的颜色,给人以宁静感觉,同时,也是一种较为融合的色彩, 由于在手机屏幕显示效果与电脑屏幕相差甚远,使用融合的蓝色并不会出现较为明显的偏色
  9. 蓝色是一种稳定的颜色,给人以宁静感觉,同时,也是一种较为融合的色彩, 由于在手机屏幕显示效果与电脑屏幕相差甚远,使用融合的蓝色并不会出现较为明显的偏色
  10. 蓝色是一种稳定的颜色,给人以宁静感觉,同时,也是一种较为融合的色彩, 由于在手机屏幕显示效果与电脑屏幕相差甚远,使用融合的蓝色并不会出现较为明显的偏色
  11. 蓝色是一种稳定的颜色,给人以宁静感觉,同时,也是一种较为融合的色彩, 由于在手机屏幕显示效果与电脑屏幕相差甚远,使用融合的蓝色并不会出现较为明显的偏色
  12. 蓝色是一种稳定的颜色,给人以宁静感觉,同时,也是一种较为融合的色彩, 由于在手机屏幕显示效果与电脑屏幕相差甚远,使用融合的蓝色并不会出现较为明显的偏色