文章主要分享如何利用Coding+Git來(lái)進(jìn)行原型分享預(yù)覽。一起來(lái)學(xué)學(xué)吧。

簡(jiǎn)介

目前，把Axure原型圖給別人預(yù)覽的方式有如下幾種：

1. 通過(guò)Axure自帶的功能發(fā)布到AxShare上，訪問(wèn)速度極慢。
2. 原型圖導(dǎo)出html文件，整個(gè)文件夾傳給別人，效率極低。
3. 新浪SAE＋Svn，部署到國(guó)內(nèi)服務(wù)器，網(wǎng)頁(yè)的訪問(wèn)和響應(yīng)速度很快。
   4. Coding+Git，和上面同理，只是實(shí)現(xiàn)方式不同。

本文講解第四種方式實(shí)現(xiàn)，是因?yàn)槲腋煜it的操作命令，同時(shí)推薦Coding.net的原因是它提供一個(gè)pages功能，能幫你托管web文件，支持在線瀏覽！就如搭建了一個(gè)小網(wǎng)站一樣。

把原型.pr和.html文件托管到遠(yuǎn)程倉(cāng)庫(kù)，和程序代碼的托管，思路是一樣的。可以系統(tǒng)，安全的進(jìn)行版本控制和管理！

如果你是一名有開發(fā)背景的PM，此處肯定是輕車熟路。

如果你沒(méi)有開發(fā)經(jīng)驗(yàn)，關(guān)于Git的知識(shí)可以請(qǐng)教你們的開發(fā)同事，入門成本也不算高。

步驟

前期準(zhǔn)備

本地建立文件夾TestProject(文件夾名稱自己定義)，把原型圖生成的html存放在里面，作為本地倉(cāng)庫(kù)。

一、注冊(cè)Coding

Coding地址：https://coding.net

二、創(chuàng)建項(xiàng)目

項(xiàng)目名稱要和本地文件夾名稱相同。

• 私有：只能自己或制定人看到
• 公開：暴露給他人看

免費(fèi)版的私有項(xiàng)目創(chuàng)建數(shù)量有限，所有此處我用的公開。

填寫完“名稱”，“描述”，“私有/公有”，就可以直接點(diǎn)擊“創(chuàng)建項(xiàng)目”了。

三、遠(yuǎn)程托管

當(dāng)項(xiàng)目創(chuàng)建成功后，會(huì)顯示如下內(nèi)容：

那么此時(shí)，依次執(zhí)行以下操作：

• 打開命令行(Windows：win+R后，輸入cmd ? Mac: iterm或者Launchpad-其他－終端)
• 使用liunx操作命令，進(jìn)入到你的項(xiàng)目文件夾TestProject里 (與coding項(xiàng)目同名的文件夾)
• 執(zhí)行如下命令(不用按照Coding官方要求的git命令)：

git init
git add .

git commit -m “first commit”
git remote add origin https://….. ? ?（復(fù)制https中的鏈接到此處）
git push -u origin master

如果命令行顯示了如下內(nèi)容，既表示遠(yuǎn)程倉(cāng)庫(kù)托管成功！

四、開啟Pages服務(wù)

部署來(lái)源選擇為：master分支，點(diǎn)擊保存后，等待十多秒，會(huì)提示部署成功！

把“Coding Pages已經(jīng)運(yùn)行在..”后面的url鏈接復(fù)制下來(lái)http://Ygh999.coding.me/TestProject

這就是瀏覽你原型圖的根目錄。

五、通過(guò)Coding預(yù)覽原型圖

回到代碼中，找到start.html，把它拼到你的根url鏈接后面：

http://Ygh999.coding.me/TestProject/start.html

這就是瀏覽你產(chǎn)品原型圖的HTTP鏈接。

最后

嚴(yán)格來(lái)講，應(yīng)該建立兩個(gè)工程文件夾，一個(gè)是存放原型圖.rp的，一個(gè)是存放原型圖.html的，前者通過(guò)coding.net來(lái)遠(yuǎn)程托管，版本控制，后者則是在線瀏覽。

要不是某墻，也用不著這么大費(fèi)周折，AxShare其實(shí)挺好用的…

本文由 @擁抱變化?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。