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

36 評論 45435 瀏覽 362 收藏 6 分鐘

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

核心是應該是把原型發布到網絡上。

一方面可以用手機查看原型并模擬用戶使用APP的交互體驗;另外一方面,讓技術隨時隨地能夠查看原型并寫代碼。

為什么選擇Github

其實將原型發布到網絡上的方法有很多種。

之所以選擇Github,有以下幾個原因:

  • 查看原型的主要是程序員,而大部分技術團隊都在使用git或者svn來管理代碼、你用github會讓他們更認可你的能力。
  • Github的大部分功能是免費的,足夠PM展示原型的需求。
  • 如果新原型出錯,Github可以讓你隨時回退原型到以前的版本。
  • 方便雙方撕逼,因為每一次原型都存檔并記錄在服務器上。

注冊Github

打開https://github.com,輸入相關資料注冊一下,或者右上角Sign up。

創建項目

登錄成功后,點擊右上角的+或者new repository按鈕,開始創建倉庫,你可以認為那是一個項目。

下載和安裝客戶端

點擊set up desktop下載git客戶端,然后安裝并登錄。

下載項目到本地

clone你剛剛創建的項目到本地目錄,很簡單的。

發布原型到該目錄

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

提交到服務端

點擊你的倉庫,然后會顯示哪些文件已修改,然后輸入摘要和描述并Commit to master,最后Publish到服務端。

查看源代碼

右鍵左邊的項目進入它對應的主頁,此時項目變成了這樣。

開啟網頁訪問功能

點擊setting進入,然后頁面往下拖動到GitHub Pages,將Source設為master branch并save。

得到原型的網址

保存成功之后回到GitHub Pages,會顯示一行網址https://wbfbest.github.io/quickmeeting/,這就是原型網址。

手機查看原型

將該網址發布到手機上,然后關閉左下角的close,此時就可在手機瀏覽器上查看原型。當然最好生成到桌面查看效果。

比較原型版本

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

總結

網上有通過命令行來發布原型到git的文章并且太偏技術語言了。不太適合PM同學來學習使用。所以單獨從可視化的角度來寫了這篇文章。

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

相關閱讀

善用Axure寫PRD,移動PM需要梳理這些流程圖

善用Axure寫PRD,全局規范一個都不能少

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

善用Axure寫PRD,APP文本框通用的輸入規則

善用Axure寫PRD,PM應該知道的APP授權知識

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

善用Axure寫PRD,產品邏輯的5種呈現方法

#專欄作家#

浪子,業務型PM,浪子PRD系列51prd.com,公眾號langzisay。

本文由 @浪子 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 移動端的可以直接用墨刀,比較省心。 良心推薦 ??

    來自北京 回復
  2. 有兩個問題想問問浪子哥:
    1:在上傳的目錄下更新HTML,github端是覆蓋掉原來的文件還是新增文件,發布原型文件理論上也會在本地生成一份這個時候又是覆蓋還是新增?
    2:對于有SVN管理的團隊,或者局域網工作的團隊用在本地搭建web服務器共享文件,或者自己購買域名服務器迭代文件,與這個方法比較的優缺點

    來自廣東 回復
    1. 問題1,同名文件肯定是覆蓋。
      問題2,建議git搭建,其次svn,再其次局域網ftp。自己購買服務器和公司局域網差不多。
      你可以找下我另外一篇文章,高級PM如何規范化的管理產品文檔http://www.aharts.cn/pmd/582384.html

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

    來自廣東 回復
    1. 那當然,github服務器在國外。
      你所謂的虛擬服務器,就說國內的云主機,當然訪問快了。
      畢竟只是靜態網頁。

      來自上海 回復
  4. 這個建完的項目怎樣刪除

    來自北京 回復
    1. 進入要刪的repository, 點settings tab, 一直往下拉, 你會看到一個很大的button, 有紅色的字Delete this repository. ??

      來自四川 回復
  5. 好是好 但是移動端顯示模式效果不佳呀!

    來自上海 回復
    1. 不會用罷了,你研究其他幾篇相關文章即可。

      來自上海 回復
  6. 為什么我的GIT上傳時候提示*** 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)

    來自北京 回復
    1. 請按照我的步驟來操作

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

      來自北京 回復
    3. 我別的都是按照順序就這個有點區別是這個問題嗎?

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

      來自上海 回復
    5. 浪子大哥有沒有,完整的App,prd文檔啊,這幾天,公司剛剛開發了,一款貸款App,我是剛剛入行產品助理新手,產品經理要我寫整個App的PRD文檔。能不能發一份我郵箱,1337589014@qq.com謝謝啦浪子大哥!

      回復
  7. 請問一下這個會泄露你的原型嗎?公司項目隱私問題

    來自云南 回復
    1. 這個是open的,可以使用付費版,也可以使用產品大牛的付費版本功能。

      來自上海 回復
    2. 不付費的話就是公開的嗎?

      來自廣東 回復
    3. 嗯,是的。

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

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

      來自上海 回復
  8. 其實產品大牛也可以。

    來自廣東 回復
    1. 是,但是沒有直接地址,非要多一層跳轉。

      回復
  9. 請問下更新原型應該怎么做?是每次都在那個路徑生成html嗎?

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

      回復
  10. 大師兄好,我是產品小白,想請問競品的下載量在哪可以查詢?推薦下工具吧,謝謝~

    回復
    1. 具體的肯定只有內部人才知道,可以大概猜測https://www.appannie.com/cn/

      來自上海 回復
  11. 請問下為什么我用Axure畫的原型在網頁上位置不固定呢?本身我用Axure畫的時候X,Y軸是固定好了的呀

    來自湖北 回復
    1. 怎么個不固定法。。。

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

      來自安徽 回復
  12. 這個軟件win10不兼容啊,怎么辦?

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

    來自廣東 回復
    1. 什么公司,竟然會封這個。。。

      來自上海 回復
    2. 互金 因為之前有人把公司代碼傳到github

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

    回復
  15. 學習了

    來自湖北 回復