整合营销服务商

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

免费咨询热线:

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 协议

xure 原型变身 EXE 程序三步曲,简单快捷的小窍门。

最近在研究如使用 H5 开发桌面应用,然后就在网上发现了 NW.js 这样一个好东西,然后经过一番折腾之后,就实现了本文标题说的效果:让 Axure 原型变身 .exe 程序,然后就可在任意的 Windows 平台上运行了(当然还支持跨平台,比如 Mac OS 和 Linux)。

准备工作

  1. Axure 原型
  2. 下载 NW.js(官网:http://nwjs.io/)
  3. 下载 Enigma Virtual Box(官网:http://enigmaprotector.com/)

Axure 原型变身 EXE 程序三步曲

1.准备 NW.js 环境

将下载的 nwjs 的压缩包进行解压,解压后的文件夹内会包含以下这些文件:

双击运行 nw.exe 应该会打开如下的一个窗口,说明已经 OK 了;如果不 OK 的话,可以上网搜索关于 NW.js 的相关问题及解决方法。

2.打包 Axure 原型文件

首先需要在生成的 HTML 文件夹下新建一个 package.json 文件,并且在文件中编辑以下内容:

{

“name”: “nw-demo”,

“main”: “index.html”

}

其中“index.html”根据你生成 HTML 文件的实际文件名来写,另外 package.json 还可进行更多的配置来实现一些特定的效果,可上网自行搜索,在这里不做过多的说明。

然后将 HTML 文件和 package.json 文件一起打成 ZIP 压缩包,注意打包前的文件应该是像下面这样的目录结构(包含 Axure 生成的 HTML 文件和 package.json 文件),直接对这些文件进行全选打包,不要对这些文件所在的文件夹进行打包。

之后再将 ZIP 压缩包(为了便于说明,我这里用 test.zip 作为示例)的后缀名 .zip 修改成 .nw,这样就变成了 test.nw,然后再将 test.nw 文件放到 nwjs 的目录下,拖动 test.nw 文件到 nw.exe 上进行执行,正常来讲是打开一个窗口显示你之前做好的原型效果。

3.打包成 .exe 文件

这个过程涉及到两个步骤:

首先将之前做好的 test.nw 文件与 nw.exe 文件打包成一个 .exe 文件(比如命名为 test.exe),具体的操作是在 CMD 命令行中输入如下命令,

copy /b E:\test\nw.exe+E:\test\test.nw E:\test\test.exe

其中的文件路径根据实际路径填写,这时候会得到一个新的 test.exe 文件,此 .exe 文件在当前文件夹下是可以正常运行的,但是如果向要拷贝到其它地方去运行,则还需要第二次打包操作,也就是接下来要做的事情。

打开之前下载的 Enigma Virtual Box 程序(enigmavb.exe),界面应该是这样的:

然后在 Enter Input File Name 处选择上一步生成的 test.exe 文件,Enter Output Name 可以默认;

之后再点击下面的 Add 按钮,将 nwjs 文件夹(名称不一定是 nwjs ,就是最开始第一步 NW.js 环境的那个文件夹)下除 nw.exe 和 test.nw 以及 test.exe 之外的所有文件加载上,然后点击 Process ,等待执行成功即可,这时候会在相应的路径下生成一个新的 .exe 文件(我们暂且叫做 newtest.exe),此时的 newtest.exe 文件即可在任意的 Windows 环境下运行了,你可以拷贝给你的小伙伴去 Show 一下。

顺便给大家看一下我制作好的一个 .exe 程序的运行效果,可以看出来,这完全是一个 Windows 应用程序的窗口,而非浏览器窗口。

好了,整个过程算是完成了,总结一下就是 Axure 原型生成 HTML 文件后,借助两个工具(NW.js 和 Enigma Virtual Box)将其打包成 .exe 文件,至于这种做法的实际意义是什么,暂且不进行讨论,感兴趣的小伙伴们可以去玩一下。

作者:大鹏,微信:urmagic,可一起交流原型设计等问题,欢迎骚扰。

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

家好!我是一名UX设计师,希望可以与共同喜欢探索用户体验的朋友们一起成长!我会不定期地更新一些有关用户体验方面的文章。本文主要分享:无需ui和前端制作个人网站,只需一个Axure就能搞定!

越来越多的人想要创建自己的个人网站,把自己平时工作的总结和收藏分享出来,整理到自己的个人网站中,不仅能帮助同行互相学习,更是自己能力的体现。我自己用axure做了一个个人网站,以本网站为例,来为大家讲解如何用axure做出高保真的个人网站。

如果后期维护量较频繁的,还是建议正常开发网站,并且需要有后台进行日后维护。axure制作网站只适合维护量较小且简单的网站。

在正文开始前,先给大家看一下网站的效果(http://uxgao.com),觉得不错的童鞋可以继续往下看哦!

一、正常网站开发流程和axure制作网站对比

1. 正常流程

2. axure制作流程

二、什么的样个人网站不适合用axure制作

1. 需要后台维护

所谓的后台维护指得就是需要开发一个官网后台,日常通过后台上传新文章、新内容等信息。axure只能做出展示效果,所以该场景下不适用axure制作网站。

2. 页面数量和内容较多

首先axure制作的网站导出的html文件较大,相比正常前端开发出来的网站要大好多。如果网站整体页面较多,或单独某一个页面内容/图片较多。网站加载较慢,所以该场景下不适合用axure制作网站。

3. 有复杂的动效和交互

现在大多数复杂的动效和交互都是用h5、css3做的,过去我们可能还会看到网站上有flash或AE做的动效。目前大多数都是用flash、AE做出效果后,前端转换成代码实现。从而让网站浏览更加流畅。如果再axure里加复杂的动效和交互,那么绝对会影响网站的加载速度,从而大大降低了网站的浏览效率。

三、axure制作网站难点讲解

1. 整体尺寸把控

本网站做的效果是内容区域宽度固定,背景宽度自适应。

(1)内容区域宽度

考虑到主流的显示器分辨率,我设置的内容区域宽度为1200px。所有内容和图片都要放在这1200px以内。可在页面中拉一个参考线,拉到横坐标1200的位置。在做设计的时候从最左侧开始就可以了,不需要给左侧留出空间,下一条会讲到页面居中的方法。

(2)整体页面居中

之所以上一条说到不给左侧留空间,是因为我们要把页面设置成居中对齐。选择项目-页面样式编辑,在页面排版中选择第二个,居中对齐。选择这个选项后,在axure画图时页面依然是在最左侧,在浏览器预览时整个页面就会居中显示。

(3)背景宽度自适应

如果网站一个页面的背景都是同一个颜色,那么直接在当前页面点击一下空白处,然后选择样式-背景颜色,选择自己需要的颜色。

如果一个页面不同模块有不同的背景色,那么我们需要用动态面板来实现。首先拉一个动态面板,高度设置到你需要的高度,宽度随意,不过为了方便在这个模块上加内容,建议宽度拉倒跟网页内容宽度一样,比如1200px。然后在样式里设计你需要的背景颜色,然后勾选100%宽度。在浏览器预览后,该模块的背景色就是自适应各个分辨率了。

2. 导航

我做的导航效果是固定在浏览器顶部,之所以要固定在浏览器顶部,是因为页面内容较多时,用户滚动到下面后,直接就可以看到导航并进行操作。

制作过程:

(1)拉一个动态面板,导航的高度即为动态面板的高度,宽度拉到1200px。(宽度一定要拉倒内容区域的宽度,因为要在动态面板里面放导航的内容)

(2)设置动态面板背景颜色(即为导航背景颜色),勾选100%宽度。

(3)在属性中选择固定到浏览器,勾选固定到浏览器窗口,水平固定选择居中,垂直固定选择上。最下面的始终保持顶部,如果没有其它内容需要覆盖在导航上就勾选上,我的导航右侧有一个二维码需要覆盖在导航上,所以我的没有勾选。(没有勾选的要注意设计完所有页面时,要把导航的动态面板放到图层最上层。)

导航文字:导航的文字需要放在动态面板里,文字需要有3种状态,当前页面状态、鼠标悬停状态、正常状态。

3. banner处理

banner的图是整个网站中最大的图片,这里不建议大家直接把banner图放到axure文件里,既不能自适应,又影响了加载速度。

纯色背景banner制作过程:

  • 类似上面的教学,用动态面板来实现banner背景色的自适应。
  • 文字尽量用axure打上去,少用图片。
  • banner配图需要用photoshop来处理,最后存成透明背景png的格式。然后把该图片拉axure文件里。

非纯色背景banner制作过程:

  • 需要把banner背景修饰成非常宽的图片,有条件的情况下设置成5000px。动态面板的样式中选择背景图片-导入那张图片。在属性中勾选100%宽度。
  • 文字尽量用axure打上去,少用图片。(如果有需要,可以将文字一并处理到背景图中导入)

4. 按钮的效果

所有可点击的图形按钮、文字按钮都需要有3种状态,正常状态、鼠标悬停状态、鼠标按下状态。

在属性-交互样式设置中设置鼠标悬停和鼠标按下的效果。

5. 二维码的效果

我做的二维码效果是鼠标悬停在导航右侧二维码图标时,由上向下推出二维码,鼠标离开时,由下向上收回二维码。

制作过程:

(1)拉一个动态面板里面放二维码图片,放到图标下面的位置上。

(2)选择固定到浏览器,水平固定选择居中(根据网站尺寸,调整边距),垂直固定选择上,勾选始终保持顶部。

(3)给导航动态面板中的二维码图标加两个事件,如图:

6. 跳转非本网站的链接

网站中有一些文章、推荐等模块,点击后跳转的是非本网站中的链接,我们需要对可点击的区域加点击事件,链接到外部链接,并且在浏览器新窗口打开。具体操作如图:

四、注意事项

1. 能用文本尽量少插入图片

比如banner上的文字,推荐里面的各种文字等,尽量不用以图片的形式放进来。尝试用axure进行排版。

2. 注意细节

既然是高保真,就不能做的像低保真那样粗糙,整个网站的字体、字号、间距、颜色等细节问题。都要像ui设计一样注重细节。

3. 交互效果统一

可点击的区域,比如文章,鼠标悬停的时候要有一个变化,比如外发光、描边等效果。要遵循设计原型,给用户每一个操作都有及时的反馈。

4. 图片压缩

尽量把用到的每一张图都进行压缩,前提是保证图片质量不会被看出来降低。

5. 购买域名

这个大家可以自行选择,去腾讯云、阿里云购买,哪个便宜买哪个。域名后缀尽量选择常见的,比如cn、com等。前面的字母可以以自己名字开头拼音或全拼来选择。

五、发布上线

这个我也不太懂,是朋友帮忙搞的,用的是github,大家可以上网搜一下。不用花钱买服务器,这里有一个注册与使用的教学希望可以帮到大家,链接:https://blog.csdn.net/p10010/article/details/51336332

上传完去域名后台管理解析一下就可以喽!

作者:高杰,微信号公众号:UX设计师高杰,从事交互设计和用户体验工作。

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

题图来自 Pexels,基于 CC0 协议