区分设计过程的不同阶段可能会引起混淆，特别是当术语使用过于松散时。然而，这并不是设计师不知道差异的借口。虽然这看起来很无辜，但把模型看作是一个线框，就像木匠把锤子当作螺丝刀一样。不知道如何制作低保真原型就像外科医生不知道在哪里减少一样。

这些都是设计师的工具，所以你应该从内部和外部学习。因此，如果你想学习如何创建网站模型，学习最好的线框工具或掌握快速原型，你就在正确的地方。本文将解释基本知识：你能做什么，为什么它们有用，建立一些常见的方法，甚至一些最好的实践。我们必须从他们的名字开始。使用上述下拉菜单导航到您想要的页面。

那么，freakin的区别是什么呢？

虽然这不是设计网站或应用程序的唯一步骤，但传统的设计过程遵循这三个步骤。这是一个粗略的简化，没有考虑到无数的中间变量，但这是一个很好的解释基础。一般来说，这与忠诚度水平有关，通常会随着你的进步而上升。同样，这也是一个过于简化的规则，而不是一成不变的规则。例如，有时跳过模型并创建最低生活保障原型是最适合您的项目。或者，您可能会遵循设计师Stevenbradley最喜欢的流程，在这个过程中，您从线框图到模型模型，并在代码中完成。没有最佳过程（只有正确的过程），让我们探索每种类型的设计是什么样子的。

线框图

线框图就像你设计方案的蓝图。你可以在早期阶段创建它们，通常是第一步（或第二步，如果你更喜欢先画草图），在团队迭代视觉细节之前，只花时间回答关键的布局、结构和组织问题。因此，线框是最低生活保真度。每件事都有一个时间和地点，在格式和结构固化后，应稍后决定视觉和技术细节。

这并不是说线框图根本不应该注意视觉效果——你只需要足够的细节来显示整体布局和元素类别所需的空间(如侧栏、顶导航、页脚、主要内容等)。).正如我们在《线框图》指南中所描述的，这就是为什么线框图通常包括以正方形形式出现在后面的图形占位符和随后出现的图标版本。

如上所述，线框图允许团队在深入细节之前只关注全局的决定。线框图的优点与任何媒体的轮廓相同：在向前移动之前，他们给出了一个适当的计划，以减少错过某些东西的双重反向风险。此外，作为一种交付，线框图可以与整个团队共享，以便每个人都在同一页上。如果您使用专业的线框图或原型工具，不同的团队成员可以修改或评论相同的文档，以鼓励从一开始就合作。

此外，在浪费时间进一步发展之前，线框可以显示给想要尽快查看结果的利益相关者。

由于线框图的保真度较低，建造它们的方法比其他阶段更多。让我们看看。

旧的方法。简单地把你的想法写在纸上，不要太局限于细节。在头脑风暴等情况下，这对快速线框有好处，但这些草图可能会给整个团队带来麻烦，很容易被误解。如果你喜欢有组织的草图，我们强烈推荐分层草图。

如果使用Photoshop或素描等软件对你来说就像在纸上画画一样自然，那就去吧。然而，该选项需要对程序有先天的理解，并且缺乏通过一些线框应用程序提供的交互能力。

如果您专门为演示制作线框图，可以在PowerPoint或Keynote等软件中构建。幻灯片结构可以让你在页面上考虑你的设计，但这个选项缺乏互动性。然而，演示软件非常熟悉，因为我们大多数人在某个时刻都使用过PowerPoint或Keynote。

今天，该软件专门用于线框图和其他东西，如UXPin、Axure、Omnigrafle和Moqups。这里的优点是线框图的流线型特性，如拖放的可用性，以及通过几次点击添加交互性有多容易。缺点是有些成本高于其他成本。虽然Balsamiq是免费的，但它缺乏Axure、Omnigrafle和UXPin之间的交互功能。只要满足项目的需要和限制，这种方法并不重要。重要的是，在你进入更详细的阶段之前，你对整个项目有一个可靠的想法。

该模型的功能是为视觉结构设计出线框图。它们是静态显示最终产品外观的外观。这为您提供了在色彩规划、排版和风格上做出重要决定的机会；给你一些时间做实验，以确保你的最终选择是最好的选择。正如《物理模型指南》所解释的，物理模型填充了线框中忽略的视觉细节，并将皮肤添加到骨骼中。这取决于你的时间和资源。它们可以是中等或高保真的。

虽然很多设计师认为模型是可选的，甚至是不必要的，但我们不同意。同样，线框图留出时间，在不受干扰的情况下做出基本的结构决策，模型留出时间进行视觉效果。一个更实际的优点是，他们的高质量视觉效果更容易被利益相关者接受。线框图要求观众使用他们的想象力，但模型更接近最终的产品设计。

因为强调视觉效果，只能用几种方式创建模型。

模型/原型设计软件。就像使用线框图一样，一些专业的设计工具，如Axure和UXPin，提供了一些特性，如UI元素库，以支持Mockup的高保真度。

平面设计软件。如果你正在制作一个像素完美的模型，这个软件的效果特别好，但也有一些缺点——也就是说，当你需要编码时，你的一些努力不会准确地翻译。此外，一些工具，如invision、marvel和uxpin，也集成了photoshop和sketch，使其更容易从mockup过渡到prototype。

编码模型。如果你能熟练地使用代码，最好在最后的语言中构建你的模型。这绕过了一些未来必须重新设计的问题。当然，你必须问自己的问题是，你是否能在一个小时的代码和一个设计工具中探索更多的设计。有了结构和视觉选择，你可以深入研究原型。

什么是原型？线框图处理结构，模型处理视觉效果，原型处理可用性。

原型是第一阶段，即使只是一点点，你也可以与你的创造互动。原型允许您探索UI，确定哪些元素最有效，并在问题成为问题之前预测可用性。

当其他人认为线框图和模型是不必要的（我们不是，我们不能同意更多）时，没有人建议在没有原型的情况下继续前进。原型对于每个将产品发布到现场的项目都至关重要。如果你不首先与用户进行原型设计和测试，那么你只是在乞求失败。原型设计最明显的好处之一是可用性研究。一个可行的原型为用户测试打开了一扇方便的门，揭示了需要工作的可用性和目标用户的偏好。简而言之，使用原型的用户测试告诉你，你的设计是否在正确的轨道上，如果没有，需要改变什么。

原型设计作为设计过程中的一个关键阶段，在设计师个人偏好的基础上产生了许多不同的变化和策略。

这种草图相当于原型。这种非数字化的方法涉及到纸上画的页面。通常，人类充当计算机，根据用户的选择切换纸张。虽然生产快捷简单，但这种粗糙的原型需要很多用户的思考。

美好未来首创1对1项目负责制，项目经理专人全程负责。我们为您提供网站建设优化解决方案，互联网品牌建设与网络营销，设计、技术开发、网站和SEO优化行业的技术和数据支持服务、营销推广等服务。为您的企业获取网络流量，挖掘精准客户，达到更高的销售指标。是您的企业提升产品销量最好的伙伴。