【概念】什么是UI（User interface）什么是UX（User experience）？

1. 软件生命周期管理 (Software Life Cycle Management)

解释：

• 中文： 软件生命周期管理是指从软件规划、设计、开发、测试、部署到后续维护甚至退役的整个过程。
• English: Software Life Cycle Management refers to the systematic process of planning, designing, developing, testing, deploying, and maintaining a software product over its entire lifespan.

2. UI 与 UX 基础概念

讲义在早期部分对 UI 与 UX 进行了基本介绍，明确二者之间的区别和联系。

2.1 用户界面 (UI – User Interface)

• 中文：
  • 指的是软件或应用程序的视觉展现部分，包括布局、图形、颜色、控件和交互元素等。
• English:
  • UI (User Interface) involves the visual elements of a product — the layout, graphics, and interactive components that users directly interact with.

2.2 用户体验 (UX – User Experience)

• 中文：
  • 指用户在使用软件或应用过程中的整体感受和体验，包括使用流程、易用性、满意度与情感体验。
• English:
  • UX (User Experience) covers the overall experience and satisfaction a user has when interacting with a product, encompassing usability, emotional response, and the overall journey.

3. 为什么 UI/UX 重要 (Why UI/UX Matters)

• 中文：
  • 根据讲义，88%的用户在体验不佳后不会再次使用产品；良好的 UI 可以将转化率提高200%，而糟糕的 UX 则可能导致用户流失和信任缺失。
• English:
  • As highlighted in the presentation, 88% of users might not return after a bad experience. A good UI can boost conversion rates by as much as 200%, while poor UX results in lost trust and users.

【参考：citeturn0file0】

4. UI/UX 设计原则 (Design Principles for UI/UX)

讲义中总结了几项关键的设计原则，这些原则为设计师提供了指导，确保产品易用、美观且高效。

4.1 主要原则：

• 一致性 (Consistency)

  • 中文： 在整个产品中保持风格、布局和操作的一致性。
  • English: Maintaining a uniform look, feel, and behavior throughout the application.

• 反馈 (Feedback)

  • 中文： 系统应及时对用户操作给予响应或提示。
  • English: The system should provide immediate and clear feedback on user actions.

• 可见性 (Visibility)

  • 中文： 重要的功能和信息应显眼并易于发现。
  • English: Essential features and information should be easily visible and accessible.

• 简单性 (Simplicity)

  • 中文： 避免过于复杂的设计，界面尽量简洁清晰。
  • English: Keep the design simple and uncluttered to avoid overwhelming the user.

• 可访问性 (Accessibility)

  • 中文： 确保产品对所有用户都友好，包括残障用户。
  • English: Ensure that the product is accessible to all users, including those with disabilities.

此外，讲义还提及了 7 个基本 UI 设计原则（细节可参考 Figma 等资源），这些原则在实际设计中经常用于优化视觉表现和用户交互。

5. 典型 UX 问题案例 (Examples of Bad UX)

为帮助理解，讲义通过实例展示了不良用户体验案例：

• Netflix 自动播放功能：

  • 中文： 自动播放可能导致用户失去对内容的控制，影响使用体验。
  • English: Auto-play can remove control from the user and potentially create a frustrating experience.

• eBay 导航混乱：

  • 中文： 导航设计不合理会使用户迷失方向，从而影响网站的整体使用率。
  • English: Confusing navigation can make users feel lost and hinder overall site usability.

6. UX 设计过程 (UX Design Process)

讲义中介绍了一个常见的 UX 设计流程，帮助设计师从用户角度出发，逐步优化产品：

• 同理 (Empathise)：

  • 中文： 通过调研和访谈深入了解用户需求和情感。
  • English: Understand users’ needs and emotions through research and interviews.

• 定义 (Define)：

  • 中文： 明确用户的问题和需求，定义设计目标。
  • English: Clearly define the problems and requirements to set precise design objectives.

• 构思 (Ideate)：

  • 中文： 头脑风暴和构思多种解决方案。
  • English: Brainstorm and generate a range of ideas to solve the defined problem.

• 原型制作 (Prototype)：

  • 中文： 创建产品初步模型，展示最终交互和设计大致效果。
  • English: Build prototypes to simulate the final design and interactions.

• 测试 (Test)：

  • 中文： 与真实用户进行测试和反馈，及时迭代改进。
  • English: Test the prototype with real users, gather feedback, and iterate accordingly.

7. 设计工具 (Design Tools)

讲义中提及了多种用于 UI/UX 设计的工具：

• UI 工具：

  • Figma、Adobe XD
    • 中文： 用于界面设计、原型构建和团队协作。
    • English: Tools used for designing interfaces, creating prototypes, and team collaboration.

• UX 工具：

  • Miro：（用于制作同理图、共情图）
  • Maze：（用于原型测试）
    • 中文： 帮助捕捉用户行为和体验反馈。
    • English: Tools that help in mapping user experiences and conducting prototype tests.

• 协作工具：

  • FigJam、Notion
    • 中文： 用于团队合作和信息共享。
    • English: Tools that facilitate team collaboration and project documentation.

8. 原型设计 (Prototyping in UX)

原型设计帮助设计师在产品开发早期构建可视化、交互性的模型，从而验证想法和流程。

• 低保真原型 (Low-Fidelity Prototypes)：

  • 中文： 如草图、纸上原型，快速表达核心功能，无需精致细节。
  • English: Rough sketches or paper prototypes that focus on basic structure and core functionality.

• 中保真原型 (Mid-Fidelity Prototypes)：

  • 中文： 包括线框图和静态模型，提供较为准确的布局和内容结构。
  • English: Wireframes or mockups that offer a clearer structure, though without full interactivity.

• 高保真原型 (High-Fidelity Prototypes)：

  • 中文： 高度近似最终产品，具备完整交互功能，可供真实测试。
  • English: Interactive and detailed prototypes that closely resemble the final product in look and function.

• 功能原型 (Functional Prototypes)：

  • 中文： 模拟产品的部分或全部功能，进行实际操作测试。
  • English: Prototypes that demonstrate the working aspects of the product, useful for user testing.

9. 用户画像与共情图 (User Personas & Empathy Mapping)

这部分帮助设计师以用户为中心，避免主观假设：

• 用户画像 (User Persona)：

  • 中文： 根据调研构建的虚拟用户模型，代表目标用户群体。
  • English: A fictional character based on research that represents the target user group.

• 共情图 (Empathy Map)：

  • 中文： 用于记录用户所见（See）、所听（Hear）、所说（Say）、所做（Do）以及感受（Feel），从而更全面地了解用户。
  • English: A visual tool to capture what users see, hear, say, do, and feel to gain a deeper understanding of their experience.

10. 案例研究 (Real-World Case Studies)

讲义通过实际案例说明良好 UX/UI 设计对产品成功的影响：

• Airbnb 案例：

  • 中文： 针对用户在预订流程中的流失问题，通过简化流程和增加进度指示，最终完成预订的比例提升了30%。
  • English: Airbnb addressed user drop-off during the booking process by simplifying the flow and adding progress indicators, leading to a 30% increase in completed bookings.

• 共乘网站设计案例：

  • 中文： 展示了如何通过良好的 UI/UX 设计来优化共乘网站的用户操作流程。
  • English: An example from Behance illustrating improved UI/UX design in ride-sharing websites, enhancing the overall user experience.

小结

对于初学者而言，理解这些概念时可以从以下几个角度入手：

1. 基本定义： 清楚区分 UI（界面设计）与 UX（体验设计）；
2. 设计原则： 理解为什么一致性、反馈、可见性、简单性和可访问性对设计至关重要；
3. 设计过程： 掌握从用户调研到原型测试的各个阶段；
4. 工具与案例： 通过常用工具和真实案例进一步理解理论在实践中的应用。