SlideShare uma empresa Scribd logo
1 de 32
界面线索性设计 大脸
目标导向设计vs过程体验设计
1.什么是界面线索性?
Contextual Environment Prev. Now Next How to Action
当他们操作时,他们知道下一步即将出现什么、怎么回去——即使是在第一次操作。
2.为什么是移动界面?
界面限制 没有任务栏,没有窗口管理 没有最小化,没有关闭,默认全屏 屏幕尺寸降低到原来的1/4 按钮增大两倍
界面限制
因各种限制导致的导航缺失,使得线索性设计成为移动应用界面导航的救命稻草。
其他原因 交互方式的拟真化 用户的移动场景需求 单任务思想 开发效率提高 竞争差异化
3.线索性设计内容
像素级拟物式外观
看一眼,我就知道你是干嘛的。 类似真实物体的外观和呈现,让人几乎是条件反射般理解客户端的作用。
即时反馈
快速熟悉手势与导航 触摸屏的方式降低了操作的学习成本,即时反馈则大大降低了操作与反馈之间的距离,提高用户学习的效率。
流动式动画
显示界面的流动信息,隐喻操作行为。 无需言语,给动画1秒钟的舞台,他就能解释清楚,他就能被理解。就这么简单。
有逻辑的物理空间
Flipboard 封面 正文 目录
让界面富有空间感,立体化。 从三视图,到立体图的进化。
自圆其说的线索性
有来有往,有去也有回。 关注于界面如何向前流动,也应该让用户知道如何返回。
4.线索性设计展示
iOS:瑕不掩瑜优秀的领先者 总体界面线索性设计的优秀,并不能掩盖其在多任务中的线索性的短板。
Android:山寨仍需努力。 菜单,弹窗,易导致界面相互之间线索性的断裂。
WP7:小伙子,我看好你哦。 革命性创新的线索性设计,全景视图让人惊艳。
5.练习:书籍目录设计
6.Q&A
结束,谢谢大家! 大脸:tolyer@gmail.com
彩蛋:这个PPT的线索性设计是如何? 答中有奖
PPT线索性设计结构 封面 1.什么是线索性 ….. …… 2.为什么是移动界面 … 3.线索性设计内容 …. 4.线索性设计展示 …….

Mais conteúdo relacionado

Semelhante a 界面线索性设计

Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿
Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿
Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿Tim Xia
 
腾讯大讲堂:62 拇指下的精彩(手机qq交互设计经验分享)
腾讯大讲堂:62 拇指下的精彩(手机qq交互设计经验分享)腾讯大讲堂:62 拇指下的精彩(手机qq交互设计经验分享)
腾讯大讲堂:62 拇指下的精彩(手机qq交互设计经验分享)d0nn9n
 
Mobile app design 2010
Mobile app design 2010Mobile app design 2010
Mobile app design 2010Baidu
 
UI DESIGN入门讲座
UI DESIGN入门讲座UI DESIGN入门讲座
UI DESIGN入门讲座Tisa Fu
 
对《iOS人机交互指南》的一点理解
对《iOS人机交互指南》的一点理解对《iOS人机交互指南》的一点理解
对《iOS人机交互指南》的一点理解isnofate
 
来自腾讯Ceo马化腾的ppt
来自腾讯Ceo马化腾的ppt来自腾讯Ceo马化腾的ppt
来自腾讯Ceo马化腾的ppthenryweili
 
产品设计与用户体验Good(来自腾讯ceo马化腾的ppt)
产品设计与用户体验Good(来自腾讯ceo马化腾的ppt)产品设计与用户体验Good(来自腾讯ceo马化腾的ppt)
产品设计与用户体验Good(来自腾讯ceo马化腾的ppt)yihuixue
 
产品设计与用户体验(马化腾)
产品设计与用户体验(马化腾)产品设计与用户体验(马化腾)
产品设计与用户体验(马化腾)jiangwb
 
IxDC 中国交互设计体验日-C1_张立州_手机客户端交互设计三部曲
IxDC 中国交互设计体验日-C1_张立州_手机客户端交互设计三部曲IxDC 中国交互设计体验日-C1_张立州_手机客户端交互设计三部曲
IxDC 中国交互设计体验日-C1_张立州_手机客户端交互设计三部曲IxDC
 
Let's talk about Web Design
Let's talk about Web DesignLet's talk about Web Design
Let's talk about Web DesignAbby Chiu
 
阿里巴巴无线端设计
阿里巴巴无线端设计阿里巴巴无线端设计
阿里巴巴无线端设计lch19880425
 
指尖之美 如何打造优秀的移动应用
指尖之美 如何打造优秀的移动应用指尖之美 如何打造优秀的移动应用
指尖之美 如何打造优秀的移动应用isnofate
 
Week2.how to cooporeate with it
Week2.how to cooporeate with itWeek2.how to cooporeate with it
Week2.how to cooporeate with itditl
 
手机客户端产品设计的10条法则
手机客户端产品设计的10条法则手机客户端产品设计的10条法则
手机客户端产品设计的10条法则also24
 
手机客户端产品设计的10条法则
手机客户端产品设计的10条法则手机客户端产品设计的10条法则
手机客户端产品设计的10条法则also24
 
Pad&pc差异调研报告
Pad&pc差异调研报告Pad&pc差异调研报告
Pad&pc差异调研报告sean mao
 
IxDC 中国交互设计体验日-C3a_钟磊_手持终端交互设计方法2_钟磊
IxDC 中国交互设计体验日-C3a_钟磊_手持终端交互设计方法2_钟磊IxDC 中国交互设计体验日-C3a_钟磊_手持终端交互设计方法2_钟磊
IxDC 中国交互设计体验日-C3a_钟磊_手持终端交互设计方法2_钟磊IxDC
 
How to cooporeate with IT partners from a designer's viewpoint
How to cooporeate with IT partners from a designer's viewpointHow to cooporeate with IT partners from a designer's viewpoint
How to cooporeate with IT partners from a designer's viewpointNTUST
 
Gui Conclusion2
Gui Conclusion2Gui Conclusion2
Gui Conclusion2Yao Lining
 

Semelhante a 界面线索性设计 (20)

Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿
Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿
Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿
 
腾讯大讲堂:62 拇指下的精彩(手机qq交互设计经验分享)
腾讯大讲堂:62 拇指下的精彩(手机qq交互设计经验分享)腾讯大讲堂:62 拇指下的精彩(手机qq交互设计经验分享)
腾讯大讲堂:62 拇指下的精彩(手机qq交互设计经验分享)
 
Mobile app design 2010
Mobile app design 2010Mobile app design 2010
Mobile app design 2010
 
UI DESIGN入门讲座
UI DESIGN入门讲座UI DESIGN入门讲座
UI DESIGN入门讲座
 
对《iOS人机交互指南》的一点理解
对《iOS人机交互指南》的一点理解对《iOS人机交互指南》的一点理解
对《iOS人机交互指南》的一点理解
 
来自腾讯Ceo马化腾的ppt
来自腾讯Ceo马化腾的ppt来自腾讯Ceo马化腾的ppt
来自腾讯Ceo马化腾的ppt
 
产品设计与用户体验Good(来自腾讯ceo马化腾的ppt)
产品设计与用户体验Good(来自腾讯ceo马化腾的ppt)产品设计与用户体验Good(来自腾讯ceo马化腾的ppt)
产品设计与用户体验Good(来自腾讯ceo马化腾的ppt)
 
产品设计与用户体验(马化腾)
产品设计与用户体验(马化腾)产品设计与用户体验(马化腾)
产品设计与用户体验(马化腾)
 
IxDC 中国交互设计体验日-C1_张立州_手机客户端交互设计三部曲
IxDC 中国交互设计体验日-C1_张立州_手机客户端交互设计三部曲IxDC 中国交互设计体验日-C1_张立州_手机客户端交互设计三部曲
IxDC 中国交互设计体验日-C1_张立州_手机客户端交互设计三部曲
 
Let's talk about Web Design
Let's talk about Web DesignLet's talk about Web Design
Let's talk about Web Design
 
阿里巴巴无线端设计
阿里巴巴无线端设计阿里巴巴无线端设计
阿里巴巴无线端设计
 
指尖之美 如何打造优秀的移动应用
指尖之美 如何打造优秀的移动应用指尖之美 如何打造优秀的移动应用
指尖之美 如何打造优秀的移动应用
 
Week2.how to cooporeate with it
Week2.how to cooporeate with itWeek2.how to cooporeate with it
Week2.how to cooporeate with it
 
手机客户端产品设计的10条法则
手机客户端产品设计的10条法则手机客户端产品设计的10条法则
手机客户端产品设计的10条法则
 
手机客户端产品设计的10条法则
手机客户端产品设计的10条法则手机客户端产品设计的10条法则
手机客户端产品设计的10条法则
 
Pad&pc差异调研报告
Pad&pc差异调研报告Pad&pc差异调研报告
Pad&pc差异调研报告
 
IxDC 中国交互设计体验日-C3a_钟磊_手持终端交互设计方法2_钟磊
IxDC 中国交互设计体验日-C3a_钟磊_手持终端交互设计方法2_钟磊IxDC 中国交互设计体验日-C3a_钟磊_手持终端交互设计方法2_钟磊
IxDC 中国交互设计体验日-C3a_钟磊_手持终端交互设计方法2_钟磊
 
How to cooporeate with IT partners from a designer's viewpoint
How to cooporeate with IT partners from a designer's viewpointHow to cooporeate with IT partners from a designer's viewpoint
How to cooporeate with IT partners from a designer's viewpoint
 
Gui Conclusion2
Gui Conclusion2Gui Conclusion2
Gui Conclusion2
 
Gui Conclusion2
Gui Conclusion2Gui Conclusion2
Gui Conclusion2
 

Mais de Alite Yu

电子商务网站评测模版
电子商务网站评测模版电子商务网站评测模版
电子商务网站评测模版Alite Yu
 
移动端网页——发现视频内容的未来
移动端网页——发现视频内容的未来 移动端网页——发现视频内容的未来
移动端网页——发现视频内容的未来 Alite Yu
 
信、达、雅的设计之美
信、达、雅的设计之美信、达、雅的设计之美
信、达、雅的设计之美Alite Yu
 
alibaba-udc-交互设计公开课
alibaba-udc-交互设计公开课alibaba-udc-交互设计公开课
alibaba-udc-交互设计公开课Alite Yu
 
界面图标设计
界面图标设计界面图标设计
界面图标设计Alite Yu
 
I os视觉分享 2011共享版
I os视觉分享 2011共享版I os视觉分享 2011共享版
I os视觉分享 2011共享版Alite Yu
 
交互设计Vs前端开发
交互设计Vs前端开发交互设计Vs前端开发
交互设计Vs前端开发Alite Yu
 
体验的历程 Afooli
体验的历程 Afooli体验的历程 Afooli
体验的历程 AfooliAlite Yu
 
Interaction designer how to grow up
Interaction designer how to grow upInteraction designer how to grow up
Interaction designer how to grow upAlite Yu
 
User centeredmetics-110223101127-phpapp01
User centeredmetics-110223101127-phpapp01User centeredmetics-110223101127-phpapp01
User centeredmetics-110223101127-phpapp01Alite Yu
 
如何选择和运用不同的用户研究方法
如何选择和运用不同的用户研究方法如何选择和运用不同的用户研究方法
如何选择和运用不同的用户研究方法Alite Yu
 
关于会议那些事儿
关于会议那些事儿关于会议那些事儿
关于会议那些事儿Alite Yu
 
理性的审美
理性的审美理性的审美
理性的审美Alite Yu
 
用户体验设计公开课讲义 交互设计禅意花园
 用户体验设计公开课讲义 交互设计禅意花园 用户体验设计公开课讲义 交互设计禅意花园
用户体验设计公开课讲义 交互设计禅意花园Alite Yu
 
交互设计禅意花园
交互设计禅意花园交互设计禅意花园
交互设计禅意花园Alite Yu
 
交互设计模式创新
交互设计模式创新交互设计模式创新
交互设计模式创新Alite Yu
 
消费品List改版分享
消费品List改版分享消费品List改版分享
消费品List改版分享Alite Yu
 

Mais de Alite Yu (18)

电子商务网站评测模版
电子商务网站评测模版电子商务网站评测模版
电子商务网站评测模版
 
移动端网页——发现视频内容的未来
移动端网页——发现视频内容的未来 移动端网页——发现视频内容的未来
移动端网页——发现视频内容的未来
 
信、达、雅的设计之美
信、达、雅的设计之美信、达、雅的设计之美
信、达、雅的设计之美
 
alibaba-udc-交互设计公开课
alibaba-udc-交互设计公开课alibaba-udc-交互设计公开课
alibaba-udc-交互设计公开课
 
界面图标设计
界面图标设计界面图标设计
界面图标设计
 
My yahoo
My yahooMy yahoo
My yahoo
 
I os视觉分享 2011共享版
I os视觉分享 2011共享版I os视觉分享 2011共享版
I os视觉分享 2011共享版
 
交互设计Vs前端开发
交互设计Vs前端开发交互设计Vs前端开发
交互设计Vs前端开发
 
体验的历程 Afooli
体验的历程 Afooli体验的历程 Afooli
体验的历程 Afooli
 
Interaction designer how to grow up
Interaction designer how to grow upInteraction designer how to grow up
Interaction designer how to grow up
 
User centeredmetics-110223101127-phpapp01
User centeredmetics-110223101127-phpapp01User centeredmetics-110223101127-phpapp01
User centeredmetics-110223101127-phpapp01
 
如何选择和运用不同的用户研究方法
如何选择和运用不同的用户研究方法如何选择和运用不同的用户研究方法
如何选择和运用不同的用户研究方法
 
关于会议那些事儿
关于会议那些事儿关于会议那些事儿
关于会议那些事儿
 
理性的审美
理性的审美理性的审美
理性的审美
 
用户体验设计公开课讲义 交互设计禅意花园
 用户体验设计公开课讲义 交互设计禅意花园 用户体验设计公开课讲义 交互设计禅意花园
用户体验设计公开课讲义 交互设计禅意花园
 
交互设计禅意花园
交互设计禅意花园交互设计禅意花园
交互设计禅意花园
 
交互设计模式创新
交互设计模式创新交互设计模式创新
交互设计模式创新
 
消费品List改版分享
消费品List改版分享消费品List改版分享
消费品List改版分享
 

界面线索性设计

Notas do Editor

  1. 互联网里还傻逼样有理想的设计师。 极简主义,革新,消除欲望。 外向接触本能受挫焦虑症患者。 人格残缺的高智商低收入男性。 88年,Geek,爱电影大家好,今天的课题<线索性设计>,属于我自己的自己的一个名词创意。首先我想调查一下:这里有几个苹果粉丝,这里有几个微软粉丝,请你们说说,你觉得苹果产品,最优秀的一点是什么,或者说,用一个词,形容你在使用他们产品的心情的时候,你会怎么形容。我个人来说,我是微软粉丝,我不喜欢苹果的产品,但是我很欣赏。我一直不服气的一个大众的认同理论:苹果的体验做得比微软好。我通常会抵触说,那你为什么离不开微软?我自己也一直在思考这个问题。
  2. 然后,我接触两种设计方法:目标导向设计&过程体验设计。而正是因为这两种设计方式,表现了两家公司不同的设计风格。那么今天,我是来解释我自己对这个理论的一点认识的,这个理论就是,为什么苹果公司的体验更好?第二个问题,就不在这个话题的讨论中。首先举个例子,大家看ipad,有人告诉我,我怎么让文件夹回到上面的位置。
  3. 我们不得不否认的一点是,界面与界面之间其实是应该纯在联系的,我指的这种联系是说,空间感。存在相互之间的层级和逻辑关系的,而且这种关系,月符合现实的,越好。越容易让别人理解,越来越不用让别人学习。
  4. 比如,我们在网页中,常使用的tab的导航,实际上就是tab notebook的一种变化。
  5. 那么在,界面设计当中,我们除了关注当前界面之外,还应该去关注上一个界面,与下一个界面。以及他们之间的过渡。建立一个上下文空间。因为,他们能够非常容易帮你解答一个问题,how to action?尤其是在触摸屏上。
  6. 线索性给人以可预测性。这是一种掌握的感觉,是一种控制的感觉。
  7. 直接触摸,而不是借助其他工具翻译命令。因此,界面的线索性也要建立起来。推箱子的例子。用户随时在移动,常被打断,恢复的时候,用户需要知道当前的位置。单任务思想,一个界面只完成一项任务,卡片式界面,让界面相互之间富有逻辑。
  8. 桌面图标的立体效果拍照,开锁的声音书架日历外形
  9. iPad文件夹打开操作,iPad双击Home的效果。
  10. 我记得很久以前xp是这么设计的,当你拖动窗口的时候,窗口并不会和你一起动,和你动的是一个虚框。他只会表达一个移动状态。按钮状态。滑块,声音,滑动,缩放,弹性列表(无法获得真实力学反馈而采用的视觉模拟)
  11. 如果一个错误行为,你需要半年后才能得到教训,和你马上得到教训,这有什么区别?即时反馈,降低了用户的的犯错所导致的等待成本,以及他所引起的挫败感。
  12. 几乎任何的页面翻转,都有动画效果。卡片式滚动,逻辑界面,一个页面,一项任务。
  13. iPad文件夹打开操作,iPad双击Home的效果。
  14. 通过动画,视觉外观,建立符合真实逻辑的物理空间。演示Flipboard的物理空间与杂志的关系。浮层与下侧界面的空间关系。
  15. 通过动画,视觉外观,建立符合真实逻辑的物理空间。演示Flipboard的物理空间与杂志的关系。
  16. iPad文件夹打开操作,iPad双击Home的效果。
  17. Safari的多窗口切换,ibooks的书籍返回,iphoto的界面返回。Flipboard阴影的变化。
  18. Flipboard的杂志化,卡片式的逻辑界面,层级过深,但是界面确富有逻辑。多任务时,应用切换障碍。
  19. 展示wifi设置内,android界面的变态:菜单弹窗。
  20. 展示Windows phone 的旋转切换.
  21. iPad文件夹打开操作,iPad双击Home的效果。
  22. iPad文件夹打开操作,iPad双击Home的效果。