（翻译）线框图和设计原型图之间的区别是什么？

  大部分用户体验设计师在项目中会创建很多交付物，某些交付物用于用户研究，另一些交付物用于用户体验设计，其中最重要的交付物是线框图和设计原型图[1]。
  线框图和设计原型图属于最重要的交付物，原因如下：

• 便于客户理解；
• 表达愿景和期望‘
• 展示用户接口；
• 最具可执行性；
• 创造了最大的变化和影响[2]；
• 便于讨论及协作；
• 监督进展情况。

  设计者将大量时间和精力放在其它交付物上是种浪费，他们应该把大部分时间放在线框图和设计原型图上。
  做用户研究有用，但用户研究的成果没那么有用。到了最后，只有少数人会关注用户研究成果，这些成果不具有可执行性，无法产生真正的变化或影响。换句话说，用户研究成果没有给出问题的实际解决方案。[3]
  如果你想解决某个设计问题并交流解决方案，线框图和设计原型图就是你所需之物，使用这两者设定愿景、激发变革、澄清理解，没有任何其他交付物比它们更有效。[4]

线框图

  线框图就像建筑学中的蓝图，其目的是传达内容的顺序、结构、布局、导航和组织。它并不表达视觉设计方面的信息，如图像、颜色和排版等。鉴于此，线框图通常用黑白两色制作。线框图重内容，不重形式。设计人员总是先做线框图，再做设计原型图。

设计原型图

  设计原型图传达了视觉设计方面的信息，包括图像、颜色和排版，线框图中不包含这些信息。设计原型图让你在实现之前就能对设计有像素级的认识，它重形式，不重内容。完成设计原型图后，就开始开发工作，以实现该设计。[5]

形式 + 内容 = 设计

  设计是形式和内容的综合统一。线框图将内容汇总在一起，而设计原型图将形式汇总在一起。这两者是设计的有力包装，每个设计师都应该知道如何创建它们。从线框图到设计模型图的演变是道美丽的风景，这风景不仅是指项目上的进展，还是指你做为用户体验设计者的进步[6]。

原文地址：https://uxmovement.com/wireframes/wireframes-vs-mockups-whats-the-difference/

[1]原文：Most UX designers make a variety of deliverables on a project. They make ones that communicate user research. And they make ones that communicate user experience design. But wireframes & mockups are the most powerful deliverables UX designers can make
[2]原文：They create the most change & impact.
[3]原文：It’s useful to do user research, but not user research deliverables. At the end of the day, only a few people will give your user research deliverables much attention. No real change or impact happens because they are not actionable. In other words, they don’t offer a practical solution to the problem.
[4]原文：If you want to solve a design problem and communicate the solution, wireframes and mockups are the way to go. They set a vision, inspire change and clarify understanding. No other deliverable does that as effective.
[5]原文：Mockups communicate the visual design aspects that wireframes don’t. These include imagery, color, and typography. They give you a sense of what the design will look like pixel-for-pixel before it’s brought to life. The emphasis of mockups is more on form than content. When the mockups are complete, they go to code and development to bring them to life.
[6]原文：Evolving a design from wireframe to mockup is a beautiful sight to see. It’s not just a sign that you’re progressing on a project, it’s a sign that you’re progressing as a UX designer.