Design &  User Experience <br />@懒人Felix<br />2011-3-9<br />
Agenda 1<br />Why This Topic<br />What is Design & User Experience<br />The Elements of User Experience-UCD<br />How can w...
WhyThis Topic<br />
Whatis Design<br />A specification of an object, manifested by an agent, intended to accomplish goals, in a particular env...
Whatis User Experience<br />
A person's perceptions and responses that result from the use or anticipated use of a product, system or service<br />
The Elements of User Experience <br />表现层(surface)<br />一系列的网页,由文字和图片组成。<br />框架层(skeleton)<br />按钮、表格、照片和文本区域的位置。<br />结构...
       在每一个层面的决定都会影响到它之上层面的可用选择。<br />这种依赖性意味着在战略层上的决定将具有某种向上的“连锁效应”。 反过来讲,也就意味着每个层面中我们可用的选择,都受到其下层面中所确定的议题的约束。<br />     ...
        这并不是说每一个“较低层面”上的决策都必须在设计“较高层面”之前做出。事物都有两个方面,在“较高层面”中的决定有时会促成对“较低层面”决策的一次重新评估(或者是第一次评估)。在每一个层面,我们都根据竞争对手所做的事情、业界最佳的...
“应用软件”的设计问题<br />信息的发布和检索的角度来看待<br />
表现层(surface)<br />视觉设计,或者说最终产品的外观。<br />框架层(skeleton)<br />不管是软件界面还是信息空间,我们必须要完成信息设计(information design)。在软件产品那边,框架层还包括了安排...
我们要从这个得到什么?<br />网站目标<br />商业目标<br />品牌识别<br />我们的用户要得到什么?<br />用户需求 1<br />用户细分 2<br />可用性和用户研究<br />网站目标和用户需求<br />
<ul><li>过程(process):确定现在能解决哪些事情,而哪些必须要再迟一点才能解决;
产品(product):在项目中要完成的全部工作,保证在开发过程中不会出现模棱两可的情况;</li></ul>功能规格和内容需求<br />Reason #1: So You Know What You’re Building<br />Rea...
<ul><li>交互设计:作为软件界面的网页,为用户设计结构化体验
信息架构:作为超文本的网页,内容建设通过信息架构构建用户体验
它们关心的是理解用户、用户的工作方式和思考方式</li></ul>交互设计与信息架构<br /><ul><li>方式一:将系统设置为不可能犯错的那种。
方式二:是错误难以发生,系统帮助用户找出错误并修正它们。
当用户完成动作后才发现做错了,系统应该为用户提供从错误中恢复的方式。【重做】1
当无法恢复时,提供大量警告2
 信息架构着重于设计组织分类和导航的结构,从而让用户高效率、有效地浏览网页内容;
 信息架构的分类体系</li></li></ul><li>
<ul><li>界面设计:确定框架,“按钮、输入框、界面控件”的领域;
导航设计:呈现信息;
信息设计:呈现有效地信息沟通。</li></ul>界面设计、导航设计和信息设计<br />网站标志<br />友好导航<br />全局导航<br />指示标示线索<br />局部导航<br />搜索<br />主题图片<br />下拉菜单<br...
视觉设计<br />
wait<br /> Don’t let me wait<br /> Don’t let me think 1<br />think<br />bother<br /> Don’t let me bother<br />懒人<br />
How Can we Improve User Experience <br />
Upcoming SlideShare
Loading in...5
×

Design User Experience Felix Share

560

Published on

Design User Experience Felix Share

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
560
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design User Experience Felix Share

  1. 1. Design & User Experience <br />@懒人Felix<br />2011-3-9<br />
  2. 2. Agenda 1<br />Why This Topic<br />What is Design & User Experience<br />The Elements of User Experience-UCD<br />How can we Improve User Experience<br />Process<br />Pattern<br />Principles<br />Practices<br />
  3. 3. WhyThis Topic<br />
  4. 4.
  5. 5. Whatis Design<br />A specification of an object, manifested by an agent, intended to accomplish goals, in a particular environment, using a set of primitive components, satisfying a set of requirements, subject to constraints<br />
  6. 6. Whatis User Experience<br />
  7. 7. A person's perceptions and responses that result from the use or anticipated use of a product, system or service<br />
  8. 8.
  9. 9. The Elements of User Experience <br />表现层(surface)<br />一系列的网页,由文字和图片组成。<br />框架层(skeleton)<br />按钮、表格、照片和文本区域的位置。<br />结构层(structure)<br />确定网站各种特性和功能的最适合的组合方式。<br />范围层(scope)<br />功能和特性是否要纳入网站,即范围。<br />战略层(strategy)<br />经营者和用户分别想从网站得到什么。<br />
  10. 10. 在每一个层面的决定都会影响到它之上层面的可用选择。<br />这种依赖性意味着在战略层上的决定将具有某种向上的“连锁效应”。 反过来讲,也就意味着每个层面中我们可用的选择,都受到其下层面中所确定的议题的约束。<br /> 这种连锁效应意味着在“ 较高层面” 中选择一个界限之外的选项将需要重新考虑“较低层面”中所做出的决策。<br />
  11. 11. 这并不是说每一个“较低层面”上的决策都必须在设计“较高层面”之前做出。事物都有两个方面,在“较高层面”中的决定有时会促成对“较低层面”决策的一次重新评估(或者是第一次评估)。在每一个层面,我们都根据竞争对手所做的事情、业界最佳的实践成果来做决定,这是最简单不过的老常识。这些决策可能产生的连锁效应该是双方向的。<br />  如果想在开始“较高层面”设计之前,要完全确定“较低层面”的话,几乎可以肯定的是,你已经把你的项目日程——也许是你最终产品的成功——扔进了一个危险的境地之中。<br />  相反地,应该计划好你的项目,让任何一个层面中的工作都不能在其下层面的工作完成之前结束。这里最重要的一条是,在我们知道基本形状之前,不能为房屋加上屋顶。<br />
  12. 12. “应用软件”的设计问题<br />信息的发布和检索的角度来看待<br />
  13. 13. 表现层(surface)<br />视觉设计,或者说最终产品的外观。<br />框架层(skeleton)<br />不管是软件界面还是信息空间,我们必须要完成信息设计(information design)。在软件产品那边,框架层还包括了安排好能让用户与系统的功能产生互动的界面元素。对于信息空间方面来讲,这种界面就是屏幕上的一些元素的组合,允许用户在信息架构中穿行。<br />结构层(structure)<br />在软件方面,结构层将从范围转变成系统如何响应用户的请求。在信息空间方面,结构层则是信息空间中内容元素的分布。<br />范围层(scope)<br />从战略层进入范围层以后,在软件方面它就转变成对产品的“功能组合”的详细描述。而在信息空间方面,范围则是对各种内容元素的要求的详细描述。<br />战略层(strategy)<br />来自企业外部的用户需求(user need)是网站的目标——尤其是那些将要使用我们网站的用户。与用户需求相对应的,是我们自己对网站的期望目标。<br />
  14. 14. 我们要从这个得到什么?<br />网站目标<br />商业目标<br />品牌识别<br />我们的用户要得到什么?<br />用户需求 1<br />用户细分 2<br />可用性和用户研究<br />网站目标和用户需求<br />
  15. 15.
  16. 16. <ul><li>过程(process):确定现在能解决哪些事情,而哪些必须要再迟一点才能解决;
  17. 17. 产品(product):在项目中要完成的全部工作,保证在开发过程中不会出现模棱两可的情况;</li></ul>功能规格和内容需求<br />Reason #1: So You Know What You’re Building<br />Reason #2: So You Know What You’re Not Building<br />
  18. 18.
  19. 19. <ul><li>交互设计:作为软件界面的网页,为用户设计结构化体验
  20. 20. 信息架构:作为超文本的网页,内容建设通过信息架构构建用户体验
  21. 21. 它们关心的是理解用户、用户的工作方式和思考方式</li></ul>交互设计与信息架构<br /><ul><li>方式一:将系统设置为不可能犯错的那种。
  22. 22. 方式二:是错误难以发生,系统帮助用户找出错误并修正它们。
  23. 23. 当用户完成动作后才发现做错了,系统应该为用户提供从错误中恢复的方式。【重做】1
  24. 24. 当无法恢复时,提供大量警告2
  25. 25. 信息架构着重于设计组织分类和导航的结构,从而让用户高效率、有效地浏览网页内容;
  26. 26. 信息架构的分类体系</li></li></ul><li>
  27. 27. <ul><li>界面设计:确定框架,“按钮、输入框、界面控件”的领域;
  28. 28. 导航设计:呈现信息;
  29. 29. 信息设计:呈现有效地信息沟通。</li></ul>界面设计、导航设计和信息设计<br />网站标志<br />友好导航<br />全局导航<br />指示标示线索<br />局部导航<br />搜索<br />主题图片<br />下拉菜单<br />正文<br />文本输入<br />按钮<br />辅助导航<br />合作伙伴<br />
  30. 30.
  31. 31. 视觉设计<br />
  32. 32.
  33. 33. wait<br /> Don’t let me wait<br /> Don’t let me think 1<br />think<br />bother<br /> Don’t let me bother<br />懒人<br />
  34. 34.
  35. 35. How Can we Improve User Experience <br />
  36. 36. The Design Process of YCFFIS 1<br />1.整理业务流程<br />找到故事所处业务流程位置,理顺其上下文关系<br />2. 整理或者设计业务单据<br />根据业务流程整理故事涉及的业务单据,若没有自行设计相应业务单据<br />3. 模拟业务单据流转<br />根据故事描述统外,业务单据的填写和流转<br />4. 设计系统中流程<br />根据故事业务流程设计系统中流程<br />5.设计系统表单<br />根据故事业务单据设计系统中相应表单<br />6. 根据系统上下文修正流程及单据<br />7. 设计逻辑模型<br />8.设计交互逻辑<br />9. 组织设计评审<br />10. 修改直至通过<br />GE<br />
  37. 37.
  38. 38.
  39. 39.
  40. 40.
  41. 41.
  42. 42.
  43. 43. The Design Principles of Google <br />1.有用(Useful):以用户为焦点,关注他们的生活、工作和梦想。<br />2. 快速(Fast):争取节省每一个毫秒。<br />3. 简单(Simple):简洁就是力量。<br />4. 魅力(Engaging):能够唤起新手的好奇心,能够吸引资深用户。<br />5. 革新(Innovative):勇于创新。<br />6. 通用(Universal):全世界适用的设计。<br />7. 盈利(Profitable):为现行的和将来的商业模式做好安排。<br />8. 优美(Beautiful):外观具有视觉愉悦性,但是不会令用户分心。<br />9. 可信(Trustworthy):值得用户信赖。<br />10. 人性(Personable):加入人性化因素。<br />
  44. 44. Thanks A lot!Hoh~<br />@懒人Felix<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×