原型设计的网站是一个广泛的创建它具有交互功能基本线框的过程。线框可以是静态图像或草图,而原型通常可以与所有主要页面的功能交互。
图形编辑程序一直是原型制作的最流行选择。但是近年来,越来越多的开发人员正在切换到浏览器内原型。构建全新项目时,它更快,更清洁,更简单。但是,您如何开始?
在这篇文章中,我想介绍浏览器中原型的基础知识,并为您提供一些帮助您的工具。
浏览器内原型制作的基础
网站可以描述为构建为在网页浏览器中运行的数字界面。许多设计人员喜欢在继续进行设计之前在图形编辑器中创建这些界面。
但是,在浏览器中对网站进行原型制作以查看每个功能的工作方式,并评估诸如布局结构和页面动画之类的初始概念会更有意义。
尽管大多数设计师都有自己的例程开始新项目,但没有唯一的最佳原型制作方法。许多设计师仍然喜欢从Photoshop开始,但从原型设计开始有很多优点。
- 1.易于测试和更改网格系统
- 2.易于大幅度修改
- 3.下拉菜单等动态效果可以实时测试
- 4.您从一个小的代码库开始,然后逐步添加更多代码
Photoshop不允许您与模型动态交互。对于需要为断点创建单个文档或图层组的自适应断点,也是如此。
最终,浏览器原型可以更精确地表示最终接口。样机和草图是平坦且静态的。这些仍然是有价值的资产,但是最终您需要交互式布局。这就是为什么浏览器原型制作可以节省大量时间的原因。
您可以从初始草图直接跳入浏览器,以创建具有最终版本所需的所有主要功能的交互式网站原型。
用于实现原型的工具会有很大的不同。但是不要误会该过程的工具。
您可以使用原始HTML / CSS,开放源代码库或其他工具(如浏览器附件)在浏览器中进行原型设计。无论您使用什么,目标始终是相同的:创建一个简单的交互式UI,该UI对最终网站的行为进行建模。
原型制作过程
我认为最好是从纸上素描开始呈现想法。这些草图可以在图形程序中完成,但是在纸上工作时通常具有更大的自由度。
快速迭代新想法,并对设计有所了解。您可能会指出列,装订线并做一些书面说明来描述容器的属性(宽度,填充等)。
一旦草图看起来不错,就可以进入浏览器。旨在首先设计基本的灰度布局。这可以使用许多不同的资源(例如AXURE)来完成,该资源可以生成任何大小的原始灰度图像。
使用简单的灰色布局,您可以将更多精力放在网格,版式,空白和动态元素(如幻灯片显示或下拉菜单)上。此阶段的目的是设计布局应如何表现而不会被美学分散注意力。
您想消除浏览器错误和响应断点的所有潜在问题。使整个布局在所有浏览器上都能正常工作。
从那里,您可以快速添加内容,图像和其他相关样式,而不必担心更大的画面。这绝对是浏览器内原型开发的最佳策略,因为您首先关注的是大型元素。
如果布局在Firefox中中断,则无论是否有颜色,外观都将相同。但是,仅关注布局时,解决布局问题要容易得多。
一旦拥有了功能齐全的原型,就可以轻松地对辅助功能(例如背景图案,图块,图标和其他类似功能)进行网页开发。
在这个原型设计阶段有很多考虑。每个项目都有其自己的目标,但是这里是在制作原型时要考虑的目标的快速列表。
- 布局可以在所有主流浏览器上使用吗?
- 元素之间是否有足够的空格?
- 所有动态页面元素是否正常运行?
- 您是否已设置所有必需的响应断点?
浏览器内原型工具
请务必注意,您实际上不需要任何特殊工具或库即可构建浏览器原型。您可以编写通用的HTML / CSS / JS代码,并迅速准备好可以使用的原型。
但是有太多的库可以为您节省很多时间。jQuery是一个很好的示例,可以在编写JavaScript时提供帮助。
您应该随意使用自己喜欢的任何资源。但是,如果您正在寻找新工具,我强烈建议您使用以下选项。所有这些都是完全免费的,而且超级容易添加到原型制作阶段。
下面可以看我们派迪科技为"先临三维”做的网站原型流程
成品展示
入门浏览器原型的最佳方法是练习。无论您有即将进行的项目还是需要发明一个项目,只需开始做某件事,然后努力练习浏览器原型。