用户体验的要素–以用户为中心的Web设计.ppt

* 战略层 在收集完用户需求并将其排列好优先级后，需求并没有说明如何将这些分散的片段组成一个整体，这就是结构层：为网站创建一个概念结构。 范围层 结构层 框架层 表现层 交互设计与信息架构 结构层的定义 交互设计 信息架构 团队角色和流程 * 结构层的定义 交互设计：作为软件界面的网页，为用户设计结构化体验 信息架构：作为超文本的网页，内容建设通过信息架构构建用户体验 它们关心的是理解用户、用户的工作方式和思考方式 确定各个将要呈现给用户的选项的模式和顺序。 交互设计 交互设计关注与描述“可能的用户行为”，同时定义“系统如何配合与响应”； 用户与软件的和平相处。 概念模型 “交互组件将怎样工作”——概念模型 例如，这是内容元素还是用户访问的位置还是用户请求的对象？ 以购物车为例，使用用户熟悉的概念模型能使用户很快适应不熟悉的网站。 错误处理 当人们犯错误的时候，系统如何反应？如何防止用户继续犯错？ 方式一：将系统设置为不可能犯错的那种。 方式二：是错误难以发生，系统帮助用户找出错误并修正它们。 当用户完成动作后才发现做错了，系统应该为用户提供从错误中恢复的方式。【重做】 当无法恢复时，提供大量警告。 * 信息架构 信息架构着重于设计组织分类和导航的结构，从而让用户高效率、有效地浏览网页内容； 信息架构的分类体系 内容 分类 内容 分类 从上而下的架构方法 “网站目标和用户需求的理解” 从下而上的架构方法 内容和弄能需求的分析 一个适应性强的信息架构系统，能把新内容作为现有结构的一部分容纳进来（左图），也可以把新内容当成一个完整的新部分加入（右图） * 结构方法 信息架构的基本单位是节点。 节点对应任意的信息片段或组合，节点的安排方式： 在层级结构（树状结构、中心辐射结构），节点与其他相关节点之间存在父级/子级关系; 在矩阵结构中，允许用户在节点与节点之间沿着两个或更多的“唯度”移动； 在自然结构中，不遵循任何一致的模式，节点被逐一连接，用于关系不明确或演变中的主题； 在线性结构中，最基本的信息结构类型，逐一而连贯； 组织原则 我们决定哪些节点要编成一组，哪些节点要保持独立的标准即组织原则。 应创建一个与“网站目标”和“用户需求”相对应的、正确的结构。 截面：内容不同的属性，使用错误的截面比没有使用截面更糟糕。 语言和元数据 命名原则：描述、标签和网站使用的其他术语。 控制性词典：保证网站“使用用户的语言”并“保持一致性”。 元数据：关于信息的信息，即以一种结构化的方式来描述内容。 * 团队角色和流程 架构图——描述网站结构的工具术语； 架构图的主要内容：哪些类别要放在一起？哪些保持独立？交互过程中那些步骤如何相互配合？ 视觉辞典 “谁负责这件事情”，通常取决于企业文化或项目本质。 首页 媒体信息 产品 新闻 家用产品 办公室产品 在线支持 文档 首页 入口页 登录流程 最新消息 2a 2C 技术报告 前往 用户列表 视觉辞典是一个提供重非常简单（如左图），到非常复杂（如右图）的示意结构系统。 * 总目录 用户体验为何如此重要 认识这些要素 战略层：网站目标和用户需求 范围层：功能规格和内容需求 结构层：交互设计与信息架构 框架层：界面的设计、导航设计和信息设计 表现层：视觉设计 要素的应用 * 框架层 战略层 在充满概念的结构层中形成了大量的需求，框架层中，我们要更进一步地提炼这些结构，确定详细的界面外观、导航和信息设计，使晦涩的结构变得实在。 范围层 结构层 表现层 界面设计、导航设计和信息设计 框架层的定义 习惯和比喻 界面设计 导航设计 信息设计 线框图 * 框架层的定义 界面设计：确定框架，“按钮、输入框、界面控件”的领域； 导航设计：呈现信息； 信息设计：呈现有效地信息沟通。 确定用什么样的公恩形式来实现。 习惯和比喻 如果我们减少很多反射作用，每天能完成的事情会大大减少。 避免比喻，就是要减少对用户在“理解和使用网上功能”时对心理的要求。 界面设计 成功的界面设计是那些能让用户一眼就看到“最重要的东西”的界面设计。 一个设计良好的界面是要组织好用