Powered by Alite Yu-UED小阿里公开课

交互设计禅意花园联合出品

公开课讲义 - 体验禅意设计

体验设计基本概念

交互设计，又称互动设计， ( 英文 Interaction Design, 缩写 IxD 或者 IaD), 是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式 (the "interaction", 即人工制品在特定场景下的反应方式 ) 相关的界面。——Wikipedia.org

“启发式交互 - 让创新的界面具有教学功能。”

什么是交互设计：

什么样的人更适合做交互设计师？交互设计师需要具备凭空想象复杂行为的能力，交互设计应当在任何代码编写之前做。交互设计师必须能够在代码被写出来之前，想象它是做什么的。—— Alan Cooper

体验设计基本概念

如果说设计 = 解决问题的话，

那么界面视觉设计，就是用视觉语言去解决逻辑问题。

色彩选择，决定了人们在第一眼看到网站时的感觉。

因此，色彩是 Web 设计者手中最普遍，也是最强大的工具。

“让色彩更具有可读性 - 用最少的颜色表达最准确的内容。”

什么是界面视觉设计：

为什么当人们开始喜欢某些界面的时候，它们事实上会变得更可用？积极的情感增强了创造性和广度优先的思考，而负面的情感集中在认知上，增强深度优先处理并把干扰降到最少；积极的情感让人们更能容忍一些困难，在寻找解决方案的时候变得更灵活而有创造性。—— Donald Norman

体验设计基本概念

用户体验是一个测试产品满意度与使用度的词语，可能是基于西方产品设计理论中发展出来的，英语是 User Experience 。在大多数情况下，产品软体测试或是商业行销测试时，会用到用户体验这个词。有时在探讨设计价值时，也会用到此新设计是否导出更差的用户体验，来评估其好坏。

除了用户能完成必须的任务之外，应该还提供积极的体验，而应用设计和交互流程也应令用户感到愉悦。

“以用户为中心设计 - 设计必须是满足用户需求的、可行的，其次才是可产生商业价值的。”

什么是用户体验：

为什么电子商务网站用户体验设计师有时也把用户体验称作顾客体验？这里特指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉，是否成功，是否享受，是否还想再来 / 使用。他们能够忍受的问题，疑惑和 BUG 的程度。—— Uigarden.net

体验设计基本流程

• 腾讯 ISD组织架构

体验设计基本流程

• 腾讯 ISD网站组 - 网站设计流程

体验设计基本流程

• 阿里巴巴用户体验部项目流程

体验设计基本流程

• 阿里巴巴用户体验部项目流程

体验设计交付物标准与原则

为什么要对各阶段输出物的名称进行修正？更加形象化的表达，体现专业性，减少歧义

prototype mockup demo交互原型 视觉稿 前端 demo

体验设计交付物标准与原则

用以表达交互设计内容

是产品原型设计过程中的阶段性成果、过渡型交付

通过可视化产出使各方对设计范围和内容有形象化的、统一的认知

“输出物是用以表述观点和描述设计方案，本身不是设计的目的。”

交互输出物（ Prototype）：

什么时候提交输出物？在向视觉设计或前端开发提交需求时，应附带上传完整的输出物文档，并在变更时保持附件更新

体验设计交付物标准与原则

帮助交互设计师明确方案需要提供的内容及范围，减少遗漏

减少沟通和衔接成本、提高工作效率

标准化是为了：

体验设计交付物标准与原则

Axure RP文档（推荐）采用 Axure RP 交付输出物，便于项目的版本持续更新、存档以及团队协作

适用于：新项目或复杂项目；有多人参与设计的项目

PNG或 PSD等图片格式（推荐）如需求是建立于现有的产品之上，也可根据现有视觉规范直接提供视觉输出物，请参考慧慧的视觉输出物标准化文档，可以采用 Axure RP 或者 photoshop等工具生成

适用于：已有明确视觉规范的现有产品和功能页面，或小需求处理

文本描述如需求涉及修改比较小，如修改或增加模块，并无新增视觉样式和交互功能，则直接提交设计描述即可。

适用于：文本描述或口头表述已经可以描述清楚的需求

体验设计交付物标准与原则

做什么：

•明确交互输出物应涵盖的内容•示例说明交互输出物应描述的关键信息和重要逻辑•整理视觉设计和前端开发对交互输出物的需求

不做什么：

•本文档只提供交互输出物的建议内容和标注方式范例，并不强制统一，设计师可针对项目的实际情况选择性参考

体验设计交付物标准与原则

• Axure交互设计原型六点原则：

1. 用 Axure页面导航结构去构建信息架构。

2. 页面的命名要有统一的规范标准。例如：一级页面，二级页面，过程页面（状态页、结果页）等都要有统一的标准。

3. 避免纠结复杂的交互控件实现。要记得 Axure 是快速原型实现工具，并且网上已经有很多

成型的 Axure交互设计模板可以直接调用。

4. 少一点色彩与布局，多一点标注与说明。把色彩与布局的问题留给视觉思考吧，多些减少沟通成本并可消除歧义的注释吧。

5. Axure 交付物也要注意可读性、可及性。把你的交互产出物移交给视觉和前端的时候，记得让他们能很容易看懂你想传达的东西。

6. 交互设计原型不是必须生成 HTML 文件并能动态交互。不一定要能动态展示，但必须要能完整清楚传达出你的交互过程。

体验设计可用性测试

也就是说，可用性测试是指让用户使用产品（服务）的设计原型或者成品，通过观察，记录和分析用户的行为和感受，以改善产品（服务）可用性的一系列方法。它适用于产品（服务）前期设计开发，中期改进和后期维护完善的各个阶段，是用户中心设计的思想的重要体现。—— Wikipedia.org

什么是可用性测试：可用性评估方法中最为常用的一种，作为人机交互研究的一个重要领域，已经被广泛研究。 1994年 Jakob Nielsen 在他的人机交互设计领域的权威著作《 Usability Engineering》中将可用性测试定义为：可用性测试是一项通过用户的使用来评估产品的技术，由于它反应了用户的真实使用经验，所以可以视为一种不可或缺的可用性检验过程。

体验设计可用性测试

卡片分类法 (Card sorting) 是一种在网站或其他规划初期

常用的测试方法，透过卡片分类法可以让我们了解一些在设计网站架构时十分有用的使用者资讯：

1.了解真正符合使用者习惯的资讯分类。

2.比对网站设计者与使用者在对网站资讯分类上的认知差异，作为调整架构的依据。

3.找出项目命名上的问题。

“ Nielson主要针对信息架构中的信息分类测试方法——卡片分类法，提出实际测试中可能经常出现的问题，并给出了较好的建议”

什么是卡片分类法：

卡片分类法（ Card sorting ) 更多研究介绍：交互设计禅意花园—— Alitedesign.com

体验设计可用性测试

简约版启发式评估（Heuristic Evaluation ) 更多研究介绍：交互设计禅意花园——

Alitedesign.com

什么是简约版启发式评估：

启发式评估（Heuristic

Evaluation）是一种用来发现用户界面设计中的可用性问题、快速、高效、低投入的可用性方法。

简约版启发式评估概述：针对现有启发式评估流程上复杂，实现成本比较高的特点，进行的改进与精简，立足于机动性强，实现简单方便，灵活性更高的特点。适用环境：适用于重要度和紧急度都高的项目。

交互设计禅意花园经典案例

电子商务网站系列（推荐）

谁为用户买单(1)——电子商务网站的交互设计

谁为用户买单(2)——无结果页面反馈提示交互设计

亚马逊购物用户体验分析

电子商务搜索LIST页面用户体验设计

用户体验设计原则系列（推荐）

Microsoft ,Apple,Google用户体验设计原则

设计原则-控件Balloons(气球状提示)

交互设计模式系列（推荐）

交互设计模式(一)-前言

交互设计模式(二)-Pagination(分页,标记页数)

交互设计模式(三)-Tagging(标签 )

交互设计模式 ( 四 )-Spatial Memory(空间记忆 )

怎样做好体验设计

• 同理心、目标明确、高效、优雅

同理心：从合乎常理的角度观察问题；

目标明确：带着明确的设计目的；

高效：主导注重实效的项目设计讨论；

优雅：设计出优雅统一的用户界面交互。

Powered by by Alite Yu-UED小阿里

最新更新时间： 2010/07/25