线框图、原型、模型常被混为一谈，不少人统称为原型，但实际上三者在设计流程中各有不同定位与作用，并非完全等同。
1、 从图中可以看出，prototype 与其他两者的主要区别在于其具备交互性和可点击功能，属于动态模型；而 wireframe 和 mockup 均为静态展示。二者之间的差异则体现在保真度上，wireframe 通常为低保真草图，mockup 则是高保真视觉设计，更接近最终成品的外观与细节表现。
2、 线框图如同建筑蓝图，原型则似样板房，前者勾勒结构，后者展现真实体验。
3、 线框图是产品设计初期的重要工具，用于呈现产品的基本概念、结构框架、内容层级、页面布局及交互逻辑。它聚焦于核心功能与不同使用场景下的操作流程，强调功能性而非视觉效果，因此通常采用极简风格，避免复杂装饰。色彩上以黑、白、灰为主，偶尔加入蓝色用以区分导航区域与内容区块，整体属于低保真原型，便于快速修改与沟通。
4、 纸上手绘即可
5、 白板随意涂画
6、 可用软件工具进行制作
7、 墨刀绘制的线框图设计
8、 它如同城市导览图，呈现整体结构，帮助把握全局布局，便于方向指引，却难以展现隐藏于街巷深处的细腻景致与独特韵味，真正的美需亲身探寻才能体会。
9、 线框图是一种用于沟通的设计工具，主要用于快速呈现产品概念，帮助团队成员迅速理解核心思路，并在此基础上展开讨论。通过及时收集各方反馈，推动产品不断优化。由于线框图并非最终成品，后续可能根据意见进行大幅调整，因此无需在视觉细节上投入过多精力，重点在于高效传递结构与功能思路。
10、 线框图关键词：结构、布局、草图
11、 视觉稿是在线框图基础上进一步深化的设计方案，融入了图形、字体、色彩等具体视觉元素，全面展现产品的整体外观与细节效果，基本等同于最终成品的设计样式，是产品视觉呈现的完整体现。
12、 与线框图类似，模型图同样为静态不可交互，侧重展现产品外观，融入多样视觉设计元素，呈现较高的真实感和细节还原度。
13、 模型图细节丰富，常用于视觉设计讨论，便于快速收集反馈并优化产品外观设计。
14、 在 Dribbble 上搜索了一下，结果是这样的。
15、 关键词：Mockup 设计概念图
16、 「原型」是指具备可操作性的模型，能够较真实地模拟用户与界面之间的交互过程。它在产品开发早期帮助发现潜在问题，及时调整优化，使设计者能通过实际测试不断验证并完善对产品的构思与设计，提升整体可用性与用户体验。
17、 高保真与低保真原型对比分析
18、 将多张视觉稿整合为可交互的模型时，Mockup 转变为高保真原型，具备实际操作功能，更贴近最终产品形态，便于测试与验证设计效果。
19、 将多张线框图整合为可交互的模型时，线框图便转化为原型，这种初步可操作的模型被称为低保真原型，常用于早期设计验证与用户测试。
20、 原型最关键的特点是具备可操作性，判断其是否为原型的核心标准在于能否实际运行和操作。
21、 由于原型强调可交互性，静态的PS设计稿通常不被视为原型，而墨刀制作的可操作输出稿则符合原型定义，所示。
22、 关键词：原型设计与功能验证
23、 线框图、原型和效果图各有特点，适用于不同场景。产品经理或设计师需根据产品阶段选择合适的表达方式，在恰当的时机输出相应成果。合理运用各类工具，既能高效呈现设计思路，又能快速获取反馈，及时调整方案，有效验证产品设计。这不仅提升了沟通效率，也加快了迭代速度，避免后期大规模返工。掌握各阶段的输出方法，是确保项目顺利推进、节约资源与时间的关键能力。
