善用Axure寫(xiě)PRD，把原型放到手機(jī)里查看

36 評(píng)論 45471 瀏覽 362 收藏 6 分鐘

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

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

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

為什么選擇Github

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

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

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

注冊(cè)Github

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

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

登錄成功后，點(diǎn)擊右上角的+或者new repository按鈕，開(kāi)始創(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ā)布原型到該目錄

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

提交到服務(wù)端

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

查看源代碼

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

開(kāi)啟網(wǎng)頁(yè)訪問(wèn)功能

點(diǎn)擊setting進(jìn)入，然后頁(yè)面往下拖動(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)上有通過(guò)命令行來(lái)發(fā)布原型到git的文章并且太偏技術(shù)語(yǔ)言了。不太適合PM同學(xué)來(lái)學(xué)習(xí)使用。所以單獨(dú)從可視化的角度來(lái)寫(xiě)了這篇文章。

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

相關(guān)閱讀

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

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

善用Axure寫(xiě)PRD，徹底丟棄Word和PPT

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

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

善用Axure寫(xiě)PRD，2種模式7種方法解析頁(yè)面加載邏輯

善用Axure寫(xiě)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)載。

更多精彩內(nèi)容，請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
浪子
個(gè)人微信langzipm，專注于Axure原型和規(guī)范。
80篇作品 4146272總閱讀量
03-139570 瀏覽
銀行用戶分層看這篇文章就夠了
05-105792 瀏覽
12條用于思考AI未來(lái)的Prompt模板
03-0111083 瀏覽
萬(wàn)字長(zhǎng)文 | ChatGPT時(shí)代，互聯(lián)網(wǎng)廣告到底何去何從？
06-132874 瀏覽
聊聊AI在跨境電商應(yīng)用中的問(wèn)題
11-24793 瀏覽
平臺(tái)、監(jiān)管攜手助推精品頻出，短劇市場(chǎng)有望走上良性軌道
評(píng)論
評(píng)論請(qǐng)登錄

  1. 移動(dòng)端的可以直接用墨刀，比較省心。 良心推薦 ??

    來(lái)自北京 回復(fù)

  2. 有兩個(gè)問(wèn)題想問(wèn)問(wèn)浪子哥：
    1：在上傳的目錄下更新HTML，github端是覆蓋掉原來(lái)的文件還是新增文件，發(fā)布原型文件理論上也會(huì)在本地生成一份這個(gè)時(shí)候又是覆蓋還是新增？
    2：對(duì)于有SVN管理的團(tuán)隊(duì)，或者局域網(wǎng)工作的團(tuán)隊(duì)用在本地搭建web服務(wù)器共享文件，或者自己購(gòu)買域名服務(wù)器迭代文件，與這個(gè)方法比較的優(yōu)缺點(diǎn)

    來(lái)自廣東 回復(fù)

    1. 問(wèn)題1，同名文件肯定是覆蓋。
      問(wèn)題2，建議git搭建，其次svn，再其次局域網(wǎng)ftp。自己購(gòu)買服務(wù)器和公司局域網(wǎng)差不多。
      你可以找下我另外一篇文章，高級(jí)PM如何規(guī)范化的管理產(chǎn)品文檔http://www.codemsi.com/pmd/582384.html

      來(lái)自上海 回復(fù)

  3. 下載客戶端之后要在option里面再驗(yàn)證一下自己的身份不然傳不上去，傳送的速度有點(diǎn)慢，整體體驗(yàn)沒(méi)有在虛擬服務(wù)器上傳訪問(wèn)好

    來(lái)自廣東 回復(fù)

    1. 那當(dāng)然，github服務(wù)器在國(guó)外。
      你所謂的虛擬服務(wù)器，就說(shuō)國(guó)內(nèi)的云主機(jī)，當(dāng)然訪問(wèn)快了。
      畢竟只是靜態(tài)網(wǎng)頁(yè)。

      來(lái)自上海 回復(fù)

  4. 這個(gè)建完的項(xiàng)目怎樣刪除

    來(lái)自北京 回復(fù)

    1. 進(jìn)入要?jiǎng)h的repository, 點(diǎn)settings tab, 一直往下拉， 你會(huì)看到一個(gè)很大的button, 有紅色的字Delete this repository. ??

      來(lái)自四川 回復(fù)

  5. 好是好 但是移動(dòng)端顯示模式效果不佳呀！

    來(lái)自上海 回復(fù)

    1. 不會(huì)用罷了，你研究其他幾篇相關(guān)文章即可。

      來(lái)自上海 回復(fù)

  6. 為什么我的GIT上傳時(shí)候提示*** Please tell me who you are.

    Run

    git config –global user.email “you@example.com”
    git config –global user.name “Your Name”

    to set your account’s default identity.
    Omit –global to set the identity only in this repository.

    fatal: unable to auto-detect email address (got ‘oukinkusunoki@localhost.(none)’)
    (128)

    來(lái)自北京 回復(fù)

    1. 請(qǐng)按照我的步驟來(lái)操作

      來(lái)自上海 回復(fù)

    2. 就是到發(fā)布原型到該目錄時(shí)，我的是直接在桌面你的怎么是Github那個(gè)文件夾？

      來(lái)自北京 回復(fù)

    3. 我別的都是按照順序就這個(gè)有點(diǎn)區(qū)別是這個(gè)問(wèn)題嗎？

      來(lái)自北京 回復(fù)

    4. 嗯，有影響的。你操作有誤。

      來(lái)自上海 回復(fù)

    5. 浪子大哥有沒(méi)有，完整的App,prd文檔啊，這幾天，公司剛剛開(kāi)發(fā)了，一款貸款A(yù)pp,我是剛剛?cè)胄挟a(chǎn)品助理新手，產(chǎn)品經(jīng)理要我寫(xiě)整個(gè)App的PRD文檔。能不能發(fā)一份我郵箱，1337589014@qq.com謝謝啦浪子大哥！

      回復(fù)

  7. 請(qǐng)問(wèn)一下這個(gè)會(huì)泄露你的原型嗎?公司項(xiàng)目隱私問(wèn)題

    來(lái)自云南 回復(fù)

    1. 這個(gè)是open的，可以使用付費(fèi)版，也可以使用產(chǎn)品大牛的付費(fèi)版本功能。

      來(lái)自上海 回復(fù)

    2. 不付費(fèi)的話就是公開(kāi)的嗎？

      來(lái)自廣東 回復(fù)

    3. 嗯，是的。

      來(lái)自上海 回復(fù)

    4. 可不可以自定義HTML地址？

      來(lái)自廣東 回復(fù)

    5. 不可以。需要自定義html地址的只有自建服務(wù)器和域名。

      來(lái)自上海 回復(fù)

  8. 其實(shí)產(chǎn)品大牛也可以。

    來(lái)自廣東 回復(fù)

    1. 是，但是沒(méi)有直接地址，非要多一層跳轉(zhuǎn)。

      回復(fù)

  9. 請(qǐng)問(wèn)下更新原型應(yīng)該怎么做？是每次都在那個(gè)路徑生成html嗎？

    來(lái)自四川 回復(fù)

    1. 嗯，使用老地址即可。

      回復(fù)

  10. 大師兄好，我是產(chǎn)品小白，想請(qǐng)問(wèn)競(jìng)品的下載量在哪可以查詢？推薦下工具吧，謝謝～

    回復(fù)

    1. 具體的肯定只有內(nèi)部人才知道，可以大概猜測(cè)https://www.appannie.com/cn/

      來(lái)自上海 回復(fù)

  11. 請(qǐng)問(wèn)下為什么我用Axure畫(huà)的原型在網(wǎng)頁(yè)上位置不固定呢？本身我用Axure畫(huà)的時(shí)候X,Y軸是固定好了的呀

    來(lái)自湖北 回復(fù)

    1. 怎么個(gè)不固定法。。。

      來(lái)自上海 回復(fù)

    2. 瀏覽器兼容問(wèn)題吧 用火狐試試

      來(lái)自安徽 回復(fù)

  12. 這個(gè)軟件win10不兼容啊，怎么辦？

    回復(fù)

  13. 公司封了github 哈哈哈哈哈哈

    來(lái)自廣東 回復(fù)

    1. 什么公司，竟然會(huì)封這個(gè)。。。

      來(lái)自上海 回復(fù)

    2. 互金 因?yàn)橹坝腥税压敬a傳到github

      來(lái)自廣東 回復(fù)

  14. 原型要是高保真的就更好了

    回復(fù)

  15. 學(xué)習(xí)了

    來(lái)自湖北 回復(fù)