現在我們在網站制作和網頁設計時，有很多免費的或是付費的工具，這些工具可以幫助網頁設計師可以輕松的完成工具。

　　1. Atomic

　　Atomic是一個不需要編碼的原型工具。雖然使用這個工具有點貴（每月15至35刀不等），它有個30天的免費試用期。

　　簡單開始一個項目

　　網站建設規劃軟件你可以先新建一個畫布，也可以將Photoshop和Sketch文件導入Atomic

　　歷史記錄

　　這個工具記錄網站建設規劃軟件你對項目所作的所有修改，可以返回到記錄中的任何一步

　　多設備體驗

　　你可以在電腦或Mac上設計原型，設計出來的效果可以在任何設備上預覽

　　互動

　　它提供網站建設規劃軟件了多種交互觸發器和手勢，例如懸停，滑動，雙擊等

　　分享和反饋

　　原型可以通過鏈接進行共享，協作人員可以在同一個地方進行評論

　　2. Antetype

　　Antetype是一個UX設計應用程序，它可以創建高保真原型，許多公司的設計師都選擇了它，諸如蘋果，Twitter，SAP，Kinston等。

　　原型

　　它提供了高端UI原型設計所需的所有工具

　　控件

　　Antetype支持400以上預先設定的小工具。窗口小部件庫適用于所有項目。現有的小部件或全新定制的部件所做的更改可以同步應用程序范圍內

　　嵌套

　　Antetype支持層次化嵌套，可以進行復雜的UI設計

　　規格

　　準備就緒后你只要點擊一次就可以創建一個設計規格

　　輸出

　　Antetype可以導出為基于像素或基于矢量的圖形

　　CSS

　　這個工具還可以自動生成標準CSS代碼

　　響應式和支持 Retina 屏

　　Antetype的圖形在兩個HiDPI顯示器都是最佳的，可以調整大小靈活適應移動設備的屏幕

　　3. Macaw

　　Macaw是可以寫語義HTML和簡潔的CSS的網站設計工具，實時代碼預覽，便捷輸出。

　　Stream流

　　Macaw的設計環境是由一個叫Stream實時排版引擎，它允許對元素進行類似于Photoshop圖像編輯器的方式來操作。Stream引擎計算邊距，clears，floats和向靜態文檔流添加組件所需的其他屬性

　　Alchemy引擎

　　Macaw的強大的設計到代碼的引擎 – Alchemy –可以將設計轉換為CSS和HTML

　　響應

　　Macaw可以創建響應式設計，內置的斷點編輯器可以幫你輕松地在不同尺寸的屏幕上實現完美的響應式顯示

　　字體

　　你可以使用系統字體，也可以添加Web字體

　　樣式

　　一個樣式可以應用于各種不同元素中，單個位置的樣式還可以修改

　　交互

　　通過設置變量和嵌入腳本可以快速生成原型

　　定位

　　你可以利用fixed, static和absolute定位來構建動態布局

　　組件存儲

　　元素可以存儲在組件庫中，儲存的元素可以在任何頁面上重復使用

　　4. Avocode

　　Avocode是前端切圖神器，它實現從視覺到代碼的過渡，自動生成導出圖片的代碼。

　　轉換為CSS

　　這個工具可以將圖層，字體和段落樣式轉換為CSS。它還支持Less，Sass或Stylus等預處理器

　　Retina圖形

　　Avocode根據視口大小縮放圖像。支持的格式包括JPEG，PNG，SVG和

　　輕松導入文件

　　只需拖放即可將設計文件導入Avocode

　　顏色轉換

　　只需選擇某種顏色，Avocode會自動將其轉換為必要的格式，如HEX和RGBA

　　自定義代碼輸出

　　可以通過變量（如漸變，字體，顏色，距離和大小）自定義代碼輸出

　　支持Photoshop和Sketch

　　這個工具可以保留在Sketch和Photoshop中的元素，如圖層，畫板，智能對象等

　　5. Pixlr

　　Pixlr 是一個超強的免費在線處理圖片工具。內置600多種特效及濾鏡，包含了優秀免費修圖軟體常見的特效濾鏡套用、曝光對比調整、相框與特殊光線外掛等等。

　　簡單點說，Pixlr就是一個類似 Photoshop 的 web 軟件，適合進行圖片處理。

　　6. Webydo

　　Webydo 是一個在線網站設計及托管平臺，幫助網頁設計師擺脫傳統的網站建站流程，Webydo的工具能夠將他們的設計自動轉換成的HTML5網站，設計師在這個過程中無需接觸任何的手動編程工作。因此Webydo迅速成為一些設計師的最愛的網頁設計工具。

　　7. Wagtail

　　Wagtail是一個開源的，響應式CMS，旨在加快Web開發的速度。它提供多語言和多站點支持。CMS采用直觀的內容結構，支持復雜網站的所有基本組件。

　　StreamField

　　可以按任意順序創建和排列不同內容類型的代碼塊

　　代碼段

　　可以將現有內容添加到另一個頁面。可以在網站的不同位置以不同的格式復制

　　資源管理器

　　其功能和組件以模塊化的結構進行組織，提供簡單的內容導航

　　圖像裁剪

　　CMS自動檢測面部和其他圖像特征，并進行相應地裁剪。也可以取消自動檢測，定義自己的圖像的焦點

　　表單構建器

　　Wagtail可以創建具有任意數值域的表單。可以在管理界面中存儲表單提交，以供日后檢索，可選擇將每個表單提交到指定的地址

　　8. Mobirise

　　Mobirise屬于2016年免費的響應頁面設計工具。簡潔易懂通過可視圖化的操作界面，為開發者提供快捷的功能服務。這個Windows和Mac離線的應用程序可以制作中小型網站，著陸頁，在線作品集和產品服務的推廣網站。

　　響應式自然

　　Mobirise是款手機網站建設軟件，用戶界面非常友好。可以在視覺編輯器中預覽網站在不同設備屏幕上的顯示效果

　　Bootstrap 3

　　這個工具基于移動設備優先的框架

　　現成代碼塊

　　Mobirise提供了各種現成的代碼塊，包括粘性頭部，漢堡包菜單，沉浸全屏模式，視頻背景，Bootstrap 輪播插件，內容滑塊，帶有燈箱插件的響應式網頁圖片庫等等

　　拖放功能

　　只需通過拖放就可以將代碼添加到頁面，進行編輯和發布

　　無限托管能力

　　使用Mobirise構建的網站可以托管在任何地方，無論是Amazon S3，Github，Google Drive，FTP還是本地驅動器

　　9. Figma

　　Figma是第一個實時協作的界面設計工具。它有三個難能可貴的功能網站建設規劃軟件：實時協作，矢量網絡和版本控制。Figma就像是基于瀏覽器并具有實時協作功能的Sketch。

　　實時協作

　　團隊還可以直接在設計界面上進行討論，令協作更加方便。

　　Figma在Mac，Windows、Linux甚至是移動端（只能預覽）都可以運行。這將極大的改變團隊生態，讓設計師和開發者更好的協作。任何人都可以進來并查看所有細節網站建設規劃軟件：字體，顏色，尺寸，間距等等。開發者們也可以輕松看到整個UI的布局是如何適配不同屏幕尺寸的。

　　評論功能是內置的，團隊成員可以針對你的設計留言，當有新評論或者新回復時你也會收到提醒。一旦你完成了，就可以點擊“已解決”來隱藏意見。

　　版本控制

　　版本控制在Figma里更易于查看，從而更快的進行不同版本的對比。使用起來比Sketch 的版本控制要順手很多。

　　每個文件的每個版本都在它們的服務器上，這讓迭代變得很容易也很省心。

　　自適應布局是現代設計工具必不可少的功能，你可以通過設置讓元素緊靠邊緣來組合你的整個約束條件，或是讓元素居中顯示。這和Sketch中的Pin to Corner和縮放對象差不多。我不得不承認Figma的版本使用起來更視覺化也更直觀。

　　矢量網絡

　　矢量網格是具有突破性的，不只是移動錨點，你可以直接移動線條，連接點也會自動的隨之移動。這是因為在Figma里可以連接多條線，組成矢量點陣的網格，而不是單純的起始點和結束點。這種難以置信的易用程度，一上手就知道。

　　（本文轉載于http://www.parabnet.net/）