原型图（Prototype）和线框图（Wireframe）是两种不同的设计工具，它们在设计流程中承担不同的角色，并被用来表达不同程度的设计细节和交互功能。
线框图 (Wireframe)
线框图是一种低保真度的设计图，通常是黑白色调，用来表达页面的基本布局和内容结构。线框图的重点是：
- 确定页面元素的位置和优先级。
- 布局和功能的初步规划，而不是设计的视觉外观。
- 展现内容的分布，如标题、正文文本、图片和按钮的大概位置。
- 明确哪些元素应该包含在页面上，以及它们之间的关系。
线框图通常是设计流程中的第一步，可以快速地制作和修改，非常适合在设计早期与团队成员和利益相关者沟通和迭代。
原型图 (Prototype)
原型图是一种中到高保真度的交互模型，可以通过模拟真实软件应用来测试设计概念。原型图的特点是：
- 它们可能包含完整的设计元素，如颜色、图标、真实的图像和按钮样式。
- 可以展示和测试用户交互流程，例如点击按钮后的页面跳转、菜单展开等。
- 帮助设计师、开发人员和利益相关者理解和评估产品的交互体验。
- 更适合用来进行用户测试和收集反馈，以优化用户体验。
原型图通常在线框图的基础上进一步发展，加入更多细节和交互功能。在某些情况下，高保真原型可能非常接近最终产品的外观和感觉。
总结来说，线框图注重于页面结构和元素的布局，原型图则注重于用户体验和交互设计。两者都是产品设计过程中不可或缺的工具，但它们服务于不同的目的和阶段。
