网页原型图模板怎么用-如何将一个网页中的元素放到新的原型设计中

按照以下步骤进行操作:

1、打开AxureRP软件,在新建项目时选择“RP原型”模板。

2、在AxureRP中新建一个页面,用作图片转换的页面。

3、将需要转换的图片拖动到页面中,调整图片的大小和位置。

4、在AxureRP的“交互”面板中选择“热区”,用热区工具将图片切割成需要的形状,如矩形、圆形等。

5、对于每个热区,可以在“交互”面板中添加链接和交互效果,如弹出层、切换状态等。

6、添加完所有热区和交互效果后,可以在AxureRP中预览页面效果,检查是否符合要求。

7、将页面保存为RP原型文件即可。

基础的其实很容易学会,就是拖动控件完成布局。你可以从静态页面的设计开始学,熟悉每一个控件,然后了解这个控件可以做什么(添加什么事件),可以接受什么控制(事件能够对它做什么,比如启用/禁用?接收参数?改变状态?)。在这个过程中注意体会axure软件本身的设计思路,这样学起来会事半功倍。然后开始学习做交互,找一些网站而不是实例教程来练习,先把静态的画出来,再看网站的交互是什么样的,尝试用axure做出来,这个时候会碰到具体的问题,想想按你理解的软件思路,可以怎样去解决,先摸索一下,实在不会了再去找解决方案。反复几次后,常见的交互效果基本就会了,在这过程中也加深了你对axure本身的理解。再然后,随着会做的效果越来越多,会走向效果控路线,总想做最高保真的,甚至到了改生成文件的css层面,其实有的效果一句话可以描述清楚的但实现起来很麻烦,没必要。最后慢慢走简约路线,能简则简,简单实用就好。这个时候会更关注效率,怎么把一个模块做成多个页面复用的模板,怎么把组件打包分享给其它同事,怎么通过axure进行多人协作共同完成一个原型设计.

一、快速原型

快速原型的重点在于快速输出线框原型,交互功能匮乏,也可以说是低保真的原型。其中常用到的工具有:

1、Pencil。它是一款开源的手绘风格原型图绘制工具,部件比较丰富。除了使用超链接没有其他交互,只能用于快速画出界面。可以导出为PNG、pdf、web格式。

2、lumzy。无需注册、无需下载,直接在浏览器上打开即可进行原型设计的工具(英文网站)。主要是用于设计草图。功能较简单,交互少,部件不多。虽然lumzy相对简单,但是上手快,适用于快速原型,也有很多UI设计师在使用。它可以导出为pdf、jpg文档。

3、MockupCreater。能做界面原型无法做交互,即输出仅为概念草图。目前只支持PNG、RTF和PDF三种静态文件格式导出。

4、MockupBuilde。它同样也是草图原型,部件相对lumzy、MockupCreater要多一些,只能使用超链接实现交互效果。目前只能导出PNG、PDF格式

二、交互原型

交互原型相对快速原型而言,除了能做出线框原型,还能实现丰富的交互功能,在项目排期时间充裕的情况下,建议采用交互的原型设计。此外这些交互原型也可以舒服功能高保真的原型。其中代表工具有:

1、腾讯UIDesigner。它拥有强大的模板和预制功能,能够快速的搭建起软件界面的高保真原型。可以实现设计师、产品经理、程序开发工程师三者间的快速沟通,减少不必要的工作内耗。2.0版本功能交互全面,响应速度也较快,但是针对PC平台应用设计的。UIDesigner预览很方便,可以导出exe文件。

2、Flash。从曾经最流行的Flash MX、Flash 8.0一直到现在的CSN,迭代了各种版本,像PS一样历史悠久。它功能强大,熟练情况下几乎能做出想要的各种效果甚至UI,甚至可以直接做开发,但是对技术要求高,做出好的效果需要懂点AS脚本。导出方便,除了本身的swf格式,exe、图片格式乃至web形式都可以导出。

3、Axure。是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。

三、高保真原型

单纯的高保真原型更加注重视觉效果,但是交互功能先对匮乏是UI设计师必须掌握的基本视觉设计原型软件。主要使用的工具是PS和illustrator。现有的版本甚至可以直接切图并保存为web格式。使用熟练的话,可以代替视觉设计师、重构工程师的很大一部分工作。