创建网站原型的10种最佳做法

原型设计对设计过程非常有益，因为它可以使设计人员在整个项目上节省大量时间和资源。与在开发阶段就识别出错误相比，找出需要改进的地方可以使纠正错误变得更加容易。与使用平面视觉效果相比，它还可以帮助设计师更好地形象化网站。

客户出于各种原因特别需要它们。它可以帮助他们从一开始就形象化其未来网站的外观。网站原型还使他们能够以较低的成本灵活地更改愿景并最终确定愿景。他们可以更准确地设置时间表和费用。对于客户来说，在初始阶段不清楚他们想要建立的网站构想是有意义的。在大多数情况下，他们的团队无法达成协议，因为他们持有不同的意见。一个网站原型可以无偏见地考虑大多数这些想法，以使其更加清晰并节省时间和资源。原型制作还可以帮助节省网站开发成本。

这些是创建网站原型的最佳做法–

1.了解您的听众：

网站原型设计和开发过程将涉及整个链中的许多人。因此，您需要根据与之讨论过程的团队来介绍您的内容。这意味着您与营销团队共享的信息将与您向后端开发人员显示的内容不同。因此，在原型中具有相关功能以迎合您的受众非常重要。向撰稿人展示动画可能会给他们留下深刻的印象，但并不一定会增加任何有价值的输入。了解每个部门的角色，并与他们讨论他们负责的部分。重要的是要有清晰的沟通和作为协作团队的工作，以确保覆盖所有方面。

自从您开始从事此项目以来，这些人仍然在讨论原型。他们更容易理解这个概念。但是，其他外部受众群体成员是网站的实际用户。为了向他们解释网站原型的功能和目的，您需要了解一些知识。首先，要知道您的最终用户是谁。其次，了解他们对该网站的期望。最后，在考虑了所有这些因素之后，对构建的原型进行可用性测试。为了获得有效的反馈以改进原型，您可能需要向客户提出很多有关其期望的问题。避免使用技术术语，因为大多数术语可能并不熟悉它们。

在测试原型时，将原型放置在无联系的用户面前至关重要。这将帮助您诚实，准确地评估原型的功能，可用性和信息体系结构。与在网站代码和设计的范围过大时识别这些问题相比，在此阶段具有识别几个小问题的能力将使其更容易处理。

2.从纸和铅笔开始：

即使在设计数字产品时，也始终可以启动模拟。在转换像素之前，您总是可以拿起铅笔和纸来粗略地绘制出原型。通过快速制作出需求量低的草图，可以使设计师在更短的时间内尝试创造性的解决方案。它还可以帮助设计人员在转向像素之前获得该结构的基本概念。如果您在紧迫的最后期限之前需要创建即时演示文稿，则PowerPoint和Keynote不仅可以用来传达站点外观的简化版本，还可以作为足够的软件。

3.使用CSS和HTML：

编码原型是演示网站如何运作和外观的最佳方法之一。因此，坚持使用CSS和HTML可以帮助我们实现这一目标。使用代码制作的原型可以节省时间和麻烦。由于存在不同的设备和屏幕尺寸，因此使用HTML和CSS有助于快速了解网站在其上的外观。由于现在您只需要向每个参与人员发送一个链接即可，而不是多个PSD文件，因此可以简化此过程。

当您检查网站在不同设备上的外观时，可能需要进行一些更改。使用CSS和HTML编码的网站原型，您可以在工作模型中进行更改。与某些传统的原型制作方法相比，这样做可以简化开发过程，并使您可以更快地启动网站。显示您在网站上所做的所有工作，而不是从理论上进行解释，也会给人留下深刻的印象。编码的网站原型还有助于识别在开发过程中弹出的错误。

4.使用真实内容进行设计：

原型不仅限于线框或实体模型。它甚至不需要完整版本。在设计过程中使用真实内容不是强制性的，您可以在原型阶段使用伪文本。但是，最好还是使用最终网站上的实际标题和内容，即使内容或副本未精炼或在其初始草稿中也是如此。拥有真实的内容来填充虚拟内容的空间将有助于局外人了解页面的内容以及信息的结构。

5.不要忘记手机：

对于任何成功的设计，您都需要知道需要传达的想法以及您希望人们接下来采取的行动。为移动设备找到每个页面的焦点特别重要。有限的屏幕尺寸可能具有挑战性，并且需要创造力。

您可以从删除分散注意力和重复性的元素开始。布局必须简洁明了。不要包含任何批量内容或图形。布局越简单，它就会越干净。同样，传达其预期内容也将更加容易。打算在手机屏幕上使用该网站的人只有用手指可以与之交互。他们的导航需要简化。应该始终努力使用户能够以最少的步骤来执行您希望他们执行的操作。原型还需要显示动画，微交互和其他动态元素将如何帮助改善用户体验。

6.使用专业应用程序制作网站原型：

 

如果您觉得这有些不知所措，则可以随时依靠专业应用程序寻求帮助。许多有用的应用程序专门用于网站原型制作。有Sketch，Microsoft Visio，Axure Pro，Adobe InDesign，Adobe Photoshop和许多其他应用程序。用这些工具制成的任何原型都将具有专业的外观和美感。有些应用程序还允许您将可点击元素添加到原型中。但是，这种方法可能有某些缺点。这些应用程序大多数都很昂贵，并且需要一定水平的专业知识才能使用它们。而且，只有设计者才能修改项目。因此，会有多个版本可能会在电子邮件中丢失。

7.优先考虑原型，而不是计划：

网站原型是验证和处理现有假设和要求的有效方法。当您花费更多时间和资源进行规划时，它会创建大量文档。仔细阅读本文档可能会导致误解和假设。将更多的精力放在原型制作上会容易得多，因为它将使每个相同的页面更快。当您有效地处理原型时，它具有灌输各种利益相关者的能力。然后，您可以获取他们的宝贵反馈，并在流程的早期阶段进行改进。

8.尽早并一致地分享原型：

网站原型制作是一个循环过程。您应该从基本的线框和功能开始。接下来，根据利益相关者的反馈，删除需要澄清的区域和详细信息。即使您的项目在早期阶段还远未达到完美，您分享的项目越多，分享的时间越早，您将获得更多有价值的反馈。这也将节省时间并避免混淆，因为您将不停地与利益相关者进行交流并将其展示给您，因此您不会进行任何错误的假设。

9.不要在原型中包含所有内容：

您不应浪费时间对网站的每个元素进行原型制作。对一切进行原型制作是浪费时间，精力和金钱。相反，请确定需要进行原型设计和测试的重要元素。对涉及的元素进行原型设计，需要购买或需要用户测试的元素。重要的是要记住，网站原型并不是最终产品，而是协作理解和获取质量反馈以改善结果的地方。它还可以帮助每个利益相关者在整个过程中都处在同一页面上。

10.设定切合实际的目标：

与您的客户坐下来，并从原型练习中首先讨论工作范围和他们的期望是至关重要的。工期和所有其他可交付成果应事先进行粗略的成本估算，以免在开始流程后造成任何混淆。原型制作练习必须顺利进行。流程启动后的任何中断都可能影响网站原型制作流程的质量和效率。作为网站开发人员，让您的客户了解进行此过程的价值也很重要，因为并非所有客户都愿意为此做好准备。从长远来看，使他们意识到网站原型的好处是开发人员的工作。

这些是创建可使用的网站原型的10个最佳实践。它们将帮助您创建令人印象深刻且可行的结构，从而简化连续测试和输入的过程。保持透明，并尽可能与客户讨论。这只会帮助您及早发现问题，以便您快速纠正它们。

此外，使用网站原型还可以使您识别一些以前没有想到的优点或功能。因此，您也可以在网站设计中实现它们。执行此过程将帮助您了解所构建的内容以及它与最终产品的外观之间的相关性。继续练习并遵循以下10种做法，以提高网站原型设计流程的效率。依靠代码而不是付费软件来创建原型要好得多，因为它易于编辑和使用。它使流程民主化，并允许所有利益相关者编辑或审查原型。