User Interface Design Principles and Methods | 用户界面设计的原则与方法

📚 User Interface Design Principles and Methods | 用户界面设计的原则与方法

The user interface (UI) is the boundary where a human user and a computer system exchange information. It includes both the hardware devices (keyboard, mouse, touchscreen) and the software elements (menus, icons, dialogue boxes) through which a user issues commands and receives feedback. A well-designed interface can dramatically increase productivity, reduce error rates, and improve user satisfaction.

用户界面是人与计算机系统交换信息的边界，既包括键盘、鼠标、触摸屏等硬件设备，也包括菜单、图标、对话框等软件元素。用户通过界面发出指令并接收反馈。设计良好的界面能够显著提高工作效率、降低错误率并提升用户满意度。

1. Defining the User Interface | 用户界面的定义

In the context of A-Level Computer Science, the user interface is understood as the layer of the computer system that handles human–computer interaction (HCI). It translates the user’s intentions into machine-readable commands and presents the machine’s outputs in a human-readable form.

在 A-Level 计算机科学的语境中，用户界面被理解为计算机系统中负责人机交互（HCI）的层次。它将用户的意图转换为机器可读的指令，并将机器输出的结果以人类可读的形式呈现出来。

The interface is the only part of the system the user sees. If it is confusing or unresponsive, even a technically excellent program will be perceived as poor. Therefore, interface design must be treated as a core part of software engineering, not as an afterthought.

界面是用户所能看到的系统唯一部分。如果界面令人困惑或响应迟缓，即使程序在技术上非常优秀，也会被用户视为劣质产品。因此，界面设计必须作为软件工程的核心环节，而不是事后才考虑的问题。

2. Types of User Interfaces | 用户界面的类型

CIE A-Level Computer Science requires students to distinguish between the main types of user interface: graphical, command-line, menu-driven, form-based and natural language interfaces. Each type has distinct advantages and disadvantages depending on the user and the task.

CIE A-Level 计算机科学要求学生区分用户界面的主要类型：图形界面、命令行界面、菜单驱动界面、表单界面和自然语言界面。每种类型都因用户和任务的不同而具有各自的优缺点。

Graphical user interface (GUI): uses windows, icons, menus and pointers (WIMP). It is intuitive and easy to learn, making it suitable for general users.
图形用户界面（GUI）：使用窗口、图标、菜单和指针（WIMP）。它直观易学，适合普通用户。
Command-line interface (CLI): the user types instructions in a command language. It is fast, powerful and efficient for experts, but requires memorisation of commands and syntax.
命令行界面（CLI）：用户用指令语言输入命令。对专家而言它快速、强大、高效，但要求记忆命令及其语法。
Menu-driven interface: presents a set of options at each stage. It reduces the need for memorisation and is good for novice users, but navigation can become slow.
菜单驱动界面：在每个阶段呈现一组选项。它减少了记忆负担，适合新手用户，但导航可能较慢。
Form-based interface: the user completes fields in a structured form. It is ideal for data entry and validation, but is rigid and limited to the designed fields.
表单界面：用户在结构化表单中填写字段。它非常适合数据录入和验证，但灵活性差，仅限于设计好的字段。
Natural language interface: accepts input in spoken or written human language. It is accessible but can be error-prone due to ambiguity in natural language.
自然语言界面：接受口语或书面人类语言输入。它易于使用，但由于自然语言的歧义性容易产生错误。

Interface type	Main advantage	Main disadvantage
GUI	Easy to learn and use	High memory and processing overhead
CLI	Fast and scriptable	Steep learning curve
Menu-driven	No memorisation needed	Slow for experienced users
Form-based	Good for validation	Rigid structure
Natural language	Most intuitive	Ambiguity and low accuracy

3. Core Design Principles | 核心设计原则

Good interface design is governed by a set of well-established principles. One of the most important is visibility: the user should be able to see, at a glance, what actions are possible. If a function is hidden, the user cannot use it, no matter how useful it is.

良好的界面设计遵循一系列成熟的原则。最重要的一条是可见性：用户应能一眼看出哪些操作是可行的。如果一个功能被隐藏起来，无论它多么有用，用户也无法使用。

Affordance refers to the quality of an object that suggests how it should be used. For example, a button that appears raised invites clicking, while a greyed-out option signals that it is unavailable. Interfaces should use visual cues that match real-world conventions.

可感知性（Affordance）指物品本身暗示其用法的品质。例如，凸起的按钮暗示可以点击，而灰色选项表示当前不可用。界面应使用符合现实世界惯例的视觉线索。

Feedback is essential: every user action should produce a visible response, such as a button changing colour, a sound, or a status message. Without feedback, users cannot be certain that their input has been registered.

反馈至关重要：每一次用户操作都应产生可见的响应，例如按钮变色、发出提示音或显示状态消息。没有反馈，用户就无法确定输入是否已被系统接收。

Consistency means that similar actions should produce similar results throughout the interface. Consistent vocabulary, layout and icon design reduce the user’s learning load and allow skills to transfer from one part of the system to another.

一致性意味着相似的操应在整个界面中产生相似的结果。一致的词汇、布局和图标设计能降低用户的学习负担，并让技能从一个部分迁移到另一个部分。

4. Usability Heuristics | 可用性启发式评估

Jakob Nielsen published a set of ten usability heuristics that are widely used to evaluate interfaces. For the examination, you should be able to apply the most significant ones to a given interface description.

Jakob Nielsen 提出了十条广泛用于评估界面的可用性启发式规则。在考试中，你应该能够将其中最重要的规则应用到给定的界面描述中。

Visibility of system status: the system should always keep users informed about what is happening with timely feedback.
系统状态可见性：系统应始终通过及时的反馈让用户了解当前发生了什么。
Match between system and the real world: use familiar words, phrases and concepts rather than technical jargon.
系统与真实世界的匹配：使用用户熟悉的词语、短语和概念，而非技术术语。
User control and freedom: users often choose functions by mistake and need a clearly marked ‘undo’ or ‘cancel’ option.
用户控制与自由：用户经常误选功能，需要明确的”撤销”或”取消”选项。
Error prevention: the best interface prevents errors from occurring in the first place, for example by disabling invalid options.
错误预防：最好的界面从源头上防止错误发生，例如禁用无效选项。
Recognition rather than recall: make actions and options visible; the user should not be required to remember information from one screen to another.
识别优于回忆：让操作和选项可见；不应要求用户跨页面记住信息。

5. Design Methods: Wireframes and Prototypes | 设计方法：线框与原型

Before writing code, designers create wireframes: simple, low-detail layouts that show the position of buttons, text boxes, images and navigation elements. Wireframes focus on structure and hierarchy, not on colours or graphics.

在编写代码之前，设计师会创建线框图：一种简单的、低细节的布局，用以展示按钮、文本框、图片和导航元素的位置。线框图聚焦于结构和层次，而非颜色或图形。

Prototypes are working simulations of the interface. A low-fidelity prototype may be paper-based or a clickable wireframe; it is cheap and quick to create, allowing designers to test ideas early. A high-fidelity prototype closely resembles the final product in look and behaviour, and is used for detailed testing with real users.

原型是界面的可工作模拟。低保真原型可以是纸面草图或可点击的线框；它成本低、制作快，便于及早检验设计思路。高保真原型在外观和行为上接近最终产品，用于与真实用户进行详细测试。

Interface design in practice follows an iterative process: design → prototype → test → refine. This cycle is repeated until the interface meets the usability requirements. Iteration is important because user needs are rarely understood fully at the start of a project.

界面设计在实践中遵循迭代过程：设计 → 原型 → 测试 → 改进。这个循环不断重复，直到界面满足可用性要求。迭代之所以重要，是因为项目开始时用户需求很少能被完整理解。

6. User-Centred Design Process | 以用户为中心的设计流程

User-centred design (UCD) places the needs, abilities and limitations of the end user at the centre of every design decision. The process typically begins with user research: interviews, questionnaires, and observation to understand who the users are and what tasks they need to perform.

以用户为中心的设计（UCD）将最终用户的需求、能力和限制置于每个设计决策的核心。该流程通常始于用户研究：通过访谈、问卷和观察来理解用户的身份以及他们需要完成的任务。

The research leads to the creation of personas — fictional but realistic descriptions of typical users — and use cases or user stories that capture the tasks the interface must support. These artefacts keep the design team focused on real user goals rather than personal preferences.

研究之后会创建用户画像——虚构但现实感强的典型用户描述——以及用例或用户故事，用来捕捉界面必须支持的任务。这些设计产物帮助设计团队聚焦于真实用户目标，而非个人偏好。

Throughout the process, evaluation with real users is conducted. Formal testing, informal walkthroughs and feedback sessions all feed into the next iteration. In an Agile development environment, the designer, developer and client work together in short cycles, continuously refining the interface.

在整个流程中，始终要与真实用户进行评价：正式测试、非正式走查和反馈会议都会推动下一轮迭代。在敏捷开发环境中，设计师、开发者和客户在短周期内协同工作，不断改进界面。

7. Usability Testing | 可用性测试

Usability testing measures how effectively, efficiently and satisfactorily users can achieve defined goals using the interface. Common metrics include task success rate (the proportion of users who complete a task), time on task, and error rate.

可用性测试衡量用户在使用界面完成指定目标时的有效性、效率和满意度。常用指标包括任务成功率（完成任务的用户比例）、任务用时和错误率。

The think-aloud method is widely used: users are asked to verbalise their thoughts while performing tasks. This reveals their mental model of the interface and the reasoning behind their actions, which is far more informative than merely observing success or failure.

出声思维法应用广泛：要求用户在执行任务的同时说出自己的想法。这能揭示用户对界面的心智模型以及其行为背后的推理过程，这比单纯观察成功或失败更具信息量。

After testing, critical incidents — those moments where the user became confused, made an error, or abandoned a task — are identified and prioritised for redesign. Even a small number of test users (five to eight) is enough to discover most major usability problems.

测试结束后，要识别关键事件——即用户感到困惑、出错或放弃任务的那些时刻——并按优先级进行重新设计。即使只有少量测试用户（五至八人）也足以发现大多数主要的可用性问题。

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

A well-designed interface must also be accessible to users with disabilities. The Web Content Accessibility Guidelines (WCAG) provide standards for contrast ratios, text alternatives for images, keyboard navigability and captions for media.

良好设计的界面还必须对残障用户可访问。Web 内容可访问性指南（WCAG）为对比度、图片的文本替代、键盘导航能力和媒体字幕提供了标准。

In practice, designers should ensure that all functionality can be operated by keyboard alone, because some users cannot use a mouse. Colour should not be the only indicator of a state — for example, a warning should combine a red colour with an icon or text — so that colour-blind users can perceive it.

在实践中，设计师应确保所有功能都能仅通过键盘操作，因为有些用户无法使用鼠标。颜色不应是状态的唯一指示——例如，警告应同时使用红色、图标或文字——以便色盲用户也能识别。

Readable typography also matters: font size must be adjustable, line spacing should be generous, and the contrast between text and background should meet the WCAG AAA standard where possible. Inclusive design benefits everyone, not just users with disabilities, because it often results in a cleaner and more flexible interface.

易读的排版也很重要：字体大小应可调整，行距应宽松，文本与背景的对比度应尽可能满足 WCAG AAA 标准。包容性设计惠及所有人，而不仅仅是残障用户，因为它往往带来更简洁、更灵活的界面。

9. Cognitive Load and Decision Making | 认知负荷与决策

Cognitive psychology informs interface design. Human working memory is limited to roughly 7 ± 2 items, so interfaces that force users to hold many pieces of information in mind are likely to cause errors. Designers reduce this burden by chunking related information into groups.

认知心理学为界面设计提供了依据。人类工作记忆的容量大约为 7 ± 2 个项目，因此强制用户在脑中保存大量信息的界面很容易导致错误。设计师通过将相关信息进行分块来减轻这一负担。

Hick’s Law states that the time required to make a decision increases logarithmically with the number of choices. This implies that menus and toolbars should not be overloaded; rarely used options should be hidden or placed in submenus, allowing the user to concentrate on the most common actions.

希克定律指出，决策所需时间随选项数量的增加而呈对数增长。这意味着菜单和工具栏不应过度拥挤；不常用的选项应被隐藏或放入子菜单，让用户专注于最常见的操作。

Fitts’s Law predicts that the time to move a pointer to a target depends on the size of the target and the distance to it. Larger buttons placed close to the user’s current position are faster to click, which is why critical actions such as ‘Confirm’ should be larger than less important actions.

菲茨定律预测，指针移动到目标所需的时间取决于目标的大小以及到达目标的距离。更大、更靠近用户当前位置的按钮点击更快，这就是为什么”确认”等关键操作按钮应比次要操作按钮更大。

10. Evaluation of User Interfaces | 用户界面的评价

Evaluation can be formative (performed during design to improve the interface) or summative (performed after completion to judge whether the system meets its requirements). Both are essential in a rigorous design process.

评价可分为形成性评价（在设计过程中进行以改进界面）和总结性评价（在完成后进行以判断系统是否达到要求）。在严谨的设计流程中两者都不可或缺。

A common evaluation method is heuristic evaluation, where experts inspect the interface against the usability heuristics described earlier and record any violations. It is fast and inexpensive, although it does not involve real users.

一种常见的评价方法是启发式评估，由专家对照前述可用性启发式规则检查界面并记录违规之处。它快速且成本低，但不涉及真实用户。

In addition, A/B testing compares two versions of an interface by showing each to a random subset of users and measuring which one performs better on key metrics. Combined with server logs and analytics, these methods provide objective evidence about how real users behave, allowing the design team to make data-driven improvements.

此外，A/B 测试通过向随机用户子集展示界面的两个版本，并衡量哪个版本在关键指标上表现更好来比较二者。结合服务器日志和分析数据，这些方法提供了关于真实用户行为的客观证据，使设计团队能够进行数据驱动的改进。

In summary, the design of a user interface is a systematic activity that combines knowledge of interface types, design principles, usability heuristics, prototyping methods and testing techniques. By applying these principles and methods, a developer can create interfaces that are not only functional but genuinely easy and pleasant to use.

总之，用户界面的设计是一项系统性的工作，它综合了界面类型、设计原则、可用性启发式规则、原型方法和测试技术的知识。通过应用这些原则与方法，开发者能够创造出不仅功能完善、而且真正易用且令人愉快的界面。

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

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

User Interface Design Principles and Methods | 用户界面设计的原则与方法