本文如何使用github共享Axure生成的html文件,一起来看看~
![9b35afa4c86a7cab777944cb978ad119.png](https://i-blog.csdnimg.cn/blog_migrate/221b0d4bebb0dcfa205d3ff1bc150e35.jpeg)
Axure生成的HTML文件如何发布给开发人员看呢?
传统的有直接打包传给对方,让他本地查看。但是如果有变更,还得再次打包重发,实在是费尽。若遇到大文件,网络接收也是问题。
另外一种是通过SVN管理,这个也是本人一直在用的方法,但大部分SVN都是局域网络,要是外部人查看就不能满足了。
第三种是Axurecloud,但是国内的网速比较慢。
最近研究了如何使用github共享Axure生成的html文件,觉得不错,分享给大家。
注册Github
前往注册gitlab进行账户注册:https://github.com/
![ba60e80df57c2caf720e99641e3ed6d5.png](https://i-blog.csdnimg.cn/blog_migrate/497167a5bdedb9aa7d528d4bf576faac.jpeg)
输入用户名、邮箱和密码。注意邮箱为真实邮箱,后面需要做验证。密码是15个字符或者8个字符(包含一个数字和一个大写字母)。
![ce4b7c314bda198f377a95c40eda40f9.png](https://i-blog.csdnimg.cn/blog_migrate/6fa48ccae000c30dd91814231e66573b.jpeg)
点击“验证”,会让你旋转图片,排除机器人注册。验证通过后,点击蓝色大按钮,进入下一步。
![f7621e5f3a95b46700d3a8aae838b370.png](https://i-blog.csdnimg.cn/blog_migrate/b3c4e6873531f026ec25ec1ef72dc22a.jpeg)
这个根据自己的需要选择免费或者收费版本,我选的免费版本。点击蓝色大按钮,进入下一步。
![f6e4f6884d7de113c4fd7fa201b85a3e.png](https://i-blog.csdnimg.cn/blog_migrate/820c9e0ddfa6b989a499cede73311f03.jpeg)
该步骤是为了做一些个人信息的收集,可以直接滑动到底部,点击“skip this step”直接跳过。
![0dd7cfd39adc16b88e820d7cc0e674d1.png](https://i-blog.csdnimg.cn/blog_migrate/4c1ee03b2c3c7ac1c373aa5e8ee388f6.jpeg)
注册成功,需要邮箱验证。这时登录你的注册邮箱,查找github发的验证邮件。
![43f40ec5c25e8744afb60fae2d176c1c.png](https://i-blog.csdnimg.cn/blog_migrate/39b49600e5ce2aba97d4c754875e951d.jpeg)
点击“Vertify email address”,进行邮件验证。验证通过后,会自动打开github如下页面:
![bb03b5d708ada503b4273258b86dfcd6.png](https://i-blog.csdnimg.cn/blog_migrate/e28adbd195be08d6391e0ff5bba183ba.jpeg)
首次使用github,需要创建repository(仓库)。填写仓库名称,这个名称是分享的axure文件的结尾地址,可自行起个标识性强的名字,不要写中文,特殊符号,不识别~,空格会转成“-”。可见范围选择public。要是选择private,别人就看不见了。
点击“Create repository”,进入如下页面:
![e8121ed750605111601cbf2d95b0418e.png](https://i-blog.csdnimg.cn/blog_migrate/8c4be4580ac87aceef4b79edb2791d8d.jpeg)
首次使用github,上面会有github的使用指导,可以点击“Read the guide”,自行学习。
页面下方显示刚刚创建的仓库,现在仓库是空的,没有任何代码和文件。点击第一个红框,下载github电脑客户端。
云端仓库和本地仓库的关联
客户端安装完毕后,打开github客户端,用上面的账号密码登陆客户端。
![4fef5cdb57e859b12bb5d6d860eaa995.png](https://i-blog.csdnimg.cn/blog_migrate/28882ebd8d51ce1d887beee62ca04c1b.jpeg)
登录后,之前创建的repository会在右侧出现,选中该仓库,点击右下角的长蓝色按钮,弹出如下页面:
![59207a514d2601dcd3d2fd26e0921545.png](https://i-blog.csdnimg.cn/blog_migrate/dbfc8bfe861004e8c08a1d9ccb4d5b95.jpeg)
此处要选择本地仓库。自行在电脑上创建一个空文件夹(一定是空的),Local path选择该空文件夹,作为本地仓库。至此,github本地仓库和云端仓库已建立联系。
Axure生成的HTML文件commit到云端
打开Axure原型RP文件,点击public→Generate HTML files…,进入如下页面:
![2df43740c0f0d5d12e87a125eb5e9fd0.png](https://i-blog.csdnimg.cn/blog_migrate/5cc4e1caa34f183437c34f23f9d160ed.jpeg)
General路径一定要选择上面创建的github本地仓库,然后点击生成按钮。生成完毕,本地仓库就有了Axure生成的HTML文件。此时再打开github客户端,本地仓库的文件会自动被github客户端拾取,左侧出现变更文件。
![e6cce0cb540fbc1491379d5624b00bd0.png](https://i-blog.csdnimg.cn/blog_migrate/1cb96eae24892b6accb8cb7bc16c9409.jpeg)
在Summary处填写描述(必填),点击Commit to master,上传html文件至云端仓库。这个master分支下可以建很多不同的分支,方便大家协作。提交到master分支后,再点publish branch把内容发布到github上(一定要点击publish branch)。
在云端,刷新云端仓库,可以看到html文件已经上传到云端。
![635565e2d5d052a4e5449e2801eed76f.png](https://i-blog.csdnimg.cn/blog_migrate/1cd0e55bdf52fb9aac763609f476116b.jpeg)
若Axure有变化,重复上述步骤,即axure修改后,生成html文件至本地仓库,然后通过github客户端推至云端。
获取云端原型的地址
在云端仓库,点击setting,在Options选显卡下找到GitHub Pages,点击none下拉,选择master branch,自动保存后,再到GitHub Pages处,就可以看到该原型地址了。
![92c4c6abbc0aa7e6e2cfa9d3a8bdd9b1.png](https://i-blog.csdnimg.cn/blog_migrate/6afa20c6c17eafad2df17c93b5a070cc.jpeg)
![0b49aad93cd4a1094768e0d54ccac4ee.png](https://i-blog.csdnimg.cn/blog_migrate/109b7d11d36d6078665bb5ed07e90c23.jpeg)
github共享原型文件,可以让团队随时在web或者手机查看原型文件,团队还不用装Axure插件就可以查看。另外,快捷更新Axure原型到固定网址,进行版本更新,团队打开原来的网址就可以看到最新修改过的原型。如果你有开篇的苦恼,可以试试github。
#专栏作家#
柒柒,人人都是产品经理专栏作家,B端产品经理,《用户至上-用户研究方法与实践》译者,公众号:PM柒柒。
本文原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议