网站设计前,原型制做的必要性。一个成功网站靠的就是原型策划

原型设计的网站是一个广泛的创建它具有交互功能基本线框的过程。线框可以是静态图像或草图,而原型通常可以与所有主要页面的功能交互。

图形编辑程序一直是原型制作的最流行选择。但是近年来,越来越多的开发人员正在切换到浏览器内原型。构建全新项目时,它更快,更清洁,更简单。但是,您如何开始?

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

浏览器内原型制作的基础

网站可以描述为构建为在网页浏览器中运行的数字界面。许多设计人员喜欢在继续进行设计之前在图形编辑器中创建这些界面。

但是,在浏览器中对网站进行原型制作以查看每个功能的工作方式,并评估诸如布局结构和页面动画之类的初始概念会更有意义。

尽管大多数设计师都有自己的例程开始新项目,但没有唯一的最佳原型制作方法许多设计师仍然喜欢从Photoshop开始,但从原型设计开始有很多优点。

  • 1.易于测试和更改网格系统
  • 2.易于大幅度修改
  • 3.下拉菜单等动态效果可以实时测试
  • 4.您从一个小的代码库开始,然后逐步添加更多代码

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

最终,浏览器原型可以更精确地表示最终接口。样机和草图是平坦且静态的。这些仍然是有价值的资产,但是最终您需要交互式布局。这就是为什么浏览器原型制作可以节省大量时间的原因。

您可以从初始草图直接跳入浏览器,以创建具有最终版本所需的所有主要功能的交互式网站原型

用于实现原型的工具会有很大的不同。但是不要误会该过程的工具。

您可以使用原始HTML / CSS,开放源代码库或其他工具(如浏览器附件)在浏览器中进行原型设计。无论您使用什么,目标始终是相同的:创建一个简单的交互式UI,该UI对最终网站的行为进行建模。

原型制作过程

我认为最好是从纸上素描开始呈现想法。这些草图可以在图形程序中完成,但是在纸上工作时通常具有更大的自由度。

快速迭代新想法,并对设计有所了解。您可能会指出列,装订线并做一些书面说明来描述容器的属性(宽度,填充等)。

一旦草图看起来不错,就可以进入浏览器。旨在首先设计基本的灰度布局。这可以使用许多不同的资源(例如AXURE)来完成,该资源可以生成任何大小的原始灰度图像。

使用简单的灰色布局,您可以将更多精力放在网格,版式,空白和动态元素(如幻灯片显示或下拉菜单)上。此阶段的目的是设计布局应如何表现而不会被美学分散注意力。

您想消除浏览器错误和响应断点的所有潜在问题。使整个布局在所有浏览器上都能正常工作。

从那里,您可以快速添加内容,图像和其他相关样式,而不必担心更大的画面。这绝对是浏览器内原型开发的最佳策略,因为您首先关注的是大型元素。

如果布局在Firefox中中断,则无论是否有颜色,外观都将相同。但是,仅关注布局时,解决布局问题要容易得多。

一旦拥有了功能齐全的原型,就可以轻松地对辅助功能(例如背景图案,图块,图标和其他类似功能)进行网页开发。

在这个原型设计阶段有很多考虑。每个项目都有其自己的目标,但是这里是在制作原型时要考虑的目标的快速列表。

  • 布局可以在所有主流浏览器上使用吗?
  • 元素之间是否有足够的空格?
  • 所有动态页面元素是否正常运行?
  • 您是否已设置所有必需的响应断点?

浏览器内原型工具

请务必注意,您实际上不需要任何特殊工具或库即可构建浏览器原型。您可以编写通用的HTML / CSS / JS代码,并迅速准备好可以使用的原型。

但是有太多的库可以为您节省很多时间。jQuery是一个很好的示例,可以在编写JavaScript时提供帮助。

您应该随意使用自己喜欢的任何资源。但是,如果您正在寻找新工具,我强烈建议您使用以下选项。所有这些都是完全免费的,而且超级容易添加到原型制作阶段。

下面可以看我们派迪科技为"先临三维”做的网站原型流程

成品展示

入门浏览器原型的最佳方法是练习。无论您有即将进行的项目还是需要发明一个项目,只需开始做某件事,然后努力练习浏览器原型。


返回观点列表
本文标签:

相关专题

  • 品牌官网设计
    品牌官网设计

    杭州派迪科技为高端客户提供品牌官网咨询策划,品牌官网设计,品牌官网建设开发服务,以国际化视野和标准为基础,为各行业领军品牌提供高端企业网站定制、策划、设计、互动与制作

    查看详情
  • 大策略营销门户网站
    大策略营销门户网站

    杭州派迪科技有自己的营销型网站CMS系统,适合白帽SEO网站。特别对大策略的营销型门户网站制作有一定的经验,曾经为上海天擎外贸行业网站、浙江兆龙营销型门户、先临三维门户营销网站提供全程的技术支持及SEO优化指导

    查看详情
  • 集团/上市公司网站
    集团/上市公司网站

    杭州派迪科技为杭州本地集团公司提供网页设计、制作、开发服务,为集团公司网站建设提供了响应式、营销型、品牌型、门户型网站建设需求,欢迎广大集团公司客户咨询

    查看详情
  • 外贸网站建设
    外贸网站建设

    杭州派迪科技为高端客户提供外贸网站咨询策划,外贸官网设计,外贸官网建设开发服务,以谷歌搜索引起算法为基础,为各行业外贸公司提供高端企业外贸网站定制、策划、设计、互动与制作

    查看详情
  • 企业网站建设
    企业网站建设

    高端专业、令人印象深刻的用户界面、易于访问——企业网站必须反映一切,因为派迪科技在这里提供帮助,凭借精湛的技术、丰富的经验、与客户的持续沟通以及对每一个细节的关注,我们确保在快速的周期时间内提供优质的服务。

    查看详情
  • 半定制网站
    半定制网站

    杭州派迪科技模板网站建设专题_各行业方案专题栏目提供各行业产品适合的网站建设方案,帮助企业了解派迪科技建站效果等信息,您可以通过本站了解各行业网站建设方案,如需要获取本行业定制网站建设方案,可以联系在线客服或拨打电话咨询

    查看详情

体验从沟通开始,让我们聆听您的需求!

开始您的数字化品牌体验! 15158117070 期待您的来电!

[ 网站建设×品牌官网设计×大策略营销门户×微信小程序开发×微信公众号开发]

派迪业务总监微信号

派迪业务总监微信号

了解最新项目报价

派迪产品经理微信号

派迪产品经理微信号

免费获取项目策划

我们正使用 cookies 来改善您的访问体验

派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookies 。

如果您想详细了解我们如何使用cookies请访问我们的 《隐私政策》

Cookie 偏好

如果您想详细了解我们如何使用cookie请访问我们的 《隐私政策》

管理cookie偏好

基本 cookies

始终允许

这些 cookies 是网站运行所必需的,不能在我们的系统中关闭。它们通常仅针对您所做的相当于服务请求的操作而设置,例如设置您的隐私首选项、登录或填写表格。您可以将浏览器设置为阻止或提醒您有关这些 cookies 的信息,但网站的某些部分将无法运行。这些 cookies 不存储任何个人身份信息。

性能 cookies

始终允许
这些 cookies 使我们能够计算访问量和流量来源,以便我们可以衡量和改进我们网站的性能。它们帮助我们了解哪些页面受欢迎和不受欢迎,并了解访问者如何在网站上移动。这些 cookies 收集的所有信息都是汇总的,而且是匿名的。如果您不允许这些 cookies,我们将不知道您何时访问了我们的网站,也无法监控其性能。

功能性 cookies

这些 cookies 收集信息用于分析和个性化您的定向广告体验。您可以使用此拨动开关来行使选择不获取个人信息的权利。如果您选择关闭,我们将无法向您提供个性化广告,也不会将您的个人信息交给任何第三方。

定位 Cookies

这些 cookies 可能由我们的广告合作伙伴通过我们的网站设置。这些公司可能会使用它们来建立您的兴趣档案,并在其他网站上向您展示相关广告。它们不直接存储个人信息,而是基于唯一标识您的浏览器和互联网设备。如果您不允许使用这些 cookie,您将体验到较少针对性的广告。

我们正使用 cookies 来改善您的访问体验

派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookies 。

如果您想详细了解我们如何使用cookies请访问我们的 《隐私政策》