ixdc 中国交互设计体验日-b4b_陈俊标、杨光_平台移植体验设计
DESCRIPTION
崛起越来越多为移动设备设计的产品,很多是从原来的客户端产品、网页产品移植而来。什么样的产品可以移植到移动设备上?iPhone定的规则足够么?他们都具备什么样的体验?移植的过程中,哪些体验被保留?哪些体验做了变化? 课程目标 1、分析各个平台下优秀的体验设计,辨析出各个平台的体验设计特征 2、讨论出各个平台下的软件\app\网页等体验区别 3、讨论出体验设计移植时的方法和依据 课程参与者将学到 了解各个不同平台下的体验设计的区别,为设计移植找到方法和依据 工作坊环节安排 (一个半小时) 1、 简述: 展示不同平台下的体验设计,抛出问题。 2、 组织展开讨论 3、 总结 2010年首届中国交互设计体验日,是以“赢在互动”为主题的大型交互设计会议盛宴。大会包括交互设计演讲、论坛、展览及工作坊。通过互动、交流体验的方式,将“交互设计”的理念在中国设计产业中进行高层次、深度、广泛的推广与传播。 我们希望通过这次大会,聚集国内外交互设计先驱者;展示中国交互设计优秀成果;为交互设计教育与企业搭建一个交流的平台; 促进中国交互设计产业与国际设计前沿的同步发展。TRANSCRIPT
![Page 1: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/1.jpg)
平台移植体验设计
2010.CDC.Tencent
![Page 2: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/2.jpg)
关于我们
陈俊标
腾讯 · CDC · 专家设计师
杨光
腾讯 · CDC · 高级交互设计师
![Page 3: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/3.jpg)
互相认识
![Page 4: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/4.jpg)
今天讨论
平台移植体验设计的背景?
如何做?
为什么?
![Page 5: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/5.jpg)
BG 平台移植的体验设计
![Page 6: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/6.jpg)
windows邮箱和Flickr
Windows live mail Hotmail
Flickr Uploadr flickr.com
![Page 7: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/7.jpg)
种类繁多的移动设备
Symbian BlackBerry WM7 Android iPhone OS
![Page 8: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/8.jpg)
还有半移动设备
iPad
![Page 9: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/9.jpg)
还有半移动设备
BlackBerry PlayBook
![Page 10: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/10.jpg)
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)
![Page 11: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/11.jpg)
![Page 12: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/12.jpg)
案例一:Twitter
twitter.com iPhone
![Page 13: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/13.jpg)
案例一:Twitter – 第三方客户端
TweetDeck Symbian
![Page 14: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/14.jpg)
让用户随时随地的使用互联网产品
案例二:老牌的NAVER、Flickr
![Page 15: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/15.jpg)
![Page 16: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/16.jpg)
HOW 平台移植的体验设计
![Page 17: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/17.jpg)
统一性和差异化
![Page 18: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/18.jpg)
选择一个适合做移植的产品:
A、QQ
B、微博
C、地图
D、youku
E、音乐播放器
F、其他
![Page 19: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/19.jpg)
案例一:facebook
facebook facebook.com
![Page 20: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/20.jpg)
案例二:Mtime
Mtime mtime.com
![Page 21: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/21.jpg)
案例二:Mtime feature
首页推荐
我的电影、好友、博客、日志、相册……
电影新闻
新片、热映、排行榜
影评
专题
电视新闻
热播、排行榜
影人新闻、八卦、访谈、排行榜
博客、相册、论坛、群组、话题等社区服务
游戏
电影院
电影院—影讯查询
评论
Mtime全国影讯 Mtime.com
![Page 22: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/22.jpg)
战略定位
各自为战
![Page 23: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/23.jpg)
战略定位
互相补充
![Page 24: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/24.jpg)
选择你战略:
A、互相补充
B、各自为战
![Page 25: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/25.jpg)
案例三:Twitter
![Page 26: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/26.jpg)
案例三:Twitter
![Page 27: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/27.jpg)
案例三:Twitter
![Page 28: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/28.jpg)
案例四 – QQ Music
![Page 29: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/29.jpg)
案例四 – QQ Music
![Page 30: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/30.jpg)
什么是统一的?
![Page 31: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/31.jpg)
小结 — 统一
产品
面向的用户
基本功能(核心功能)
……
交互
信息元素
文案
……
视觉
Logo
视觉风格(如果不用系统的话)
图标的symbol
……
![Page 32: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/32.jpg)
案例五:foursquare
foursquare foursquare.com
![Page 33: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/33.jpg)
案例六:招商银行
![Page 34: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/34.jpg)
案例六:招商银行
![Page 35: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/35.jpg)
案例六:招商银行
![Page 36: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/36.jpg)
案例七 – QQ
![Page 37: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/37.jpg)
案例八 – QQ换肤
![Page 38: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/38.jpg)
案例七 – QQ
![Page 39: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/39.jpg)
什么是差异的?
![Page 40: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/40.jpg)
小结 — 差异
产品
面向的用户
产品定位
重点功能
……
交互
信息架构
功能设计
控件、组件
……
视觉
字体、颜色
控件样式
动画
……
![Page 41: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/41.jpg)
对于选择的产品给出设计方案:
说明统一点和差异点
![Page 42: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/42.jpg)
WHY
![Page 43: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/43.jpg)
总结
用户思维模型(认知+感知)
产品定位(产品认知连贯性:核心功能点--用户的认知习惯)
信息传达(核心信息元素、结构,icon表征,品牌的设计-视觉风格--用户的感知习惯)
用户行为模型(目的+计划+实施+评价+出错)
场景差异(功能选择、功能设计—用户的目的和计划)
平台差异(信息架构的设计,性能、技术、内部一致性—用户的操作引导和反馈)
政治、经济、文化
情境统一(角色、场景、仸务)
![Page 44: IxDC 中国交互设计体验日-B4b_陈俊标、杨光_平台移植体验设计](https://reader031.vdocuments.mx/reader031/viewer/2022012303/5495ee4fac7959042e8b4f9c/html5/thumbnails/44.jpg)
谢谢,再会 腾讯:t.qq.com/CDC