時間：2014-05-13 16:20 來源：產(chǎn)品100 作者：李志超
不敢妄談Axure教程還是產(chǎn)品教程，只當(dāng)記錄一下在產(chǎn)品上線前，一邊考慮下一版更新一邊整理下工作思路。
早期：規(guī)劃
XMind
關(guān)于腦圖軟件，寫多了又個長篇的血淚史，最后還是回歸了免費開源Mac&Win的XMind。不用考慮iOS平臺的腦圖了，沒有那種一目了然的特點了。還是用Clear吧。
模板選學(xué)術(shù)風(fēng)格
記得選這個，要不看久了眼睛受不了，免費還不支持弄到一半換模板。
放大一下 Command+
放大一下，默認三級的文字太小了。
輸入前先空格
Tab是平級，Enter是子類，輸入文字之前要先空格一下，否則第一個拼音字母不出來。有點麻煩，習(xí)慣就好了。
Clear
操作簡單，短條目逼你思路要有層次。路上有新想法就用這個快速記下來。
再推薦一個免費分層級的WorkFlowy
如何玩轉(zhuǎn) WorkFlowy?
紙筆 或 Paper by 53
區(qū)別就是逼格和方便的區(qū)別嘛。我們這里很多用過的A4紙，翻過來就畫，推薦那種多色筆，很方便。
還有一些線框圖，可以打印出來
史上最完備線框點狀模板，包括網(wǎng)頁版、ipad、iphone5、android等等
前期：溝通
Keynote & PPT
嗯，從無到有的這個過程，幻燈片是最好用的，如果一個概念連幾頁幻燈片都說不清楚，那么也就說不清楚了。本來想放個設(shè)計圖的，但是因為保密的關(guān)系，還是算了吧，反正最簡單就是拼色塊就好了，配上iPad或手機背景素材，是可以做出效果不錯的原型介紹的。
用Keynote的動畫直接把效果做出來
配上手勢圖標(biāo)，keynote自帶了放大彈動的效果，就像單擊一樣，連交互動作都可以形象的出來。
雖然不能馬上真機交互，但是作為給領(lǐng)導(dǎo)和團隊介紹概念，是最快速的方法。
真機展示Promotee
這個軟件主要是用于后期做官網(wǎng)的宣傳時可以用，但是通常到了那會都可以找設(shè)計師用PSD直接設(shè)計了。這個30塊錢為了更好的物超所值，可以用在概念期，更直觀的展示用戶效果，還是挺不錯的，因為那會通常還沒有設(shè)計師支持。
這東西的目標(biāo)很單純，你說可以找到很多現(xiàn)成的PSD，但是這個可以秒測多平臺多角度，真的很方便啊!
Pop & Blueprint 等等
接下來就可以把一些概念圖轉(zhuǎn)化成低保真原型腦補一下，主要是驗證一下在真實屏幕上的操作效果。
具體參見此文
帶交互的 iOS 產(chǎn)品原型可以用什么軟件制作?
這個階段還是要快，主要是自己看或者小團隊溝通一下。
中期：文檔
Axrue
終于到了大頭了，關(guān)于A其實我也是剛剛才開始用沒多久，一直覺得自帶控件里什么都沒有，甚至iPad尺寸都要自己畫輔助線，很麻煩。直到看了同事的一個幾乎完美的rp文件才茅廁頓開，恍然領(lǐng)悟“自定義控件”才是把A的高自由度轉(zhuǎn)化成高完備度的重要工具。
具體使用方法不再贅述，也沒資格贅述。貼圖配些小技巧吧。
自定義控件
這里其實可以有按鈕，導(dǎo)航等常規(guī)產(chǎn)品控件，還可以放標(biāo)題，注釋等文字類型，甚至流程控件，甚至一些常用的UI，省的切換庫，所有都可以放里面。
操作也不難，編輯，刷新即可。
活用流程圖
如果你仔細看前面那個圖，我有些流程的東西，這個流程圖在Axure里很好用，我除了拿它做常規(guī)的流程圖
還可以用來標(biāo)注!因為A的箭頭不好用，而用流程模塊是可以把箭頭頭尾自動連接且形成路線的，一頭是透明層一頭是注釋，很方便。
先從Flow庫里拖出系統(tǒng)控件，改變透明度和顏色，透明的用來指示
進入連線模式
透明的部分用來指示區(qū)域，注釋用來描述路徑或介紹
UI轉(zhuǎn)黑白改大小切圖
中期和后期都會更新文檔，需要把UI結(jié)合進來， 這時候為了避免色彩混亂，可以把顏色去掉，但是逐個用PS動作來做太麻煩了，我專門為此研究了解決方法
Tips: Mac快速批量制作黑白圖片
為了湊湊字數(shù)，我決定摘錄下來!
首先打開Automator，選擇“服務(wù)”。別的也可以，服務(wù)更適合這個操作，是可以集成到右鍵菜單中，更方便。
在左側(cè)的搜索中搜“將Colorsync描述文件應(yīng)用到圖像”，直接拖拽過來，這時會提醒你需要同時添加一個“拷貝到Finder項目”，點確定就好。
先看最上面，選擇“圖像文件”，位于Finder。意思是右鍵在什么位置點什么文件會出現(xiàn)這個服務(wù)選項。注意“拷貝到Finder項目”是處理好的照片要放到的目標(biāo)文件夾，自己選就好。
描述文件這個選項很重要，我是需要黑白照片，但是如果你這里選黑白的話，是對比非常強烈的效果，細節(jié)消失了，所以我選了灰色調(diào)。
最后取個名字“黑白”保存一下 ，然后如果你在文件夾中選一個或多個圖片，右鍵菜單最下面的服務(wù)里看到你剛創(chuàng)建的這個服務(wù)。點擊后就會在目標(biāo)文件夾中看到處理好的照片。非常快和方便。
PS: 還可以附加一個 調(diào)整圖像大小等其他圖片相關(guān)的服務(wù)，搜索“圖”就能看到，可以自己選擇需要的替換就可以了，簡便操作完全可以替代PS。
自動生成站點地圖
即將完成了，還是需要有個樹形圖能鋪開展示所有頁面。
在Sitemap區(qū)域?qū)?zhǔn)你希望生成樹形圖的主干點右鍵，選擇“Generate Flow Diagram”，就能自動生成圖表形式的站點地圖。點擊圖表上的每個控件，就會去到對應(yīng)的頁面。
另外，你還可以自定義流程圖(Flow)控件的鏈接頁面，方法是雙擊控件，再選擇需要鏈接到的頁面。
用它寫文檔，不做原型
寫到這是因為之前那篇里提到
之所以用這個就是為了給開發(fā)和寫文檔，很多標(biāo)注和邏輯流程，沒必要做出交互。所以不考慮用它做交互，你真都做成交互了，難道還要工程師挨個點開才能看到邏輯?
引出的@胡點 的討論
為什么不要做成交互呢?
我覺得是這樣的，這時候所有需要交互或者動畫的部分，都應(yīng)該用邏輯語言說清楚。
前面才是給工程師演示，現(xiàn)在是為了描述邏輯。
“滑動到畫面20%觸發(fā)什么事件”“30%是什么狀態(tài)”“50%以上發(fā)生什么”，并用流程圖描述交互或動畫的狀態(tài)。這樣工程師在寫代碼的時候就可以根據(jù)這個邏輯來處理，包括網(wǎng)絡(luò)狀態(tài)的判斷。
所有跳轉(zhuǎn)，層級，頁面關(guān)系全部平鋪開，對他的布局和構(gòu)建都有幫助。通過a直接做出按鈕，跳轉(zhuǎn)，隱藏等形式，容易被工程師忽略，他們又不是測試，怎么會一個個按鈕去點開看看什么狀態(tài)。文檔還是邏輯為主，遇到問題有依據(jù)。
交互原型主要有兩個功能，1是早期快速出來，給工程師和設(shè)計師展示思路，有個大概認識。2是后期校對UI時測試用戶體驗。并不能取代文檔的功能。
Mac打包
最后涉及到共享了，你用A生成了HTML包，需要傳給團隊同事一起看了。用mac直接壓縮會有亂碼，這樣誰都看不懂了。用軟件太麻煩，這個我也問了團隊技術(shù)大牛，mac終端一句命令搞定
具體用法：
cd到 壓縮文件要放到的文件夾去?；蛘咻斎?/p>
cd
然后拖曳要文件夾到終端窗口
cd /Users/li/sportsipad/docs/UE/
輸入，doc是為打包文件取的名字
tar -cvf doc.tar
后面直接把要打包的文件夾拖拽到終端窗口，就好了
tar -cvf doc.tar /Users/li/Dropbox/
這個不是壓縮，只是打包而已。用tar cavf xxxx.tar.gz … 就能壓縮了
詳細內(nèi)容：mac壓縮文件兼容win及terminal使用技巧摘錄
內(nèi)網(wǎng)分享
要用到python
(假設(shè)我們需要共享我們的目錄也就是Axure生成的那個html文件夾 /axure/home 而IP地址是192.168.1.1)
cd /axure/home
python -m SimpleHTTPServer
這就行了，而我們的HTTP服務(wù)在8000號端口上偵聽。你會得到下面的信息：
Serving HTTP on 0.0.0.0 port 8000 ...
你可以打開你的瀏覽器(IE或Firefox)，然后輸入下面的URL：
http://192.168.1.1:8000
就會自動識別到index.html，然后目錄列表就會顯示出來。
前提是別人看的時候你不要關(guān)機……
Mac智能文件夾
最后因為大家rp文件ui文件各種文件傳來傳去，就算都標(biāo)注版本日期也還是很亂，是的我們有svn但是都懶得用……
沒關(guān)系用好mac的智能文件夾
圖里都說清楚了。還可以把這個文件夾的預(yù)覽模式放大，直接在文件夾里就可以預(yù)覽圖片了。對了批量選擇然后按一下空格，就可以用方向鍵瀏覽圖片這個大家都知道吧，我是很久后才知道……
自此Axure相關(guān)的我就用到這么多了。
調(diào)整UIPSPlay
以下內(nèi)容可能會引起設(shè)計師或?qū)е履阋鹪O(shè)計師的不滿，謹慎使用。
ps連移動設(shè)備，實時同步預(yù)覽psd。你可以自己從設(shè)計那里要來psd，也可以直接同步他的ps。無論怎樣都要謹慎啊……
特點是可以通過ip連接，比如我們公司移動設(shè)備和電腦的無線是兩個，很多同步軟件都瞎了。
動畫原型 Quartz Composer & PS時間線
這就不再贅述了，這里都有。
Facebook Paper的動畫原型制作工具Origami及實現(xiàn)代碼Pop
項目管理OmniPlan
生成資源圖甘特圖，控制進度。很復(fù)雜，我就用了很簡單的功能。
共享文件Airdrop
iOS7很棒的功能，尤其是和設(shè)計師比稿在一個房間里，批量選擇圖片群發(fā)，瞬間全同步。記得在照片里調(diào)出airdrop然后開放給全部人即可。
注意 不支持iOS和Mac之間傳輸，所以就有了后面的DeskConnect
為什么 iOS 7 和 OS X 之間的 AirDrop 不能互傳?
文件備份Dropbox
鑒于保密和我們的網(wǎng)速問題，Dropbox作為團隊同步盤還是不太現(xiàn)實。但是作為個人工作文檔的同步備份還是很不錯的，尤其是這個
可以查看早期版本，很實用。
接口文檔Mou + Markdown + 邊欄
情況是這樣的，工程師在處理api的時候需要寫文檔，需要用markdown生成錨點和側(cè)邊欄，經(jīng)過一番折騰，解決方案如下：
這種側(cè)邊欄式的布局最適合寫文檔看目錄用，很快就找到這個
用js實現(xiàn)的側(cè)邊欄布局markdown，還能自動編號
我為了減少一點復(fù)雜程度，剃掉了其他的東西就保留了js，重新弄了一下。
精簡版代碼
正文寫到[article]里就好了。
后期：測試
Mac&iOS同步DeskConnect
這時UI已經(jīng)差不多了，需要頻繁的更新在手機上查看或者在放到電腦上標(biāo)注修改的地方，頻繁傳輸就需要一個最簡單的通道。
DeskConnect-真正的實現(xiàn)快速簡單在Mac和iOS傳文件
功能遠不止傳個照片那么簡單，具體訪問官網(wǎng)吧
deskconnect.com
下面簡單說下怎么用，因為確實很簡單，首先你注冊賬戶好了之后，就會看到所有登陸的設(shè)備
可以傳剪貼板或者直接拖照片過來
然后看到最近的文件，文件保存30天。
簡單設(shè)置一下，有個直接打開的很不錯，基本就是非常非?？炝?。
非常滿意!最關(guān)鍵的，全部免費，免費!
mac下載地址(https://itunes.apple.com/us/app/deskconnect/id642220194?ls=1&mt=12#)
iOS下載地址(https://itunes.apple.com/cn/app/deskconnect/id642218244?mt=8)
看到所有圖的小技巧
另外，它只是可以快速預(yù)覽，但是它會保存30天，那么怎么一次都看到這些文件呢?
打開這個目錄
/Users/XXX/Library/Containers/com.deskconnect.mac/Data/Library/Application Support
XXX為你的用戶名
放到側(cè)邊欄吧
圖標(biāo)測試Icon Striker
icon也是可以很輕量很適合大家同時查看的。
純html實現(xiàn) 直接進網(wǎng)頁連接https://www.flinto.com/strike
Icon Strike+DeskConnect實現(xiàn)快速查看
拖動圖標(biāo)到框里
可以通過郵件，短信和手工復(fù)制連接的方式，把生成的連接發(fā)到手機上
復(fù)制連接
發(fā)送到DeskConnect上的設(shè)備中。關(guān)于DeskConnect請看這里
DeskConnect-真正的實現(xiàn)快速簡單在Mac和iOS傳文件
下面操作在iPhone或iPad上實現(xiàn)
打開連接，點擊按鈕
添加到主屏
還可以改個名字
體驗測試Tapcase
前面提到過了，用UI再導(dǎo)入一次，走一遍流程就好了。
BUG標(biāo)注圈點
手機上直接標(biāo)注或者mac上標(biāo)注bug就可以了。
史上最大稿寫完了，算是對自己最近工作的一個回顧，很多都是解決了小問題。解決的小問題積少成多，也可以提升很多效率。
但是回到最初，思路和技術(shù)還是基礎(chǔ)。
最后希望我們的即將更新和亮相的兩個產(chǎn)品一切順利大殺四方!
再匯總小結(jié)一下
文中提到的產(chǎn)品全生命周期如下：
早期：規(guī)劃
前期：溝通
中期：文檔
后期：測試
17個工具為：
早期：規(guī)劃
1、XMind，2、clear，3、紙筆或Paper by 53
前期：溝通
4、Keynote & PPT，5、Promptee，6、 Pop & Blueprint
中期：文檔
7、Axure，8、PSPlay，9、Quartz Composer & PS時間線，10、OmniPlan，11、Airdrop，12、Dropbox，13、Mou + Markdown + 邊欄
后期：測試
14、Mac&iOS同步DeskConnect，15、Icon Striker，16、Icon Strike+DeskConnect，17、印象筆記·圈點
聯(lián)系客服
