见微知著——无线产品交互细节
DESCRIPTION
设计蜂巢"无线交互,升级体验"分享会中来自百度的Elya在分享中提到了无线交互对设计师的三个要求:更懂平台、更懂用户、更懂细节。关于平台方面,elya分享了以下6种平台迁移方式。拍扁式:将web页面按照栅格模块打散,纵向排布起来。手风琴式:将暂时不用的信息临时隐藏起来,以节省屏幕空间。多用于有多个并列信息集合的情况。全景图式:以windows phone7为代表,一次只显示全景图中的一部分内容。标签页式:这里要注意下iphone的标签页一般放置在屏幕下方,而android的标签一般放置在屏幕上方。九宫格式。更为复杂的混合式:在同一个界面布局上,采用上面5种中的多个方式行进设计。下图中的两个案例就是很好的混合式设计。TRANSCRIPT
![Page 1: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/1.jpg)
见微知著—无线产品交互细节
mux.baidu.com
11年5月16日星期一
![Page 2: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/2.jpg)
11年5月16日星期一
![Page 3: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/3.jpg)
MUX:百度无线用户体验部,来自木星⋯11年5月16日星期一
![Page 4: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/4.jpg)
11年5月16日星期一
![Page 5: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/5.jpg)
坚持以用户体验为中心来进行设计11年5月16日星期一
![Page 6: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/6.jpg)
11年5月16日星期一
![Page 7: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/7.jpg)
遵循跨平台一致化的设计原则11年5月16日星期一
![Page 8: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/8.jpg)
MUX.baidu.com
11年5月16日星期一
![Page 9: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/9.jpg)
MUX.baidu.com
mux老大
11年5月16日星期一
![Page 10: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/10.jpg)
MUX.baidu.com
mux老大
@elya妞
11年5月16日星期一
![Page 11: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/11.jpg)
交互无处不在
11年5月16日星期一
![Page 12: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/12.jpg)
在Web端我们这样做交互
11年5月16日星期一
![Page 13: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/13.jpg)
在Web端我们这样做交互
11年5月16日星期一
![Page 14: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/14.jpg)
在Web端我们这样做交互Grid Systems 栅格系统
11年5月16日星期一
![Page 15: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/15.jpg)
在Web端我们这样做交互Grid Systems 栅格系统
11年5月16日星期一
![Page 16: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/16.jpg)
在Web端我们这样做交互Grid Systems 栅格系统
Sitemap 网站地图
11年5月16日星期一
![Page 17: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/17.jpg)
在Web端我们这样做交互Grid Systems 栅格系统
Sitemap 网站地图
11年5月16日星期一
![Page 18: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/18.jpg)
在Web端我们这样做交互Grid Systems 栅格系统
Sitemap 网站地图
Breadcrumbs 面包屑
11年5月16日星期一
![Page 19: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/19.jpg)
在Web端我们这样做交互Grid Systems 栅格系统
Sitemap 网站地图
Breadcrumbs 面包屑
11年5月16日星期一
![Page 20: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/20.jpg)
在Web端我们这样做交互Grid Systems 栅格系统
Sitemap 网站地图
Breadcrumbs 面包屑
Navigation Tabs 导航标签
11年5月16日星期一
![Page 21: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/21.jpg)
在Web端我们这样做交互Grid Systems 栅格系统
Sitemap 网站地图
Breadcrumbs 面包屑
Navigation Tabs 导航标签
11年5月16日星期一
![Page 22: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/22.jpg)
在Web端我们这样做交互Grid Systems 栅格系统
Sitemap 网站地图
Breadcrumbs 面包屑
Navigation Tabs 导航标签
And so on⋯ 等等⋯
11年5月16日星期一
![Page 23: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/23.jpg)
世界在变化⋯
11年5月16日星期一
![Page 24: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/24.jpg)
世界在变化⋯
11年5月16日星期一
![Page 25: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/25.jpg)
世界在变化⋯
11年5月16日星期一
![Page 26: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/26.jpg)
世界在变化⋯
11年5月16日星期一
![Page 27: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/27.jpg)
世界在变化⋯
软件、硬件、网络、使用环境都发生了变化⋯
11年5月16日星期一
![Page 28: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/28.jpg)
无线交互崛起
11年5月16日星期一
![Page 29: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/29.jpg)
角色转变⋯
11年5月16日星期一
![Page 30: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/30.jpg)
角色转变⋯
交互设计面临挑战,也充满机遇
11年5月16日星期一
![Page 31: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/31.jpg)
角色转变
11年5月16日星期一
![Page 32: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/32.jpg)
角色转变
11年5月16日星期一
![Page 33: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/33.jpg)
角色转变
11年5月16日星期一
![Page 34: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/34.jpg)
角色转变
11年5月16日星期一
![Page 35: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/35.jpg)
角色转变
11年5月16日星期一
![Page 36: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/36.jpg)
角色转变
11年5月16日星期一
![Page 37: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/37.jpg)
角色转变
11年5月16日星期一
![Page 38: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/38.jpg)
角色转变
11年5月16日星期一
![Page 39: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/39.jpg)
角色转变
你要更懂平台、更懂用户、更懂细节11年5月16日星期一
![Page 40: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/40.jpg)
平台迁移,各种乾坤大挪移11年5月16日星期一
![Page 41: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/41.jpg)
1 拍扁式11年5月16日星期一
![Page 42: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/42.jpg)
1 拍扁式
11年5月16日星期一
![Page 43: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/43.jpg)
1 拍扁式
11年5月16日星期一
![Page 44: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/44.jpg)
1 拍扁式
11年5月16日星期一
![Page 45: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/45.jpg)
2 手风琴式11年5月16日星期一
![Page 46: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/46.jpg)
2 手风琴式
11年5月16日星期一
![Page 47: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/47.jpg)
2 手风琴式
11年5月16日星期一
![Page 48: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/48.jpg)
3 全景图式11年5月16日星期一
![Page 49: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/49.jpg)
3 全景图式
11年5月16日星期一
![Page 50: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/50.jpg)
3 全景图式
11年5月16日星期一
![Page 51: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/51.jpg)
4 标签页式11年5月16日星期一
![Page 52: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/52.jpg)
4 标签页式状态栏
导航栏
标签栏
状态栏标题栏
标签栏
11年5月16日星期一
![Page 53: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/53.jpg)
4 标签页式
11年5月16日星期一
![Page 54: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/54.jpg)
5 九宫格式11年5月16日星期一
![Page 55: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/55.jpg)
5 九宫格式
11年5月16日星期一
![Page 56: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/56.jpg)
当然,还有更复杂的...
11年5月16日星期一
![Page 57: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/57.jpg)
当然,还有更复杂的...
11年5月16日星期一
![Page 58: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/58.jpg)
当然,还有更复杂的...
11年5月16日星期一
![Page 59: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/59.jpg)
Question1Action bar右上角放重要操作的设计很好,但如果内容太多要分标签的话,那标签页是放在哪个位置好呢?
11年5月16日星期一
![Page 60: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/60.jpg)
Question1
1.和palm一样,分标签采用下拉框形式;2.和小米分享一样,上部第一行是标题和Action bar,第二行是分标签。3.和sina微博一样,顶部是Action bar和标题,底部是分标签。
——晓声语录
action bar是结合任意界面下点击app logo返回仿九宫格的枢纽页面实现导航和交互结构的
——螺旋桨
Action bar右上角放重要操作的设计很好,但如果内容太多要分标签的话,那标签页是放在哪个位置好呢?
11年5月16日星期一
![Page 61: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/61.jpg)
见微知著,细节是魔鬼11年5月16日星期一
![Page 62: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/62.jpg)
1 横屏模式,重新设计11年5月16日星期一
![Page 63: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/63.jpg)
横屏?
1 横屏模式,重新设计
11年5月16日星期一
![Page 64: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/64.jpg)
横屏?
1 横屏模式,重新设计
11年5月16日星期一
![Page 65: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/65.jpg)
横屏?
1 横屏模式,重新设计
11年5月16日星期一
![Page 66: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/66.jpg)
横屏?
1 横屏模式,重新设计
11年5月16日星期一
![Page 67: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/67.jpg)
Tips
1 横屏模式,不止拉伸适配
体验不好就别做
有时候需要重新设计
注意动画效果
要做就做全
别丢了位置
11年5月16日星期一
![Page 68: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/68.jpg)
Tips
1 横屏模式,不止拉伸适配
体验不好就别做
有时候需要重新设计
注意动画效果
要做就做全
别丢了位置
11年5月16日星期一
![Page 69: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/69.jpg)
Tips
1 横屏模式,不止拉伸适配
体验不好就别做
有时候需要重新设计
注意动画效果
要做就做全
别丢了位置
11年5月16日星期一
![Page 70: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/70.jpg)
Tips
1 横屏模式,不止拉伸适配
体验不好就别做
有时候需要重新设计
注意动画效果
要做就做全
别丢了位置
11年5月16日星期一
![Page 71: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/71.jpg)
Tips
1 横屏模式,不止拉伸适配
体验不好就别做
有时候需要重新设计
注意动画效果
要做就做全
别丢了位置
11年5月16日星期一
![Page 72: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/72.jpg)
Tips
1 横屏模式,不止拉伸适配
体验不好就别做
有时候需要重新设计
注意动画效果
要做就做全
别丢了位置
11年5月16日星期一
![Page 73: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/73.jpg)
2 点击瞬间,惊喜乍现11年5月16日星期一
![Page 74: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/74.jpg)
2 点击瞬间,惊喜乍现
11年5月16日星期一
![Page 75: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/75.jpg)
2 点击瞬间,惊喜乍现
11年5月16日星期一
![Page 76: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/76.jpg)
2 点击瞬间,惊喜乍现
11年5月16日星期一
![Page 77: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/77.jpg)
Tips
2 点击瞬间,乾坤小挪移
点到我了要及时反馈
隐藏内容在点后显示
操作反馈要符合用户心智模型
11年5月16日星期一
![Page 78: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/78.jpg)
Tips
2 点击瞬间,乾坤小挪移
点到我了要及时反馈
隐藏内容在点后显示
操作反馈要符合用户心智模型
11年5月16日星期一
![Page 79: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/79.jpg)
Tips
2 点击瞬间,乾坤小挪移
点到我了要及时反馈
隐藏内容在点后显示
操作反馈要符合用户心智模型
11年5月16日星期一
![Page 80: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/80.jpg)
Tips
2 点击瞬间,乾坤小挪移
点到我了要及时反馈
隐藏内容在点后显示
操作反馈要符合用户心智模型
11年5月16日星期一
![Page 81: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/81.jpg)
3 应用之间,睦邻友好11年5月16日星期一
![Page 82: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/82.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 83: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/83.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 84: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/84.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 85: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/85.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 86: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/86.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 87: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/87.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 88: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/88.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 89: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/89.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 90: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/90.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 91: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/91.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 92: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/92.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 93: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/93.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 94: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/94.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 95: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/95.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 96: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/96.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 97: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/97.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 98: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/98.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 99: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/99.jpg)
3 应用之间,睦邻友好
11年5月16日星期一
![Page 100: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/100.jpg)
Tips
3 应用之间,睦邻友好
这个生态系统中,不是只有你自己
设计的时候,要着眼全局
应用之间可以互相调用
11年5月16日星期一
![Page 101: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/101.jpg)
Tips
3 应用之间,睦邻友好
这个生态系统中,不是只有你自己
设计的时候,要着眼全局
应用之间可以互相调用
11年5月16日星期一
![Page 102: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/102.jpg)
Tips
3 应用之间,睦邻友好
这个生态系统中,不是只有你自己
设计的时候,要着眼全局
应用之间可以互相调用
11年5月16日星期一
![Page 103: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/103.jpg)
Tips
3 应用之间,睦邻友好
这个生态系统中,不是只有你自己
设计的时候,要着眼全局
应用之间可以互相调用
11年5月16日星期一
![Page 104: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/104.jpg)
4 操作响应,告诉用户我在运转11年5月16日星期一
![Page 105: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/105.jpg)
4 操作响应,告诉用户我在运转
11年5月16日星期一
![Page 106: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/106.jpg)
4 操作响应,告诉用户我在运转
11年5月16日星期一
![Page 107: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/107.jpg)
Tips
4 操作响应,告诉用户你在运转
当应用运转时,应该有个告知
减少等待感,让用户有事可做
必要的时候,应该告知进度
11年5月16日星期一
![Page 108: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/108.jpg)
Tips
4 操作响应,告诉用户你在运转
当应用运转时,应该有个告知
减少等待感,让用户有事可做
必要的时候,应该告知进度
11年5月16日星期一
![Page 109: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/109.jpg)
Tips
4 操作响应,告诉用户你在运转
当应用运转时,应该有个告知
减少等待感,让用户有事可做
必要的时候,应该告知进度
11年5月16日星期一
![Page 110: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/110.jpg)
Tips
4 操作响应,告诉用户你在运转
当应用运转时,应该有个告知
减少等待感,让用户有事可做
必要的时候,应该告知进度
11年5月16日星期一
![Page 111: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/111.jpg)
5 过渡转场,一个都不能少11年5月16日星期一
![Page 112: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/112.jpg)
5 过渡转场,一个都不能少
11年5月16日星期一
![Page 113: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/113.jpg)
5 过渡转场,一个都不能少
11年5月16日星期一
![Page 114: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/114.jpg)
Tips
5 转场过渡,一个都不能少
慎重的添加过渡动画
注意过渡动画的方向感
增强直接控制的感觉
将用户的行为结果视觉化
11年5月16日星期一
![Page 115: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/115.jpg)
Tips
5 转场过渡,一个都不能少
慎重的添加过渡动画
注意过渡动画的方向感
增强直接控制的感觉
将用户的行为结果视觉化
11年5月16日星期一
![Page 116: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/116.jpg)
Tips
5 转场过渡,一个都不能少
慎重的添加过渡动画
注意过渡动画的方向感
增强直接控制的感觉
将用户的行为结果视觉化
11年5月16日星期一
![Page 117: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/117.jpg)
Tips
5 转场过渡,一个都不能少
慎重的添加过渡动画
注意过渡动画的方向感
增强直接控制的感觉
将用户的行为结果视觉化
11年5月16日星期一
![Page 118: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/118.jpg)
Tips
5 转场过渡,一个都不能少
慎重的添加过渡动画
注意过渡动画的方向感
增强直接控制的感觉
将用户的行为结果视觉化
11年5月16日星期一
![Page 119: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/119.jpg)
6 手势操作,搭起快捷操作的桥梁11年5月16日星期一
![Page 120: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/120.jpg)
6 手势操作,搭起快捷操作的桥梁
11年5月16日星期一
![Page 121: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/121.jpg)
6 手势操作,搭起快捷操作的桥梁
11年5月16日星期一
![Page 122: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/122.jpg)
6 手势操作,搭起快捷操作的桥梁
11年5月16日星期一
![Page 123: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/123.jpg)
Tips
6 手势操作,搭起快捷的桥梁
手势操作用来搭起快捷的桥梁
手势对应的操作也是可定义的
谨防手势操作的误操作性
11年5月16日星期一
![Page 124: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/124.jpg)
Tips
6 手势操作,搭起快捷的桥梁
手势操作用来搭起快捷的桥梁
手势对应的操作也是可定义的
谨防手势操作的误操作性
11年5月16日星期一
![Page 125: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/125.jpg)
Tips
6 手势操作,搭起快捷的桥梁
手势操作用来搭起快捷的桥梁
手势对应的操作也是可定义的
谨防手势操作的误操作性
11年5月16日星期一
![Page 126: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/126.jpg)
Tips
6 手势操作,搭起快捷的桥梁
手势操作用来搭起快捷的桥梁
手势对应的操作也是可定义的
谨防手势操作的误操作性
11年5月16日星期一
![Page 127: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/127.jpg)
最后,分享一个设计原则
11年5月16日星期一
![Page 128: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/128.jpg)
无线产品交互原则
SHE法则
缩小(Sherink)隐藏(Hide)附加(Embody)
——《简单法则》
11年5月16日星期一
![Page 129: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/129.jpg)
无线产品交互原则
SHE法则
缩小(Sherink)隐藏(Hide)附加(Embody)
——《简单法则》
SHEO法则+组织( organize )
11年5月16日星期一
![Page 130: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/130.jpg)
11年5月16日星期一
![Page 131: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/131.jpg)
11年5月16日星期一
![Page 132: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/132.jpg)
YOU!
11年5月16日星期一
![Page 133: 见微知著——无线产品交互细节](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e01fc1a28ab366a8b462f/html5/thumbnails/133.jpg)
YOU!
mux.baidu.com
11年5月16日星期一