海淀网站设计：浏览器中的原型设计之设计人员的提示和工具

2019.08.17 mf_web

178

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

图形编辑程序一直是原型制作中最受欢迎的选择。但近年来，越来越多的开发人员转而采用浏览器内原型设计。在构建一个全新的项目时，它更快，更清洁，更简单。但是你如何开始？

在这篇文章中，我想介绍浏览器中原型设计的基础知识，并为您提供一些工具来帮助您。

浏览器内部原型的基础知识

网站可以描述为在Web浏览器中运行而构建的数字接口。许多设计人员喜欢在进行编码之前在图形编辑器中创建这些接口。

但是，在浏览器中对网站进行原型设计以了解每个功能的工作原理以及评估布局结构和页面动画等初始概念更有意义。

虽然大多数设计师都有自己的开始新项目的例程，但没有一种最佳的原型方法。许多设计师仍然喜欢从Photoshop开始，但从浏览器开始有很多优点。

更容易测试和更改网格系统
可以随心所欲地添加断点
下拉菜单等动态效果可以实时测试
您从一个小代码库开始，然后慢慢添加更多代码

Photoshop不允许您与模型动态交互。对于需要为断点创建单个文档或图层组的响应断点，情况也是如此。

最终，浏览器原型可以更准确地表示最终界面。样机和草图平坦而静态。这些仍然是有价值的资产，但最终你需要一个交互式布局。这就是浏览器原型设计节省大量时间的原因。

您可以从初始草图跳转到浏览器，以创建具有最终版本中所需的所有主要功能的交互式Web原型。

用于实现原型的工具差别很大。但是不要误以为这个过程的工具。

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

原型制作过程

我认为最好从纸质草图开始渲染想法。这些草图可以在图形程序中完成，但在纸上工作时通常可以有更多的自由。

快速迭代新想法，只是对设计有一种粗略的感觉。您可以指示列，装订线和书面注释来描述容器属性（宽度，填充等）。

原型制作过程

一旦草图看起来很好，您就可以进入浏览器。目的是首先设计一个基本的灰度布局。这可以通过许多不同的资源来完成，例如Placehold.it，它可以生成任何大小的原始灰色图像。

使用简单的灰色布局，您可以更专注于网格，排版，空白区域以及幻灯片或下拉菜单等动态元素。这个阶段的目的是设计布局应该如何表现而不会被美学分散注意力。

PLACEHOLD

您希望通过浏览器错误和响应断点消除所有潜在的问题。使整个布局在所有浏览器中都能正常运行。

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

如果在Firefox中布局中断，无论您是否有颜色，它们看起来都是一样的。但是当你只关心布局时，修复布局问题要容易得多。

一旦拥有功能齐全的原型，您就可以更轻松地编写辅助功能，如背景图案，图块，图标和其他类似功能。

在这个原型设计阶段需要考虑很多事情。每个项目都有自己的目标，但这里有一个快速列出的目标，在原型设计时要考虑。

布局是否适用于所有主流浏览器？
元素之间是否有足够的空白？
所有动态页面元素都能正常运行吗？
您是否设置了所有必要的响应断点？

浏览器原型制作工具

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

但是有这么多的库可以为你节省大量的时间。jQuery是一个很好的例子，在编写JavaScript时可以提供帮助。

你应该随意使用你熟悉的任何资源。但如果您正在寻找新工具，我强烈推荐以下选项。所有这些都是完全免费的，并且非常容易添加到原型设计阶段。

Chrome工作区

Chrome工作区

Google Chrome DevTools中有一个名为Workspaces的小功能。这些是磁盘上的本地目录，可以在编辑时绑定到浏览器。

如果您制作一个简单的HTML / CSS原型并在chrome中打开它，您将能够在DevTools面板中进行编辑。通过创建工作区，您可以将浏览器内的编辑内部保存到计算机上的文件中。您还可以在Chrome中本地创建新文件和重复代码。

大多数开发人员已经使用DevTools，因此这是在浏览器中实现原型的好方法。查看此简要教程，在Chrome中设置工作区。

引导

每个前端开发人员都应该了解Bootstrap库。它为您可以想象的每个页面元素提供了预构建的组件和CSS类。

您可以获得按钮，列，选项卡小部件，下拉菜单以及一系列其他常见网站功能。没有必要从头开始编写任何东西，因为Bootstrap涵盖了所有内容。

唯一的缺点是，许多网站都有这种通用的Bootstrap外观，它已经变得有些无聊。如果您愿意用自己的自定义样式覆盖Bootstrap，那么这是一个很棒的原型库。

基础

另一个非常受欢迎的选择是ZURB的基金会。我认为Foundation比Bootstrap更干净，更简单，只是因为它没有很多默认样式。

使用自己的按钮，文本，链接和小部件样式可以很容易地覆盖基础。Bootstrap通常用于坚持通用Bootstrap样式的项目中。但基础是如此基本，你几乎需要添加自定义样式。

就功能而言，我无法想到比基金会更好的东西。它是一个功能强大的框架，它带有与Bootstrap相同的所有主要组件，但没有独特的样式。

纯CSS

纯CSS

我想推荐的另一个CSS / JS框架是Pure CSS。它就像Foundation和Bootstrap一样是开源的。它还带有网格，排版，按钮和动态组件。

我认为Pure是功能和美学的完美结合。它绝对是更简单的一面，但它适用于任何原型，它在一个精简库中提供了尽可能多的功能。

手工

这是一个古怪的谷歌Chrome附加组件，允许开发人员在线存储和共享原型。它叫做Handcraft，可以在Chrome网上应用店免费下载。

无论何时构建原型，通常都会在本地编写所有代码。使用Handcraft，您可以使用唯一的URL在线存储这些原型，以便快速与他人共享。与您的创意团队中的客户或成员合作，这使您的工作变得更加轻松。

包起来

开始使用浏览器原型的最佳方法是练习。无论您是否有即将开展的项目，或者您是否需要创建一个项目，只需开始使用某些内容并努力练习浏览器原型设计。

它起初确实感觉很奇怪，但是它可以使开发过程变得更加简单。如果您使用上述任何资源，我保证您会从一开始就以多快的速度开发布局。

海淀网站设计

相关推荐

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监