• What is Design & User Experience

• Why This Topic

• The Elements of User Experience

• How to Improve User Experience

– Process

– Pattern

– Principles

– Practices

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

A person's perceptions and responses that result from the use or anticipated use of a product, system or service

后面将使用中文

表现层（surface）

一系列的网页，由文字和图片组成。

框架层（skeleton）

按钮、表格、照片和文本区域的位置。

结构层（structure）

确定网站各种特性和功能的最适合的组合方式。

范围层（scope）

功能和特性是否要纳入网站，即范围。

战略层（strategy）

经营者和用户分别想从网站得到什么。

在每一个层面的决定都会影响到

它之上层面的可用选择。

这种依赖性意味着在战略层上的

决定将具有某种向上的“连锁效应”。

反过来讲，也就意味着每个层面中我

们可用的选择，都受到其下层面中所

确定的议题的约束。

这种连锁效应意味着在“ 较高层面”

中选择一个界限之外的选项将需要重新

考虑“较低层面”中所做出的决策。

这并不是说每一个“较低层面”上的决策都必须在设计“较高层面”之前做出。事物都有两个方

面，在“较高层面”中的决定有时会促成对“较低层面”决策的一次重新评估（或者是第一次评

估）。在每一个层面，我们都根据竞争对手所做的事情、业界最佳的实践成果来做决定，这是最

简单不过的老常识。这些决策可能产生的连锁效应该是双方向的。

如果想在开始“较高层面”设计之前，要完全确定“较低层面”的话，几乎可以肯定的是，你已

经把你的项目日程——也许是你最终产品的成功——扔进了一个危险的境地之中。

相反地，应该计划好你的项目，让任何一个层面中的工作都不能在其下层面的工作完成之前

结束。这里最重要的一条是，在我们知道基本形状之前，不能为房屋加上屋顶。

“应用软件”的设计问题

信息的发布和检索的角度来看待

表现层（surface）

视觉设计，或者说最终产品的外观。

框架层（skeleton）

不管是软件界面还是信息空间，我们必须要完成信

息设计（information design）。在软件产品那边，

框架层还包括了安排好能让用户与系统的功能产生

互动的界面元素。对于信息空间方面来讲，这种界

面就是屏幕上的一些元素的组合，允许用户在信息

架构中穿行。

结构层（structure）

在软件方面，结构层将从范围转变成系统如何响应

用户的请求。在信息空间方面，结构层则是信息空

间中内容元素的分布。

范围层（scope）

从战略层进入范围层以后，在软件方面它就转变成

对产品的“功能组合”的详细描述。而在信息空间方面，

范围则是对各种内容元素的要求的详细描述。

战略层（strategy）

来自企业外部的用户需求（user need）是网站的目

标——尤其是那些将要使用我们网站的用户。与用

户需求相对应的，是我们自己对网站的期望目标。

我们要从这个得到什么？

我们的用户要得到什么？

• 网站目标

• 商业目标

• 品牌识别

用户需求

用户细分

可用性和用户研究

网站目标和用户需求

功能规格和内容需求

Reason #1: So You Know What You’re Building

Reason #2: So You Know What You’re Not Building

过程（process）：确定现在能解决哪些事情，

而哪些必须要再迟一点才能解决；

产品（product）：在项目中要完成的全部工

作，保证在开发过程中不会出现模棱两可的情

况；

交互设计与信息架构

信息架构着重于设计组织分类和导航的结构，从

而让用户高效率、有效地浏览网页内容；

信息架构的分类体系

交互设计：作为软件界面的网页，为用户设计结

构化体验

信息架构：作为超文本的网页，内容建设通过信

息架构构建用户体验

它们关心的是理解用户、用户的工作方式和思考

方式

方式一：将系统设置为不可能犯错的那种。

方式二：是错误难以发生，系统帮助用户找出错误并

修正它们。

当用户完成动作后才发现做错了，系统应该为用户提

供从错误中恢复的方式。【重做】

当无法恢复时，提供大量警告。

界面设计、导航设计和信息设计

界面设计：确定框架，“按钮、输入框、界

面控件”的领域；

导航设计：呈现信息；

信息设计：呈现有效地信息沟通。

网站标志全局导航

友好导航

指示标示线索

局部导航

辅助导航

搜索

下拉菜单

文本输入

按钮

合作伙伴

主题图片

正文

视觉设计

1.整理业务流程

找到故事所处业务流程位置，理顺其上下文关系

2. 整理或者设计业务单据

根据业务流程整理故事涉及的业务单据，若没有自行设

计相应业务单据

3. 模拟业务单据流转

根据故事描述统外，业务单据的填写和流转

4. 设计系统中流程

根据故事业务流程设计系统中流程

5.设计系统表单

根据故事业务单据设计系统中相应表单

6. 根据系统上下文修正流程及单据

7. 设计逻辑模型

8. 组织设计评审

9. 修改直至通过

1.有用（Useful）：以用户为焦点，关注他们的生活、工作和梦

想。2. 快速（Fast）：争取节省每一个毫秒。

3. 简单（Simple）：简洁就是力量。

4. 魅力（Engaging）：能够唤起新手的好奇心，能够吸引资深用

户。

5. 革新（Innovative）：勇于创新。

6. 通用（Universal）：全世界适用的设计。

7. 盈利（Profitable）：为现行的和将来的商业模式做好安排。

8. 优美（Beautiful）：外观具有视觉愉悦性，但是不会令用户分

心。9. 可信（Trustworthy）：值得用户信赖。

10. 人性（Personable）：加入人性化因素。

Thanks A lot！Hoh~