Axure新技能:利用github上傳原型并將原型放進(jìn)手機(jī)

56 評論 39288 瀏覽 328 收藏 15 分鐘

作為一個產(chǎn)品經(jīng)理,雖說會畫原型不是萬能的,但不會畫原型,是萬萬不能的。但,這篇文章不是講如何畫原型的~以某種方式更高效的打開原型,拉近與程序猿哥哥之間的距離,拒絕撕逼,用原型說話,讓溝通更簡單,更高效~

寫在前面(Q&A)

1. 這篇文章主要是講什么的?

這篇文章滿滿的技術(shù)干貨,主要分為兩個部分:第一,如何利用github上傳原型,生成鏈接;第二,如何將APP原型放進(jìn)手機(jī),做成一個高仿原生APP?

2. Axure不是有自帶的原型生成網(wǎng)址的功能嗎(www.share.axure.com),為什么要用github?

是,Axure是有自帶將原型發(fā)布到Axure的功能,但,根據(jù)個人經(jīng)驗(yàn)來看,其打開的速度實(shí)在太慢了,稍微沒點(diǎn)耐心的人,還以為是你原型畫的有問題呢。所以作為一個注重用戶的體驗(yàn)的產(chǎn)品汪的我們,應(yīng)該最好是能規(guī)避這種事情的發(fā)生~

github好處多多,本汪將在下面的章節(jié)中具體說明

3. 把原型放進(jìn)手機(jī),做成一個高仿原生APP,具體是什么樣的呢?

簡單地說,就是讓桌面有應(yīng)用圖標(biāo),點(diǎn)進(jìn)去可以有各種操作,生成這樣的一個高保真APP原型。

話不多說,先上圖(你能分辨的出此桌面哪一個APP只是個原型demo嗎?)

Part 1:如何利用github上傳原型,生成鏈接

為什么要使用github?

1、github是一個面向開源以及私有軟件項目的托管平臺,很多公司的技術(shù)團(tuán)隊都使用git或svn來管理代碼,產(chǎn)品汪使用github會程序猿哥哥感覺你更專業(yè)~

2、github可以隨時提交新版本以及回退到歷史版本,使原型也有版本控制,再也不擔(dān)心給錯原型,同時每一版本的原型都有記錄,方便和程序猿哥哥討(si)論(bi)需求是否滿足~

3、github是免費(fèi)的,快速的,不用你租服務(wù)器發(fā)布項目等等復(fù)雜操作,入門成本相對較低,并且功能基本能滿足PM的要求~

手把手教你如何利用github上傳原型

Step 1注冊一個github的賬號

網(wǎng)址:https://github.com/

填寫個人基本信息,即可完成注冊~

Step 2:創(chuàng)建項目

在登錄了之后,會跳轉(zhuǎn)到如下的界面,可通過“start a project”或者右上方“+”號下面的“New repository”創(chuàng)建項目。

跳轉(zhuǎn)至下一頁面,填寫項目的名稱,注意,項目名稱(如下APP_Demo)一定要是英文,因?yàn)檫@個名稱就是后面生成鏈接時鏈接的名字,所以中文字符無法識別,會被統(tǒng)一成“-”

Step 3:下載安裝git客戶端

github是服務(wù)端,要想把本地項目代碼上傳到網(wǎng)上,還需要使用一個git客戶端。

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

另外,有一個個人的小小經(jīng)驗(yàn),在官網(wǎng)下載后的GitHubSetup.exe,由于安裝過程也是需要聯(lián)網(wǎng)的,可能會由于一些未知的原因無法安裝成功,所以我當(dāng)時是使用的朋友發(fā)給我的github離線包。

如果在安裝過程中遇到問題的朋友,可以下載離線版的github哦~

本小汪貼心給出網(wǎng)盤地址:鏈接:http://pan.baidu.com/s/1o7UzCoy ? 密碼:afom

Step 4:copy項目到本地

將剛剛在服務(wù)器端創(chuàng)建的項目copy到本地,這樣才能成功將本地項目代碼上傳到服務(wù)器。

操作如下:

這時會彈出瀏覽文件夾,也就是選擇將該項目復(fù)制到你本地的哪個文件夾下,我一般會有一個固定放置github項目的文件夾。并且系統(tǒng)會自動生成克隆的項目,所以我的項目克隆最終文件的絕對地址是D:\GitHub\APP_Demo(搞清楚克隆項目的本地地址非常重要,因?yàn)槲覀冃枰谙乱徊街袑⒃臀募傻皆撃夸洠?/p>

Step 5:將axure原型生成到本地目錄

Step 6:提交到服務(wù)器端

在axure原型文件生成以后,我們再回到git客戶端,會發(fā)現(xiàn)上側(cè)出現(xiàn)了“539 uncommitted changes”,表示有539個未提交的改變。這是因?yàn)槲覀儗xure原型生成到了github的本地目錄里面而產(chǎn)生的改變,git可以實(shí)時獲取到。這是我們點(diǎn)擊提交到服務(wù)器“commit to master”,并且點(diǎn)擊右上角“Sync”進(jìn)行同步

上傳成功后,系統(tǒng)會有提示,同時還會給你一個“undo”撤銷的選擇。并且在“history”里面,我們可以查看到本次提交的版本。

Step 7:生成網(wǎng)頁鏈接

右擊該項目,點(diǎn)擊View on GitHub ,可以看到本次版本修改的變動。

點(diǎn)擊Setting,往下滑動,直到看到“GitHub Pages”

這樣就可以得到原型的網(wǎng)址了(如上圖Your site is published at http://……..(被我馬賽克掉了~))

這樣你就可以很順暢的瀏覽你的原型網(wǎng)站了,不用擔(dān)心像share.axure.com上面那樣卡到?jīng)]脾氣~

Step optional:版本更新

上文中也提到了,利用github來發(fā)布原型的一大好處就是可以隨時提交新版本以及回退到歷史版本,使原型也有版本控制,再也不擔(dān)心給錯原型,同時每一版本的原型都有記錄。

那么接下來我們順便來演示一下這個功能有多方便吧~

假設(shè)我們現(xiàn)在對原型做了一些修改,只需要在axure中點(diǎn)擊“在HTML中重新生成當(dāng)前頁面”即可(但注意,要保證重新生成的頁面地址沒有改動過,仍然是APP_Demo在本地磁盤所在目錄)

若是有很多頁面改動,可以直接將新版本覆蓋到老版本所在的目錄即可。

這時我們重新返回到git客戶端,可看到上方出現(xiàn)了“26 uncommitted changes”,按照同樣的老方法,將改變提交到服務(wù)器,并且點(diǎn)擊右上角“Sync”進(jìn)行同步,如下圖

再次點(diǎn)擊“View on GitHub”可以看到這次版本的改變

再打開原網(wǎng)址,發(fā)現(xiàn)之前原型所做的修改已經(jīng)更新發(fā)布,體現(xiàn)在該網(wǎng)址上面。

到此為止,一個可以與程序猿哥哥討(si)論(bi)需求,討論原型的高大上神器就完成了~

但是,如果你想要把這個原型演示給老板,客戶,以及其他任何可以展(zhuang)示(bi)的地方呢,最好還是把原型放進(jìn)手機(jī)里,做成一個好像真的APP一樣!這樣才能更好的說服老板,客戶等等~

Part 2:把原型放到手機(jī)里

前提:你的原型最好是高保真原型

有動畫有交互,這樣才能像真的一樣。否則就算放進(jìn)手機(jī)里了,也還是不像真的APP~

所以,課余時間比較多的孩子,可能多練習(xí)練習(xí)高保真原型的制作,雖說產(chǎn)品經(jīng)理是一個重思維的工作,但是“工欲善其事必先利其器”,有一個能夠說服人心的高保真原型,提前讓人看到成果,這可能比你苦口婆心對著程序猿說“求求程序猿哥哥幫忙做下這個需求吧,最后一個了”要來得更加有效率~

Step 1:選擇合適的原型尺寸

事先百度下適合各種型號的手機(jī)的原型尺寸(邏輯分辨率)是多少?

這里給出一些常見的:

  • iPhone 5/5s: 320*568
  • iPhone 6/6S/7 ?: 375*667
  • iPhone 6p/7p ?: 414×736

也就是說,如果你有一個iphone7,375*667就可以鋪滿全屏。

但是,請注意,由于Axure導(dǎo)出的原型在iOS上處理status bar時有問題,需要在高度上減去status bar的高度20,就為375*647,所以保證原型的高寬為375和647,另外請保證你的原型圖起點(diǎn)是在其x軸,y軸都在(0,0)處,這樣才能保證原型剛好平鋪手機(jī)屏幕,否則若是起點(diǎn)不在(0,0)處,雖然原型尺寸是剛好平鋪手機(jī)屏幕,但由于起點(diǎn)(0,0)處,原型有可能就處于手機(jī)瀏覽器中央,仍然不能滿足需求。如圖在axure中設(shè)置如下

Step 2:在Axure生成原型時對“移動設(shè)備”選項進(jìn)行設(shè)置

在axure中點(diǎn)擊“生成HTML”,點(diǎn)擊“移動設(shè)備”設(shè)置相關(guān)參數(shù)如圖,其中主屏圖標(biāo)也即應(yīng)用將會呈現(xiàn)在手機(jī)桌面上的樣式,IOS啟動畫面設(shè)置也即啟動應(yīng)用時的頁面。

特別注意,完成相關(guān)參數(shù)設(shè)置后,還是需要到git客戶端去commit這些changes到服務(wù)器端,才能生效

本文上部分已有大篇幅講述,本部分不再贅述

Step 3:手機(jī)查看原型

在safari中打開原型鏈接,也就是我們part 1部分做好的高保真原型鏈接。點(diǎn)擊手機(jī)下方“close”關(guān)掉導(dǎo)航,并點(diǎn)擊iPhone自帶功能“添加到主屏幕”,具體如下圖

這時,我們可以看到手機(jī)桌面已經(jīng)多個一個名叫“成長吧”的應(yīng)用,進(jìn)入原型,這時候的原型已經(jīng)適配了手機(jī)的尺寸,躺在桌面的icon,絲毫不會有人看得出這只是個原型~如下圖所示

這才是原型打開的正確方式,拒絕撕逼,用原型說話,讓溝通更簡單,更高效~

寫在最后

制作高保真原型,生成網(wǎng)頁鏈接,更新版本,生成手機(jī)適配原型等等,雖然看起來很酷炫很方便,但也請各位產(chǎn)品汪不可本末倒置哦,在時間充足并且個人興趣濃厚,或者在某些場合必須提前畫出高保真原型用以打動老板,打動客戶等場合才建議花時間做這些操作。重思維,多分析多觀察,不為畫原型而畫原型,原型只是溝通方式的一種,并非產(chǎn)品經(jīng)理的全部,與各位產(chǎn)品經(jīng)理共勉~

 

作者:Jolin,微信公眾號:iPM0223(歡迎關(guān)注),產(chǎn)品新人,武漢大學(xué),目前任職京東大數(shù)據(jù)與人工智能部門_技術(shù)研發(fā)產(chǎn)品經(jīng)理實(shí)習(xí)生,歡迎各位批評指正~

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 想知道 gitlab怎么用,求指導(dǎo)謝謝、

    來自北京 回復(fù)
  2. 意義不太大。熟悉下就好。

    來自北京 回復(fù)
  3. 你好,請問一下,每次google瀏覽器要清除緩存才可以打開新的,這個問題有沒有更好的解決辦法?

    來自廣東 回復(fù)
  4. Github客戶端離線版,路過的大神能共享一下嗎

    來自北京 回復(fù)
  5. 關(guān)鍵是github速度也不快吧,另外如果需要版本的話,最好的方式就是用axure的team project,這個你的axure源文件都是可以按照版本保存的

    來自遼寧 回復(fù)
  6. 學(xué)會了如何用github。。。

    來自北京 回復(fù)
    1. 用過gitlab嗎

      來自北京 回復(fù)
  7. 小姐姐,你暴露了自己的照片了……

    來自江蘇 回復(fù)
  8. Axshare實(shí)在太慢,回去試試GitHub的方法

    來自廣東 回復(fù)