如何用github共享Axure原型文件?

8 評論 6468 瀏覽 41 收藏 8 分鐘

本文如何使用github共享Axure生成的html文件,一起來看看~

Axure生成的HTML文件如何發(fā)布給開發(fā)人員看呢?

傳統(tǒng)的有直接打包傳給對方,讓他本地查看。但是如果有變更,還得再次打包重發(fā),實(shí)在是費(fèi)盡。若遇到大文件,網(wǎng)絡(luò)接收也是問題。

另外一種是通過SVN管理,這個(gè)也是本人一直在用的方法,但大部分SVN都是局域網(wǎng)絡(luò),要是外部人查看就不能滿足了。

第三種是Axurecloud,但是國內(nèi)的網(wǎng)速比較慢。

最近研究了如何使用github共享Axure生成的html文件,覺得不錯(cuò),分享給大家。

注冊Github

前往注冊gitlab進(jìn)行賬戶注冊:https://github.com/

輸入用戶名、郵箱和密碼。注意郵箱為真實(shí)郵箱,后面需要做驗(yàn)證。密碼是15個(gè)字符或者8個(gè)字符(包含一個(gè)數(shù)字和一個(gè)大寫字母)。

點(diǎn)擊“驗(yàn)證”,會讓你旋轉(zhuǎn)圖片,排除機(jī)器人注冊。驗(yàn)證通過后,點(diǎn)擊藍(lán)色大按鈕,進(jìn)入下一步。

這個(gè)根據(jù)自己的需要選擇免費(fèi)或者收費(fèi)版本,我選的免費(fèi)版本。點(diǎn)擊藍(lán)色大按鈕,進(jìn)入下一步。

該步驟是為了做一些個(gè)人信息的收集,可以直接滑動到底部,點(diǎn)擊“skip?this?step”直接跳過。

注冊成功,需要郵箱驗(yàn)證。這時(shí)登錄你的注冊郵箱,查找github發(fā)的驗(yàn)證郵件。

點(diǎn)擊“Vertify?email?address”,進(jìn)行郵件驗(yàn)證。驗(yàn)證通過后,會自動打開github如下頁面:

首次使用github,需要創(chuàng)建repository(倉庫)。填寫倉庫名稱,這個(gè)名稱是分享的axure文件的結(jié)尾地址,可自行起個(gè)標(biāo)識性強(qiáng)的名字,不要寫中文,特殊符號,不識別~,空格會轉(zhuǎn)成“-”。可見范圍選擇public。要是選擇private,別人就看不見了。

點(diǎn)擊“Create?repository”,進(jìn)入如下頁面:

首次使用github,上面會有g(shù)ithub的使用指導(dǎo),可以點(diǎn)擊“Read the guide”,自行學(xué)習(xí)。

頁面下方顯示剛剛創(chuàng)建的倉庫,現(xiàn)在倉庫是空的,沒有任何代碼和文件。點(diǎn)擊第一個(gè)紅框,下載github電腦客戶端。

云端倉庫和本地倉庫的關(guān)聯(lián)

客戶端安裝完畢后,打開github客戶端,用上面的賬號密碼登陸客戶端。

登錄后,之前創(chuàng)建的repository會在右側(cè)出現(xiàn),選中該倉庫,點(diǎn)擊右下角的長藍(lán)色按鈕,彈出如下頁面:

此處要選擇本地倉庫。自行在電腦上創(chuàng)建一個(gè)空文件夾(一定是空的),Local?path選擇該空文件夾,作為本地倉庫。至此,github本地倉庫和云端倉庫已建立聯(lián)系。

Axure生成的HTML文件commit到云端

打開Axure原型RP文件,點(diǎn)擊public→Generate?HTML?files…,進(jìn)入如下頁面:

General路徑一定要選擇上面創(chuàng)建的github本地倉庫,然后點(diǎn)擊生成按鈕。生成完畢,本地倉庫就有了Axure生成的HTML文件。此時(shí)再打開github客戶端,本地倉庫的文件會自動被github客戶端拾取,左側(cè)出現(xiàn)變更文件。

在Summary處填寫描述(必填),點(diǎn)擊Commit?to?master,上傳html文件至云端倉庫。這個(gè)master分支下可以建很多不同的分支,方便大家協(xié)作。提交到master分支后,再點(diǎn)publish branch把內(nèi)容發(fā)布到github上(一定要點(diǎn)擊publish branch)。

在云端,刷新云端倉庫,可以看到html文件已經(jīng)上傳到云端。

若Axure有變化,重復(fù)上述步驟,即axure修改后,生成html文件至本地倉庫,然后通過github客戶端推至云端。

獲取云端原型的地址

在云端倉庫,點(diǎn)擊setting,在Options選顯卡下找到GitHub Pages,點(diǎn)擊none下拉,選擇master branch,自動保存后,再到GitHub Pages處,就可以看到該原型地址了。

github共享原型文件,可以讓團(tuán)隊(duì)隨時(shí)在web或者手機(jī)查看原型文件,團(tuán)隊(duì)還不用裝Axure插件就可以查看。另外,快捷更新Axure原型到固定網(wǎng)址,進(jìn)行版本更新,團(tuán)隊(duì)打開原來的網(wǎng)址就可以看到最新修改過的原型。如果你有開篇的苦惱,可以試試github。

專欄作家

余田,人人都是產(chǎn)品經(jīng)理專欄作家,數(shù)據(jù)產(chǎn)品經(jīng)理,《用戶至上-用戶研究方法與實(shí)踐》譯者。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于CC0協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 所以說,直接用國內(nèi)的設(shè)計(jì)軟件就好了,不就是axure+git。Axure,產(chǎn)品經(jīng)理最后的倔強(qiáng)

    來自浙江 回復(fù)
  2. 1. github可以直接根據(jù)html生成 網(wǎng)頁,那我的個(gè)人網(wǎng)站html是不是也可以在github上生成可以訪問的網(wǎng)址呢?
    2. github好像打開也很慢,不知道是不是被墻了

    來自廣東 回復(fù)
  3. 您好,請教一下,這種方式可以支持團(tuán)隊(duì)協(xié)作嗎?

    來自重慶 回復(fù)
    1. 這種方式支持原型發(fā)布,團(tuán)隊(duì)文件的話,還是用axureshare或者SVN(axure8支持)

      來自遼寧 回復(fù)
  4. 搞定了

    來自重慶 回復(fù)
  5. 可以加QQ請教一下嗎

    來自重慶 回復(fù)
    1. 能加一下qq請教下嗎

      來自北京 回復(fù)
  6. 我按照步奏操作,在最后打開地址時(shí)提示未找到文件,請問會是哪個(gè)步驟出問題了呢

    來自重慶 回復(fù)