浏览器中的原型:为做网站设计人员提供的工具

建立一个网站的任务是建立一个具有交互功能的基本线框的广泛过程。虽然线框可能是静态图像或草图，但原型通常是与所有主要页面的功能交互的。

图形编辑程序一直是最受欢迎的原型设计。但近年来，越来越多的开发人员转而使用浏览器原型。当构建一个全新的项目时，它会更快、更干净、更简单。但是如何开始呢?

在本文中，我将介绍在浏览器中构建原型的基本知识，并为您提供一些工具来帮助您。

浏览器原型的基本知识

可以将网站描述为在web浏览器中运行的数字接口。许多设计师喜欢在开始编码之前在图形编辑器中创建这些接口。

但是，在浏览器中建立网站原型来了解每个特性的工作原理，并对初始概念(如布局结构和页面动画)进行评估更有意义。

虽然大多数设计师都有自己的程序来开始一个新项目，但是没有一个最佳的原型。许多设计师仍然喜欢从Photoshop开始，但是从浏览器开始有很多好处。

更容易测试和更改网格系统。
可以随意添加断点。
像下拉菜单这样的动态效果可以被测试。
你从一个小的代码库开始，慢慢地添加更多。
Photoshop不允许你动态地与模型交互。对于响应性断点，您需要为断点创建单独的文档或层组。

最终，浏览器原型更准确地表示了最终界面。模型和草图是平的和静态的。这些仍然是有价值的资产，但最终你需要一个交互式的布局。这就是为什么浏览器原型可以节省很多时间。



您可以直接从最初的草图到浏览器，以创建交互式web原型，并在最终版本中提供您需要的所有主要功能。

用于实现原型的工具将会有很大的不同。但是不要把这些工具错当成过程。

您可以在浏览器中使用原始HTML/CSS、开源库或其他工具(如浏览器插件)进行原型。无论你使用的是什么目标，都是一样的:创建一个简单的交互式UI，来模拟最终网站的行为。

成型过程

我认为最好从纸草图开始，以呈现想法。这些草图可以在一个图形程序中完成，但是当你在纸上工作时，你通常会有更多的自由。

快速迭代新想法，对设计有一个粗略的感觉。您可以指示列、gutters，并编写注释来描述容器属性(宽度、填充等)。

成型过程

一旦草图看起来不错，你就可以进入浏览器。首先设计一个基本的灰度布局。这可以用许多不同的资源，比如Placehold来完成。它可以生成任何大小的原始灰色图像。

使用简单的灰色布局，您可以更关注网格、排版、空白和动态元素，比如幻灯片或下拉菜单。这个阶段的目的是设计布局应该如何不被美学干扰。

Placehold

您想要消除所有潜在的与浏览器错误和响应断点相关的问题。让整个布局在所有浏览器中工作和运行。

从那里你可以快速添加内容，图像和其他相关的风格，而不用担心更大的图片。这绝对是浏览器原型设计的最佳策略，因为您首先关注的是大元素。

如果Firefox的布局中断，不管你是否有颜色，它看起来都是一样的。但是当您只关心布局时，解决布局问题就容易得多了。

一旦你有了一个全功能的原型，你就会有一个更简单的时间编码辅助功能，比如背景图案、瓷砖、图标和其他类似的功能。

在这个原型阶段有很多东西需要考虑。每个项目都有自己的目标，但是这里列出了在原型开发过程中要考虑的目标。

布局在所有主流浏览器中都有效吗?
元素之间是否有足够的空白?
所有的动态页面元素都能正常工作吗?
是否设置了所有必要的响应性断点?
浏览器原型工具

需要注意的是，您确实不需要任何特殊的工具或库来构建浏览器原型。您可以编写通用的HTML/CSS/JS代码，并快速地准备一个工作原型。

但是有那么多的库可以节省你很多时间。jQuery是一个很好的例子，它可以帮助编写JavaScript。

你应该自由地使用任何你觉得舒服的资源。但是，如果您正在寻找新的工具，我将强烈推荐以下选项。它们都是完全免费的，而且非常容易添加到原型阶段。
  本文来源：港联智慧云，转载请注明出处！如果需要营销型网站建设、小程序商城、多端小程序 请联系我们！