Human-Computer Interaction Principles & Interface Design | 人机交互原理与界面设计

📚 Human-Computer Interaction Principles & Interface Design | 人机交互原理与界面设计

Human-Computer Interaction (HCI) is the discipline concerned with the design, evaluation, and implementation of interactive computing systems for human use. It combines knowledge from computer science, cognitive psychology, ergonomics, and graphic design to create interfaces that are efficient, effective, and satisfying to use.

人机交互（HCI）是研究交互式计算系统的设计、评估与实现，以供人类使用的学科。它融合了计算机科学、认知心理学、人机工程学与平面设计等知识，旨在创建高效、有效且令人满意的界面。

1. What is Human-Computer Interaction | 什么是人机交互

HCI examines how users interact with computers through an interface, which is the communication layer between a person and a machine. A well-designed interface makes the underlying system transparent, allowing users to focus on their tasks rather than on the mechanics of operation.

人机交互研究用户如何通过界面与计算机交互。界面是人与机器之间的通信层。设计良好的界面使底层系统透明化，让用户专注于任务本身，而不是操作机制。

The key components of HCI can be expressed as a simple triad:

人机交互的关键组成部分可以用一个简单的三元组表示：

Human + Computer = Interaction

人 + 计算机 = 交互

The ‘human’ side involves perception, memory, attention, and motor skills. The ‘computer’ side involves input devices, output displays, software states, and communication protocols. The interaction itself is governed by dialogue formats, feedback timings, and error handling mechanisms.

“人”的一端涉及感知、记忆、注意力和运动技能；“计算机”的一端涉及输入设备、输出显示、软件状态和通信协议；交互本身则由对话格式、反馈时机和错误处理机制所支配。

Key idea: HCI is not merely about making software ‘pretty’, but about engineering a usable system that fits the capabilities and limitations of its users.

核心观点：人机交互不只是让软件“好看”，而是设计一套适合用户能力与局限的可用的系统。

2. Core Usability Principles | 核心可用性准则

Usability is the measure of how easy a system is to learn and use. Five standard attributes define usability in HCI:

可用性是用来衡量一个系统学习和使用难易程度的指标。在人机交互中，可用性由五个标准属性定义：

Learnability: How quickly a first-time user can achieve basic tasks.
Efficiency: How fast an experienced user can perform tasks once the system is learned.
Memorability: How easily a returning user can re-establish competence after a period away.
Errors: How many mistakes users make, how severe these are, and how easily they can recover.
Satisfaction: How pleasant and enjoyable the interface is to use.

可学习性（Learnability）：新用户完成基本任务的速度。
效率（Efficiency）：熟练用户在学会系统后完成任务的熟练速度。
可记忆性（Memorability）：老用户在一段时间不操作后，能多快重新熟练使用。
容错性（Errors）：用户出错的次数、错误的严重程度以及恢复错误的难易程度。
满意度（Satisfaction）：用户使用界面时的愉悦与舒适程度。

These attributes are often measured through task success rates, time-on-task, and standardized questionnaires such as the System Usability Scale (SUS).

这些属性通常通过任务成功率、任务完成时间和标准化问卷（如系统可用性量表 SUS）来衡量。

3. Nielsen’s Ten Usability Heuristics | 尼尔森十大可用性启发式原则

Jakob Nielsen proposed ten general principles for interaction design. They are called ‘heuristics’ because they are practical rules of thumb rather than formal specifications.

雅各布·尼尔森提出了十条交互设计通用原则。它们被称为“启发式原则”，因为它们是实用经验法则，而非正式规格。

#	Heuristic	中文解释
1	Visibility of system status	系统状态的可见性，及时反馈
2	Match between system and the real world	系统与真实世界的匹配，使用用户语言
3	User control and freedom	用户控制与自由，支持撤销和重做
4	Consistency and standards	一致性与标准，遵循平台惯例
5	Error prevention	错误预防，比良好的错误提示更好
6	Recognition rather than recall	识别优于回忆，尽量减少记忆负担
7	Flexibility and efficiency of use	灵活性与使用效率，提供快捷键
8	Aesthetic and minimalist design	美观且极简，去除无关信息
9	Help users recognize, diagnose, and recover from errors	帮助用户识别、诊断并从错误中恢复
10	Help and documentation	提供帮助与文档

For example, a ‘loading…’ spinner directly addresses Heuristic 1 by keeping the user informed about the system state. Confirmation dialogs before deletion address Heuristic 5 by preventing accidental data loss.

例如，“加载中……”的转圈动画直接对应原则 1，让用户了解系统状态。删除前的确认对话框对应原则 5，防止意外数据丢失。

4. Norman’s Design Principles | 诺曼设计原则

Don Norman’s book ‘The Design of Everyday Things’ introduced several foundational concepts for HCI:

唐·诺曼的著作《设计心理学》为人机交互引入了几个基础概念：

Affordance: A physical or visual property of an object that suggests how it can be used. A button appears clickable because it looks raised with a clear boundary.
Signifier: A visible cue that communicates the affordance, such as a label saying ‘Click here’ or a shaded icon.
Mapping: The relationship between controls and their effects. Good mapping uses spatial correspondence, e.g. arrow keys move the cursor in the direction pressed.
Feedback: Sending information back to the user about what action has occurred. A click sound or a highlighted selection is immediate feedback.
Constraints: Restricting the possible interactions to prevent errors, e.g. greying out invalid menu options.

可供性（Affordance）：物体暗示其用法的一种物理或视觉属性。按钮看起来可点击，因为它具有凸起的边界感。
意符（Signifier）：传达可供性的可见线索，如“点击此处”的标签或带阴影的图标。
映射（Mapping）：控件与其效果之间的关系。良好的映射使用空间对应，例如方向键按按下方向移动光标。
反馈（Feedback）：将已发生动作的结果信息回传给用户。例如点击声音或高亮选中项，便是即时反馈。
约束（Constraints）：限制可进行的交互以防止错误，例如将无效的菜单选项置灰。

Consider a scroll bar: its raised thumb affordance suggests dragging, the arrow buttons signifier shows scrolling directions, the moving content provides feedback, and the track acts as a constraint on how far you can scroll.

以滚动条为例：凸起的滑块暗示可拖动，箭头按钮提供滚动方向的意符，内容的移动给出反馈，滚动轨道则约束了滚动范围。

5. Interface Types | 界面类型

Different applications require different interface paradigms. A bank ATM, a photo-editing workstation, and a smart speaker all demand distinct HCI solutions.

不同的应用程序需要不同的界面范式。银行 ATM、图片编辑工作站和智能音箱对人机交互有着完全不同的需求。

Interface Type	Characteristics	中文说明
Command-line (CLI)	High efficiency for experts, steep learning curve, scriptable	专家效率高，学习曲线陡峭，可脚本化
Menu-driven	Easy to learn, few memory demands, slower for power users	易学，记忆负担小，高级用户操作速度慢
Graphical (GUI)	WYSIWYG, supports direct manipulation, intuitive	所见即所得，支持直接操作，直观
Form-based	Structured data entry, validation built in	结构化数据录入，内置校验
Natural language (NUI)	Conversational, uses speech or text, ambiguity issues	对话式，使用语音或文本，存在歧义问题
Gesture / Touch	Supports multi-touch, learnable via conventions, needs visible hints	支持多点触控，靠惯例学习，需要可见提示

Modern GUIs often blend these types: a mobile browser uses gesture input, a text field for URLs, and a menu button for settings.

现代 GUI 经常混合多种类型：手机浏览器使用手势输入、URL 文本输入框和设置菜单按钮。

6. Input & Output Technologies | 输入与输出技术

HCI design must match the characteristics of input and output devices to the task. For a flight-control system, the input needs precise, low-latency controls; for a home thermostat, simplicity matters more than precision.

人机交互设计必须使输入输出设备的特性与任务相匹配。飞行控制系统需要精确、低延迟的输入；家庭恒温器则更注重简单而非精确。

Input modalities: keyboard (text entry), mouse (2D pointing), touch screens (direct manipulation), stylus (drawing and handwriting), microphone (speech recognition), camera (motion capture), and sensors (GPS, accelerometer, biometric).

输入模态：键盘（文本输入）、鼠标（二维指点）、触摸屏（直接操作）、手写笔（绘画与手写）、麦克风（语音识别）、摄像头（动作捕捉）以及传感器（GPS、加速度计、生物识别）。

Output technologies: monitors (visual text/graphics), speakers (audio alerts, speech synthesis), haptic actuators (vibration for tactile feedback), braille displays (accessibility), and virtual/augmented reality headsets.

输出技术：显示器（视觉文本/图形）、扬声器（声音警报、语音合成）、触觉马达（震动反馈）、盲文显示器（无障碍）以及虚拟/增强现实头戴设备。

An important HCI principle here is compatibility — the mapping between input and output should follow population stereotypes. Most people expect the ‘up’ arrow to raise the volume, and switching it would produce frequent user errors.

这里的一个重要原则是兼容性——输入与输出的映射应符合大众认知习惯。大多数人期望向上箭头表示提高音量，若相反则会导致频繁出错。

7. Cognitive Load & Mental Models | 认知负荷与心智模型

Cognitive load refers to the amount of working-memory resources required to perform a task. Interfaces that present too much information or demand unfamiliar procedures overload the user, increasing errors and reducing satisfaction.

认知负荷指完成一项任务所需的工作记忆资源量。界面展示过多信息或要求不熟悉的操作流程，会让用户负荷过载，从而增加错误并降低满意度。

Three types of cognitive load matter in HCI:

人机交互中需要关注三类认知负荷：

Intrinsic: the unavoidable complexity of the task itself, e.g. understanding a recursive algorithm.
Extraneous: the unnecessary mental effort caused by poor interface design, e.g. a cluttered layout with inconsistent icons.
Germane: the effort devoted to learning and schema construction, which the designer should encourage.

内在负荷（Intrinsic）：任务本身的不可消除的复杂性，例如理解递归算法。
外在负荷（Extraneous）：由糟糕界面设计导致的不必要脑力消耗，例如布局杂乱、图标不一致。
关联负荷（Germane）：用于学习和构建心理图式的认知付出，设计者应当促进这类负荷。

A mental model is the user’s internal representation of how a system works. Good design aligns the system image with a plausible mental model. The desktop metaphor is a successful example: files, folders, and trash cans map physical-world objects onto digital operations, reducing extraneous load.

心智模型是用户对系统工作原理的内在表征。好的设计使系统形象与合理的心智模型一致。桌面隐喻便是一个成功案例：文件、文件夹和回收站把物理世界中的物品映射到数字操作上，从而减少外在负荷。

8. Accessibility & Inclusive Design | 可访问性与包容性设计

Accessibility ensures that systems are usable by people with disabilities, including visual, auditory, motor, and cognitive impairments. HCI designers must provide alternative modalities and adjustable settings.

可访问性确保系统能被残障人士使用，包括视觉、听觉、运动和认知障碍。人机交互设计师必须提供替代模态和可调节设置。

Key accessibility features include:

关键的无障碍特性包括：

Screen reader compatibility: semantic HTML, ARIA labels, and keyboard navigation for blind users.
Sufficient contrast: WCAG recommends a contrast ratio of at least 4.5:1 for normal text.
Keyboard-only operation: all actions must be reachable without a mouse.
Captions & transcripts: for audio and video content.
Adjustable font size: users with low vision may require up to 200% text scaling.

屏幕阅读器兼容性：语义化 HTML、ARIA 标签以及为盲人提供的键盘导航。
足够对比度：WCAG 建议普通文本对比度至少为 4.5:1。
纯键盘操作：所有动作必须能脱离鼠标完成。
字幕与文字稿：为音频和视频内容提供。
可调字体大小：低视力用户可能需要 200% 的文本缩放。

Inclusive design goes beyond disability compliance. It considers age, language, technical literacy, and cultural context. For instance, icons that use a mailbox metaphor may confuse users unfamiliar with Western postal systems.

包容性设计不仅限于残疾合规，还要考虑年龄、语言、技术素养和文化背景。例如，使用邮箱隐喻的图标可能会让不熟悉西方邮政系统的用户感到困惑。

9. Evaluation Methods | 评估方法

HCI evaluation answers the question, ‘Is the interface usable, and how can it be improved?’ Evaluation can occur at various stages of the design life cycle.

人机交互评估要回答的问题是：“这个界面可用吗？如何改进？”评估可在设计生命周期的各个阶段进行。

Method	Type	Advantages	中文说明
Heuristic evaluation	Expert inspection	Fast, inexpensive, finds major issues	专家检查，快速廉价，能发现主要问题
Cognitive walkthrough	Task-based inspection	Focuses on first-time user learning	基于任务检查，聚焦新用户学习过程
Think-aloud user test	Empirical observation	Reveals actual reasoning and barriers	实证观察，揭示真实推理与障碍
A/B testing	Quantitative comparison	Provides statistical evidence	定量对比，提供统计证据
Questionnaire	Subjective survey	Measures satisfaction at scale	大规模测量满意度

Five users are often sufficient to discover roughly 85% of usability problems in a think-aloud test; additional users tend to uncover fewer novel issues. This is why iterative testing with small groups is recommended over single large-scale tests.

在出声思考测试中，5 名用户通常足以发现大约 85% 的可用性问题；增加更多用户往往只能发现少量新问题。因此，推荐多用小规模用户进行迭代测试，而不是只做一次大规模测试。

10. Emerging Trends in HCI | 人机交互的新兴趋势

Several new paradigms are reshaping the field:

一些新范式正在重塑这一领域：

Multimodal interaction: combining voice, touch, gesture, and gaze. Typing plus speech can reduce input error rates in mobile contexts.
Virtual & Augmented Reality: spatial interfaces require new metaphors for depth, scale, and occlusion.
Ubiquitous computing: devices embedded in the environment, such as smart rooms and wearable health monitors, force HCI to consider context awareness.
AI-generated interfaces: adaptive systems that customize menus, content, and pacing based on user behaviour and predicted intention.

多模态交互：结合语音、触控、手势和视线。在移动场景中，“打字+语音”可降低输入错误率。
虚拟现实与增强现实：空间界面需要关于深度、比例和遮挡的新隐喻。
普适计算：嵌入环境的设备（如智能房间和可穿戴健康监测器）要求人机交互考虑情境感知。
人工智能生成界面：自适应系统根据用户行为和意图预测，定制菜单、内容与节奏。

Despite these advances, the core principle endures: design for the human. A system that fails to respect the user’s attention, memory, and physical abilities will fail regardless of how sophisticated its technology is.

尽管技术不断进步，核心原则始终不变：为人类而设计。一个不尊重用户注意力、记忆和身体能力的系统，无论技术多先进，终将失败。

Published by TutorHao | Computer Science Revision Series | aleveler.com

更多咨询请联系16621398022（同微信）

Human-Computer Interaction Principles & Interface Design | 人机交互原理与界面设计