响应式网页设计、开放源代码、永久使用、不限域名、不限使用次数

网站产品原型设计(合集)5篇

2024年网站产品原型设计 篇1

如果您是产品经理或交互设计师,在选择原型设计工具时,首推Axure。自动升级到了最新的9.0版本后,Axure RP9对移动端支持力度更大了,可以选择设备的尺寸。Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理

Axure RP的使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等,另外,架构师、程序员也在使用Axure。

如果您对Axure RP9的学习有兴趣,不妨关注我的专栏《Axure RP9新手零基础实用教》,购买本专栏赠送交互案例源文件和移动端交互组件库,专栏地址:https://learning.snssdk.com/feoffline/toutiao_wallet_bundles/toutiao_learning_wap/online/album_detail.html?content_id=6733786988677169416

2024年网站产品原型设计 篇2

1、Axure RP(Rapid Prototyping)

Axure(读音为Ack-Sure)无疑是目前最受关注的原型开发工具,其能通过组件的方式帮助网站或软件设计师快速建立带有注释的原型(流程图、线框图),并凭借自定义可重用的元件、动态面板以及丰富的script能够建立基本功能或页面逻辑的动态演示文件。

Axure借鉴了office的界面,能够让用户快速上手,并且提供了丰富的组件样式修改,使得通过其能够创建低保真、高保真甚至接近于实际效果的界面。然而最让人称道的是,Axure的丰富的脚本模式,可以通过点击和选择能够快速完成界面元素的交互,如链接、state切换、动态变化等效果,使得Axure能够生成十分接近于真实产品的原型。另一方面,Axure能够导入其他人创建的元件库,使得Axure能够满足绝大多数类型产品的设计。

但Axure仍然有一个让人头痛的问题:对于中文的支持不太友好。在小部分元件上输入中午的时候,经常需要像碰运气似的反复切换输入法,破坏了咱们设计师的用户体验。

瑕不掩瑜,Axure仍然是交互设计师的首选原型工具。

2、Microsoft Office Visio

Visio在2000年被微软收购,并在2002年成为office2003套件中的一个组件,最新版本是2007。Visio能够获得推荐的原因是因为Visio的适用性非常之广,从网站界面、数据库模型,到平面布置图到工艺流程图,Visio都提供了相应的元件库和模板来进行快速创建。

相较Axure而言,Visio更适合于传统行业的生产或流程设计,或者软件及互联网行业中的信息、数据和流程的说明,而不太适用于web界面。因为其的基于web的元件库还是比较少,并且形式和结构也更类似于word中的图形工具,因此在原型开发效率上都有所不足。

3、Balsamiq Mockups

这个基于Adobe AIR Runtime的工具实在是有让人眼前一亮的感觉,手绘风格的元件样式粗犷淋漓,能创建接近于纸上手绘的原型文件。其提供了丰富的手绘风格的web常用元件,包括常用的html控件、以及一些组合控件,如多媒体控制器、标签页、列表、Iphone界面元件等。

Mockups最值得赞赏之处在于其提供的多数组件都可定制外观,对于中文的支持也不错(选择View > Use System Fonts)。

4、Mockflow

Mockflow和以上工具最大的不同在于Mockflow是一项基于Adobe Flex技术开发在线服务,提供了与Balsamiq Mockups基本相似的功能,甚至更丰富的组件,虽然其元件定制化不够强大,但其提供的元件库默认样式却非常适合用来做商业产品原型的搭建。有一个让我爱不释手的功能是模板,可以设置基于任何页面的模板来进行新的页面设计。

与其他模板工具相比,mockflow有一个非常特色的功能,基于web的存储可以在任意电脑上联机打开,同时可以其他人进行快速的分享,并收集在线反馈意见,非常适合虚拟团队的原型设计交流。

虽然在线服务的基本帐号只能创建一个文件,但单个文件却没有限制页数,因此也基本上足够使用。

5、Pencil sketch

Pencil 是一款基于Firefox的扩展组件,安装之后即可在Firefox的工具菜单中打开Pencil的绘图面板。功能比较简单,仅能用以日常简单工作的辅助 说明。提供的默认元件都是基于软件工程,因此更适合用于windows桌面程序的简易界面搭建,或者是基本的页面功能说明,并不适用于严肃的原型开发,但 好在体积小、又轻便,能够方便将网页中的元素直接拖到或者复制到当前的画布中,这也是Pencil安装在Firefox所带来的便利之一吧。

更多工具...

在以上列举的原型开发工具都是较为常用的,也是在国内的交互设计师们比较常讨论的,但其实和Axure功能相似的软件还有很多,下面也就一些简单说明:

6、GUI Design Studio

这 是一款真的非常强大的原型制作工具,没有在上面推荐的原因是因为我还没有实际体验过,但冲着这工程级的界面设计就没有去尝试的冲动,但是从官方网站的截图 和视频演示来看,这款软件的操作模式和前面的原型工具大有不同。Axure之类多是基于页面的原型设计,对于web网站尽管很实用,但是对于软件界面的流 程设计却略显繁琐。而GUI Design Studio却另辟蹊径,直接以建立元素与元素之间的关联的方式来自动化的创建动作流程,而从视频演示来看,这样的确很大程度上提升了软件界面原型搭建的 效率。

7、Prototype Composer

Serena 公司免费提供的原型开发工具,功能确实强大,提供了基于项目管理主要流程的产出物文档模板、原型工具以及开发流程控制,这个软件的开发理念非常好,用这一 款工具来满足项目开发流程中各个环节的沟通和决策。但软件的学习和使用成本比较高,要了解其中的全部功能,貌似需要花不少时间。另外软件的效率和稳定性还 有待提高,试用的过程中多次出错及停止响应。

8、Lucid Spec

由 Elegance科技推出的Lucid Spec是一款很类似Pencil的原型工具,仅仅是提供了更多控件。不过Lucid Spec强调了生成干净的说明文档的功能,这可能是针对于多数原型工具的自动化生成规范的冗余而言的,不过老实说Lucid Spec提供的原型界面太过简陋,并且生成的说明文档也未见优化有怎样的提升。视频介绍

9、Irise Professional Edition

Irise与其他原型工具相比其中一个特色在于提供了样本数据的功能,这是类似于excel表的一个样本数据库,可以通过界面元素直接获取样本数据库中的数据,这样所生成的原型甚至可以使动态数据更新的。

10、Adobe Reader

Adobe reader?没错。其实理论上任何可以创建图形和文本的工具都可以用来原型开发,因为原型本身就是对于业务逻辑和功能界面的模拟或仿真,因此有何理由不能使用PDF格式呢?BoxandArrow的这篇文章《PDF Prototype》提醒了我们,所有的原型工具都只是工具,而不是设计本身。

2024年网站产品原型设计 篇3

Axure确实是各原型工具中比较好用的,当然,个人感觉了。

至于你提到的APP原型工作量大的问题,其实,这是一个取舍的问题,把握一个度的问题。

有几个方面可以考量:

1,原型是不是能流畅的展示软件的各个场景了?

2,针对每个场景,是不是已经完成几乎所有能想到(画出)的界面了?

3,这些界面上,是不是大部分的交互和文字都想到(画出)了?

可以根据自己项目的实际情况,和领导要求来合理把控这个度。

一般情况下,简单的项目,自用的项目就简单的画原型即可。

客户的项目,按客户要求来(讨论)?

复杂的项目,可能多人分工,更多沟通成本,需要更详细的原型(场景定义,页面交互,文本设计)。

能做事为目标,能出活为目标。

一般这里的矛盾会出现在:

领导以为你应该画原型全而详细。且快,两天三天五天?

产品经理(或许自己就是兼产品和原型工程师)想你理解并快出原型?

项目经理可能看不出来你的原型画到何种程度能让程序员少走弯路。一般程序员都是看图说话,很少有精通理解你原型的,可能更常边开发边理解原型。

弯路不会少。都是需要团队协作,去摸索的。

总之,原型不是一个人的事。是一个团队的事。

2024年网站产品原型设计 篇4

谢邀!

这个要看产品经理使用的什么软件制作的原型图,分别有基于网页、客户端、和手机端原型预览APP等。

一、Axure RP

一款功能非常强大的原型设计软件,用户群体庞大,是互联网产品前期设计的首选工具之一;

特色:支持F5在线预览,移动端、Safari或浏览器中预览;

导出文件类型:HTML, DOCX, PNG;

导出html操作步骤:

1.点击菜单栏中的“文件”,选择文件的储存位置,点击“打开”。

2.选择菜单栏中的“发布”,点击“生成HTML文件”。

3.选择储存文件的位置,点击“生成”。

4.打开文件,点击“index.html”。

二、Mockplus

操作简单易学,功能够用。内涵大量的组件和图标,只需要一个拖拽动作即可完成页面和组件交互的设计。

特色:支持F5在线演示,并在线发布HTML5的网页,导出HTML5离线包;同时可输入原型码、二维码,在手机中查看原型;

导出文件类型:.exe, PNG, HTML, 项目树(脑图、树图、HTML、MarkDown、XML、文本等形式);

导出html操作步骤:“主菜单栏”-“导出”-“导出HTML演示”;或:“主工具栏”-“导出”-“导出HTML演示”。

三、Justinmind

一款更适合做移动端开发的软件,可制作出高保真的原型;支持手势交互、自定义部件和组件库,内涵丰富的动画支持,同时支持变量判断、团队合作;

特色:支持浏览器和设备预览;

导出文件类型:HTML + JS, Word, PNG, 导航地图;

导出html操作步骤:菜单中选择“文件”-“导出为 html ”。

四、Invision

一款基于网页的原型交互设计工具。便于收集反馈意见,帮助设计师快速设计出产品模型,管理用户的设计团队,在线协作辅助。

特色:简单易学,快速创建热点,链接页面;支持手势和专场,分享评论,方便团队间的协作;支持PC或移动端浏览器预览;

导出文件类型:通过URL, Email, SMS等方式进行分享,也可以下载ZIP原型包或PDF;

导出html操作步骤:选择“文件”-“导出为 html ”。

五、Proto.io

一款功能非常强大的网页app,但每一步设定都需要通过拖拽,点击按钮还有在选项中调整数值,不太容易操作。

特色:手机组件丰富、支持组件交互,可以直接从Dropbox上传设计图,支持Sketch和Photoshop插件,支持HTML预览或通过短信发送到手机预览;

支持导出文件类型:HTML, PNG, PDF;

导出html操作步骤:选择“文件”-“分享为 html ”。

2024年网站产品原型设计 篇5

低保真原型更实用

高保真和低保真的定义

低保真的定义,是仅用Axure这类工具画出来的静态界面(当然你可以用PS或者AI来画),不同静态界面之间的跳转切换关系,通过连续箭头来表达;

高保真的定义,是指含动态的操作体验,比较接近Demo。高保真并非指PS的设计稿,这里区分一下(因为对于游戏来讲,给个PS设计稿的效果跟给Axure画静态界面的效果是一样的,两者并没什么区别,都是低保真,但是如果把前端交互体验和简单的数据交互效果也做出来,那高保真就能很好地展示给老板或者投资者评估)

高保真的使用场景和缺点

当你要展示你的idea,尤其是给投资者,那么这个时候绝对高保真。或者当你在一家大公司,涉及到要展示给其他相关部门的人看,展示实力,验证idea,那么也是需要高保真原型,这种原型,装逼能力一流~

它的缺点,就是制作时间长,维护起来麻烦,而且交互效果数据等需要debug。所以这类东西,决定了它不可能是团队开发的日常原型文档,想象一下,每次修改一个功能,都要花很多时间做效果,效率低。或者你做高保真原型的时候,人家隔壁团队做低保真的已经跟技术沟通好这个需求,技术也可能已经开发好了,然而你还在做高保真的原型。

而技术收到高保真的原型,也是比较懊恼的,因为他真不知道哪个地方是可以点的,点了之后会跳哪里,而且看不到整体规划涉及多少个页面涉及多少个接口,总之就是没法瞬间把握整体需求工作量。

除非你的团队人力资源非常充足,非常有空,否则出于时间和效率考虑,不要做高保真。

低保真的使用场景和缺点

日常开发中,用低保真作为跟技术沟通的工具就可以了。axure上面可以添加文字备注,可以添加带箭头的线条,标示出这个按钮点击之后出现什么界面。而技术也很喜欢这样,能看到整体的需求,有个宏观把握。

低保真的缺点,是它不能装逼。如果你给老板看低保真,他可能没耐性,完全不知道这个出来会是个怎样的东西,尤其是传统老板。

如果有什么产品策划问题,留言评论吧~

猜你喜欢