50個必備的網頁設計工具

Web Designer

作為一個網頁設計師，有一個有效的、組織良好的工作流程十分重要。而其中的訣竅在于選擇一個合適的工具。因此，我們匯總了50 個工具，使設計師能夠更輕松地開始網頁設計之旅。

設計網頁不僅僅是繪出美麗的圖畫。作為一名網頁設計師，你會發現50%的時間都用在了策劃、測試和推廣方面，文書工作更是占了大量的時間。這份工作大多需要多方面的技能，但是如果你遠離自己熱愛的工作而去執行你不喜歡的任務，那真是讓人非常沮喪。令人欣慰的是，有一個可以削弱這種影響的簡單方法，并且你今天就可以開始。

擁有一個高效的，有序的工作流程對任何工作來說都至關重要，網頁設計更是如此。網頁設計師的工作內容涉及很多方面：你可能這一分鐘在制作網頁的線框，下一分鐘又可能在測試一個完全不同的網站。這些重要的工作便將一系列程序添加到網頁設計和發展當中。當然需要做的還有策劃、開發、推廣，但最重要的部分還是設計本身。

為工作找到適合的工具

想要完成一個網站，還有更多的工作需要完成。有一套非常高效的工具來幫助你節省時間和精力將會非常有用。請記住，你花費越多的時間來優化工作流程和減少不必要的體力勞動，你就會有更多的時間來設計出色的網站。

明智的選擇你的工具

你的工具越好，你就可以把更多的時間放在設計上，這就為穩健的設計提供了穩定的框架和基礎。而難點就在于我們擁有這么多不同的工具和服務，如果想要保持更新各種選項，那么這將會是一個很大的雷區。你需要正確選擇一系列節省時間和精力的工具。這就是為什么我們搜集了50種對網頁設計師來說最好的工具。它將會在5個重要方面幫助你：策劃、設計、開發，測試和推廣。

在我們的列表中，我們有原尺寸的桌面工具、在線選項、網絡服務、框架和工具。它們的共同特點就是能夠幫助你節省寶貴的時間，確保最好的結果。如果在你的工作流程中使用這些工具，那么它們將形成一個完整的套件來幫助你建立一個優秀的網站。

Part 1 策劃

通過選擇合適的規劃和線框圖制作工具，讓你的網頁設計有一個好的開始。

DROPBOX

www.dropbox.com

Dropbox是跨越不同設備來分享和備份文件的一種簡單方式，它可以擴展你的硬盤驅動器，在電腦和設備之間提供基于云的儲存和自動同步功能。作為協作工具，它可以允許不同用戶之間的文件共享。其基礎版本完全可以免費使用，但你必須支付額外的儲存，還可以通過和非網絡隨身儲存的用戶一起分享，并且把這種服務推薦給你的朋友和同事，從而慢慢建立自己的空閑儲存區。

DIA

www.live.gnome.org/Dia

DIA是一款用來生成圖表的免費桌面工具，在Windows、Mac OS和Linux操作系統上都有相應的版本。它和微軟的Visio大致相同，可以提供不同的方法來完成實體聯系圖，同時在開始設計和編寫網站之前，提供很好的籌劃方法。它可以用創建圖表的方式提供一個大型圖書館的預構建的形狀。通過使用SVG和XML來生成自己的圖表，并且讓其適合任何工作流程和顯示風格。

MOQUPS

www.moqups.com

MOQUPS是一款非常棒的免費網絡框架工具，它可以幫你創建互動模型，與你的同事以及客戶分享。

完成模型可以導出PDF和PNG格式，因此很容易把你的線框包括進你的項目文件中。關鍵是在瀏覽器中運作的整個系統中使用了HTML5，一系列設備都可以使用。這對于每天早上上班的網頁設計師來說是一個理想的選擇。

BASECAMP

www.basecamp.com

Basecamp是一個在線項目管理系統，它提供內置的用戶控制和管理功能。該系統提供代辦事項列表、討論地區、資產存儲和共享日歷。Basecamp是一組在線應用程序的一部分，它包括Highrise、Backpack和Campfire。它們一起構成了一個完整的項目管理工具。每月只要30美元，你就可以計劃和管理多達15個并行工程。

YUUGUU

www.yuuguu.com

Yuuguu是一個屏幕分享和桌面協作工具，它讓你快速看到你同事桌面上的東西，進行交互展示，舉行網絡會議。這個服務融合了你現有的軟件并且不需要下載插件。這樣你就可以舉行網絡會議，就像每個人都坐在同一個房間。價格是69美元每年，會議次數不限，功能包括屏幕分享、網絡會議以及音頻電話服務。

Part 2 測試

人們常常忽略測試，但是它是網頁設計項目中最重要的環節，因為它可以確保設計師的設計成果是否能夠在現實情況下得到合理的應用。

Firebug

www.getfirebug.com

Firebug基于火狐瀏覽器平臺，并支持所有的主流瀏覽器版本。Friebug可以讓你和DOM中的成分直接互動，中斷和放置代碼，并且覆蓋在頁面的CSS環境下。這種把工具、網絡分析和控制臺結合起來的方式，使它成為開發者測試和評估自己網頁的必備工具。對于查看其他的開發者如何實現一些特質技巧方面非常有幫助。它可以運用到整個開發過程當中，而不僅僅是在測試階段。

SAUCELABS

www.saucelabs.com

在多種瀏覽器中進行測試對于網絡設計師來說很有必要。眾所周知，不同的網頁瀏覽器產生不同的結果。SauceLabs提供了一套解決方案，這種付費服務讓你完全測試兩個視覺呈現和交互元素的設計頁面的同時，不用刻意維護你自己的測試平臺。這里有免費可用的選項，可以給你一個簡單的瀏覽器截圖，SauceLabs的產品會更進一步地允許你查看每個測試的視頻會話。

W3C VALIDATORS

www.w3.org/2013/validatorsuite/beta/

W3C是負責網頁標準的發展和維持的機構，包括HTML5和CSS3，它提供了各種各樣的驗證工具，可以用來測試用戶制作代碼的有效性。雖然這可能看起來隨意，并不一定反映了一個特定的瀏覽器頁面呈現方式，努力朝著符合標準的代碼來確保未來的兼容性是非常重要的。W3C為HTML5和CSS3代碼驗證做好保障，目前所有的驗證器套件都在進行Beta測試，不久就可以迎來正式版。

響應設計測試

www.mattkersley.com/responsive

隨著網頁用戶界面設計朝著響應方式發展，一系列的測試工具開發出來了，其中簡單有效的工具當屬Matt Kersley網站。進入URL，你就可以測試，頁面產生的內容會模仿不同平臺的屏幕，通過比較工具里的頁面布局和測試，你的響應設計方法就有可能奏效，并且不需要和其他更深層次的工具聯系起來。

JSLINT

www.jslint.com

JSLINT是一種JavaScript測試以及優化平臺，可以讓你進行平穩測試并對腳本進行評估，輸出信息會顯示你的JavaScript哪里出了問題，并且提供指示器幫你解決問題。JSLINT會在檢測過程中發現在瀏覽器當中運行良好的代碼，并將其保存，在之后的使用中會對這種方式進行推廣，確保用戶寫出的代碼更緊湊，并得到更好的優化。

Part 3 設計

讓你的設計工作流程速度加快并且更有效率，用下面這些重要工具來幫你完成設計工作吧。

ADOBE DREAMWEAVER CS6

www.wordpress.org

Dreamweaver是Adobe創意組件的一部分，它包括一個完整的設計和發展環境，可以讓你創建網站代碼或者設計新的網頁。整合服務器端和客戶端語言預覽和測試，并直接從編輯器實現先進的用戶交互。它最好的價值來自于創造性的云服務。每月花費46.88英鎊（約合430元人民幣）就會得到Adobe的其它工具，包括Phootoshop、Illustrator以及Muse、Typekit等等。

WORDPRESS

www.wordpress.org

Wordpress最開始是為了博客平臺創建博客并且把你的觀點分享給世界而設計的，但是最近已經發展成熟，成為完全為創建和管理內容而制定、擴展的解決方案，它包括通過使用插件管理音頻和視頻內容，使得它成為網站管理和調配的領頭兵。許多有活力的開發者開發了成千上萬相關的插件，有免費的和商業的，包括電子商務、電子學習、門戶網站，以及其他一些應用程序。

GOOGLE DOCS

www.docs.google.com

Google DOCS是一種基于云計算的免費產品，可以代替微軟的Word和Excel，在調配到你的網站之前提供一個很好的儲存空間。運用WYSIWYG就可以在一個瀏覽器頁面展示，它同時也是不同用戶之間協作的理想的選擇，允許所有方都來觀看內容，同時做出調整。它可以付費升級，但最基礎的版本是免費的。

INKSCAPE

www.Inkscape.org

Inkscape是一種開放的可縮放矢量圖形（SVG）編輯器，為創造網站模型提供理想的環境。這種工具箱和Adobe的繪畫包相似。Inkscape創建的矢量圖形適合網頁的快速響應，軟件有對應Windows系統和Mac系統的版本。

FLEZILLA

www.filezilla.project.org

FileZilla 是一種開放的FTP客戶資源，它運用于Windows、Mac和Linux。盡管它是免費的，你會發現它的所有標準和商業中的是一樣的，包括FTP、FTP超過SSL/TLS、SSH。連接UogongnengFTP服務器之后，你可以很容易地創建連接快捷方式。對于網頁設計師來說，FTP是非常重要的工序，而FileZILLA在這方面會提供較好的服務。

WEB FONT SPECIMEN

www.webfontspecimen.com

這種免費服務會讓你預覽網頁上的字體，包括有一系列行距和字體大小的段落，還有標題和字體樣式，這使得瀏覽器上的頁面字體變得更加準確和理想。

BOOTSTRAP

www.twitter.github.com/bootstrap/

這種快速的應用發展工具會節省你很多時間。它會為你提供樣板文件包括JavaScript.CSS和優化不同設備工作的響應代碼標記，包括平板電腦和智能手機，而不需要手動操作集合和垂直所有能成為豐富應用和網站工作的典型代碼，以及一些能夠提供出發點的有效的模板。它包括一個網站系統和排版導向功能，以及高級Javascript部件CSS組成部分。

HandBrake

www.Handbrake.fr

HandBrake讓設計師迅速轉化視頻，并且這個服務是免費的。在你添加工作之前，僅僅需要選擇一個硬盤驅動和輸出設置，包括正常的網絡選項。選擇同樣的文件最后導出不同的格式，快捷而不繁瑣。

Magento

www.magentocommerce.com

雖然Magento對一般用戶來講比較復雜和難學，但它仍為構建企業的網上購物平臺提供了極高的靈活性，并且可靠又安全。其特點包括，為構建多線上購物平臺、多種產品類型和幾百個支付服務提供商的系統提供支持。

GOOGLE WEB FONTS

www.google.com/fonts

如同其他的服務器一樣，谷歌的頁面字體在已經過去的幾年發展起來，成為一個可以取代網頁安全字體的可靠替代物。這種舊式字體讓許多網站看起來趨于同化。它包括624中免費使用的字體——其安裝程序也非常簡單。把他們運用到你的網站上很零散，所有的字體也不盡相同，但是商業用途的確一樣的。每一個網頁設計師都需要把谷歌免費提供的字體收藏在工具箱中。

Part 4 樣式

讓你的設計工作流程速度加快并且更有效率，用下面這些重要工具來幫你完成設計工作吧。

ADOBE KULER

www.kuler.adobe.com

Adobe提供了一種瀏覽網頁并為其選擇色系的方法。那就是Adobe Kuler它包括上傳圖片和提供顏色樣本功能，而且該應用整合到標準的Adobe設計工具中，從而減少了工作流程。

LAYER STYLES

www.layerstyle.org

Layer Styles是一種非常簡單的網絡工具，它就像Photoshop的版面樣式工具箱。但是它沒有在Photoshop里面產生面板樣式。而是借助于CSS3代碼。你可以運用到你的網站上，并且不需要注冊——只是當你想要的時候把它標記出來然后就可以訪問了，它會產生視覺上的版面樣式代碼。

ALOHA EDITOR

www.Aloha-editor.org

Aloha是一種兼容HTML5即視即所得（WYSIWYG）編輯器。這種編輯器可以跨瀏覽器工作，可以從用戶輸入信息產生標注你的HTML代碼。通過可控組用戶選擇屬性，搜集豐富的用戶輸入信息，并且不會出現混亂無用的代碼以及跨度較大的代碼，而這往往就是老WYSIWYG編輯器往往產生的。

SPRITEBOX

www.spritebox.net

這種簡單的在線應用程序可以上傳CSS 樣式表貼圖定位，并且在上面畫線，以界定將用于CSS的不同區域。然后，該工具輸出CSS代碼并與所在區域進行匹配，從而簡化這個產生清晰畫面布局的過程。

SPLASHUP

www.splashup.com

Splashup是一種基于瀏覽器的免費圖像編輯器，它可以讓你的電腦在不安裝任何軟件的情況下產生位映像圖形。這種應用軟件融合了一些在線照相網址，包括Picasa 和flickr，并且提供與Photoshop類似的工具，可以免費下載。

Part 5 開發

獲得這些現成工具、語言和框架可以讓你的開發進程運行得更順利。

JUICER

www.Bit.ly/xDXhW

這個命令行工具可以把JavaScript和CCS文件進行組合、合并和優化，減少你對網頁的依賴性，加快載入時間。最關鍵的一點在于，它讓你繼續用獨立文件來進行開發，依照你的喜好將不同邏輯和水平的表現區分開來。重要的是最后它只會輸出一個單獨的CCS文件或者JS文件。

ANIMATE.CSS

www.daneden.me/animate/

Animate.CSS是一個使用標準CSS3規格，進行完全渲染的預置CSS動畫庫，它可以在任何支持CSS3的瀏覽器上工作。

VIDEO JS

www.Videojs.com

使用標準代碼可以給你的個人網站創造視頻元素，Video JS庫會自動使用Adobe Flash，為不支持HTML5的瀏覽器生成后備代碼。即使瀏覽器不支持你的視頻解碼，這些后備代碼也可以使用，這樣就使用H264渲染HTML5的視頻，但這些解碼不可用的時候會回到Flash。

CAKEPHP

www.Cakephp.org

這是快速應用程序開發的一款軟件，它為服務器端開發提供基礎，你不需要抓狂于創造所有的標準通道。對數據庫存取、確認、認證和轉化都提供支持。還有一系列樣板“腳手架”，它可以幫助你快速開發應用原型，你不再需要擔心如何架構系統。

HTML5 BOILERPLATE

www.html5boilerplate.com

這個簡單的模版可以讓你快速開發一個HTML5使用的網頁設計。它還為響應布局、智能手機觸摸圖標和谷歌分析提供預建支持。除此之外還附帶有快速應用程序開發最通用的庫——包括jQuery、Modernizr和Normalize.css。對于任何新的HTML5工程都是一個理想的開始，它可以省下你許多時間。

JQUERY

www.jQuery.com

jQuery是一個JavaScript框架和庫，它宣告了富用戶界面的到來，而且是網頁中不需要插件的高級用戶交互。

它讓創造動畫、確認和使用最少代碼的UI控制變得簡單。

同樣非常功利的是它還對提取不同瀏覽器實現JavaScript和DOM的差別進行提取，使得它自身運行得更快。

GIT

www.git-scm.com

Git是一個免費、開源的分布式版本控制系統，你可以用它控制你的網頁資產。它支持本地分支，分階段和部署。當和線上資源庫GitHub進行組合時，Git提供了一個特別可靠和有效的方法來注意代碼變化、控制通路和出版。許多的設計者從來不操心分布板式控制，但是如果你發現你自己儲存的文件都是用version2finalr3這樣的名字，你就會立刻感受到Git控制帶來的益處。

SENCHA TOUCH

www.sencha.com/products/touch

它可以幫助你開發移動優化網站，這樣讓你的網站看起來就像App一樣。

Sencha Touch提供了一個完全的開發環境——包括對智能手機的支持——這里只列出了觸摸屏和加速計。

雖然它使用特定的方法來生成視圖，還要求對于JavaScript要有充分的理解，但是它依舊是一個功能強大的平臺。

THREE.JS

www.Mrdoob.github.com/three.js/

網頁中的高級3D可視化渲染，如果使用three.js這樣的庫就會快很多也會容易很多。這個功能強大的框架可以處理更復雜的WebGL語言，讓網頁可以使用相機、燈光和基本形狀直接生成由簡單到復雜的3D畫面。它還可以在不同的設備和渲染引擎上使用。

CHART.JS

www.chartjs.org

在瀏覽器內生成圖表已經變得越來越重要了，使用實時數據資源進行解讀，并用視覺方式展示數據相比其他的資源庫。Chart.js可以在網頁開發中通過提供結構框架來開發富界面圖表，讓開發過程變得更加簡單和易上手。

Part 6 代碼

獲得這些現成工具、語言和框架可以讓你的開發進程運行得更順利。

ECSSTENDER

www.ecsstender.org

eCSStender是一個非常便利的工具，它允許你單獨編寫一段符合CSS標準的代碼，而不用去擔心前綴、瀏覽器特定解決方案和技巧問題。eCSStender會自動拓展你的代碼，讓你的代碼可以適應不同瀏覽器的特點。

COFFEESCRIPT

www.Jashkenas.github.com/coffee-script/

CoffeeScript是JavaScript中一種解釋語言。CoffeeScript編寫復雜程序時更輕松快捷，你不需要處理JavaScript中罕見的語法。它為快速應用功能開發提供了一個更好的方式，從此以后你不會再被代碼本身所困。

GRID

www.Hashgrid.com

在你需要給網頁鑲入一個布局網格時，#grid會是一個很方便的工具。它允許你創建一個像素完美的布局，并且在不同瀏覽器上進行測試。只需要一個鍵盤快捷鍵進行激活，jQuery插件會自動適應你的首選網格大小，其中還包括了槽和多列。

PRIMER

www.primercss.com

這個簡單又優雅的小工具將你的HTML粘貼到一個空的CSS樣式表中，給你提供一個視覺效果的準備。把標記復制和粘貼到屏幕上的框里面，Primer會輸出一組空白的CSS節點。這些節點是基于IDs并由你的HTML進行分類，并準備應用在相關類型中。這軟件適合那些喜歡編寫他們網站的代碼結構，然后應用相關類型的設計師。

JS BIN

www.Jsbin.com

JS Bin是在線JavaScript、HTML、CSS的開發和測試包，它幫助你快速地開發圓形和功能。你不再需要一般的標準標記，或者手動下載庫。它幫助你保存原型，并把原型轉換成許多的格式，然后可以在不同的庫中使用。你所需要做的只是點擊你的鼠標。

Part 7 應用程序

讓你的設計工作流程速度加快并且更有效率，用下面這些重要工具來幫你完成設計工作吧。

ADOBE AIR

www.adobe.com/products/air.html

Adobe Integrated Runtime（AIR）允許開發者打包為標準網頁技術編寫本地應用程序，讓使用者可以在不同的設備中使用，包括Windows、Mac安卓APP市場、Kindle、iPhone和iPad。這讓網頁設計者可以使用現有的技術來創造復雜的電腦和手機應用程序，同時讓設計者不需要再培訓即可進入新的收入流并賣出機遇。

EVERNOTE

www.evernote.com

Evernote是一個在線剪貼簿服務。你可以用它儲存、注釋和檢索廣泛資源中的一個片段。當你研究一個特定工程的時候，這是一個理想的計劃和準備工具。但是它也是在網頁設計和開發階段記錄和提交靈感的一個絕佳解決方案。

DOCHUB

www.dochub.io

DocHub是一個簡便的參考文檔庫，其中包括在大量常規網頁技術有CSS、HTML、JavaScript、文檔對象模型（DOM）、jQuery和PHP。只要選擇一個技術，然后輸入搜索項來篩選文件列表并選取明確的解釋和代碼。

WEB DEVELOPER TOOLBAR

www.Chrispederick.com/work/web-developer/

Web Developer Toolbar曾是開發者們在開發Chrome和Firefox網頁時很流行的軟件，不過現在依然值得在每個開發者的工具盒中。它提供大范圍的工具來幫助開發者詢問和分析瀏覽器中的網頁。這個工具的功能包括概括和辨認DOM元素、直接在網頁上編輯風格和控制腳本。

SPLASHUP

www.splashup.com

Splashup是一個基于瀏覽器的免費圖片編輯器。你不需要安裝任何軟件就可以用它生成位圖表格。這個應用軟件結合了大量在線圖片網站，比如Picasa和Flickr，還免費提供了許多類似Photoshop一樣的工具下載。

Part 8 推廣

一旦建立了自己的網站，你需要做一些工作促使用戶瀏覽網站，并對網站有所期待。以下這些工具可以幫助你做到這些！

Facebook Developers

www.developer.facebook.com/

Facebook不僅僅是一種社交網絡，越來越多以用戶為中心的網站開始開發Facebook應用。用戶可以點擊Facebook平臺提供的網頁內容，可以更方便地分享內容，幫助網站設計師進入一個全新的市場，這是以前很難做到的事情。因此，開發者可以注冊Facebook開發程序，并借助Facebook平臺更好地完善獨立網頁開發。

ADD THIS

www.addthis.com

AddThis插件可以為用戶提供定制化的工具套件，并有意將其整合到網站設計中。該插件在操作上十分簡單易懂，只需要選擇代表你所需功能和風格的按鈕，然后將代碼復制/粘貼到相應位置就完成了。你也可以查看分析和使用情況統計來幫助你提高網站社交網絡的作用，從而使AddThis成為有價值的推廣工具。

Google Analytics

www.google.co.uk/analytics/

谷歌分析工具提供全套分析和優化數據，可以幫助你追蹤和監測使用情況，管理轉換和目標，同時改善用戶體驗。和標準工具箱一樣，谷歌分析工具同樣適用于所有網站統計軟件。用戶點擊網站后可以通過該分析工具瀏覽實時數據，利用關鍵詞追蹤到最活躍的訪問者以及花在google上的錢都用在了哪些地方。AdWords可以提供最佳的投資回報。

SEO DOCTOR

www.addons.mozilla.org/en-us/firefox/addon/seo-doctor/

SEO DOCTOR每種擴展程序都可以提供相同的功能，但需要通過處理共同的搜索引擎優化（SEO）故障和錯誤改善搜索引擎的網站性能，從而提高網站的流量。SEO DOCTOR的功能包括追蹤不可搜索的內容、鏈接統計以及反饋HTML代碼中SEO功能的健康狀況。總的來說，這款入門級工具可以幫助開發者避免最常見的錯誤。

HOOTSUITE

www.Hootsuite.com

由于社交網絡對市場營銷和在線商業促銷起到越來越重要作用，因此現在必須積極利用網絡來為客戶提供更好的服務、更新網站訪問者、客戶以及推廣網站。HootSuite可以有效地把各種主流社交網絡融合到一個界面中，這樣可以監測并追蹤網站上的互動，推出狀態更新以及服務信息，可以更方便地維護客戶關系。

UX設計

在設計階段把精力集中在用戶體驗路徑和網址結構上可以避免最后出現不好的結果。畫出框架和流程圖，可以在這個階段節省很多時間。只要你貼上HTML標簽，客戶便會在最終產品下線前對其有更明確的認識。

首尾相連

最簡單有效的測試方式是在開發過程中進行檢查，而不是在項目最后，你需要首尾相連的檢查，但是太激進的話會減少出故障的數目和檢測階段的時間。

框架

運用框架來節省時間并且避免白費力氣的重復工作。我們將會選擇一些普通卻很受歡迎的框架把它們列入我們50個必備的工具中。但事實上，還有許多框架有相同的優點，因此，找到一個適合你的會加速你的開發。

資產

設想一下你怎樣再次使用你之前產生的資產，并且開始管理見的圖表和圖形文件在密茨進行新的項目的時候方便尋找或者搜集新的資產。

社交

過去幾年內，網站發展越來越以社交為導向，而且這種趨勢在短期內不太可能改變。基于這個原因，網站開發者絕對有必要結合目前主要的一些社交網絡，并將其作為一種必要的手段來增加網站流量。

TIPS5——重新使用

在你開發的過程中給你的代碼添加一個好的評論，會便于你以后重新使用你代碼里面的元素。你可以在推出網頁之前利用預處理程序腳本刪除保留在開發文件中的評論。