Home 软件工程

1. 定位与背景 (Where Are We Now?)

1.1 软件开发的阶段定位

  • 三阶段七环节：
    1. 计划阶段（问题定义、可行性分析）
    2. 开发阶段（需求分析、系统设计、开发、测试）-> 交互设计主要发生在这里
    3. 运行阶段（运维）
  • 需求分析的三个层次：
    1. 业务需求：客户或市场的最高层次目标（我们要达成什么商业目的？）。
    2. 用户需求：用户使用软件需要完成的任务（用户怎么用？）。
    3. 功能需求：开发团队需要实现具体系统功能（系统具体怎么做？）。

1.2 建模方法回顾（前序知识铺垫）

  • 结构化分析：实体关系图 (E-R)、状态图 (SD)、数据流图 (DFD)、数据字典 (DD)。
  • 面向对象与 UML：
    • 用例图 (Use Case)：从用户角度描述功能，核心是“谁（角色）做了什么（用例）”。
    • 类图 (Class Diagram)：描述系统的静态结构。
    • 助教补充：交互设计往往基于“用例图”展开，因为用例通过“剧情”串联了用户与系统的交互。

2. 信息架构 (Information Architecture, IA)

2.1 核心概念

  • 定义：对信息进行结构设计、组织方式及归类，目的是让用户容易找到和理解信息。
  • 通俗解释：如果把APP比作房子，UI是装修，交互是动线，那么信息架构就是房子的图纸和骨架。它决定了“我的订单”是放在“首页”还是“个人中心”。

2.2 常见案例分析

  • PPT中对比了微信、饿了么、小红书的架构。
  • 重点：不同类型的产品（社交 vs 工具 vs 内容社区），其信息层级完全不同。

2.3 设计工具与方法

  • 卡片分类法 (Card Sorting)：一种用户研究方法，让用户对信息卡片进行归类，从而发现用户心智中的逻辑结构。
  • 思维导图 (Mind Map)：将整理好的结构可视化的工具（常用工具：XMind, MindManager, 百度脑图）。

3. 从信息架构到交互设计 (From IA to Interaction Design)

3.1 快速原型的四种方法 (考试重点：优缺点对比)

方法 描述 优点 缺点
1. 手绘 (Paper) 纸笔草图 成本极低，交流最便捷，初期最重要 无法表达复杂逻辑，变更困难，难保存
2. 绘图工具 (PS/Sketch) 静态高保真图 视觉美观 无法表达交互逻辑，难以演示流程
3. 交互设计 (Axure) 行业标准方法 支持复杂逻辑和动效，变更相对容易，可生成HTML 需要学习成本，不如真实系统逼真
4. 开发系统 (Code) 写代码实现 最真实，直接验证技术 成本最高，修改最慢，不仅要有界面还要有后台

3.2 常用工具

  • Axure RP：适合制作复杂的、逻辑性强的交互原型（本课程重点）。
  • Sketch / Adobe XD：更偏向UI设计，但也具备轻量交互功能。

4. Axure 绘制与使用规范 (Axure & Guidelines)

4.1 Axure 核心界面与概念

  • 主要区域：页面管理 (Pages)、元件库 (Libraries)、画布 (Canvas)、检视/属性面板 (Inspector)。
  • 动态面板 (Dynamic Panel)：Axure中实现复杂交互（如轮播图、弹窗、状态切换）的核心元件。

4.2 交互设计文档规范 (核心考点：如何写文档)

一份专业的交互设计文档（DRP）应包含以下结构：

  1. 封面：项目名称、版本号、日期、作者。
  2. 更新日志 (Change Log)：
    • 必填项：日期、终端（iOS/Android）、所在页面、变更内容、变更原因。
    • 作用：版本控制，防止开发做错版本。
  3. 设计过程 (可选)：包含竞品分析、用户画像、流程图等，增加说服力。
  4. 交互稿主体 (重点)：
    • 全局说明：定义通用的规则（如加载中状态、断网提示、空数据状态）。不要在每个页面都重复写，统一定义。
    • 功能模块：按“概述（引导） -> 具体流程”的顺序组织。
    • 流程图逻辑：清晰展示操作后的跳转逻辑（如：点击“保存” -> 校验成功 -> 跳转列表页）。
  5. 废纸篓：存放暂时不用的方案，以防需求回滚。

4.3 交互稿绘制细节

  • 静态交互稿 vs 可交互原型：
    • 前者主要靠旁边的文字标注（Annotations）来说明逻辑。
    • 后者可以点击跳转，模拟真实APP。
    • PPT建议：工作中常结合使用，用文字辅助说明复杂的后端逻辑。

5. Axure 注意事项 (Matters Need Attention)

这部分内容是实战经验，极易在操作题或判断题中出现：

  1. 经常保存 (Ctrl+S)：防止崩溃丢失数据。
  2. 经常预览 (Preview)：生成的HTML才是最终交付物，不要只看画布。
  3. 字体设置：保持常规大小（12px-16px），不要过大或过小，除非是标题。
  4. **配色原则 (重要) **：
    • 以黑白灰为主。
    • 原因：交互设计关注的是结构和逻辑，过早引入色彩会干扰UI设计师的发挥，也会让评审方纠结于“颜色好不好看”而非“流程顺不顺”。
  5. 分享方式：如果对方没装Axure，导出为 HTML 文件包进行分享。

6. 更多资源

  • 推荐建立自己的元件库 (rplib)，提高效率。
  • 常用图标库：Iconfont。