Axure新技能：利用github上傳原型並將原型放進手機
寫在前面（Q&A ） 1. 這篇文章主要是講什麼的？ 這篇文章滿滿的技術乾貨，主要分為兩個部分：第一，如何利用github上傳原型，生成連結；第二，如何將APP原型放進手機，做成一個高仿原生APP？ 2. Axure 不是有自帶的原型生成網址的功能嗎(www.share.axure.com) ，為什麼要用github ？ 是，Axure是有自帶將原型釋出到Axure的功能，但，根據個人經驗來看，其開啟的速度實在太慢了，稍微沒點耐心的人，還以為是你原型畫的有問題呢。所以作為一個注重使用者的體驗的產品汪的我們，應該最好是能規避這種事情的發生~ github好處多多，本汪將在下面的章節中具體說明 3. 把原型放進手機，做成一個高仿原生APP ，具體是什麼樣的呢？ 簡單地說，就是讓桌面有應用圖示，點進去可以有各種操作，生成這樣的一個高保真APP原型。 話不多說，先上圖（你能分辨的出此桌面哪一個APP只是個原型demo嗎？） 
Part 1 ：如何利用github 上傳原型，生成連結 為什麼要使用github ？ 1、github是一個面向開源以及私有軟體專案的託管平臺，很多公司的技術團隊都使用git或svn來管理程式碼，產品汪使用github會程式猿哥哥感覺你更專業~ 2、github可以隨時提交新版本以及回退到歷史版本，使原型也有版本控制，再也不擔心給錯原型,同時每一版本的原型都有記錄，方便和程式猿哥哥討（si）論（bi）需求是否滿足~ 3、github是免費的，快速的，不用你租伺服器釋出專案等等複雜操作，入門成本相對較低，並且功能基本能滿足PM的要求~ 手把手教你如何利用github 上傳原型 Step 1 ： 註冊一個 github 的賬號 網址：https://github.com/ 填寫個人基本資訊，即可完成註冊~ Step 2 ：建立專案 在登入了之後，會跳轉到如下的介面，可通過“start a project”或者右上方“+”號下面的“New repository”建立專案。 
跳轉至下一頁面，填寫專案的名稱，注意，專案名稱（如下APP_Demo）一定要是英文，因為這個名稱就是後面生成連結時連結的名字，所以中文字元無法識別，會被統一成“-” 
Step 3 ：下載安裝git 客戶端 github是服務端，要想把本地專案程式碼上傳到網上，還需要使用一個git客戶端。 點選set up desktop下載git客戶端，然後安裝並登入。 另外，有一個個人的小小經驗，在官網下載後的GitHubSetup.exe，由於安裝過程也是需要聯網的，可能會由於一些未知的原因無法安裝成功，所以我當時是使用的朋友發給我的github離線包。 如果在安裝過程中遇到問題的朋友，可以下載離線版的github哦~ 本小汪貼心給出網盤地址：連結：http://pan.baidu.com/s/1o7UzCoy 密碼：afom Step 4 ：copy 專案到本地 將剛剛在伺服器端建立的專案copy到本地，這樣才能成功將本地專案程式碼上傳到伺服器。 操作如下： 
這時會彈出瀏覽資料夾，也就是選擇將該專案複製到你本地的哪個資料夾下，我一般會有一個固定放置github專案的資料夾。並且系統會自動生成克隆的專案，所以我的專案克隆最終檔案的絕對地址是D:\GitHub\APP_Demo（搞清楚克隆專案的本地地址非常重要，因為我們需要在下一步中將原型檔案生成到該目錄） Step 5 ：將axure 原型生成到本地目錄 
Step 6 ：提交到伺服器端 在axure原型檔案生成以後，我們再回到git客戶端，會發現上側出現了“539 uncommitted changes”,表示有539個未提交的改變。這是因為我們將axure原型生成到了github的本地目錄裡面而產生的改變，git可以實時獲取到。這是我們點選提交到伺服器“commit to master”，並且點選右上角“Sync”進行同步 
上傳成功後，系統會有提示，同時還會給你一個“undo”撤銷的選擇。並且在“history”裡面，我們可以檢視到本次提交的版本。 
Step 7 ：生成網頁連結 右擊該專案，點選View on GitHub ，可以看到本次版本修改的變動。 
這樣就可以得到原型的網址了（如上圖Your site is published at http://……..(被我馬賽克掉了~)） 這樣你就可以很順暢的瀏覽你的原型網站了，不用擔心像share.axure.com上面那樣卡到沒脾氣~
Step optional ：版本更新 上文中也提到了，利用github來發布原型的一大好處就是可以隨時提交新版本以及回退到歷史版本，使原型也有版本控制，再也不擔心給錯原型,同時每一版本的原型都有記錄。 那麼接下來我們順便來演示一下這個功能有多方便吧~ 假設我們現在對原型做了一些修改，只需要在axure中點選“在HTML中重新生成當前頁面”即可（但注意，要保證重新生成的頁面地址沒有改動過，仍然是APP_Demo在本地磁碟所在目錄） 若是有很多頁面改動，可以直接將新版本覆蓋到老版本所在的目錄即可。 這時我們重新返回到git客戶端，可看到上方出現了“26 uncommitted changes”，按照同樣的老方法，將改變提交到伺服器，並且點選右上角“Sync”進行同步，如下圖 
再開啟原網址，發現之前原型所做的修改已經更新發布，體現在該網址上面。 到此為止，一個可以與程式猿哥哥討（si）論（bi）需求，討論原型的高大上神器就完成了~ 但是，如果你想要把這個原型演示給老闆，客戶，以及其他任何可以展（zhuang）示（bi）的地方呢，最好還是把原型放進手機裡，做成一個好像真的APP一樣！這樣才能更好的說服老闆，客戶等等~
Part 2 ：把原型放到手機裡 前提：你的原型最好是高保真原型 有動畫有互動，這樣才能像真的一樣。否則就算放進手機裡了，也還是不像真的APP~ 所以，課餘時間比較多的孩子，可能多練習練習高保真原型的製作，雖說產品經理是一個重思維的工作，但是“工欲善其事必先利其器”，有一個能夠說服人心的高保真原型，提前讓人看到成果，這可能比你苦口婆心對著程式猿說“求求程式猿哥哥幫忙做下這個需求吧，最後一個了”要來得更加有效率~
Step 1 ：選擇合適的原型尺寸 事先百度下適合各種型號的手機的原型尺寸（邏輯解析度）是多少？ 這裡給出一些常見的：
也就是說，如果你有一個iphone7，375*667就可以鋪滿全屏。 但是，請注意，由於Axure匯出的原型在iOS上處理status bar時有問題，需要在高度上減去status bar的高度20，就為375*647，所以保證原型的高寬為375和647,另外請保證你的原型圖起點是在其x軸，y軸都在（0,0）處，這樣才能保證原型剛好平鋪手機螢幕，否則若是起點不在（0,0）處，雖然原型尺寸是剛好平鋪手機螢幕，但由於起點（0,0）處，原型有可能就處於手機瀏覽器中央，仍然不能滿足需求。如圖在axure中設定如下 
Step 2 ：在Axure 生成原型時對“移動裝置”選項進行設定 在axure中點選“生成HTML”，點選“移動裝置”設定相關引數如圖，其中主屏圖示也即應用將會呈現在手機桌面上的樣式，IOS啟動畫面設定也即啟動應用時的頁面。 特別注意，完成相關引數設定後，還是需要到git客戶端去commit這些changes到伺服器端，才能生效 本文上部分已有大篇幅講述，本部分不再贅述 
Step 3 ：手機檢視原型 在safari中開啟原型連結，也就是我們part 1部分做好的高保真原型連結。點選手機下方“close”關掉導航，並點選iPhone自帶功能“新增到主螢幕”，具體如下圖
這時，我們可以看到手機桌面已經多個一個名叫“成長吧”的應用，進入原型，這時候的原型已經適配了手機的尺寸，躺在桌面的icon，絲毫不會有人看得出這只是個原型~如下圖所示 
這才是原型開啟的正確方式，拒絕撕逼，用原型說話，讓溝通更簡單，更高效~ 寫在最後 製作高保真原型，生成網頁連結，更新版本，生成手機適配原型等等，雖然看起來很酷炫很方便，但也請各位產品汪不可本末倒置哦，在時間充足並且個人興趣濃厚，或者在某些場合必須提前畫出高保真原型用以打動老闆，打動客戶等場合才建議花時間做這些操作。重思維，多分析多觀察，不為畫原型而畫原型，原型只是溝通方式的一種，並非產品經理的全部，與各位產品經理共勉~
作者：Jolin