用户界面设计概述
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
供修改的机会，但不必退出
数据输入设计的方法(续)
提供反馈
提示有效的输入格式或数值范围 用户能够查看已输入的内容
按用户速度输入和自动格式化
用户能控制数据输入的速度 能接受用户输入的空格，并进行格式化
允许编辑
用户输入后允许再编辑，且采用风格一致的 编辑界面
屏幕显示设计
存在问题 改进建议
1
目的：准备部件
用户行为模型示例（攒机） 准备
计划：打开各部件包装 实施：打开包装确定连接关系
零部件较多
评价：
异常场景：
2
目的：
计划：
组装
实施：打开机箱、固定主板、连接开关电 开关电源线 源线、固定光驱硬盘、插入扩展卡和内存 路连接复杂
条等、盖上机箱
评价：
异常场景：
3
目的：测试机器组装结果
用户界面设计概述
上节回顾
基本概念
人机交互 人机交互系统 人机交互方式
讨论
界面设计的内涵
界面结构 界面布局 界面风格 界面色彩 …… 界面交互
内容概述
用户界面设计
概念（结构）设计(Conceptual Design) 交互设计(Interactive Design)
交互行为决定用户界面设计的约束条件 界面上的组件必须为交互行为服务，可以对
界面进行美化、抽象，甚至艺术化，但不能 破坏交互行为
2.1.2 用户界面设计的约束条 件
交互方式 界面空间的尺寸 屏幕分辨率 兼容性（操作系统、浏览器） 硬件 网络带宽 …
2.1.3 用户界面设计的内容
交互设计的定义
交互设计，是指设计师对产品及其使用 者之间的互动机制进行分析、预测、定 义、规划、描述和探索的过程。
简单地说，交互设计是设计产品交互方式的 过程。
具体地说，交互设计是设计和定义使用者如 何使用产品完成某一任务的过程。
交互设计的特点
交互设计是关于如何创建新的、有效的 用户体验的问题；
用户 vs实际意义 文化差异 思维逻辑 社会环境
设计师约束
设计时间 个性要求 工作压力 面向不同的用户 自以为是典型用户
用户/设计师的交互模型
设计目标
工程师 设计师
构思
界面形式 诱导行为
用户
接触 新产品
经验与需求
联想
判断行为
文字用语注意事项(续)
格式
一屏幕的文字不要太多 同行文字字型统一，可以给关键词粗体、变体等特
殊处理 英文词语尽量采用小写和易认的字体（标题除外）
信息内容
信息内容显示简洁清楚，尽量不左右滚屏 内容较多时以空白分段或以小窗口分块 重要字段可用粗体和闪烁吸引注意力和强化
颜色
是 好的设计
一 致
误导/不满 否 意的设计
用户的特征
界面风格
儿童 老人
界面内容的用词
一本正经 诙谐幽默
界面的工作方式
手机/PDA 电脑
地域、文化和语言
用户的两种阅读方式
用户的角色
界面设计的需求分析以用户为中心，具 有很大的主观性
从用户自身特征开始，划分用户群，引 出用户角色的概念
交互设计的基本方法
结构图法
对产品信息架构的设计方法
自然语言法
对产品交互过程细节的设计方法
任务走查法
对整个产品的审查和优化方法
结构图法
抛开界面细节，只考虑信息的组织形式 操作步骤
明确描述全部内容，总结产品所需要表达的 所有信息
画出信息的树状结构图 在纸上画出各界面的草图。草图包含：页面
运营方式等
用户研究与分析
非常重要，团队配合完成 设计师搜集相关资料，分析目标用户的使用特征、
情感、习惯、心里、需求等，提出用户研究报告和 可用性设计建议。
架构设计
确定界面交互与流程的设计 制定交互方式、操作与跳转流程、结构、布局、信
息和其他界面元素
交互设计的工作流程（Cont.）
按照一定参考体系划分用户的类型，代表一 定的用户特征，描述用户个体的集合
用户的行为模型
用户行为模型也称为“用户任务模型” 人机交互的行为模型（4个阶段）
确定目标，形成意图 指定动作，执行动作 领会系统状态，解释系统状态 评价结果
目标 计划 实施 评价
序号 任务名
行为阶段
Bill Moggridge首次提出。
开始称为“软面（Soft Face）” 后来更名为交互设计
交互设计
交互设计是人工产品、环境和系统 的行为、以及传达这种行为的外观 元素的设计和定义。(Alan Cooper)
交互设计首先规划和描述事物的行为 方式
然后描述传达这种行为的有效形式
导航功能。随时转移功能，很容易从一个功能跳到另 外一个功能。
快速反馈。给用户心理上的暗示，避免用户焦急。 使用用户的语言，而非技术的语言。 清楚的错误提示。误操作后，系统提供有针对性的提
示。 允许兼用鼠标和键盘。同一种功能，同时可以使用鼠
标和键盘，并提供多种实现可能性。
2.1.3.3 视觉设计
原型设计
阶段性标志 “手绘－>图形－>FLASH－>视频” 原型的本质是一个DEMO，无需全部功能，但要体现
出设计对象的基本特性
外观设计
结合经过反复讨论过的分析结果进行 色调、风格、窗口、图标、皮肤的表现是关键
界面输出
设计师配合开发人员完成界面整合
完善工作
多部门协作参与 可用性研究、测试回馈，以及可行性建议的完善
交互设计(Interaction Design)的不仅要考虑 可用性，还要考虑用户的期望和体验。
可用性保证产品可用，基本功能完备且方便； 用户体验提供给用户与众不同的或意想之外的感觉。
交互设计的内容
定义与“产品的行为和使用”密切相关 的产品形式
预测产品的使用如何影响产品与用户的 关系，以及用户对产品的理解
数据输入设计 数据输出显示设计 控制设计
视觉（外观）设计(Visual Design)
用户界面的软件开发过程 用户界面的标准化
2.1. 用户界面设计
用户界面（User Interface）是一 个静态的术语。
用户界面设计（User Interface Design）关心的是用户界面本身的 组件、布局和风格，以有效支撑交 互设计的需求。
操作步骤
分析并总结所有用户任务 根据用户任务进行可用性评估
交互设计的原则
用户控制界面。“下一步”、“完成”，面对不同层 次提供多种选择，给不同层次的用户提供多种可能性。
允许工作中断。例如用手机写新短信的时候，收到短 信或电话，完成后回来仍能够找到刚才正写的新短信。
方便退出。如手机的退出，是按一个键完全退出，还 是一层一层的退出。尽量提供两种可能性。
屏幕显示设计要引导用户注意到最重要 的信息
布局(Layout) 文字用语(Message) 颜色(Color)
屏幕布局
因功能不同而侧重点不同 重点突出功能区
文字用语
设计标题 正文 提示信息 控制命令
文字用语注意事项
用语简洁性
避免使用专业术语 尽量用肯定句，而不要用否定句 用主动语态，而不用被动语态 用礼貌而不过分的强调语句 对不同的用户，用语结合心理学原则 英文词语尽量避免缩写 在按钮、功能键的标示中尽量使用描述操作的动词
了解“人”本身的心理和行为特点
了解各种有效的交互方式，并对其进 行增强和扩展
交互设计的关键特征
以用户为中心
让用户参与整个设计和评估的过程
可用性标准的特殊性
开始就明确可用性目标和用户体验目 标
迭代设计
在迭代中改进设计
交互设计的4个基本活动
用户需求分析
了解目标用户
概念设计
认知与抽象的整体架构
交互设计
人机交互方式
外观（视觉）设计
愉悦的颜色、字体和风格等
2.1.3.1 概念设计
通过对用户和任务的分析，制定出产品 的整体架构。
目录体系的逻辑分类和术语定义。 基于纸质的线框图。
用户分析
用户的分类
内向型、外向型； 感知型、直觉型； 程序员、非程序员； 偶然用户、间歇式用户、经常用户；
用户主导控制，提供防“呆”的操 作方式
控制界面设计的主要任务
交互设计注重产品与用户行为的交互以 及交互的过程；
交互设计可以增强和扩展人们通信及交 互的方式，提高产品的可用性；
可用性 vs. 交互设计
可用性(Usability)是交互设计的基本而重要 的指标
对可用程度的总体评价 从用户角度衡量产品是否易学、好记、有效、高效、
安全、少错的质量指标
标题、导航、重要的链接和按钮 模拟演示界面的操作行为
自然语言法
设计界面交互细节的方法 界面表达的要求
清晰，明确，简洁，得体
使用自然的语言表达界面的信息
用面对面的交流来传达信息 将面对面的传达转变为书面表达 再用界面语言翻译书面表达
任务走查法
以用户任务为线索，以可用性准则 为依据的主观评估
有效的强化手段 具有美学价值
颜色注意事项
一屏不超过4或5种，最多7种。可用不同 层次及形状来配合颜色，增加变化
焦点对象颜色鲜明，非焦点对象暗淡 前景色鲜艳，背景色暗淡 避免不兼容的颜色在一起（对比除外） 用颜色表示某种信息，要保证用户懂得
其涵义，符合用户的文化背景
控制界面设计
使用与交互
“使用”，人发出的主观行为，作用于 客观对象的关系
人主导 客观对象辅助
“交互”，参与的双方对等，没有主从 之分
交互，是用户（服务使用者）与系统 （服务提供者）之间的交换信息的过程。
交互设计
交互设计（Interaction Design）
关注交互，特别是用户体验，的一门学科 诞生于20世纪八十年代 1984年，由IDEO的联合创始人
数据输入界面 平面显示界面 控制界面
数据输入界面设计
数据输入界面
耗费用户的大部分时间 计算机系统中最易出错的部分
数据输入界面设计的总目标
简化用户输入，尽可能采用自动输入 降低输入出错率，尽可能提供选择 容忍用户错误，提供必要的验证反馈
数据输入设计的方法
减轻用户记忆，采用列表选择
设计交互方案
让用户参与方案设计
构建设计的交互式版本
给出设计的交互式版本 可能只是个线框图，未必能够真正运行
设计评估
评估设计版本的可用性，用户能否接受
交互设计的工作流程
产品定位与市场分析
由新产品研发部门以及市场确定需求 设计师了解产品的市场定位、产品定义、客户群体、
设置默认值 自动填入用户已输入过的内容
使界面具有预见性和一致性
用户控制数据输入顺序 采用与系统环境(如Windows)风格一致
的数据输入界面
数据输入设计的方法(续)
防止用户出错
明确的移动 明确的取消 进一步确认的输入和删除 已输入的数据假删除 对致命错误，给出警告并退出 对不可信的数据输入，给出提示信息，并提
探索系统、人和环境（物质、文化和历 史）之间的有效对话方式
交互设计的目的
通过对产品的界面和行为进行交互 设计，在产品和用户之间建立有机 关系，从而有效达到用户的目标。
交互设计是一种关于“如何让产品 易用、有效，从而令人愉悦”的技 术，它致力于：
了解用户的目标及期望
了解用户的交互行为
计划：加电开机运行
使用
实施：连接电源线、按下主机开关、查看 界面提示信息
评价：
异常场景：
用户的需求分析
用户对计算机系统的要求 用户对计算机系统的期望 用户在技能方面的使用要求 用户在习惯方面的使用要求 用户在经验方面的使用要求
2.1.3.2 交互设计
交互概念 交互设计概念 交互设计方法
界面设计与交互设计
狭义上，用户界面设计是交互设计 的重要组成部分，交互设计不只是 用户界面设计。 存在没有用户界面的交互设计
广义上，用户界面设计包括概念设 计、交互设计和外观设计。
2.1.1 用户界面设计的定义
确定交互设计的过程，以获得描述并传 达交互行为的有效形式，称为“用户界 面设计”
数据输入设计的方法(续)
提供反馈
提示有效的输入格式或数值范围 用户能够查看已输入的内容
按用户速度输入和自动格式化
用户能控制数据输入的速度 能接受用户输入的空格，并进行格式化
允许编辑
用户输入后允许再编辑，且采用风格一致的 编辑界面
屏幕显示设计
存在问题 改进建议
1
目的：准备部件
用户行为模型示例（攒机） 准备
计划：打开各部件包装 实施：打开包装确定连接关系
零部件较多
评价：
异常场景：
2
目的：
计划：
组装
实施：打开机箱、固定主板、连接开关电 开关电源线 源线、固定光驱硬盘、插入扩展卡和内存 路连接复杂
条等、盖上机箱
评价：
异常场景：
3
目的：测试机器组装结果
用户界面设计概述
上节回顾
基本概念
人机交互 人机交互系统 人机交互方式
讨论
界面设计的内涵
界面结构 界面布局 界面风格 界面色彩 …… 界面交互
内容概述
用户界面设计
概念（结构）设计(Conceptual Design) 交互设计(Interactive Design)
交互行为决定用户界面设计的约束条件 界面上的组件必须为交互行为服务，可以对
界面进行美化、抽象，甚至艺术化，但不能 破坏交互行为
2.1.2 用户界面设计的约束条 件
交互方式 界面空间的尺寸 屏幕分辨率 兼容性（操作系统、浏览器） 硬件 网络带宽 …
2.1.3 用户界面设计的内容
交互设计的定义
交互设计，是指设计师对产品及其使用 者之间的互动机制进行分析、预测、定 义、规划、描述和探索的过程。
简单地说，交互设计是设计产品交互方式的 过程。
具体地说，交互设计是设计和定义使用者如 何使用产品完成某一任务的过程。
交互设计的特点
交互设计是关于如何创建新的、有效的 用户体验的问题；
用户 vs实际意义 文化差异 思维逻辑 社会环境
设计师约束
设计时间 个性要求 工作压力 面向不同的用户 自以为是典型用户
用户/设计师的交互模型
设计目标
工程师 设计师
构思
界面形式 诱导行为
用户
接触 新产品
经验与需求
联想
判断行为
文字用语注意事项(续)
格式
一屏幕的文字不要太多 同行文字字型统一，可以给关键词粗体、变体等特
殊处理 英文词语尽量采用小写和易认的字体（标题除外）
信息内容
信息内容显示简洁清楚，尽量不左右滚屏 内容较多时以空白分段或以小窗口分块 重要字段可用粗体和闪烁吸引注意力和强化
颜色
是 好的设计
一 致
误导/不满 否 意的设计
用户的特征
界面风格
儿童 老人
界面内容的用词
一本正经 诙谐幽默
界面的工作方式
手机/PDA 电脑
地域、文化和语言
用户的两种阅读方式
用户的角色
界面设计的需求分析以用户为中心，具 有很大的主观性
从用户自身特征开始，划分用户群，引 出用户角色的概念
交互设计的基本方法
结构图法
对产品信息架构的设计方法
自然语言法
对产品交互过程细节的设计方法
任务走查法
对整个产品的审查和优化方法
结构图法
抛开界面细节，只考虑信息的组织形式 操作步骤
明确描述全部内容，总结产品所需要表达的 所有信息
画出信息的树状结构图 在纸上画出各界面的草图。草图包含：页面
运营方式等
用户研究与分析
非常重要，团队配合完成 设计师搜集相关资料，分析目标用户的使用特征、
情感、习惯、心里、需求等，提出用户研究报告和 可用性设计建议。
架构设计
确定界面交互与流程的设计 制定交互方式、操作与跳转流程、结构、布局、信
息和其他界面元素
交互设计的工作流程（Cont.）
按照一定参考体系划分用户的类型，代表一 定的用户特征，描述用户个体的集合
用户的行为模型
用户行为模型也称为“用户任务模型” 人机交互的行为模型（4个阶段）
确定目标，形成意图 指定动作，执行动作 领会系统状态，解释系统状态 评价结果
目标 计划 实施 评价
序号 任务名
行为阶段
Bill Moggridge首次提出。
开始称为“软面（Soft Face）” 后来更名为交互设计
交互设计
交互设计是人工产品、环境和系统 的行为、以及传达这种行为的外观 元素的设计和定义。(Alan Cooper)
交互设计首先规划和描述事物的行为 方式
然后描述传达这种行为的有效形式
导航功能。随时转移功能，很容易从一个功能跳到另 外一个功能。
快速反馈。给用户心理上的暗示，避免用户焦急。 使用用户的语言，而非技术的语言。 清楚的错误提示。误操作后，系统提供有针对性的提
示。 允许兼用鼠标和键盘。同一种功能，同时可以使用鼠
标和键盘，并提供多种实现可能性。
2.1.3.3 视觉设计
原型设计
阶段性标志 “手绘－>图形－>FLASH－>视频” 原型的本质是一个DEMO，无需全部功能，但要体现
出设计对象的基本特性
外观设计
结合经过反复讨论过的分析结果进行 色调、风格、窗口、图标、皮肤的表现是关键
界面输出
设计师配合开发人员完成界面整合
完善工作
多部门协作参与 可用性研究、测试回馈，以及可行性建议的完善
交互设计(Interaction Design)的不仅要考虑 可用性，还要考虑用户的期望和体验。
可用性保证产品可用，基本功能完备且方便； 用户体验提供给用户与众不同的或意想之外的感觉。
交互设计的内容
定义与“产品的行为和使用”密切相关 的产品形式
预测产品的使用如何影响产品与用户的 关系，以及用户对产品的理解
数据输入设计 数据输出显示设计 控制设计
视觉（外观）设计(Visual Design)
用户界面的软件开发过程 用户界面的标准化
2.1. 用户界面设计
用户界面（User Interface）是一 个静态的术语。
用户界面设计（User Interface Design）关心的是用户界面本身的 组件、布局和风格，以有效支撑交 互设计的需求。
操作步骤
分析并总结所有用户任务 根据用户任务进行可用性评估
交互设计的原则
用户控制界面。“下一步”、“完成”，面对不同层 次提供多种选择，给不同层次的用户提供多种可能性。
允许工作中断。例如用手机写新短信的时候，收到短 信或电话，完成后回来仍能够找到刚才正写的新短信。
方便退出。如手机的退出，是按一个键完全退出，还 是一层一层的退出。尽量提供两种可能性。
屏幕显示设计要引导用户注意到最重要 的信息
布局(Layout) 文字用语(Message) 颜色(Color)
屏幕布局
因功能不同而侧重点不同 重点突出功能区
文字用语
设计标题 正文 提示信息 控制命令
文字用语注意事项
用语简洁性
避免使用专业术语 尽量用肯定句，而不要用否定句 用主动语态，而不用被动语态 用礼貌而不过分的强调语句 对不同的用户，用语结合心理学原则 英文词语尽量避免缩写 在按钮、功能键的标示中尽量使用描述操作的动词
了解“人”本身的心理和行为特点
了解各种有效的交互方式，并对其进 行增强和扩展
交互设计的关键特征
以用户为中心
让用户参与整个设计和评估的过程
可用性标准的特殊性
开始就明确可用性目标和用户体验目 标
迭代设计
在迭代中改进设计
交互设计的4个基本活动
用户需求分析
了解目标用户
概念设计
认知与抽象的整体架构
交互设计
人机交互方式
外观（视觉）设计
愉悦的颜色、字体和风格等
2.1.3.1 概念设计
通过对用户和任务的分析，制定出产品 的整体架构。
目录体系的逻辑分类和术语定义。 基于纸质的线框图。
用户分析
用户的分类
内向型、外向型； 感知型、直觉型； 程序员、非程序员； 偶然用户、间歇式用户、经常用户；
用户主导控制，提供防“呆”的操 作方式
控制界面设计的主要任务
交互设计注重产品与用户行为的交互以 及交互的过程；
交互设计可以增强和扩展人们通信及交 互的方式，提高产品的可用性；
可用性 vs. 交互设计
可用性(Usability)是交互设计的基本而重要 的指标
对可用程度的总体评价 从用户角度衡量产品是否易学、好记、有效、高效、
安全、少错的质量指标
标题、导航、重要的链接和按钮 模拟演示界面的操作行为
自然语言法
设计界面交互细节的方法 界面表达的要求
清晰，明确，简洁，得体
使用自然的语言表达界面的信息
用面对面的交流来传达信息 将面对面的传达转变为书面表达 再用界面语言翻译书面表达
任务走查法
以用户任务为线索，以可用性准则 为依据的主观评估
有效的强化手段 具有美学价值
颜色注意事项
一屏不超过4或5种，最多7种。可用不同 层次及形状来配合颜色，增加变化
焦点对象颜色鲜明，非焦点对象暗淡 前景色鲜艳，背景色暗淡 避免不兼容的颜色在一起（对比除外） 用颜色表示某种信息，要保证用户懂得
其涵义，符合用户的文化背景
控制界面设计
使用与交互
“使用”，人发出的主观行为，作用于 客观对象的关系
人主导 客观对象辅助
“交互”，参与的双方对等，没有主从 之分
交互，是用户（服务使用者）与系统 （服务提供者）之间的交换信息的过程。
交互设计
交互设计（Interaction Design）
关注交互，特别是用户体验，的一门学科 诞生于20世纪八十年代 1984年，由IDEO的联合创始人
数据输入界面 平面显示界面 控制界面
数据输入界面设计
数据输入界面
耗费用户的大部分时间 计算机系统中最易出错的部分
数据输入界面设计的总目标
简化用户输入，尽可能采用自动输入 降低输入出错率，尽可能提供选择 容忍用户错误，提供必要的验证反馈
数据输入设计的方法
减轻用户记忆，采用列表选择
设计交互方案
让用户参与方案设计
构建设计的交互式版本
给出设计的交互式版本 可能只是个线框图，未必能够真正运行
设计评估
评估设计版本的可用性，用户能否接受
交互设计的工作流程
产品定位与市场分析
由新产品研发部门以及市场确定需求 设计师了解产品的市场定位、产品定义、客户群体、
设置默认值 自动填入用户已输入过的内容
使界面具有预见性和一致性
用户控制数据输入顺序 采用与系统环境(如Windows)风格一致
的数据输入界面
数据输入设计的方法(续)
防止用户出错
明确的移动 明确的取消 进一步确认的输入和删除 已输入的数据假删除 对致命错误，给出警告并退出 对不可信的数据输入，给出提示信息，并提
探索系统、人和环境（物质、文化和历 史）之间的有效对话方式
交互设计的目的
通过对产品的界面和行为进行交互 设计，在产品和用户之间建立有机 关系，从而有效达到用户的目标。
交互设计是一种关于“如何让产品 易用、有效，从而令人愉悦”的技 术，它致力于：
了解用户的目标及期望
了解用户的交互行为
计划：加电开机运行
使用
实施：连接电源线、按下主机开关、查看 界面提示信息
评价：
异常场景：
用户的需求分析
用户对计算机系统的要求 用户对计算机系统的期望 用户在技能方面的使用要求 用户在习惯方面的使用要求 用户在经验方面的使用要求
2.1.3.2 交互设计
交互概念 交互设计概念 交互设计方法
界面设计与交互设计
狭义上，用户界面设计是交互设计 的重要组成部分，交互设计不只是 用户界面设计。 存在没有用户界面的交互设计
广义上，用户界面设计包括概念设 计、交互设计和外观设计。
2.1.1 用户界面设计的定义
确定交互设计的过程，以获得描述并传 达交互行为的有效形式，称为“用户界 面设计”