前幾天講了《為什么375×667是移動(dòng)端原型設(shè)計(jì)的最佳分辨率》，然后《如何生成適配手機(jī)的原型》，以及《如何設(shè)置手機(jī)APP原型尺寸》。這一篇講解如何將原型放到手機(jī)里面查看，先分享效果電腦打開網(wǎng)址，手機(jī)打開網(wǎng)址。

核心是應(yīng)該是把原型發(fā)布到網(wǎng)絡(luò)上。

一方面可以用手機(jī)查看原型并模擬用戶使用APP的交互體驗(yàn)；另外一方面，讓技術(shù)隨時(shí)隨地能夠查看原型并寫代碼。

為什么選擇Github

其實(shí)將原型發(fā)布到網(wǎng)絡(luò)上的方法有很多種。

之所以選擇Github，有以下幾個(gè)原因：

• 查看原型的主要是程序員，而大部分技術(shù)團(tuán)隊(duì)都在使用git或者svn來管理代碼、你用github會(huì)讓他們更認(rèn)可你的能力。
• Github的大部分功能是免費(fèi)的，足夠PM展示原型的需求。
• 如果新原型出錯(cuò)，Github可以讓你隨時(shí)回退原型到以前的版本。
• 方便雙方撕逼，因?yàn)槊恳淮卧投即鏅n并記錄在服務(wù)器上。

注冊(cè)Github

打開https://github.com，輸入相關(guān)資料注冊(cè)一下，或者右上角Sign up。

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

登錄成功后，點(diǎn)擊右上角的+或者new repository按鈕，開始創(chuàng)建倉(cāng)庫(kù)，你可以認(rèn)為那是一個(gè)項(xiàng)目。

下載和安裝客戶端

點(diǎn)擊set up desktop下載git客戶端，然后安裝并登錄。

下載項(xiàng)目到本地

clone你剛剛創(chuàng)建的項(xiàng)目到本地目錄，很簡(jiǎn)單的。

發(fā)布原型到該目錄

打開Axure生成原型到該目錄，注意原型的尺寸需要單獨(dú)設(shè)置。詳見上篇文章《善用Axure寫PRD，如何設(shè)置手機(jī)APP原型尺寸》。

提交到服務(wù)端

點(diǎn)擊你的倉(cāng)庫(kù)，然后會(huì)顯示哪些文件已修改，然后輸入摘要和描述并Commit to master，最后Publish到服務(wù)端。

查看源代碼

右鍵左邊的項(xiàng)目進(jìn)入它對(duì)應(yīng)的主頁，此時(shí)項(xiàng)目變成了這樣。

開啟網(wǎng)頁訪問功能

點(diǎn)擊setting進(jìn)入，然后頁面往下拖動(dòng)到GitHub Pages，將Source設(shè)為master branch并save。

得到原型的網(wǎng)址

保存成功之后回到GitHub Pages，會(huì)顯示一行網(wǎng)址https://wbfbest.github.io/quickmeeting/，這就是原型網(wǎng)址。

手機(jī)查看原型

將該網(wǎng)址發(fā)布到手機(jī)上，然后關(guān)閉左下角的close，此時(shí)就可在手機(jī)瀏覽器上查看原型。當(dāng)然最好生成到桌面查看效果。

比較原型版本

如果有需要的話，可以比較原型的版本。

總結(jié)

網(wǎng)上有通過命令行來發(fā)布原型到git的文章并且太偏技術(shù)語言了。不太適合PM同學(xué)來學(xué)習(xí)使用。所以單獨(dú)從可視化的角度來寫了這篇文章。

另外，通過使用github可以了解程序員是如何提交代碼合并分支，對(duì)PM是件好事。

相關(guān)閱讀

善用Axure寫PRD，移動(dòng)PM需要梳理這些流程圖

善用Axure寫PRD，全局規(guī)范一個(gè)都不能少

善用Axure寫PRD，徹底丟棄Word和PPT

善用Axure寫PRD，APP文本框通用的輸入規(guī)則

善用Axure寫PRD，PM應(yīng)該知道的APP授權(quán)知識(shí)

善用Axure寫PRD，2種模式7種方法解析頁面加載邏輯

善用Axure寫PRD，產(chǎn)品邏輯的5種呈現(xiàn)方法

#專欄作家#

浪子，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號(hào)langzisay。

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