见微知著—无线产品交互细节

mux.baidu.com

11年5月16日星期一

11年5月16日星期一

MUX：百度无线用户体验部，来自木星⋯11年5月16日星期一

11年5月16日星期一

坚持以用户体验为中心来进行设计11年5月16日星期一

11年5月16日星期一

遵循跨平台一致化的设计原则11年5月16日星期一

MUX.baidu.com

11年5月16日星期一

MUX.baidu.com

mux老大

11年5月16日星期一

MUX.baidu.com

mux老大

@elya妞

11年5月16日星期一

交互无处不在

11年5月16日星期一

在Web端我们这样做交互

11年5月16日星期一

在Web端我们这样做交互

11年5月16日星期一

在Web端我们这样做交互Grid Systems 栅格系统

11年5月16日星期一

在Web端我们这样做交互Grid Systems 栅格系统

11年5月16日星期一

在Web端我们这样做交互Grid Systems 栅格系统

Sitemap 网站地图

11年5月16日星期一

在Web端我们这样做交互Grid Systems 栅格系统

Sitemap 网站地图

11年5月16日星期一

在Web端我们这样做交互Grid Systems 栅格系统

Sitemap 网站地图

Breadcrumbs 面包屑

11年5月16日星期一

在Web端我们这样做交互Grid Systems 栅格系统

Sitemap 网站地图

Breadcrumbs 面包屑

11年5月16日星期一

在Web端我们这样做交互Grid Systems 栅格系统

Sitemap 网站地图

Breadcrumbs 面包屑

Navigation Tabs 导航标签

11年5月16日星期一

在Web端我们这样做交互Grid Systems 栅格系统

Sitemap 网站地图

Breadcrumbs 面包屑

Navigation Tabs 导航标签

11年5月16日星期一

在Web端我们这样做交互Grid Systems 栅格系统

Sitemap 网站地图

Breadcrumbs 面包屑

Navigation Tabs 导航标签

And so on⋯ 等等⋯

11年5月16日星期一

世界在变化⋯

11年5月16日星期一

世界在变化⋯

11年5月16日星期一

世界在变化⋯

11年5月16日星期一

世界在变化⋯

11年5月16日星期一

世界在变化⋯

软件、硬件、网络、使用环境都发生了变化⋯

11年5月16日星期一

无线交互崛起

11年5月16日星期一

角色转变⋯

11年5月16日星期一

角色转变⋯

交互设计面临挑战，也充满机遇

11年5月16日星期一

角色转变

11年5月16日星期一

角色转变

11年5月16日星期一

角色转变

11年5月16日星期一

角色转变

11年5月16日星期一

角色转变

11年5月16日星期一

角色转变

11年5月16日星期一

角色转变

11年5月16日星期一

角色转变

11年5月16日星期一

角色转变

你要更懂平台、更懂用户、更懂细节11年5月16日星期一

平台迁移，各种乾坤大挪移11年5月16日星期一

1 拍扁式11年5月16日星期一

1 拍扁式

11年5月16日星期一

1 拍扁式

11年5月16日星期一

1 拍扁式

11年5月16日星期一

2 手风琴式11年5月16日星期一

2 手风琴式

11年5月16日星期一

2 手风琴式

11年5月16日星期一

3 全景图式11年5月16日星期一

3 全景图式

11年5月16日星期一

3 全景图式

11年5月16日星期一

4 标签页式11年5月16日星期一

4 标签页式状态栏

导航栏

标签栏

状态栏标题栏

标签栏

11年5月16日星期一

4 标签页式

11年5月16日星期一

5 九宫格式11年5月16日星期一

5 九宫格式

11年5月16日星期一

当然，还有更复杂的...

11年5月16日星期一

当然，还有更复杂的...

11年5月16日星期一

当然，还有更复杂的...

11年5月16日星期一

Question1Action bar右上角放重要操作的设计很好，但如果内容太多要分标签的话，那标签页是放在哪个位置好呢？

11年5月16日星期一

Question1

1.和palm一样，分标签采用下拉框形式；2.和小米分享一样，上部第一行是标题和Action bar，第二行是分标签。3.和sina微博一样，顶部是Action bar和标题,底部是分标签。

——晓声语录

action bar是结合任意界面下点击app logo返回仿九宫格的枢纽页面实现导航和交互结构的

——螺旋桨

Action bar右上角放重要操作的设计很好，但如果内容太多要分标签的话，那标签页是放在哪个位置好呢？

11年5月16日星期一

见微知著，细节是魔鬼11年5月16日星期一

1 横屏模式，重新设计11年5月16日星期一

横屏？

1 横屏模式，重新设计

11年5月16日星期一

横屏？

1 横屏模式，重新设计

11年5月16日星期一

横屏？

1 横屏模式，重新设计

11年5月16日星期一

横屏？

1 横屏模式，重新设计

11年5月16日星期一

Tips

1 横屏模式，不止拉伸适配

体验不好就别做

有时候需要重新设计

注意动画效果

要做就做全

别丢了位置

11年5月16日星期一

Tips

1 横屏模式，不止拉伸适配

体验不好就别做

有时候需要重新设计

注意动画效果

要做就做全

别丢了位置

11年5月16日星期一

Tips

1 横屏模式，不止拉伸适配

体验不好就别做

有时候需要重新设计

注意动画效果

要做就做全

别丢了位置

11年5月16日星期一

Tips

1 横屏模式，不止拉伸适配

体验不好就别做

有时候需要重新设计

注意动画效果

要做就做全

别丢了位置

11年5月16日星期一

Tips

1 横屏模式，不止拉伸适配

体验不好就别做

有时候需要重新设计

注意动画效果

要做就做全

别丢了位置

11年5月16日星期一

Tips

1 横屏模式，不止拉伸适配

体验不好就别做

有时候需要重新设计

注意动画效果

要做就做全

别丢了位置

11年5月16日星期一

2 点击瞬间，惊喜乍现11年5月16日星期一

2 点击瞬间，惊喜乍现

11年5月16日星期一

2 点击瞬间，惊喜乍现

11年5月16日星期一

2 点击瞬间，惊喜乍现

11年5月16日星期一

Tips

2 点击瞬间，乾坤小挪移

点到我了要及时反馈

隐藏内容在点后显示

操作反馈要符合用户心智模型

11年5月16日星期一

Tips

2 点击瞬间，乾坤小挪移

点到我了要及时反馈

隐藏内容在点后显示

操作反馈要符合用户心智模型

11年5月16日星期一

Tips

2 点击瞬间，乾坤小挪移

点到我了要及时反馈

隐藏内容在点后显示

操作反馈要符合用户心智模型

11年5月16日星期一

Tips

2 点击瞬间，乾坤小挪移

点到我了要及时反馈

隐藏内容在点后显示

操作反馈要符合用户心智模型

11年5月16日星期一

3 应用之间，睦邻友好11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

3 应用之间，睦邻友好

11年5月16日星期一

Tips

3 应用之间，睦邻友好

这个生态系统中，不是只有你自己

设计的时候，要着眼全局

应用之间可以互相调用

11年5月16日星期一

Tips

3 应用之间，睦邻友好

这个生态系统中，不是只有你自己

设计的时候，要着眼全局

应用之间可以互相调用

11年5月16日星期一

Tips

3 应用之间，睦邻友好

这个生态系统中，不是只有你自己

设计的时候，要着眼全局

应用之间可以互相调用

11年5月16日星期一

Tips

3 应用之间，睦邻友好

这个生态系统中，不是只有你自己

设计的时候，要着眼全局

应用之间可以互相调用

11年5月16日星期一

4 操作响应，告诉用户我在运转11年5月16日星期一

4 操作响应，告诉用户我在运转

11年5月16日星期一

4 操作响应，告诉用户我在运转

11年5月16日星期一

Tips

4 操作响应，告诉用户你在运转

当应用运转时，应该有个告知

减少等待感，让用户有事可做

必要的时候，应该告知进度

11年5月16日星期一

Tips

4 操作响应，告诉用户你在运转

当应用运转时，应该有个告知

减少等待感，让用户有事可做

必要的时候，应该告知进度

11年5月16日星期一

Tips

4 操作响应，告诉用户你在运转

当应用运转时，应该有个告知

减少等待感，让用户有事可做

必要的时候，应该告知进度

11年5月16日星期一

Tips

4 操作响应，告诉用户你在运转

当应用运转时，应该有个告知

减少等待感，让用户有事可做

必要的时候，应该告知进度

11年5月16日星期一

5 过渡转场，一个都不能少11年5月16日星期一

5 过渡转场，一个都不能少

11年5月16日星期一

5 过渡转场，一个都不能少

11年5月16日星期一

Tips

5 转场过渡，一个都不能少

慎重的添加过渡动画

注意过渡动画的方向感

增强直接控制的感觉

将用户的行为结果视觉化

11年5月16日星期一

Tips

5 转场过渡，一个都不能少

慎重的添加过渡动画

注意过渡动画的方向感

增强直接控制的感觉

将用户的行为结果视觉化

11年5月16日星期一

Tips

5 转场过渡，一个都不能少

慎重的添加过渡动画

注意过渡动画的方向感

增强直接控制的感觉

将用户的行为结果视觉化

11年5月16日星期一

Tips

5 转场过渡，一个都不能少

慎重的添加过渡动画

注意过渡动画的方向感

增强直接控制的感觉

将用户的行为结果视觉化

11年5月16日星期一

Tips

5 转场过渡，一个都不能少

慎重的添加过渡动画

注意过渡动画的方向感

增强直接控制的感觉

将用户的行为结果视觉化

11年5月16日星期一

6 手势操作，搭起快捷操作的桥梁11年5月16日星期一

6 手势操作，搭起快捷操作的桥梁

11年5月16日星期一

6 手势操作，搭起快捷操作的桥梁

11年5月16日星期一

6 手势操作，搭起快捷操作的桥梁

11年5月16日星期一

Tips

6 手势操作，搭起快捷的桥梁

手势操作用来搭起快捷的桥梁

手势对应的操作也是可定义的

谨防手势操作的误操作性

11年5月16日星期一

Tips

6 手势操作，搭起快捷的桥梁

手势操作用来搭起快捷的桥梁

手势对应的操作也是可定义的

谨防手势操作的误操作性

11年5月16日星期一

Tips

6 手势操作，搭起快捷的桥梁

手势操作用来搭起快捷的桥梁

手势对应的操作也是可定义的

谨防手势操作的误操作性

11年5月16日星期一

Tips

6 手势操作，搭起快捷的桥梁

手势操作用来搭起快捷的桥梁

手势对应的操作也是可定义的

谨防手势操作的误操作性

11年5月16日星期一

最后，分享一个设计原则

11年5月16日星期一

无线产品交互原则

SHE法则

缩小（Sherink）隐藏（Hide）附加（Embody）

——《简单法则》

11年5月16日星期一

无线产品交互原则

SHE法则

缩小（Sherink）隐藏（Hide）附加（Embody）

——《简单法则》

SHEO法则+组织（ organize ）

11年5月16日星期一

11年5月16日星期一

11年5月16日星期一

YOU！

11年5月16日星期一

YOU！

mux.baidu.com

11年5月16日星期一