ixdc 中国交互设计体验日-b4b_陈俊标、杨光_平台移植体验设计

平台移植体验设计

2010.CDC.Tencent

关于我们

陈俊标

腾讯 · CDC · 专家设计师

杨光

腾讯 · CDC · 高级交互设计师

互相认识

今天讨论

平台移植体验设计的背景？

如何做？

为什么？

BG 平台移植的体验设计

windows邮箱和Flickr

Windows live mail Hotmail

Flickr Uploadr flickr.com

种类繁多的移动设备

Symbian BlackBerry WM7 Android iPhone OS

还有半移动设备

iPad

还有半移动设备

BlackBerry PlayBook

2.1

2.53

2.98

3.38

3.84

4.2

0.5062 0.7327

1.1782

1.557

2.3366

2.77

0

1

2

3

4

5

2007.12 2008.06 2008.12 2009.06 2009.12 2010.06

全体网民

手机互联网

用户数（亿）

中国网民概况（CNNIC）

案例一：Twitter

twitter.com iPhone

案例一：Twitter – 第三方客户端

TweetDeck Symbian

让用户随时随地的使用互联网产品

案例二：老牌的NAVER、Flickr

HOW 平台移植的体验设计

统一性和差异化

选择一个适合做移植的产品：

A、QQ

B、微博

C、地图

D、youku

E、音乐播放器

F、其他

案例一：facebook

facebook facebook.com

案例二：Mtime

Mtime mtime.com

案例二：Mtime feature

首页推荐

我的电影、好友、博客、日志、相册……

电影新闻

新片、热映、排行榜

影评

专题

电视新闻

热播、排行榜

影人新闻、八卦、访谈、排行榜

博客、相册、论坛、群组、话题等社区服务

游戏

电影院

电影院—影讯查询

评论

Mtime全国影讯 Mtime.com

战略定位

各自为战

战略定位

互相补充

选择你战略：

A、互相补充

B、各自为战

案例三：Twitter

案例三：Twitter

案例三：Twitter

案例四 – QQ Music

案例四 – QQ Music

什么是统一的？

小结 — 统一

产品

面向的用户

基本功能（核心功能）

……

交互

信息元素

文案

……

视觉

Logo

视觉风格（如果不用系统的话）

图标的symbol

……

案例五：foursquare

foursquare foursquare.com

案例六：招商银行

案例六：招商银行

案例六：招商银行

案例七 – QQ

案例八 – QQ换肤

案例七 – QQ

什么是差异的？

小结 — 差异

产品

面向的用户

产品定位

重点功能

……

交互

信息架构

功能设计

控件、组件

……

视觉

字体、颜色

控件样式

动画

……

对于选择的产品给出设计方案：

说明统一点和差异点

WHY

总结

用户思维模型（认知+感知）

产品定位（产品认知连贯性：核心功能点--用户的认知习惯）

信息传达（核心信息元素、结构，icon表征，品牌的设计-视觉风格--用户的感知习惯）

用户行为模型（目的+计划+实施+评价+出错）

场景差异（功能选择、功能设计—用户的目的和计划）

平台差异（信息架构的设计，性能、技术、内部一致性—用户的操作引导和反馈）

政治、经济、文化

情境统一（角色、场景、仸务）

谢谢，再会 腾讯：t.qq.com/CDC