整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Axure生成的原型html如何使用和备份

PM完成Axure原型评审后,一定不能忘记备份这些原型html,后续可能需要查询以及技术撕逼。

希望通过Axure原型的几种使用场景,让初级PM对它的来龙去脉有个清晰的了解。而不是停留在“我知道”“大概会用”的水平。

版本

PM会经常修改AxureRP源文件,然后生成不同的原型。

但是对外评审的原型应该是唯一的。

并且该版本的产品需求文档PRD就是这个原型。

请注意两者不能混为一谈。

打开

一般来说我们是在Axure生成原型Html的时候,自动在浏览器中打开了原型并查看。

但是如何打开已备份在电脑中的原型呢,很多初级PM摸不着头脑了。其实也不复杂,如果你学会一点html网页的知识。

请进入该原型对应的目录,比如APP名称V2.0版,我们会发现存在data、file、images、plugins、resources等文件夹,以及很多html网页。请找到start.html,然后双击打开就是你熟悉的原型啦。

展示

当原型评审后,PM需要将原型放到网上供所有团队成员进行设计和编程。

不管是放到内网展示,还是外网展示。其本质都是将Axure原型的所有文件都上传到服务器,包括所有的html文件,图片文件,js文件,css文件。不能缺少任何文件,否则就无法正常显示。

如果你只是修改了某个页面,也切记生成并将所有文件上传一遍,而不仅仅是该页面对应的html文件。因为其对应的js,css文件,图片文件也可能被修改

上传之后然后把对应的原型网址发给其他团队成员即可查看。

备份

由于Axure原型是由html+js+cs组成的文件,我们在生成的时候将他们放置在指定目录。

嘉定我们将该产品的所有原型存放于D://PM/APP名称,那么建议以“APP名称V1.0版”的格式命名,并生成原型。

当然你也可以继续压缩之后存起来,不过就不太方便后续的查询。

回退

有时候我们需要回退版本的时候,需要把旧版本的原型也拿出来。那么请用旧版本的原型html去替换当下的原型目录。

不过不太建议这样,还不如新增一个版本来处理。

查询

由于Axure生成的原型,是以Html文件进行索引内容的。而Html是以你在Axure中新建的页面来作为基础的。如果你画Axure原型的时候是以你产品中的页面来进行命名和创建的。那么我们可以通过搜索“页面名称”关键词去查询你想要查询的页面

如果你使用的搜索工具支持搜索文件内内容,比如Windows下面的everthing,Mac自带的spotlight。那么可以通过搜索“页面内文字”关键词去查询你想要查询的相关页面

不过我更建议你进入到具体版本的原型html文件夹里面进行搜索,而不是进行全局搜索。

总结

以上就是Axure原型的使用场景。请一定要理解Axure原型的本质是html+js+css,每次生成原型的时候会在本地生成目录并写入这些文件。

#专栏作家#

浪子,业务型PM,浪子PRD系列51prd.com,公众号langzisay,个人微信nuanai88。

本文由 @浪子 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自 unsplash,基于 CC0 协议

辑导读:对于 Axure原型工具,很少有产品经过系统学习,一般都是直接上手,边摸索边学习,这直接导致很多快捷操作被忽视。笔者在日常工作中总结出以下小技巧,希望对各位有帮助。

之前整理了2期Axure的使用技巧,大约有36个技巧,具体可查看下边的文章:

产品必会的Axure使用技巧(第一弹)

产品必会的Axure使用技巧(第二弹)

最近在使用Axure时又整理了几个我觉得比较实用的技巧,今天把第三弹分享给各位。

我使用的Axure8示例,不过在Axure9中同样可用。

一、格式刷

格式刷可以用来复制样式

先选择需要复制样式的控件,然后在点击钢笔旁边的“更多”,点击选择格式刷

然后选择需要复制样式的目标控件,点击“应用”,就可以将样式复制过来。

不过在Axure9中,可以直接右键复制样式

二、泳道图

Axure中自带了流程图元件,很多产品经理喜欢直接在Axure中画流程图,但是在画泳道图时,Axure没有提供泳道图的样式。

不过我们也可以画出泳道图样式,就是使用“表格”,调整一下表格数量就可以了。

三、快速表格

1. 复制表格

在之前的第一弹中说过这个,不过这次还是想再说一遍。

在做列表需求时,经常需要画列表,不过Axure的表格我用不惯,所以每次都直接在Excel里把列表字段写出来。

然后直接在复制到Axure里,就可直接把Excel表格复制过来。

不过复制过来会有几个问题:

1、样式不能复制。只有复制表格后,在手动调整样式。

2、合并单元格不能复制,主要是Axure不支持合并单元格。

2. 快速调整表格行高行宽

选中需要修改的表格,然后直接修改宽度与高度,即可批量修改选中表格的尺寸。

如果想修改个别表格,按照ctrl键,再选中即可。接着修改宽度与高度,就可直接修改选中表格的尺寸了。

四、快速重命名

最近领导要求给原型页面上加上编号,然后发现一个很快速的方法。

先选中一个页面重命名,然后在重命名状态下,使用键盘上下键,进到下个页面时还是重命名状态,就可以直接重命名了。

五、不安装插件预览

在生成html文件后,点击生成html文件夹内的start.html或者index.html查看时,会出现安装插件的提示。

直接安装插件这个方法就不说了,不过有2个快速的解决方法:

1.直接点击要查看的单个页面。不直接点击start.html、index.html等入口。

2.修改源代码,绕过提示。

打开start.html或index.html的代码

删除下方标的代码,然后保存,重新点击点击入口打开,就ok了。

六、导入Axure

最近安排手下的实习生去画原型,最后需要合并在其它源文件中。

他是直接复制粘贴过去的,页面少这样没啥问题,要是页面多了,一个个复制粘贴也挺费劲的。

我们可以直接使用“文件”下的“从RP文件导入”

选择需要导入的RP源文件后,然后在勾选需要导入的页面,一直Next就行了。

七、替换、查找

Axure也支持替换、查找文字,直接Ctrl+f。

当出现字段批量替换时,就不用一个个去找了。不过在替换后,不支持撤销,替换错了也影响不大,再替换回来就行了。

八、总结

第三弹先到这,我在整理整理其它的Axure小技巧,凑够一篇文章再分享给各位。

本文由 @王大鹿 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

起Axure,做产品的朋友再熟悉不过了,它是我们在日程工作中最常见的原型制作软件之一,今天分享的文章,主要是教大家如何使用Axure打造简单的个人网站,不会编程我们依然可以做网站。

演示地址:https://vip.uedart.com/demo/UEDART_019/index.html

接下去将分为几个步骤去阐述:

1. 这些我们必须知道的小知识

  • axure是可以生成html文件的,这为我们使用它来制作网站提供了可能性
  • axure只能搭建小型的个人网站 ,他不具备数据库,比较适合做展示类的网站
  • 和普通网站构建一样,我们需要购买域名和购置虚拟服务器

2. 利用xmind思维导图,对我们要构建的网站进行知识整理

举个例子,我构建的是一个小型个人展示站

包含以下主要内容:网址导航、常用工具、实用资源、案例展示,通过思维导出对其内容进行

整理如下图所示:

3. 整理好了内容所需,接下去我们进入制作部分

因为我们是利用Axure去制作网站,在我们平时工作的流程常常是,原型-设计-前端-开发,而这里我们只需进行原型和设计,这里将不再有前后关系,为了节约时间,我们可以把Axure当做设计工具,直接进行页面设计,里面所需的图片素材可以用ps辅助设计。

创建一个项目文件夹用来整理此网站涉及到的全部资源素材

对网站全局配色、字体、样式进行布局

采用的是蓝色调,可以看下我的主色、辅助色的配色如下

利用母版进行top导航的设计

导航布局如下,采用了顶部导航的方式,设置了动态面板并将此转化成母版用于多个页面

设置导航频道的点击效果与跳转

如下图所示,有悬停效果和点击跳转的设置

网址导航栏目的左侧菜单设置,滑块移动位置的y坐标按具体位置设置,每个元素都要设置

左侧导航在滚动时触发具体栏目类别,采用的是热区范围来触发,当窗口滚动时触发相应的类别选中

利用栅格系统对网站进行布局

布置完毕将栅格去除(紫红色是1200px宽度的边界)

每个元件尽可能的规范,再进行下一步

拿网址导航页做示例,每个单元模块标题,网址卡片、左侧导航的排布尽可能规范统一,立马包含了各种元素的基本规范如:字体大小、颜色、宽度、悬停交互效果点击跳转效果

合理利用中继器做页面的数据关联

常用工具与实用资源页面,采用了中继器来制作,在中继器的微型数据表中,插入对应字段后,关联每项参数的内容(对元件名称进行命名),以后增加一条数据对应改变其内容即可。

如下图包含了图片,标签,标题,详情描述几个内容,在中继器中就要有相应的字段来进行控制

4. 制作完毕,接下去要解决的是如何把生成的网站,能让其它人进行访问

(1)我们需要一个域名,可以到阿里云万网去购买https://wanwang.aliyun.com/,我选择的域名是uedart.com的域名;

(2)我们还需要一个服务器,我选择的是海外云虚拟机,不需要备案可以在阿里云进行购买;

(3)都准备好之后,我们要做的是按照阿里云的步骤进行虚拟机的设置布局,下载Filezilla进行关联,将我们axure生成的文件进行上传,上传之后,我们再进行域名的解析,即可通过域名对我们的网站进行外网访问。

5. 可能遇到的问题,工具栏明明在生成的时候关闭了,上传之后还是出现了

可以将index和start的html删除,复制第一个页面的html改名成index重新上传即可

总结

至此通过以上5个步奏,我们利用Axure完成了一个小型网站设计与制作,当然这并不是一个传统意义上的网站开发,只是借此向大家介绍下,利用Axure的html生成,我们可以简单的处理一个网站的制作,如果只是个人的网站,且不需要过多的复杂功能,此方法足以满足各位的需求,大家也可以利用这样发方式来制作自己的网站。

谢谢大家的观看!

本文由 @时光若刻 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自 Unsplash,基于 CC0 协议