网站设计师需知道的线框图、模型和原型

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

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

Wireframe=>Mockup=>原型

那么什么是freakin的区别呢?虽然这不是设计网站或应用程序的唯一步骤，但传统的设计过程遵循这三个步骤。这是一个粗略的简化，没有考虑到中间的无数变量，但为了解释基础，这是一个很好的基础。一般来说，这与忠诚度的水平有关，通常随着你的前进而上升。同样，这是一种过于简化，而不是一成不变的规则。例如，有时跳过模型和创建一个低保真原型是最适合你的项目。或者，您可能会遵循设计师StevenBradley所钟爱的流程，在此过程中，您从线框图到模型模型，并在代码中完成。了解到并没有一个“好”流程(只有正确的流程)，让我们来探索每种类型的设计是什么样的。

线框图

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

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

好处

如上所述，线框图使团队能够在深入细节之前只关注“全局”的决定。线框图的优点和任何媒体的轮廓一样:在向前移动之前，他们给了一个适当的计划，减少了由于错过了一些东西而不得不进行双反的风险。另外，作为一个可交付物，线框图可以与整个团队共享，以便每个人都在同一页上。如果您使用的是专业的线框图或原型工具，不同的团队成员可以对同一文档进行修改或评论，从而鼓励从一开始就进行协作。

此外，线框可以显示给希望尽早查看结果的利益相关者，并在浪费时间进一步发展之前显示潜在的编辑。

方法

由于线框图的保真度较低，所以比起其他阶段，有更多的动手方法来建造它们。让我们看几个。

草图

老式的方法。简单地把你的想法写在纸上，不要太拘于细节。在像头脑风暴这样的情况下，这对于快速的线框来说是很好的，但是这些草图可能会给整个团队带来麻烦，而且很容易被误解。如果你喜欢有条理、有条理的草图，我们强烈推荐分层的草图。

平面设计软件

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

演示软件

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

设计软件

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

什么是模型?

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

好处

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

方法

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

模型/原型设计软件

就像使用线框图一样，一些像Axure和UXPin这样的专业设计工具提供了一些特性，比如UI元素库来支持mockup的高保真度。

平面设计软件

如果你正在制作一个像素好的模型，这种软件的效果特别好，但是也有一些缺点――也就是说，当你需要编码的时候，你的一些努力工作不会准确的翻译出来。另外，一些工具如InVision、Marvel和UXPin也集成了Photoshop和Sketch，使其更容易从mockup过渡到prototype。

编码模型

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

一个原型是什么?

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

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

好处

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

方法

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

纸上原型

这种“草图”等同于原型，这种非数字化的方法涉及到纸上画的页面，通常是人类充当“计算机”，根据用户的选择来切换纸张。虽然快速简单的制作，这个粗糙的原型需要很多用户的想象力，限制了它的结果。

演示软件

通过将不同的页面链接起来，你可以在PowerPoint和Keynote等软件中创建一个非常基本的原型。同样，这些都是快速且容易做的，但是成本是有限的交互性。

编码的原型

就像编码模型一样，这节省了最后阶段的时间。不过，主要的缺点是，你的编码流畅性是否那么好。

设计工具

再一次，专门设计的应用程序配备了所有你需要的工具，在一个有利于这个目的的界面。你甚至可以在添加交互性时选择，有创意的交互式线框图，也就是低保真原型(我们将在下面讨论)。更多信息请查看我们的好原型工具列表。你的原型通常是粗糙的，但最终会比最终产品低一层。交互(特别是在后期设计阶段)越细化，在正式发布的时候效果就越好。

混合和匹配

一开始，我们说我们只会介绍线框图、模型和原型的基本轮廓。他们在设计中的实际角色并不是那么容易解释，而且会根据设计者的心血来潮而变化。一些人完全忽略了实物模型。另一些人则迅速在纸上画线框图，然后再跳进更高级的选项。

一个流行的变化是在早期创建低保真原型。这很适合于快速原型方法，它的目标是快速创建和测试多个原型，并将数据重复到下一个版本中。虽然快速原型设计大致是关于设计的，但是这个过程受用户输入的影响很大，这意味着最终你会得到一个更精细的最终产品。

结论

我们希望你能从中得到的主要一点是，在了解每个阶段的优势以及它是如何融入整个过程的过程中，你能够以最适合你的方式定制这个过程。如果你在设计一个详细的图形时发现你做出了最好的结构决定，那么试着从一个模型开始。如果您的项目有很多技术上的复杂性(可能来自高级交互或动画)，请尽早尝试原型来解决它们。在这个过程中，唯一错误的顺序是与项目需求相反的顺序。但是不管这个项目有什么需要，有一件事是肯定的:一个知道如何最好地使用锤子的木匠将能够制造任何类型的家具。

本文题目：网站设计师需知道的线框图、模型和原型
文章转载：http://scjbc.cn/view/48220.html