工欲善其事必先利其器，耍流氓也得有件風(fēng)衣不是……

XMind

關(guān)于腦圖軟件，寫多了又個(gè)長(zhǎng)篇的血淚史，最后還是回歸了免費(fèi)開(kāi)源Mac&Win的XMind。不用考慮iOS平臺(tái)的腦圖了，沒(méi)有那種一目了然的特點(diǎn)了。還是用Clear吧。

• 模板選學(xué)術(shù)風(fēng)格

記得選這個(gè)，要不看久了眼睛受不了，免費(fèi)還不支持弄到一半換模板。

• 放大一下 Command+

放大一下，默認(rèn)三級(jí)的文字太小了。

• 輸入前先空格

Tab是平級(jí)，Enter是子類，輸入文字之前要先空格一下，否則第一個(gè)拼音字母不出來(lái)。有點(diǎn)麻煩，習(xí)慣就好了。

Clear

操作簡(jiǎn)單，短條目逼你思路要有層次。路上有新想法就用這個(gè)快速記下來(lái)。

再推薦一個(gè)免費(fèi)分層級(jí)的WorkFlowy

如何玩轉(zhuǎn) WorkFlowy？

紙筆 或?Paper by 53

區(qū)別就是逼格和方便的區(qū)別嘛。我們這里很多用過(guò)的A4紙，翻過(guò)來(lái)就畫，推薦那種多色筆，很方便。

還有一些線框圖，可以打印出來(lái)

史上最完備線框點(diǎn)狀模板，包括網(wǎng)頁(yè)版、ipad、iphone5、android等等

前期：溝通

Keynote & PPT

嗯，從無(wú)到有的這個(gè)過(guò)程，幻燈片是最好用的，如果一個(gè)概念連幾頁(yè)幻燈片都說(shuō)不清楚，那么也就說(shuō)不清楚了。本來(lái)想放個(gè)設(shè)計(jì)圖的，但是因?yàn)楸Ｃ艿年P(guān)系，還是算了吧，反正最簡(jiǎn)單就是拼色塊就好了，配上iPad或手機(jī)背景素材，是可以做出效果不錯(cuò)的原型介紹的。

• 用Keynote的動(dòng)畫直接把效果做出來(lái)

配上手勢(shì)圖標(biāo)，keynote自帶了放大彈動(dòng)的效果，就像單擊一樣，連交互動(dòng)作都可以形象的出來(lái)。

雖然不能馬上真機(jī)交互，但是作為給領(lǐng)導(dǎo)和團(tuán)隊(duì)介紹概念，是最快速的方法。

真機(jī)展示Promotee

這個(gè)軟件主要是用于后期做官網(wǎng)的宣傳時(shí)可以用，但是通常到了那會(huì)都可以找設(shè)計(jì)師用PSD直接設(shè)計(jì)了。這個(gè)30塊錢為了更好的物超所值，可以用在概念期，更直觀的展示用戶效果，還是挺不錯(cuò)的，因?yàn)槟菚?huì)通常還沒(méi)有設(shè)計(jì)師支持。

這東西的目標(biāo)很單純，你說(shuō)可以找到很多現(xiàn)成的PSD，但是這個(gè)可以秒測(cè)多平臺(tái)多角度，真的很方便??！

Pop & Blueprint 等等

接下來(lái)就可以把一些概念圖轉(zhuǎn)化成低保真原型腦補(bǔ)一下，主要是驗(yàn)證一下在真實(shí)屏幕上的操作效果。

具體參見(jiàn)此文

帶交互的 iOS 產(chǎn)品原型可以用什么軟件制作？

這個(gè)階段還是要快，主要是自己看或者小團(tuán)隊(duì)溝通一下。

中期：文檔

Axrue

終于到了大頭了，關(guān)于A其實(shí)我也是剛剛才開(kāi)始用沒(méi)多久，一直覺(jué)得自帶控件里什么都沒(méi)有，甚至iPad尺寸都要自己畫輔助線，很麻煩。直到看了同事的一個(gè)幾乎完美的rp文件才茅廁頓開(kāi)，恍然領(lǐng)悟“自定義控件”才是把A的高自由度轉(zhuǎn)化成高完備度的重要工具。

具體使用方法不再贅述，也沒(méi)資格贅述。貼圖配些小技巧吧。

• 自定義控件
  

這里其實(shí)可以有按鈕，導(dǎo)航等常規(guī)產(chǎn)品控件，還可以放標(biāo)題，注釋等文字類型，甚至流程控件，甚至一些常用的UI，省的切換庫(kù)，所有都可以放里面。

操作也不難，編輯，刷新即可。

• 活用流程圖

如果你仔細(xì)看前面那個(gè)圖，我有些流程的東西，這個(gè)流程圖在Axure里很好用，我除了拿它做常規(guī)的流程圖

還可以用來(lái)標(biāo)注！因?yàn)锳的箭頭不好用，而用流程模塊是可以把箭頭頭尾自動(dòng)連接且形成路線的，一頭是透明層一頭是注釋，很方便。

先從Flow庫(kù)里拖出系統(tǒng)控件，改變透明度和顏色，透明的用來(lái)指示

進(jìn)入連線模式

透明的部分用來(lái)指示區(qū)域，注釋用來(lái)描述路徑或介紹

• UI轉(zhuǎn)黑白改大小切圖

中期和后期都會(huì)更新文檔，需要把UI結(jié)合進(jìn)來(lái)， 這時(shí)候?yàn)榱吮苊馍驶靵y，可以把顏色去掉，但是逐個(gè)用PS動(dòng)作來(lái)做太麻煩了，我專門為此研究了解決方法

Tips: Mac快速批量制作黑白圖片

為了湊湊字?jǐn)?shù)，我決定摘錄下來(lái)！

首先打開(kāi)Automator，選擇“服務(wù)”。別的也可以，服務(wù)更適合這個(gè)操作，是可以集成到右鍵菜單中，更方便。

在左側(cè)的搜索中搜“將Colorsync描述文件應(yīng)用到圖像”，直接拖拽過(guò)來(lái)，這時(shí)會(huì)提醒你需要同時(shí)添加一個(gè)“拷貝到Finder項(xiàng)目”，點(diǎn)確定就好。

先看最上面，選擇“圖像文件”，位于Finder。意思是右鍵在什么位置點(diǎn)什么文件會(huì)出現(xiàn)這個(gè)服務(wù)選項(xiàng)。注意“拷貝到Finder項(xiàng)目”是處理好的照片要放到的目標(biāo)文件夾，自己選就好。

描述文件這個(gè)選項(xiàng)很重要，我是需要黑白照片，但是如果你這里選黑白的話，是對(duì)比非常強(qiáng)烈的效果，細(xì)節(jié)消失了，所以我選了灰色調(diào)。

最后取個(gè)名字“黑白”保存一下 ，然后如果你在文件夾中選一個(gè)或多個(gè)圖片，右鍵菜單最下面的服務(wù)里看到你剛創(chuàng)建的這個(gè)服務(wù)。點(diǎn)擊后就會(huì)在目標(biāo)文件夾中看到處理好的照片。非?？旌头奖?。

PS: 還可以附加一個(gè) 調(diào)整圖像大小等其他圖片相關(guān)的服務(wù)，搜索“圖”就能看到，可以自己選擇需要的替換就可以了，簡(jiǎn)便操作完全可以替代ＰＳ。

• 自動(dòng)生成站點(diǎn)地圖

即將完成了，還是需要有個(gè)樹(shù)形圖能鋪開(kāi)展示所有頁(yè)面。

在Sitemap區(qū)域?qū)?zhǔn)你希望生成樹(shù)形圖的主干點(diǎn)右鍵，選擇“Generate Flow Diagram”，就能自動(dòng)生成圖表形式的站點(diǎn)地圖。點(diǎn)擊圖表上的每個(gè)控件，就會(huì)去到對(duì)應(yīng)的頁(yè)面。

另外，你還可以自定義流程圖（Flow）控件的鏈接頁(yè)面，方法是雙擊控件，再選擇需要鏈接到的頁(yè)面。

• 用它寫文檔，不做原型

寫到這是因?yàn)橹澳瞧锾岬?/p>

之所以用這個(gè)就是為了給開(kāi)發(fā)和寫文檔，很多標(biāo)注和邏輯流程，沒(méi)必要做出交互。所以不考慮用它做交互，你真都做成交互了，難道還要工程師挨個(gè)點(diǎn)開(kāi)才能看到邏輯？

引出的@胡點(diǎn) 的討論

為什么不要做成交互呢？

我覺(jué)得是這樣的，這時(shí)候所有需要交互或者動(dòng)畫的部分，都應(yīng)該用邏輯語(yǔ)言說(shuō)清楚。

前面才是給工程師演示，現(xiàn)在是為了描述邏輯。

“滑動(dòng)到畫面20%觸發(fā)什么事件”“30%是什么狀態(tài)”“50%以上發(fā)生什么”，并用流程圖描述交互或動(dòng)畫的狀態(tài)。這樣工程師在寫代碼的時(shí)候就可以根據(jù)這個(gè)邏輯來(lái)處理，包括網(wǎng)絡(luò)狀態(tài)的判斷。

所有跳轉(zhuǎn)，層級(jí)，頁(yè)面關(guān)系全部平鋪開(kāi)，對(duì)他的布局和構(gòu)建都有幫助。通過(guò)a直接做出按鈕，跳轉(zhuǎn)，隱藏等形式，容易被工程師忽略，他們又不是測(cè)試，怎么會(huì)一個(gè)個(gè)按鈕去點(diǎn)開(kāi)看看什么狀態(tài)。文檔還是邏輯為主，遇到問(wèn)題有依據(jù)。

交互原型主要有兩個(gè)功能，1是早期快速出來(lái)，給工程師和設(shè)計(jì)師展示思路，有個(gè)大概認(rèn)識(shí)。2是后期校對(duì)UI時(shí)測(cè)試用戶體驗(yàn)。并不能取代文檔的功能。

• Mac打包

最后涉及到共享了，你用A生成了HTML包，需要傳給團(tuán)隊(duì)同事一起看了。用mac直接壓縮會(huì)有亂碼，這樣誰(shuí)都看不懂了。用軟件太麻煩，這個(gè)我也問(wèn)了團(tuán)隊(duì)技術(shù)大牛，mac終端一句命令搞定

• 具體用法：
• cd到 壓縮文件要放到的文件夾去。或者輸入
  cd
  然后拖曳要文件夾到終端窗口

   cd /Users/li/sportsipad/docs/UE/ 

• 輸入，doc是為打包文件取的名字

   tar -cvf doc.tar 

• 后面直接把要打包的文件夾拖拽到終端窗口，就好了

   tar -cvf doc.tar /Users/li/Dropbox/

• 這個(gè)不是壓縮，只是打包而已。用tar cavf xxxx.tar.gz … 就能壓縮了

詳細(xì)內(nèi)容：mac壓縮文件兼容win及terminal使用技巧摘錄

• 內(nèi)網(wǎng)分享

要用到python

（假設(shè)我們需要共享我們的目錄也就是Axure生成的那個(gè)html文件夾 /axure/home 而IP地址是192.168.1.1）

cd /axure/home
python -m SimpleHTTPServer

這就行了，而我們的HTTP服務(wù)在8000號(hào)端口上偵聽(tīng)。你會(huì)得到下面的信息：

Serving HTTP on 0.0.0.0 port 8000 ...

你可以打開(kāi)你的瀏覽器（IE或Firefox），然后輸入下面的URL：

http://192.168.1.1:8000

就會(huì)自動(dòng)識(shí)別到index.html，然后目錄列表就會(huì)顯示出來(lái)。

前提是別人看的時(shí)候你不要關(guān)機(jī)……

• Mac智能文件夾

最后因?yàn)榇蠹襯p文件ui文件各種文件傳來(lái)傳去，就算都標(biāo)注版本日期也還是很亂，是的我們有svn但是都懶得用……

沒(méi)關(guān)系用好mac的智能文件夾

圖里都說(shuō)清楚了。還可以把這個(gè)文件夾的預(yù)覽模式放大，直接在文件夾里就可以預(yù)覽圖片了。對(duì)了批量選擇然后按一下空格，就可以用方向鍵瀏覽圖片這個(gè)大家都知道吧，我是很久后才知道……

自此Axure相關(guān)的我就用到這么多了。

調(diào)整UIPSPlay

以下內(nèi)容可能會(huì)引起設(shè)計(jì)師或?qū)е履阋鹪O(shè)計(jì)師的不滿，謹(jǐn)慎使用。

ps連移動(dòng)設(shè)備，實(shí)時(shí)同步預(yù)覽psd。你可以自己從設(shè)計(jì)那里要來(lái)psd，也可以直接同步他的ps。無(wú)論怎樣都要謹(jǐn)慎啊……

特點(diǎn)是可以通過(guò)ip連接，比如我們公司移動(dòng)設(shè)備和電腦的無(wú)線是兩個(gè)，很多同步軟件都瞎了。

動(dòng)畫原型 Quartz Composer & PS時(shí)間線

這就不再贅述了，這里都有。

Facebook Paper的動(dòng)畫原型制作工具Origami及實(shí)現(xiàn)代碼Pop

項(xiàng)目管理OmniPlan

生成資源圖甘特圖，控制進(jìn)度。很復(fù)雜，我就用了很簡(jiǎn)單的功能。

共享文件Airdrop

iOS7很棒的功能，尤其是和設(shè)計(jì)師比稿在一個(gè)房間里，批量選擇圖片群發(fā)，瞬間全同步。記得在照片里調(diào)出airdrop然后開(kāi)放給全部人即可。

注意?不支持iOS和Mac之間傳輸，所以就有了后面的DeskConnect

為什么 iOS 7 和 OS X 之間的 AirDrop 不能互傳？

文件備份Dropbox

鑒于保密和我們的網(wǎng)速問(wèn)題，Dropbox作為團(tuán)隊(duì)同步盤還是不太現(xiàn)實(shí)。但是作為個(gè)人工作文檔的同步備份還是很不錯(cuò)的，尤其是這個(gè)

可以查看早期版本，很實(shí)用。

接口文檔Mou + Markdown + 邊欄

情況是這樣的，工程師在處理api的時(shí)候需要寫文檔，需要用markdown生成錨點(diǎn)和側(cè)邊欄，經(jīng)過(guò)一番折騰，解決方案如下：

這種側(cè)邊欄式的布局最適合寫文檔看目錄用，很快就找到這個(gè)

用js實(shí)現(xiàn)的側(cè)邊欄布局markdown，還能自動(dòng)編號(hào)

我為了減少一點(diǎn)復(fù)雜程度，剃掉了其他的東西就保留了js，重新弄了一下。

精簡(jiǎn)版代碼

正文寫到[article]里就好了。

后期：測(cè)試

Mac&iOS同步DeskConnect

這時(shí)UI已經(jīng)差不多了，需要頻繁的更新在手機(jī)上查看或者在放到電腦上標(biāo)注修改的地方，頻繁傳輸就需要一個(gè)最簡(jiǎn)單的通道。

DeskConnect-真正的實(shí)現(xiàn)快速簡(jiǎn)單在Mac和iOS傳文件

功能遠(yuǎn)不止傳個(gè)照片那么簡(jiǎn)單，具體訪問(wèn)官網(wǎng)吧

deskconnect.com

下面簡(jiǎn)單說(shuō)下怎么用，因?yàn)榇_實(shí)很簡(jiǎn)單，首先你注冊(cè)賬戶好了之后，就會(huì)看到所有登陸的設(shè)備

可以傳剪貼板或者直接拖照片過(guò)來(lái)

然后看到最近的文件，文件保存30天。

簡(jiǎn)單設(shè)置一下，有個(gè)直接打開(kāi)的很不錯(cuò)，基本就是非常非?？炝?。

非常滿意！最關(guān)鍵的，全部免費(fèi)，免費(fèi)！

mac下載地址

iOS下載地址

• 看到所有圖的小技巧

另外，它只是可以快速預(yù)覽，但是它會(huì)保存30天，那么怎么一次都看到這些文件呢？

打開(kāi)這個(gè)目錄

/Users/XXX/Library/Containers/com.deskconnect.mac/Data/Library/Application Support

XXX為你的用戶名

放到側(cè)邊欄吧

圖標(biāo)測(cè)試Icon Striker

icon也是可以很輕量很適合大家同時(shí)查看的。

純html實(shí)現(xiàn) 直接進(jìn)網(wǎng)頁(yè)連接https://www.flinto.com/strike

Icon Strike+DeskConnect實(shí)現(xiàn)快速查看

• 拖動(dòng)圖標(biāo)到框里

• 可以通過(guò)郵件，短信和手工復(fù)制連接的方式，把生成的連接發(fā)到手機(jī)上

• 復(fù)制連接

• 發(fā)送到DeskConnect上的設(shè)備中。關(guān)于DeskConnect請(qǐng)看這里

DeskConnect-真正的實(shí)現(xiàn)快速簡(jiǎn)單在Mac和iOS傳文件

下面操作在iPhone或iPad上實(shí)現(xiàn)

• 打開(kāi)連接，點(diǎn)擊按鈕

• 添加到主屏

• 還可以改個(gè)名字

體驗(yàn)測(cè)試Tapcase

前面提到過(guò)了，用UI再導(dǎo)入一次，走一遍流程就好了。

BUG標(biāo)注圈點(diǎn)

手機(jī)上直接標(biāo)注或者mac上標(biāo)注bug就可以了。

史上最大稿寫完了，算是對(duì)自己最近工作的一個(gè)回顧，很多都是解決了小問(wèn)題。解決的小問(wèn)題積少成多，也可以提升很多效率。

但是回到最初，思路和技術(shù)還是基礎(chǔ)。

最后希望我們的即將更新和亮相的兩個(gè)產(chǎn)品一切順利大殺四方！

再匯總小結(jié)一下

文中提到的產(chǎn)品全生命周期如下：

早期：規(guī)劃

前期：溝通

中期：文檔

后期：測(cè)試

17個(gè)工具為：

早期：規(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時(shí)間線，10、OmniPlan，11、Airdrop，12、Dropbox，13、Mou + Markdown + 邊欄

后期：測(cè)試

14、Mac&iOS同步DeskConnect，15、Icon Striker，16、Icon Strike+DeskConnect，17、印象筆記·圈點(diǎn)