Axure新技能:利用github上傳原型并將原型放進手機
作為一個產(chǎn)品經(jīng)理,雖說會畫原型不是萬能的,但不會畫原型,是萬萬不能的。但,這篇文章不是講如何畫原型的~以某種方式更高效的打開原型,拉近與程序猿哥哥之間的距離,拒絕撕逼,用原型說話,讓溝通更簡單,更高效~
寫在前面(Q&A)
1. 這篇文章主要是講什么的?
這篇文章滿滿的技術(shù)干貨,主要分為兩個部分:第一,如何利用github上傳原型,生成鏈接;第二,如何將APP原型放進手機,做成一個高仿原生APP?
2. Axure不是有自帶的原型生成網(wǎng)址的功能嗎(www.share.axure.com),為什么要用github?
是,Axure是有自帶將原型發(fā)布到Axure的功能,但,根據(jù)個人經(jīng)驗來看,其打開的速度實在太慢了,稍微沒點耐心的人,還以為是你原型畫的有問題呢。所以作為一個注重用戶的體驗的產(chǎn)品汪的我們,應(yīng)該最好是能規(guī)避這種事情的發(fā)生~
github好處多多,本汪將在下面的章節(jié)中具體說明
3. 把原型放進手機,做成一個高仿原生APP,具體是什么樣的呢?
簡單地說,就是讓桌面有應(yīng)用圖標,點進去可以有各種操作,生成這樣的一個高保真APP原型。
話不多說,先上圖(你能分辨的出此桌面哪一個APP只是個原型demo嗎?)
Part 1:如何利用github上傳原型,生成鏈接
為什么要使用github?
1、github是一個面向開源以及私有軟件項目的托管平臺,很多公司的技術(shù)團隊都使用git或svn來管理代碼,產(chǎn)品汪使用github會程序猿哥哥感覺你更專業(yè)~
2、github可以隨時提交新版本以及回退到歷史版本,使原型也有版本控制,再也不擔心給錯原型,同時每一版本的原型都有記錄,方便和程序猿哥哥討(si)論(bi)需求是否滿足~
3、github是免費的,快速的,不用你租服務(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)一定要是英文,因為這個名稱就是后面生成鏈接時鏈接的名字,所以中文字符無法識別,會被統(tǒng)一成“-”
Step 3:下載安裝git客戶端
github是服務(wù)端,要想把本地項目代碼上傳到網(wǎng)上,還需要使用一個git客戶端。
點擊set up desktop下載git客戶端,然后安裝并登錄。
另外,有一個個人的小小經(jīng)驗,在官網(wǎng)下載后的GitHubSetup.exe,由于安裝過程也是需要聯(lián)網(wǎ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(搞清楚克隆項目的本地地址非常重要,因為我們需要在下一步中將原型文件生成到該目錄)
Step 5:將axure原型生成到本地目錄
Step 6:提交到服務(wù)器端
在axure原型文件生成以后,我們再回到git客戶端,會發(fā)現(xiàn)上側(cè)出現(xiàn)了“539 uncommitted changes”,表示有539個未提交的改變。這是因為我們將axure原型生成到了github的本地目錄里面而產(chǎn)生的改變,git可以實時獲取到。這是我們點擊提交到服務(wù)器“commit to master”,并且點擊右上角“Sync”進行同步
上傳成功后,系統(tǒng)會有提示,同時還會給你一個“undo”撤銷的選擇。并且在“history”里面,我們可以查看到本次提交的版本。
Step 7:生成網(wǎng)頁鏈接
右擊該項目,點擊View on GitHub ,可以看到本次版本修改的變動。
點擊Setting,往下滑動,直到看到“GitHub Pages”
這樣就可以得到原型的網(wǎng)址了(如上圖Your site is published at http://……..(被我馬賽克掉了~))
這樣你就可以很順暢的瀏覽你的原型網(wǎng)站了,不用擔心像share.axure.com上面那樣卡到?jīng)]脾氣~
Step optional:版本更新
上文中也提到了,利用github來發(fā)布原型的一大好處就是可以隨時提交新版本以及回退到歷史版本,使原型也有版本控制,再也不擔心給錯原型,同時每一版本的原型都有記錄。
那么接下來我們順便來演示一下這個功能有多方便吧~
假設(shè)我們現(xiàn)在對原型做了一些修改,只需要在axure中點擊“在HTML中重新生成當前頁面”即可(但注意,要保證重新生成的頁面地址沒有改動過,仍然是APP_Demo在本地磁盤所在目錄)
若是有很多頁面改動,可以直接將新版本覆蓋到老版本所在的目錄即可。
這時我們重新返回到git客戶端,可看到上方出現(xiàn)了“26 uncommitted changes”,按照同樣的老方法,將改變提交到服務(wù)器,并且點擊右上角“Sync”進行同步,如下圖
再次點擊“View on GitHub”可以看到這次版本的改變
再打開原網(wǎng)址,發(fā)現(xiàn)之前原型所做的修改已經(jīng)更新發(fā)布,體現(xiàn)在該網(wǎng)址上面。
到此為止,一個可以與程序猿哥哥討(si)論(bi)需求,討論原型的高大上神器就完成了~
但是,如果你想要把這個原型演示給老板,客戶,以及其他任何可以展(zhuang)示(bi)的地方呢,最好還是把原型放進手機里,做成一個好像真的APP一樣!這樣才能更好的說服老板,客戶等等~
Part 2:把原型放到手機里
前提:你的原型最好是高保真原型
有動畫有交互,這樣才能像真的一樣。否則就算放進手機里了,也還是不像真的APP~
所以,課余時間比較多的孩子,可能多練習練習高保真原型的制作,雖說產(chǎn)品經(jīng)理是一個重思維的工作,但是“工欲善其事必先利其器”,有一個能夠說服人心的高保真原型,提前讓人看到成果,這可能比你苦口婆心對著程序猿說“求求程序猿哥哥幫忙做下這個需求吧,最后一個了”要來得更加有效率~
Step 1:選擇合適的原型尺寸
事先百度下適合各種型號的手機的原型尺寸(邏輯分辨率)是多少?
這里給出一些常見的:
- iPhone 5/5s: 320*568
- iPhone 6/6S/7 ?: 375*667
- iPhone 6p/7p ?: 414×736
也就是說,如果你有一個iphone7,375*667就可以鋪滿全屏。
但是,請注意,由于Axure導出的原型在iOS上處理status bar時有問題,需要在高度上減去status bar的高度20,就為375*647,所以保證原型的高寬為375和647,另外請保證你的原型圖起點是在其x軸,y軸都在(0,0)處,這樣才能保證原型剛好平鋪手機屏幕,否則若是起點不在(0,0)處,雖然原型尺寸是剛好平鋪手機屏幕,但由于起點(0,0)處,原型有可能就處于手機瀏覽器中央,仍然不能滿足需求。如圖在axure中設(shè)置如下
Step 2:在Axure生成原型時對“移動設(shè)備”選項進行設(shè)置
在axure中點擊“生成HTML”,點擊“移動設(shè)備”設(shè)置相關(guān)參數(shù)如圖,其中主屏圖標也即應(yīng)用將會呈現(xiàn)在手機桌面上的樣式,IOS啟動畫面設(shè)置也即啟動應(yīng)用時的頁面。
特別注意,完成相關(guān)參數(shù)設(shè)置后,還是需要到git客戶端去commit這些changes到服務(wù)器端,才能生效
本文上部分已有大篇幅講述,本部分不再贅述
Step 3:手機查看原型
在safari中打開原型鏈接,也就是我們part 1部分做好的高保真原型鏈接。點擊手機下方“close”關(guān)掉導航,并點擊iPhone自帶功能“添加到主屏幕”,具體如下圖
這時,我們可以看到手機桌面已經(jīng)多個一個名叫“成長吧”的應(yīng)用,進入原型,這時候的原型已經(jīng)適配了手機的尺寸,躺在桌面的icon,絲毫不會有人看得出這只是個原型~如下圖所示
這才是原型打開的正確方式,拒絕撕逼,用原型說話,讓溝通更簡單,更高效~
寫在最后
制作高保真原型,生成網(wǎng)頁鏈接,更新版本,生成手機適配原型等等,雖然看起來很酷炫很方便,但也請各位產(chǎn)品汪不可本末倒置哦,在時間充足并且個人興趣濃厚,或者在某些場合必須提前畫出高保真原型用以打動老板,打動客戶等場合才建議花時間做這些操作。重思維,多分析多觀察,不為畫原型而畫原型,原型只是溝通方式的一種,并非產(chǎn)品經(jīng)理的全部,與各位產(chǎn)品經(jīng)理共勉~
作者:Jolin,微信公眾號:iPM0223(歡迎關(guān)注),產(chǎn)品新人,武漢大學,目前任職京東大數(shù)據(jù)與人工智能部門_技術(shù)研發(fā)產(chǎn)品經(jīng)理實習生,歡迎各位批評指正~
本文由 @Jolin 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
問一下小姐姐 為什么我的第7不看不到網(wǎng)址 顯示的是GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository 然后底下的Source也選擇不了只顯示None 難道是我的github桌面客戶端版本的問題嗎?
為什么我在第7步,看不到網(wǎng)址::Step 7:生成網(wǎng)頁鏈接
setting 那個tab鍵一直一直往下拉,一直到github pages 就可以看到了
名字這么長,真霸氣
作者大大,這個客戶端只有64的嗎,32的沒有嗎 ??
愛原型App 也是一款在手機運行原型的工具 雖然運行時不想原生APP一樣在桌面沒生成icon 但是操作簡單方便 和這個沒差
您這邊給的客戶端安裝包沒辦法安裝–。
和我之前寫過的文章,有些太像了吧
我怎么卡在第三步了,客戶端,為什么你給你連接下載下來沒有exe文件,那怎么安裝呢?
學習了,又多了一種欣賞原型的方式!
很不錯的想法,原來也有個這個點子,不過考慮的不如樓主的全面,辦法很好!
有mac版嗎?
馬住干貨!謝謝 ??
第四步怎么找不到這個界面啊,這個是在客戶端嗎?
是的啊,就在git客戶端啊,,左上角
Thanks
嘗試了下,成功了,很有用,簡直完美。
我司是讓開發(fā)騰出服務(wù)器的部分控件放線上原型,搭配winscp自主維護,美滋滋
我一般兩種
1.github直接發(fā)過去看網(wǎng)頁
2.生成exe文件
哇,還能生成EXE文件,很強勢,大神,求指教
你好,我想請問下為什么我在上傳的時候總是提示commit failed啊
會不會是網(wǎng)絡(luò)不好呢,我用到現(xiàn)在好像沒有出現(xiàn)commit failed呢。
那我換個網(wǎng)絡(luò)再試試,估計應(yīng)該不會是的
我公司附件就有一個京東,我們會不會昨天是在一個食堂吃的午飯呢?
哈哈,是嗎?
我的也是疑問句呢 明基
這個6了,終于可以擺脫axure自帶的服務(wù)器了
把iOS狀態(tài)欄設(shè)置為灰色半透明,這樣就不用減去狀態(tài)欄的20px,還可以定義狀態(tài)欄的背景顏色。
這篇文章我有興趣,看了作者的桌面照片對作者也有興趣,希望可以交個朋友??
后續(xù)原型修改版并保存到到app_demo目錄下在上傳,原型文件都覆蓋之前上傳到guthub的版本?那之前版本都沒了,怎么管理版本?
我一般是有兩種處理辦法,①先將你每次的修改都當做版本發(fā)布(也即releases,本文中沒有圖,但操作比較簡便),然后之前要查看哪個版本,直接下載該版本代碼即可 ②或者你可以直接簡單粗暴在git客戶端回滾到歷史版本
厲害??
多謝夸獎,共同學習
用墨刀就好啦,為啥要多操作那么多呢 ??
墨刀要收費的把
類似的文章,上一次是在半年前看到。
今天又一次看到,讓我找回了遺忘在github的注冊賬號及密碼,謝謝啊
我也是突然閑下來就把這個技能整理了整理,那我豈不是無意中提升了github的日活哈哈,燃起來吧~
作為一個程序員轉(zhuǎn)行但是卻沒想到auxre可以上傳到GitHub去,簡直慚愧,學習了!真棒!
我也是一個學寫代碼但并不想從事程序猿的產(chǎn)品汪,哈哈,一起加油 ??
加個微信 一起交流下不 vv934436407
贊一個,鼓勵一下(之前還做個內(nèi)網(wǎng)用自己的電腦搭一個服務(wù)器,凡是接入內(nèi)網(wǎng)的用戶,直接訪問地址就可以在手機上打開)
嗯,用內(nèi)網(wǎng)那估計用起來就更順暢啦~
有點費時費力,為什么不用墨刀呢?
?? 這個,可能有點先入為主吧,一直都用axure,就沒換了。墨刀因為我還不太了解, ?
axure功能確實強大,但是快速有個交互效果并且看起來不太low的原型。墨刀感覺是首選
你村通網(wǎng)吧?這多少年前人人都會的了,而且你還沒給這幫傻叉新人說完整,假如以2x(iphone5)做的原型,導出的時候分別按照2(iphone5和6)、3x(plus)(xhdpi、xxhdpi)導出0.5、0.5871、0.65這三個比例,如果以1倍圖作圖(pt、dp算)那就在算出一套對應(yīng)比例。還有ios狀態(tài)欄常駐灰色半透明
小哥哥您消消氣,我不知道這在很多年前人人都會了,早知道大家都會,這稿子后臺就該審核不通過啦,我還是個 new comer,您多包涵 ? ~向您學習!