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

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

前幾天講了《為什么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)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 移動(dòng)端的可以直接用墨刀,比較省心。 良心推薦 ??

    來自北京 回復(fù)
  2. 有兩個(gè)問題想問問浪子哥:
    1:在上傳的目錄下更新HTML,github端是覆蓋掉原來的文件還是新增文件,發(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)

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

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

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

      來自上海 回復(fù)
  4. 這個(gè)建完的項(xiàng)目怎樣刪除

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

      來自四川 回復(fù)
  5. 好是好 但是移動(dòng)端顯示模式效果不佳呀!

    來自上海 回復(fù)
    1. 不會(huì)用罷了,你研究其他幾篇相關(guān)文章即可。

      來自上海 回復(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)

    來自北京 回復(fù)
    1. 請(qǐng)按照我的步驟來操作

      來自上海 回復(fù)
    2. 就是到發(fā)布原型到該目錄時(shí),我的是直接在桌面你的怎么是Github那個(gè)文件夾?

      來自北京 回復(fù)
    3. 我別的都是按照順序就這個(gè)有點(diǎn)區(qū)別是這個(gè)問題嗎?

      來自北京 回復(fù)
    4. 嗯,有影響的。你操作有誤。

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

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

    來自云南 回復(fù)
    1. 這個(gè)是open的,可以使用付費(fèi)版,也可以使用產(chǎn)品大牛的付費(fèi)版本功能。

      來自上海 回復(fù)
    2. 不付費(fèi)的話就是公開的嗎?

      來自廣東 回復(fù)
    3. 嗯,是的。

      來自上海 回復(fù)
    4. 可不可以自定義HTML地址?

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

      來自上海 回復(fù)
  8. 其實(shí)產(chǎn)品大牛也可以。

    來自廣東 回復(fù)
    1. 是,但是沒有直接地址,非要多一層跳轉(zhuǎn)。

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

    來自四川 回復(fù)
    1. 嗯,使用老地址即可。

      回復(fù)
  10. 大師兄好,我是產(chǎn)品小白,想請(qǐng)問競(jìng)品的下載量在哪可以查詢?推薦下工具吧,謝謝~

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

      來自上海 回復(fù)
  11. 請(qǐng)問下為什么我用Axure畫的原型在網(wǎng)頁上位置不固定呢?本身我用Axure畫的時(shí)候X,Y軸是固定好了的呀

    來自湖北 回復(fù)
    1. 怎么個(gè)不固定法。。。

      來自上海 回復(fù)
    2. 瀏覽器兼容問題吧 用火狐試試

      來自安徽 回復(fù)
  12. 這個(gè)軟件win10不兼容啊,怎么辦?

    回復(fù)
  13. 公司封了github 哈哈哈哈哈哈

    來自廣東 回復(fù)
    1. 什么公司,竟然會(huì)封這個(gè)。。。

      來自上海 回復(fù)
    2. 互金 因?yàn)橹坝腥税压敬a傳到github

      來自廣東 回復(fù)
  14. 原型要是高保真的就更好了

    回復(fù)
  15. 學(xué)習(xí)了

    來自湖北 回復(fù)