如今高质量的网站如此普遍,人们很容易忘记构建一个网站需要付出多少努力。从在记事本上记下想法到通过用户测试和编程绘制低级草图,整个过程可能会令人望而生畏,尤其是如果这是您的第一次。
另一方面,看到一个网站变成现实是令人兴奋的,从一个设计师头脑中的一个想法变成一个充实的在线存在。在网站设计过程中,模型是最终产品真正开始成形的时候。网站模型首先清晰地展示了网站将如何寻找您和您的利益相关者。因为模型阶段位于设计过程的中间,所以可以忽略。然而,这是所有网页设计师都应该了解的重要步骤。在本指南中,我们将解释什么是模型、何时制作它们以及它们是如何制作的。然后,我们将推荐一些您可以用来起草模型并将记事本页面变成精美网页的工具。
什么是网站模型?
网站模型是网页、网站或 Web 应用程序最终形式的静态视觉模型。模型被设计成类似于最终产品,但它还没有功能(即,你不能与之交互)。
网站模型通常包括网站的主要布局、页面元素、品牌、颜色、字体以及文本和图像等内容(尽管它可能使用占位符内容,如 lorem ipsum 文本和库存图像),目的是模拟最终网站面向设计师、开发人员、产品经理、客户和其他利益相关者。 重要的是,网站模型是静态的——它展示了网站的外观,而不是它的行为方式。它不包含动画、弹出窗口、图像滑块、可点击按钮或工作链接等移动部分。这些将在原型制作阶段的后期添加到设计中,并最终添加到最终网站中。
你什么时候创建网站模型?
网站模型是在网站创建过程中制作的。虽然网站开发的方法各不相同,但大多数都包括五个主要阶段:构思和研究、线框图、模型、原型制作和编程。在构思/研究阶段,网站和产品设计师确定网站需要完成什么以及需要包含什么以满足客户和用户。接下来,团队将创建线框。线框是网站的蓝图,映射了基本功能、元素、内容、布局。它作为设计师在顶部添加视觉元素的基础。线框可以是低保真度或高保真度。在下面的例子中,左边的线框是低保真度的,右边的是高保真度的:
模型是线框之后的下一个阶段,此时低保真草图变成充实的网站设计。模型采用线框的基本布局并添加内容、品牌和样式。设计师也会在这里收到利益相关者的反馈,并在继续制作原型之前迭代他们的模型设计。与线框一样,模型可以具有不同级别的保真度。下面,我们在左侧有一个低保真模型,在右侧有一个高保真模型:
在原型制作中,模型被转换为网站的高保真交互式演示。虽然不是最终的编码网站,但原型会尽可能地模拟网站的外观和行为。设计师使用原型进行用户测试,以获得有关网站可用性的宝贵反馈。一旦原型获得批准,网站的设计最终将移交给开发团队,该团队对网站进行编程并准备发布。