如何用浏览器设计网站的原型？针对这个问题，本文详细介绍了相应的分析和解答，希望能帮助更多想要解决这个问题的朋友找到更简单易行的方法。
网站原型的设计是一个全面系统的过程，你需要拿出一套线框，保证基本的交互功能。简单的线框可以是静态的图片，甚至是手绘的草稿，但原型大多是动态的、交互的，至少主要页面和功能基本可以呈现。
然而，设计人员通常选择使用图像编辑工具进行原型设计，但结果是大多数工具很难实现足够的交互，这导致许多开发人员转向基于浏览器的原型设计工具。
随着浏览器性能的提高和技术支持的逐步完善，基于浏览器的原型设计工具不仅可行，而且可用。它们更快、更干净、更新鲜，在构建新项目时更容易启动。那么，你是如何开始这一切的？
今天就帮大家整理一些基于浏览器的原型工具的基础知识，推荐一系列真正实用好用的原型设计工具。
浏览器原型设计的基本知识
可以说，网站本身就是一个运行在浏览器中的数字交互界面，这也使得很多设计师在编写代码之前倾向于使用PS等图像编辑工具来设计界面。
换句话说，在浏览器中设计网站的原型是一种更符合逻辑的思维方式。无论是衡量和规划详细布局，还是设计互动和动态效果，都更“原生”。
但是一般来说，对于全新的设计项目，并没有统一的最优原型设计方案。虽然很多设计师还是倾向于用PS来启动，但是在浏览器中使用原型设计工具制作原型时，还是有不可忽视的优势：
更容易测试和修改的网格系统
断点的添加和删除更加随机。
可以实时测试下拉菜单等动态效果。
您可以从一个小的代码库开始，然后逐渐增加它。
目前Photoshop不支持制作动态交互的视觉手稿和原型。然后，当您设计原型时，您需要为特定的断点和交互创建一个单独的层或文档。
浏览器下设计的原型更接近最终界面，呈现的信息更准确。相比之下，视觉草稿更平坦，更静态。当然，Photoshop下呈现的视觉稿也是一个重要的素材和参考，但最终还是要提交一个交互的版面设计。因此，浏览器中的原型设计工具更加方便高效。
可以直接跳过画稿的初始阶段，直接借助工具在浏览器中创建网页的交互原型，在你的构思中添加所有最终的主要功能。这些设计工具本身都很好，但是你必须弄清楚这些工具在整个过程中的位置。
你可以在原型设计过程中使用简单的HTML/CSS代码、开源代码库或浏览器插件，但最终目的是一样的：创建一个基本的、交互式的UI，接近网站的最终形式(而不是细节)。
原型设计过程
要完善一个想法，在稿纸上画草图永远是最好的方法。同样，这样的草图也可以在绘图程序中完成，但在纸上完成会更加直接和随意。
对于最初的粗略设计，可以通过快速迭代增加新的思路，逐步完善。你甚至可以在稿纸上画一个表格，里面描述了不同控件和元素的属性，比如宽度、高度、颜色等属性。
ZQSxSsj0OuwV5xq8
当草图看起来还过得去的时候，可以进入浏览器，打开原型工具，开始设计。这时候首先需要做的就是设计一个没有复杂色彩的灰度布局。有许多不同的工具可以帮助您解决这个问题。例如，像Placehold.it这样的工具可以帮助你快速生成不同大小和不同灰度的图片。
02-placehold-it-webapp-images
使用纯灰色布局可以让你更专注于网格、排版和空白，以及转盘、导航和菜单等海量控件。这个阶段的设计要以排版布局为主，排除视觉和美学对整体的影响。
接下来，您应该消除所有潜在的缺陷、浏览器错误和响应断点，以便页面可以在所有浏览器中正常运行。
解决这些问题后，可以用图片、视频、文字内容等填充。并添加样式和样式。这时，你再也不用担心整体布局了。关注大块和重要元素。这是在浏览器中使用原型工具的最佳策略。
当您的整个布局在浏览器中折叠时，它是否有颜色或内容并不重要。但是如果只有布局没有具体内容，修剪起来会方便很多。
一旦你的原型设计完成，填写内容就方便多了。
在原型设计的这个阶段，有很多事情需要考虑。虽然不同的项目有不同的要求，但几乎所有项目都需要考虑一些基本问题：
这种布局兼容所有主流浏览器吗？
元素之间的间隙和空间是否足够？
所有动态元素工作正常吗？
是否设置了所有必要的响应断点？
基于浏览器的原型设计工具
话虽如此，一个不需要编写任何代码的浏览器内原型设计工具才是我们真正想要的。当然，如果你精通HTML/CSS/JS代码，那就另当别论了。jQuery甚至有很多库可以帮你省去很多麻烦。
因此，我们今天讨论的是浏览器中一个方便且高度适用的原型设计工具。以下推荐型号免费且易于使用。
Chrome工作区
/> 03-chrome-workspaces-devtools
这个内置于寰宇浏览器的开发工具名为Workspaces，它本身就存在于你的本地目录中，可以直接为浏览器调用。 如果你做了一个简单的HTML/CSS 原型，并且在浏览器中打开了，那么你可以在 Chrome Workspaces 编辑和修改它们。目前绝大多数的开发人员都在使用它。
Bootstrap
04-bootstrap-css-open-source
每个前端都应当熟悉Bootstrap 的库，其中预制的CSS类和各种元素相当的完备，足以满足你的想象。
各种按钮、布局、标签、下拉菜单、以及各类常见的网站组件与功能。你完全没有必要自己从头开始写某个组件，因为Bootstrap 几乎全覆盖了。
Bootstrap 唯一的不足，大概是使用它的人太多了，许多样式和控件你可能经常会见到。当然，你如果愿意自定义样式的话，那么一定可以让它更加强大。
Foundation
05-zurb-foundation-resource-prototyping
另外一个非常流行的选择是来自ZURB的Foundation。相比于 Bootstrap，Foundation 更加清爽简单，原因也很简单，它没有太多的默认样式。
Foundation 的定制性也更强，用户可以轻松地将自己的样式覆盖到默认的控件和元素上。许多项目使用Bootstrap的时候通常只会用到默认的样式，而在使用Foundation的时候，设计师更多倾向于增加自己的样式。
Pure CSS
06-pure-css-open-source-library
另外一个值得推荐的纯 CSS/JS 框架 应该是 Pure CSS。它和 前面的 Foundation 与 Bootstrap 一样是免费开源的，它配备了栅格，排版布局，按钮以及其他的动态控件。
Pure CSS 在功能性和美观上做到了很好的统一，它的简单与灵活使得它可以应用到不同的原型设计，而它高度凝聚的库则提供了完备的功能。
Handcraft
07-handcraft-prototyping-tool-extension
Handcraft 是一个奇怪的寰宇浏览器插件，它可以让开发者在线存储和共享原型设计。
关于如何用浏览器给网站设计原型问题的解答就分享到这里了，希望
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/154909.html