一個網站的製作流程，基本劃分就會專案接洽、網站企劃、視覺設計、前端工程、後端工程與測試上線這幾個環節，而在各個環節裡又會使用不同的工具，雖然可以找到在介紹前端的工具，或是介紹企劃的工具，但是將每個環節所需要的工具整理在一起的文章我個是還蠻少見的，喜歡實驗新工具的我而常常裝了一堆東西或註冊一堆東西之後，發現沒有推薦文章來的好用就刪除了，經過了這麼多年，以下就來介紹我還裝在我的mac上或是實際上我們公司有在使用的工具吧！
專案接洽
在這個環節裡主要是一些文書處理軟體，比方說Word、excel、Power Point或Page、Numbers、Keynote，除了這些常備文書軟體外，我們公司還有用：
Redmine - 專案管理系統，是免費的Open Source，可以分派問派、追蹤問題處理進度，並且可以統整文件與檔案，對專案進度頗重要的甘特圖也有內建功能對應，對我們公司的工作流程來說非常重要的，就連薪資我都是用這個做記錄。
OmniPlan - 這是我個人最近再用的單機專案管理軟體，Mac only。我會用它的主因是為了他的甘特圖，建立快速而且乾淨、清楚，但除此之外的其他功能我都沒在用，所以其實有點殺雞用牛刀的感覺。使用頻率不高，除非我要畫甘特圖，不然幾乎用不到。
網站企劃
Xmind - 對於資料整理、腦力激盪來說，我覺得
Xmind真的非常有用，他可以用看似零散其實很有條理的mind map把資料整理起來，透過這樣整理的過程資料就可以變成有用的資訊，也可以讓我們比較全觀的看整個專案或是某個想法，可以避免見樹不見林的情況，而除了全觀以外，也可以細看某一個分支想法的細節，真的是可以讓你見樹又見林啊！mind map 這東西我從高中就開始使用了，還記得是某節輔導課輔導老師教的，要我們用mind map來表達我自己，我大概就是從這個時候開始才認為自己想走資訊吧，之後因為我很不會唸書，更不會背書，我就異想天開的想說不知道mind map能不能拿來背書......沒想到真的可以，成績也一路從吊車尾變成拿獎學金，厲害吧！還不趕快試試看用免費版本的
Xmind來畫mind map！免費版其實就很夠用了，要付費也很ok喔！
Balsamiq Mockups - 這是一個網站很醜、軟體介面很醜，但是對於不會設計軟體的專案或企劃來說，非常容易上手的原型企劃工具，只要拖拉三兩下就可以完成一頁的企劃，缺點是他無法設定連結，所以我只有要做三個頁面以下或想快速表達我的想法時才會使用它，算是對專案溝通上非常便利的一個工具。
Mockplus - 這其實像是
Balsamiq Mockups 的加強版，是對岸同胞製造的，有免費與付費版本，因為是對岸製造，所以對英文充滿障礙的朋友們就可以使用這個了，不但網站比較好看、軟體介面也比較好看，使用上手程度其實是差不多的，不過我個人使用的頻率比
Balsamiq Mockups 低很多，原因在於
Mockplus的功能強很多。
Axure rp - 我印象中我是從4.0版本開始用起，現在已經到8.0了，對於RWD響應式網站的繪製更加的便利、成熟、好用，不管是新手還是老手都可以用得非常開心，是用來建立wireframe的好幫手，我們家也是使用
Axure rp 來建立wireframe與客戶核對規格、資料與功能，並且再透過wireframe與內部人員溝通，由於已經有畫面與資料，所以在內部溝通上問題就減少了很多，不用依靠彼此的想像來做討論，可以減少彼此誤會而產生糾紛的情況，一路用下來真的都很不錯！有些人可能會覺得用
Axure rp 產出的html又不能延續使用，所以直接請前端來做wireframe不就好了，但是對我來說wireframe其實就像大樓建造時的藍圖，藍圖在討論過程中修修改改的，你總不能叫工程師直接來做吧？這樣工程師光處理這些不確定是否真的是修改的修改就可以忙到吐血了，怎麼集中火力做出品質好的前端？而且我們家人力非常精簡，所以這種算是核對內容的任務就該由專案或企劃來完成，讓工程師就專心在實際開發上，心無旁騖才能做得更好。但是如果今天是做擬真一點的prototype那我就會覺得可以由前端工程師來協助，原因在於prototype通常都很接近最後實際的成品，中間修改的服務不會像wireframe這麼大，對相較之下對於前端工程師的負擔就不會這麼重，也不會過於繁瑣。
視覺設計
photoshop - 這應該不用介紹了，我想做設計的不知道ps應該不算會設計吧？不過嚴格來說這是拿來修圖、修照片用的，不太適合拿來做網站。
illustrator - 我想這也是不需要介紹，因為這跟上一樣都是adobe出的，只是這個是向量軟體，對於RWD響應式網站來說還算是ok的設計軟體。
Sketchup app - 噢！這個軟體真的是太酷了，簡單、易學、好上手，最重要的是拿來做響應式網頁設計非常的方便，而且可以直接輸出@2x跟@3x的圖，一次還可以輸出多種格式，我現在偶而還會拿來畫圖，真的是好用得不得了！如果我還有更多空閒時間，我應該會一直跟它溺在一起吧！如果滿分五顆星，它應該是給五顆都不夠那種，沒試過的設計師一定要試試看！
marvel - 跟
invision差不多的prototype webapp服務
invision便宜，主要拿來與客戶過視覺設計使用，客戶可以直接在設計稿上標註留言，加快視覺提案修改與討論的進度。
前端/後端工程
Sublime Text - 前後端開發我都用它，因為他真的是神兵利器來著，好用的不得了！連我們家不會寫code的專案也都在用，因為真的很好用啊！順便介紹一些好用的plugin！
- Afterglow - 這是我目前在用的theme，不過我有做一些微調，有一些地方我覺得間距太高或太大，所以我有調整小一點，不過整體來說看起來還蠻清爽的。
- Emmet for Sublime Text - zen coding的新名字Emmet！簡單來說就是用一些簡碼來幫助你快速打html與css，一開始可能會覺得不太習慣，還要記點東西才會用，可是用久了之後其實會發現不太需要記什麼東西，自然而然就很上手了，而且coding速度會快很多！
- Gist - 很多前端或後端會把常用的code記錄下來，有些人會用單機軟體，我則是用Github的Gist，透過這個套件可以快速把片段的code插入當前頁面裡，還不錯用，但是我改用jade之後我就很少用到了。
Sourcetree - 有介面的git工具，也可以搭配
bitbucket使用。git的使用在中大型專案上顯得格外重要，尤其是多方協作的時候，很容易發生覆蓋或回朔的問題，有了git做版本紀錄後，誰誰誰蓋到code或誰誰誰搞錯檔案都很清楚，可以減少很多溝通上的誤會，也能快速讓所有的程式碼復原。
SvnX - 有介面的免費svn工具，如果不知道svn是什麼，其實svn跟git差不多，也是版本控管工具。
Prepros - 這是一個多功能的工具，他可以協助編譯Less、Sass、Compass、Stylus，也可以協助編譯Jade template、Haml、coffeescript等等，不管是壓縮檔案、圖片或是Live reload、FTP等功能，都非常好用。我目前都是過
Prepros來處理CSS與使用Jade template和Live reload，非常方便，免費版會一直跳出贊助訊息，但是不影響使用，如果有能力贊助可以考慮一下。
imageoptim - 這是一個mac only的圖片壓縮程式，一般前端在處理圖片的時候，大部分還是會用photoshop來處理，可是photoshop在圖片縮的功能上奇差無比，同樣一張jpg的檔案大小有可能會差到50%，所以通常在上線之前，我會在用
imageoptim壓縮所有的圖片，以減少網站loading。
filezilla - 我目前在使用的ftp，應該很多人也都使用這套，我會設定好FTP站台，然後匯出，讓客戶直接匯入
filezilla使用，客戶只要點兩下就可以連上空間了。
主機/測試上線
除了一般LAMP系列（Linux、Apache、Mysql、php）以外，我有時還會安裝一些其他的東西來輔助我管理主機。
AWStats - 老牌免費的log分析，一般主機安裝完後都會有文字的log分析，但是因為打開就只會看到一多字，所以除非有什麼問題，不然其實很少會使用，但是安裝
AWStats之後，log資料就會變得很簡單易懂，所以就清楚的可以看到流量、網友使用環境等等，讓log資料效益提高。
GoAccess - 跟
AWStats一樣是log分析使用的，近期我比較喜歡用這一套，介面看起來比較新穎，比較適合我，我對介面好像跟好用其實還蠻注重的，不過功能來說其實跟
AWStats差不多，安裝上來說，我覺得比
AWStats簡單一點。
ApacheBench - 這是Apache附帶的一個主機壓力測試軟體，簡稱AB，主要是針對Apache主機效能做檢測，像是每秒可以送出多少request，除了Apache主機以外，像是lighttpd或是IIS主機也都可以使用。
Apache JMeter - 也是Apache的產品，採用Java開發，也是用來測試主機效能用的，這套應該會比AB詳細一點，不過我每次測試都只是大概看一下，所以我兩套都會用，交叉測試，雖然結果總是差不多就是了。
virtualbox - 虛擬機、模擬器，用來建立各種測試環境用的，我主要拿來跑windows OS用的，原因是有些客戶一定會用windows only的設定，導致我用mac無法使用，所以通常只有需要用windows的時候我才會使用。
MAMP - Mac軟體，類似xampp，是可以快速在本機端架起php使用環境的軟體，還蠻好用的。
其他
silverback - Mac專屬的UX使用軟體，主要就是螢幕錄影還有使用者臉部錄影，目前2.0已經可以免費使用，3.0還沒推出，持續等待新版推出中。
textnut - markdown文字編輯器，目前我是拿來寫部落格文章使用，但是圖片沒有辦法一起上傳到blog裡，所以還在尋找其他不錯的解決的方，但是拿來寫文章還不錯用。
以上就是我目前對於網站專案來說比較常用到的軟體工具，比較可惜的是有些是mac only，不是跨平台，不過應該還是找得到類似的軟體可以替代，希望這一篇對那些也想學得很複雜的朋友們有所幫助喔！
留言
張貼留言