东北大学 人机交互 复习笔记

Posted DicoY

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了东北大学 人机交互 复习笔记相关的知识，希望对你有一定的参考价值。

呕心沥血2W字皇家贵族尊享版顶级人机交互课堂笔记知识点总结

--- by DICO ---

WORD文件下载地址：https://download.csdn.net/download/DicoY/18449911

目录

一、 第一章 概述

(1) 交互设计

(2) 流行术语

(3) HCI

(4) UI（人与计算机发生交互的一个空间）

(5) GUI

(6) HCI和SE

(7) Usability和UX

(8) User-Centered Design

二、 第三章 用户分析和任务分析

(1) 研究方法

(2) 用户模型

(3) 场景和设计需求

(4) 以用户为中心的设计（user-centered design）

(5) Analysis（分析阶段）

三、 第四章 交互设计心理学

(1) Human Information Processing 人体信息处理

(2) Attention 注意

(3) Cognitive Processing 认知处理

(4) Motor Processing 动作处理

四、 第五章 可视化设计

(1) 关键词

(2) Visual Interface Design Factors 视觉界面设计因素

(3) Visual Interface Design Principles 视觉界面设计原则

五、 第六章 交互设计

(1) Design Framework 设计框架

(2) Design Techniques and Rules 设计技术与规则

(3) Design Details 设计细节

六、 第七章 评价技术

(1) 关键词

(2) Heuristic 启发式

(1) Heuristic Evaluation 启发式评估

(2) How to Write a Usability Aspect Report (UAR) 如何编写可用性方面报告（UAR）

(3) Basic Issues in Think-Aloud Testing 有声思维测试的基本问题

(4) How to Conduct a Think-Aloud Usability Test 如何进行自言自语可用性测试

(5) Think-Aloud Testing vs. Heuristic Evaluation 有声思维测试与启发式评价

 

 

 

  • 第一章 概述
    1. 交互设计

数字产品、环境、系统和服务的交互设计实践。

是关于外形和形式的设计，然而最重要的是，它是“行为”的设计。

    1. 流行术语

IA（信息架构），主要是关于网站。

UX（User Experience），用户体验。包括Form（形式）、Content（内容）、Behavior （行为）

IxD（交互设计）

HCI（Human-Computer Interaction）人机交互

GUI（图形用户界面）

Usability（可用性）

User Interface（人与计算机发生交互的空间）

    1. HCI

HCI的目标：

解决技术设计和使用中的实际问题，使基于计算机的系统更容易使用，对人员和组织更有效。

    1. UI（人与计算机发生交互的一个空间）

为什么需要UI：

  1. 方便计算机的操作与控制；
  2. 人们在操作决策的时候，需要得到计算机的反馈。

UI分类：

1.Command line interfaces  

2.Graphical user interfaces

3.Touch user interface

4.Voice user interfaces

    1. GUI
  2. 定义：GUI是一个图形的而非纯文本的用户界面。
  3. GUI与UI：。
  4. Metaphors（隐喻）：依赖于用户在界面的视觉提示与软件功能之间建立的直觉 联系，从而不必了解软件的运行机制。

例如：工具栏中的小剪刀——剪切

        文件夹——移动、打开。

  1. GUI中行为通常通过直接操作（direct manipulation）图形元素的方式来实 现。
    1. HCI和SE

 

System1:HCI-UCD

System2:SE

    1. Usability和UX
  2. 界面设计的不好，通过用户自定义不可行的原因：

（1）大多数用户不会自定义界面。

（2）用户自定义只会使情况更糟。

  1. Usability定义：用来衡量用户怎样能很好的使用系统功能。
  2. Usability五个方面：

Learnability：可学习性

Efficiency：效率

Memorability：可记忆性

Errors：出错率

Satisfaction：主观满意程度

  1. UX定义：

它与人们使用产品、系统或者服务的感受密切相关。

它高度关注产品自身拥有的和人机交互的经验、情感、意义、和价值等方面。

它本身包含着人们对产品本身的实用性、可用性和效率方面的认知。

    1. User-Centered Design
  2. 两个核心：

1、以用户为中心的设计——体现以人为本；

2、关注可用性——体现简单但是合理。

  1. 什么是以用户为中心的设计：

1、好的UI设计就是恰好能符合用户心里所想

2、检验是不是好的方法——评测

  • 第三章 用户分析和任务分析
    1. 研究方法
  1. 分类：市场（Marketing）、用户（User）、可视化（Visual）
  2. 定量研究（Quantitative Research）与定性研究（Qualitative Research）

定量研究只能回答沿着几个简化轴“how much”或“how many”的问题；

定性研究可以告诉你什么，怎么做，以及为什么要用丰富的细节来反映真实的人   类情况的复杂性。

  1. 定性的研究对于帮助我们理解产品的领域、情景和受约束的方式非常有价值。
  2. 定性的研究也有助于设计项目的进展：
  1. 为设计团队提供可信度和权威性；
  2. 对领域问题和用户关注点的共同理解来团结团队
  3. 授权（Empowering）管理层对产品设计问题做出更明智的决策，否则这些    决策将基于猜测或个人偏好。
  1. 定性研究的价值：实现更快、成本更低
  2. 定量方法的优点和局限性：定量研究可以帮助指导设计研究

用户研究可以为市场研究提供信息

 

  1. Goal-Directed Design Research（目标导向设计研究）
  1. Kickoff meeting（启动会议）

提出最初的关键问题

  1. Literature review（文献综述）

内部文件

行业报告

网络搜索

  1. Product/prototype and competitive audits（产品原型和竞争者审核）

在访谈利益相关者和主题专家之前或者同时，检查产品的现有版本或者 原型，以及主要竞争对手，对产品设计团队大有帮助。

  1. Stakeholder interviews（利益相关者访谈）

从利益相关这那里搜集如下信息尤为重要：

产品初期设想

预算和日程计划

技术限制和机遇

商业驱动

利益相关者对用户的看法

  1. Subject matter expert (SME) interviews（主题专家访谈）

在设计项目初期，找机会并会见极为主题专家（所在领域的权威人士）。

借助主题专家应该考虑下面几点：

主题专家通常是专业用户。

主题专家知识渊博，但不是设计师。

主题专家在复杂或者专业领域必不可少。

确保设计过程中能够得到主题专家的帮助。

  1. User and customer interviews（用户和客户访谈）

用户和客户这两个概念容易混淆

（7）User observation/ethnographic field studies（用户观察/人种学实地研究）

 

  1. Interviewing and Observing Users（访谈并观察用户）
  1. Contextual Inquiry（情境调查）

四个基本原则：

1.Context上下文

2.Partnership伙伴关系

3.Interpretation解释

4.Focus聚焦

  1. Improving on Contextual Inquiry（改进情境调查）

1.Shorten the interview process（缩短访谈过程）

2.Use smaller design teams（适用小规模设计团队）

3.Identify goals first（首先找出用户目标）

4.Look beyond business contexts（超越商业情境）

  1. Preparing for Ethnographic Interviews（为人种学访谈做准备）

1.理解与个体产品相关的交互行为和习惯。

2.Identifying candidates（确定候选人）

3.The persona hypothesis（人物模型假设）

4.Roles in business and consumer domains（商业和消费领域的角色）

5.Behavioral and demographic variables（行为和人口统计学变量）

6.Domain expertise versus technical expertise（技术专业知识和行业专业 知识）

7.Environmental considerations（环境因素）

8.Putting together a plan（做好计划）

  1. Conducting Ethnographic Interviews（进行人种学访谈）
  1. 构造了人物模型假设，并拿出访谈计划后就可以进行人种学访谈
  2. 访谈分为早期、中期和晚期三个阶段
  3. 访谈基本方法：
  1. Interview where the interaction happens（在交互发生的地方进行访谈）
  2. Avoid a fixed set of questions（避免一系列固定的问题）
  3. Assume the role of an apprentice, not an expert（假装成门外汉而非专家）
  4. Use open-ended and closed-ended questions to direct the discussion（采取开放式和封闭式相结合引导提问）
  5. Focus on goals first and tasks second（首先关注目标，任务其次）
  6. Avoid making the user a designer（避免把用户当成设计师）
  7. Avoid discussing technology（避免讨论技术问题）
  8. Encourage storytelling（鼓励讲故事）
  9. Ask for a show-and-tell（请求演示和讲解）
  10. Avoid leading questions（避免诱导性问题）

Other Types of Qualitative Research（定性研究的其他模型）

Focus groups（焦点小组）

Usability testing（可用性测试）

Card sorting（卡片分类）

Task analysis（任务分析）

 

 

    1. 用户模型
  2. 创建关于用户的描述性模型，它是交互设计中特有的强有力的工具-人物模型persona。
  3. 为用户而进行设计的（UCD），因此重要的一点就是，要了解下面这些方面并将其视觉化：
  1. 用户之间的关系
  2. 用户的期望
  3. 用户与社会及物理环境之间的关系
  4. 用户与我们所设计的产品之间的关系
  1. The Power of Personas
  1. 为具有特定需要的特定个体类型设计
  2. 选择正确的设计对象，即代表最广大关键人群需要的用户
  3. 任务模型为不同类型用户及其不同的需求提供强有力的交流手段
  1. Strengths of personas as a design tool（设计工具persona的优势）
  1. 确定产品的功能和行为
  2. 同利益相关者、开发人员和其他设计师交流
  3. 就设计意见达成共识
  4. 衡量设计效率：用人物模型对设计方案进行测试
  5. 助力市场营销、销售规划和产品相关的其他工作
  1. 避免下面三个设计陷阱：
  1. The elastic user 弹性用户
  2. Self-referential design 自我参考设计
  3. Edge cases 边缘功能设计
  1. 人物模型很有效：
  1. 首先人物模型是用户模型，能够代表具体个人。
  2. 人物模型把设计和开发团队的同理心聚集在用户目标周围。
  3. 同理心对设计师来说很关键，人物模型不仅使得设计方案能够更好地服务于真实用户，而且是设计方案更吸引利益相关者。
  1. Personas are based on research（人物模型以研究为基础）
  2. Personas represent types of users of a specific product（人物模型代表特定交互产品的某一类用户群体）

有时候也称为合成用户原型（composite user archetypes）

  1. Personas used across multiple products（跨产品的人物模型）
  2. Archetypes vs. Stereotypes（模型化形象）

模型化形象往往是人物模型的反面，它通常是设计者或者产品团队偏见和意向的产物。

  1. Personas explore ranges of behavior（人物模型拓展了用户行为的范围）
  2. Personas have motivations（人物模型有动机）
  3. Personas can represent relevant nonusers（人物模型可以代表用户之外的相关人士）
  4. Personas are more appropriate design tools than other user models（人物模型是比其他用户模型更加合适的设计工具）
  1. User roles 用户角色

对一类用户及其问题之间关系的定义，包括需求、兴趣、期望和行为模式；

局限性体现在：

1.抽象地、与拥有这些行为和关系的人隔离开来，更难以清晰地传达人 类的行为和关系。

2.他们几乎完全专注于任务，而忽略了目标作为设计思维和综合的组织 原则的使用。

3.它们很难作为开发、交流和度量设计决策的连贯的工具。

  1. Personas versus user profiles 用户信息
  2. Personas versus market segments 市场划分
  1. Understanding Goals 理解目标
  2. The three types of user goals 用户目标有三种类型：
  1.  

 

人生目标 反思

最终目标 行为

体验目标 本能

  1. 用户目标是用户动机（motivations）
  1. Nonuser goals（非用户目标）
  1. Customer goals 客户目标
  2. Business goals 商业目标
  3. Nonprofit organization goals 技术目标
  1. 如何构建人物模型

 

1根据角色对方谈对象分组 Group interview subjects by role

2找出行为变量 Identify behavioral variables

3将访谈主体和行为变量对应起来 Map interview subjects to behavioral variables

4找出重要的行为模型 Identify significant behavior patterns

5综合各种特征，阐明目标 Synthesize characteristics and define goals

6检查完整性和冗余 Check for completeness and redundancy

7指定人物模型类型 Designate persona types

人物模型的类型：主要 Primary

次要Secondary

补充Supplemental

客户人物模型Customer

接受服务的人物模型Served

负面人物模型Negative

8进一步描述特征和行为 Expand description of attributes and behaviors

  1. Other Design Models

Work flow models 工作流

Artifact models 人工制品

Physical models 物理模型

  1. 场景和设计需求
  1. 四个主要活动
  1. 利用故事情节或者场景剧本来设想理想用户的交互过程
  2. 运用场景剧本来提取设计需求
  3. 依次运用这些需求来定义产品的基本交互需要
  4. 在这个框架中不断增加设计细节
  1. Scenarios: Narrative as a Design Tool （场景，以叙述为设计工具）
  2. Scenarios vs. use cases & user stories（场景设计和使用案例以及用户故事）

场景和使用案例都是用来描述用户和系统的交互方法

  1. Goal-Directed Scenarios（目标导向的场景）

从具体用户（人物模型）的角度定义产品行为的迭代手段

  1. Use cases（使用案例）

通常是一种技术手段，基于对系统功能需求的全面描述上，具有事务性，关注底层 用户行为和系统的反映。

  1. User stories（用户故事）

通常用简短的词句组成，简单描述完成这一交互所需要的界面，不是场景，没有整 个用户流程和用户的最终目标。

  1. Scenario-based design（基于场景的设计）

缺少的一环就是人物模型

  1. Persona-based scenarios（基于人物模型的场景）
  2. Three types of scenarios（三种场景）
  1. Context scenario 情境场景
  2. Key path scenario 关键路径的情况
  3. Validation scenarios 验证场景
  1. Design Requirements: The “What”of Interaction（设计需求：交互的什么问 题）
  1. 在设计产品的功能之前，先定义产品的功能。
  2. 设计需求不是特性
  3. 设计需求不是规范
  4. 设计需求是战略性的
  5. 设计需求来自多个来源
  1. The Requirements Definition Process（需求定义的过程）

 

  1. Create problem and vision statements 创建问题和愿景陈述
  1. 问题和远景陈述的内容应该直接来自研究和用户模型。
  2. 用户目标和需求应该来自主要和次要角色。
  3. 业务目标应该从涉众访谈中提取。
  1. Explore and brainstorm 探索和头脑风暴
  2. Identify persona expectations 确定人物模型的期望

对于每个主要和次要角色，我们确定如下:

  1. 影响角色期望的态度、经历、愿望以及其他社会、文化、环境和认知 因素
  2. 角色对使用产品的体验的一般期望和愿望
  3. 角色将期望或希望从产品中获得的行为
  4. 该角色如何考虑基本元素或数据单元
  1. Construct context scenarios 构建情景场景
  2. Identify design requirements 明确设计需求

separate requirements 独立需求：

  1. Data requirements 数据需求
  2. Functional requirements 功能需求
  3. Contextual requirements 上下文的需求
  4. Other requirements 其他需求
  1. 以用户为中心的设计（user-centered design）
  1. 定义：以用户为中心的设计就是在设计阶段，最终用户在需要，渴望，以及限制等 方面给以优先权的过程。
  1.  Analysis（分析阶段）
  1. 分类：
  1. User analysis 用户分析

搜集与用户相关的信息，用户是谁，他们的目的是什么，他们需要完成什么任 务

  1. Task analysis 任务分析

用户需要操作的每一个步骤的特征

创建实际使用的具体场景

决定支持的用户和任务

  1. 为什么进行用户分析是很明白的：
  1. 因为你不是用户，你需要确定谁才是真正的用户。
  2. 不仅仅要知道他的个性，还要了解他的职业，他在什么环境下使用你的软件，有什么会分散他的注意力，他的社会与背景，使用环境（电影院、图书馆、车里、飞机上）：你所设计的用户界面要根据环境的不同有不同的约束。
  1. Multiple Classes of Users（多类用户）
  2. How to Do User Analysis（怎样进行用户分析）
  1. Questionnaires 调查问卷
  2. Interviews 直接面谈
  3. Observation 观察
  1. Task Analysis （任务分析）

用户分析的下一步就是找出与任务相关的问题。

一个任务可以理解为一个目标：即需要做什么？怎么做？

开始任务分析的好方法就是逐级分解任务。

  1. Essential Parts of Task Analysis（任务分析的重要组成部分）

应该做什么？应该先做什么？这个任务分几个步骤？

目标就是任务的名称。例如发送邮件信息。

先决条件：为了实现这个任务必须满足的条件。

另一个设计解决方案就是为完成先决条件提供机会。

最后就是将任务分解成子任务。如果子任务仍然很大就需要进一步分解。

  • 第四章 交互设计心理学
    1. Human Information Processing 人体信息处理
  1. How to process information?

Human Information Processing Model：

 

  1. Memory properties 内存属性

Encoding （编码）: type of things stored

Size（大小）: number of things stored

Decay time（衰退时间）: how long memory lasts

  1. Short-Term Sensory Store 短期感官储存

Visual information store视觉信息存储

Auditory information store 听觉信息存储

  1. Working Memory (WM) 工作记忆

Small capacity: 7±2 “chunks” 小容量

Fast decay (7 [5-226] sec) 快速衰减

Maintenance rehearsal fends off decay 维修排练，防止腐烂

Interference causes faster decay 干扰会导致更快的衰减

  1. Long-term Memory (LTM) 长期记忆

Huge capacity 巨大的容量

Little decay 很少腐烂

Elaborative rehearsal moves chunks from WM to LTM by making connections with other chunks 精心排练通过与其他语块建立联系，将语块从WM移到LTM

  1. Processors 处理器
  2. Perceptual Fusion知觉融合
  3. Bottom-up vs. Top-Down Perception自下而上与自上而下的感知

自下而上使用刺激的特征

自上而下使用上下文

时间、空间

利用长期记忆

  1. Chunking 分块

unit of perception or memory 感知或记忆单位

    1. Attention 注意
  2. Photoreceptor 光受体
  1. Rods（视杆）

Only one kind (peak response in green wavelengths) 只有一种（绿色波长的 峰值响应）

Sensitive to low light (“scotopic vision”) 对微光敏感（“暗视视觉”）

Saturated at moderate light intensity (“photopic vision”) 对微光敏感（“暗视 视觉”）

  1. Cones（视锥）
  1. Signals from Photoreceptors 光感受器发出的信号
  1. Brightness 亮度

M + L + rods     M+L+杆

  1. Red-green difference 红绿差

L - M      L-M

  1. Blue-yellow difference 蓝黄色差

Weighted sum of S, M, L   S，M，L的加权和

  1. Color Blindness 色盲

Red-green color blindness 红绿

Blue-yellow color blindness 蓝黄

Guideline: 不要仅仅依赖于颜色的区别，使用冗余信号：亮度、位置、形状

  1. Chromatic Aberration（色差）

不同的波长聚焦不同。

Guideline ：不要在蓝色文本上使用红色，它看起来很模糊，读起来很痛

  1. Blue Details Are Hard to Resolve 蓝色的细节很难解决

Guideline ：不要在小细节很重要的深色背景下使用蓝色（文本！）

  1. Fovea Has No Rods 中央凹没有杆

如果你不直视一颗暗淡的星星，就更容易看到它

  1. What is attention?

注意力是一个过程，通过这个过程，大脑在任何给定的时刻从各种刺激中进行 选择。

  1. Spotlight metaphor聚光灯隐喻

Visual dominance视觉优势：更容易关注视觉通道而不是听觉通道

    1. Cognitive Processing 认知处理
  2. Cognitive processor 认知处理器

Compares stimuli 比较刺激

Selects a response 选择响应

  1. Types of decision making 决策类型

Skill-based 基于技能

Rule-based 基于规则

Knowledge-based 基于知识

  1. Hick-Hyman Law of Choice Reaction Time 希克-海曼选择反应时定律

Reaction time depends on information content of stimulus

（反应时间取决于刺激的信息含量）：

RT = c + d log2 1/Pr(stimulus)

  1. Speed-Accuracy Tradeoff 速度精度折衷

准确度随反应时间而变化

可以选择曲线上的任意点

可以练习移动曲线

 

  1. Divided Attention (Multitasking) 分散注意力（多任务）
  1. Resource metaphor 资源隐喻

注意力是一种可以同时分配给不同任务的资源

  1. Multitasking performance depends on: 多任务性能

Task structure 任务结构

Modality 形态: visual vs. Auditory 视觉与听觉

Encoding 编码: spatial vs. Verbal 空间与语言

Component 成分: perceptual/cognitive vs. motor vs. WM 

知觉/认知vs.运动vs.WM

 

 

 

 

 

Difficulty 困难程度

简单或练习良好的任务更容易分享

    1. Motor Processing 动作处理
  2. Two ways of motor processor operate 电机处理器的两种操作方式

Open-loop control 开环控制

电机处理器自己运行一个程序

循环时间为Tm~70ms

Closed-loop control 闭环控制

肌肉运动（或其对世界的影响）被感知并与期望的结果进行比较

循环时间为Tp+Tc+Tm~240ms

  1. Fitts’s Law菲茨定律

将手移动到距离D处尺寸为S的目标的时间T为：

T=RT+MT=a+b对数（2D/S）

 

仅取决于难度日志索引（2D/S）

  1. Implications of Fitts’s Law 菲茨定律的含义

屏幕边缘的目标很容易被击中

Mac菜单栏胜过Windows菜单栏

不可刮边是愚蠢的

层次菜单很难找到

Gimp/GTK：立即关闭菜单

Windows:0.5s超时破坏因果关系

线性弹出菜单与饼图菜单

  1. Power Law of Practice 实践幂律

完成任务的时间第n次是：

Tn=T1 n-α

α 通常为0.2-0.6

  • 第五章 可视化设计
    1. 关键词

Alignment（对齐）

Associativity（关联性）

Consistency（一致性）

Reduction（减少）

Regularity（规律）

Proximity（接近性）

Selectivity（选择性）

Simplicity（简单）

    1. Visual Interface Design Factors 视觉界面设计因素
  2. Contrast & Visual Variables 对比度和视觉变量

Highlight differences 突出差异

视觉变量——1967年

 

深浅     色调     材质       形状          位置         方向         大小

Temperature 温度：position、hue、shape

  1. Characteristics of Visual Variables 视觉变量的特征

Quantitative 定量：这个变量的变化是否有一个数值读数？

Position、size

  Order 顺序：这个变量的变化是有序的吗？

Size、value、color、shape

  Length 长度：在这个变量中有多少变化是可以察觉的？

Shape、orientation

  1. Attention 注意力

回想一下聚光灯的比喻

注意力焦点从一个输入通道连续移动到另一个输入通道

聚光通道内的所有刺激都是并行处理的

输入通道=一个或多个可视变量

例如： 位置、色调

  1. Selectivity 选择性

Selective perception 选择性感知：

是否可以将注意力集中在变量的一个值上，排除其他变量和值？

Selective选择性：位置、大小、方向、色调、值、纹理

Not selective非选择性：形状

  1. Associativity 关联性

Associative perception 关联感知：

在查看其他变量时可以忽略变量吗？

Associative关联：位置、色调、纹理、形状、方向

Not associative非关联：大小、值

小尺寸和低值干扰感知色调、值、纹理和形状的能力

    1. Visual Interface Design Principles 视觉界面设计原则
  2. Guidelines for Good Graphic Design 优秀平面设计指南

Simplicity（简单）

Contrast（对比）

White space（留白）

Alignment （对齐）

Grouping and Structure（分组与结构）

  1. Simplicity 简单
  1. “完美不是在没有什么可加的时候实现的，而是在没有什么可带走的时候。”

“简单并不意味着没有任何装饰…这只意味着装饰应该与设计本身密切相关，    任何与它无关的东西都应该被拿走。”

“简单点，笨蛋。”

“少就是多。”

“如果有疑问，将其删除。”

  1. 简单化技巧：

Reduction 简化： 删除不必要的元素

Regularity 规律性：布局整齐

Double-Duty 双重职责：组合元素以实现杠杆效应

找到一个元素扮演多个角色的方法

如：滚动条 既显示位置，又能移动

  1. Contrast 对比
  1. 选择适当的视觉变量

使用尽可能多的长度

锐化区别，更容易感知

乘法标度，非加法

必要时进行冗余编码

需要的卡通夸张

使用“斜视测试”

  1. Choosing Visual Variables for a Display 为显示选择视觉变量

 

  1. Designing Information Displays 设计信息显示

 

  1. Contrast in Publication Styles出版物风格对比

 

  1. Contrast Problems 对比问题

 

  1. White Space 留白
  1. 分组时使用空格，而不是行

使用边距在设计周围画眼睛

整合图形和背景

对象应与其背景成比例缩放

不要把控件挤在一起

拥挤会产生空间张力并抑制扫描

  1. White Space - Space to Separate 空白-要分隔的空间

 

  1. White Space - Space to Structure 空白-空间到结构

 

  1. White Space - Space to Highlight 空白-要突出显示的空白

 

  1. Crowded Dialog 拥挤的对话

 

 

  1. The Gestalt Principles of Grouping 格式塔分组原则

格式塔(格式塔） 原理解释了眼睛是如何从部分创造一个整体（完形）的

 

  1. Alignment 对齐
  1. Text 文本

你从左到右读 → 左侧对齐

 

  1. Names 名称

通常搜索姓氏 → 让事情简单

 

  1. Numbers 数字

对齐小数点

 

  1. Multiple Columns 多列

很难跨越空白进行扫描：——通常很难避免使用大型数据库字段

 

可以使用灰色化：

 

  1. Grouping and Structure 分组与结构

logically together → physically together 逻辑上一起 变为 物理上一起

  1. Physical Controls 物理控制

grouping of items 元件分组：将负责不同功能的按钮分组

order of items 元件顺序：按照用户操作顺序从上到下设计元件位置顺序

white space 留白：运用空白区域将元件分组

  • 第六章 交互设计
    1. Design Framework 设计框架
  1. 定义用户体验的总体结构

 

包括 交互框架、视觉设计框架、工业设计框架

  1. 在项目的这个阶段，交互设计师使用场景和需求来创建构成交互的屏幕和行为草图（rough sketches），完成交互框架（Interaction Framework）。
  2. 同时，视觉设计师利用视觉语言的研究来开发一个视觉设计框架（Visual Design Framework），这个框架通常表示为单个屏幕原型的详细呈现。
  3. 工业设计师进行形式语言（form）的研究，以完成一个粗略的物理模型和工业设计框架（Industrial Design Framework）。
  4. 服务设计者为服务框架（service framework）中的每个接触点构建信息交换模型。
  5. 我们发现，素描般的情节串连图板和屏幕，以及以场景形式的叙述，是探索和讨论设计解决方案的一种非常有效的方式，不会产生过多的开销和惯性。
  1. The Framework Definition Process 框架定义过程

 

尽管我们已经将这个过程分解成了数字顺序的步骤，但这通常不是一个线性的 努力。相反，它发生在迭代循环中。具体而言，步骤3到步骤5可以根据设计 者的思想过程进行切换。

  1. Define form factor、Posture and Input Method 定义形状要素、姿态 和输入方法
  1. 这些形状因素对任何设计都意味着什么约束？

它是一个可以在高分辨率计算机屏幕上查看的web应用程序吗？

它是一款必须小巧、轻便、低分辨率，并且在明亮的阳光和黑暗中都能   看见的手机吗？

它是一个必须坚固耐用的信息亭，以承受公共环境，同时容纳成千上万   分心的新手用户？

  1. 产品的姿势与之相关：

用户将对与产品交互的关注程度。

产品的行为如何回应用户对产品的关注。

此决定应基于使用上下文和环境。

  1. 用户将如何与产品交互。

这是由形状因素和姿势，以及你的人物角色的态度，能力和偏好驱动的。

决定哪个组合适合你的主要角色和次要角色。

  1. Define Functional and Data Elements 定义功能性和数据元素
  1. 数据元素通常是互动产品的基本主题。

考虑数据元素之间的关系。

  1. 功能元素是可以对数据元素及其在接口中的表示进行的操作。

一般来说，它们包括用于执行操作的工具以及可视化和结构化地管理数   据元素的方法。

一个需求通常需要多个接口元素。

  1. 问问自己哪种可能的解决方案最有可能做到以下几点：（方案优选原则）

最有效地完成用户目标。

最符合您的设计原则。

符合技术或成本参数。

可能把互动和竞争区分开来。

最适合其他要求。

  1. Determine Functional Groups and Hierarchy 定义功能组合层级
  1. 以下是一些需要考虑的问题：

哪些元素需要大量的视频区域，哪些不需要？

哪些元素是其他元素的容器？

如何安排容器以优化工作流？

哪些元素一起使用，哪些不一起使用？

一组相关元素将按什么顺序使用？

哪些数据元素有助于人物模型做出选择？

什么样的交互模式和原则适用？

人物模型的心理模型如何影响组织？

  1. 将数据和函数组织到顶级容器元素中非常重要。

例如屏幕、框架和窗格。

考虑产品需要哪些主屏幕或状态。

在对功能元素和数据元素进行分组时，请考虑在给定产品平台、姿   势、屏幕大小、形状因素和输入方法的情况下应如何安排这些元素。

  1. 这些分组可能会随着设计的发展而发生一些变化（特别是在绘制界面时），但暂时进行分组仍然很有用。将元素分组。这将加快创建初始草图的过程。同样，缩进列表或简单的维恩图在这一点上适合记录这些关系。
  1. Sketch the Interaction Framework 勾画交互框架
  1. 矩形相位
  2. 方块图阶段，将视图分为粗略的方块图，对应窗格、控制部分（如控制栏），以及其他高层次容器。
  3. 然后为每个方块图添加标签和注解，并描述每个分组或者元素如何影响其他分组和元素。
  4. 方块间的剪头代表流程或状态的改变。

 

  1. Construct Key Path Scenarios 构建关键路径场景
  1. 关键路径场景使用交互框架的词汇表描述角色如何与产品交互。

这些场景描述了通过界面的主要路径，人物角色通常每天都会以最大的   频率使用这些路径。

关键路径场景侧重于上下文场景中广泛描述和暗示的任务细节。

关键路径场景必须详细描述每个主要交互的行为，并提供每个主要路径   的演练。

  1. 故事板

通过使用一系列低保真的草图，并结合关键路径场景的叙述，您可以丰   富地描述所提出的设计解决方案如何帮助角色实现其目标。这种故事板      技术是从电影制作和卡通中借鉴的，在那里，类似的过程被用来规划和   评估想法，而不必处理拍摄实际电影的成本和劳动。

  1. 过程变化和迭代

通常在步骤之间来回移动，并将整个过程反复几次，直到得到一个可靠   的设计解决方案。

根据您的思维方式，您有几种不同的方法来完成步骤3到步骤5。

         

语言思维者                   视觉思维者

  1. 关键路径情景剧本 （1）勾画草图
  2. 进行口头分组 （2）关键路径情景剧本
  3. 勾画草图 （3）查看分类在场景是否行得通
  1. Check Designs with Validation Scenarios 运用验证性场景来检查设计
  1. 这些验证场景通常不像关键路径场景那样详细。

目标是在设计中戳出洞，并根据需要进行调整

  1. 您应该按照以下顺序处理三大类验证场景：

 

  1. 替代场景 （2）必须使用的场景 （3）边缘情形场景
  1. Defining the Visual Design Framework 定义视觉设计框架

视觉设计框架通常遵循以下过程：

开发视觉体验特征。

开发视觉语言研究。

将选定的视觉风格应用于屏幕原型。

  1. Develop Experience Attributes 开发视觉体验特征
  1. 定义视觉设计框架的第一步是选择一组三到五个形容词，用来帮助定义产品的基调、声音和品牌承诺。这组描述性关键字统称为experience attributes(体验特征）.
  2. Cooper公司构筑体验特征的过程：
  1. 收集任何现有的品牌指南。熟悉它们。如果公司有明确的品牌指导方针建立在一个产品上，那就是你正在设计的产品-你的大部分工作可能已经为你完成了。
  2. 收集强大的品牌产品、界面、对象和服务的示例。包括来自特定领域的多个例子会有所帮助。利益相关者思考他们的差异。例如，如果我们包括汽车的图片，我们可能会包括宝马、丰田、法拉利和特斯拉的例子。
  3. 与利益相关者合作，确定直接和间接竞争。收集这些产品和服务的产品和接口的示例，并将其包含在示例中。
  4. 在你的定性研究过程中，拉取受访者提到的相关术语。特别注意提

    以上是关于东北大学 人机交互 复习笔记的主要内容，如果未能解决你的问题，请参考以下文章

    9.4 Python 从人机交互到艺术设计(图形用户界面/游戏开发/虚拟现实/图形艺术)

    人机交互实践03-课堂笔记

    0012人机交互第2次作业

    变形手机「Paddle」让人机交互更加接近现实世界

    人机交互 第三次作业 2015080360016邱硕

    0055 人机交互第三次作业