現(xiàn)在我們在網(wǎng)站制作和網(wǎng)頁設(shè)計時，有很多免費的或是付費的工具，這些工具可以幫助網(wǎng)頁設(shè)計師可以輕松的完成工具。

　　1. Atomic

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

　　簡單開始一個項目

　　網(wǎng)站建設(shè)規(guī)劃軟件你可以先新建一個畫布，也可以將Photoshop和Sketch文件導(dǎo)入Atomic

　　歷史記錄

　　這個工具記錄網(wǎng)站建設(shè)規(guī)劃軟件你對項目所作的所有修改，可以返回到記錄中的任何一步

　　多設(shè)備體驗

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

　　互動

　　它提供網(wǎng)站建設(shè)規(guī)劃軟件了多種交互觸發(fā)器和手勢，例如懸停，滑動，雙擊等

　　分享和反饋

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

　　2. Antetype

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

　　原型

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

　　控件

　　Antetype支持400以上預(yù)先設(shè)定的小工具。窗口小部件庫適用于所有項目。現(xiàn)有的小部件或全新定制的部件所做的更改可以同步應(yīng)用程序范圍內(nèi)

　　嵌套

　　Antetype支持層次化嵌套，可以進行復(fù)雜的UI設(shè)計

　　規(guī)格

　　準備就緒后你只要點擊一次就可以創(chuàng)建一個設(shè)計規(guī)格

　　輸出

　　Antetype可以導(dǎo)出為基于像素或基于矢量的圖形

　　CSS

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

　　響應(yīng)式和支持 Retina 屏

　　Antetype的圖形在兩個HiDPI顯示器都是最佳的，可以調(diào)整大小靈活適應(yīng)移動設(shè)備的屏幕

　　3. Macaw

　　Macaw是可以寫語義HTML和簡潔的CSS的網(wǎng)站設(shè)計工具，實時代碼預(yù)覽，便捷輸出。

　　Stream流

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

　　Alchemy引擎

　　Macaw的強大的設(shè)計到代碼的引擎 – Alchemy –可以將設(shè)計轉(zhuǎn)換為CSS和HTML

　　響應(yīng)

　　Macaw可以創(chuàng)建響應(yīng)式設(shè)計，內(nèi)置的斷點編輯器可以幫你輕松地在不同尺寸的屏幕上實現(xiàn)完美的響應(yīng)式顯示

　　字體

　　你可以使用系統(tǒng)字體，也可以添加Web字體

　　樣式

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

　　交互

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

　　定位

　　你可以利用fixed, static和absolute定位來構(gòu)建動態(tài)布局

　　組件存儲

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

　　4. Avocode

　　Avocode是前端切圖神器，它實現(xiàn)從視覺到代碼的過渡，自動生成導(dǎo)出圖片的代碼。

　　轉(zhuǎn)換為CSS

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

　　Retina圖形

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

　　輕松導(dǎo)入文件

　　只需拖放即可將設(shè)計文件導(dǎo)入Avocode

　　顏色轉(zhuǎn)換

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

　　自定義代碼輸出

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

　　支持Photoshop和Sketch

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

　　5. Pixlr

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

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

　　6. Webydo

　　Webydo 是一個在線網(wǎng)站設(shè)計及托管平臺，幫助網(wǎng)頁設(shè)計師擺脫傳統(tǒng)的網(wǎng)站建站流程，Webydo的工具能夠?qū)⑺麄兊脑O(shè)計自動轉(zhuǎn)換成的HTML5網(wǎng)站，設(shè)計師在這個過程中無需接觸任何的手動編程工作。因此Webydo迅速成為一些設(shè)計師的最愛的網(wǎng)頁設(shè)計工具。

　　7. Wagtail

　　Wagtail是一個開源的，響應(yīng)式CMS，旨在加快Web開發(fā)的速度。它提供多語言和多站點支持。CMS采用直觀的內(nèi)容結(jié)構(gòu)，支持復(fù)雜網(wǎng)站的所有基本組件。

　　StreamField

　　可以按任意順序創(chuàng)建和排列不同內(nèi)容類型的代碼塊

　　代碼段

　　可以將現(xiàn)有內(nèi)容添加到另一個頁面。可以在網(wǎng)站的不同位置以不同的格式復(fù)制

　　資源管理器

　　其功能和組件以模塊化的結(jié)構(gòu)進行組織，提供簡單的內(nèi)容導(dǎo)航

　　圖像裁剪

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

　　表單構(gòu)建器

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

　　8. Mobirise

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

　　響應(yīng)式自然

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

　　Bootstrap 3

　　這個工具基于移動設(shè)備優(yōu)先的框架

　　現(xiàn)成代碼塊

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

　　拖放功能

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

　　無限托管能力

　　使用Mobirise構(gòu)建的網(wǎng)站可以托管在任何地方，無論是Amazon S3，Github，Google Drive，F(xiàn)TP還是本地驅(qū)動器

　　9. Figma

　　Figma是第一個實時協(xié)作的界面設(shè)計工具。它有三個難能可貴的功能網(wǎng)站建設(shè)規(guī)劃軟件：實時協(xié)作，矢量網(wǎng)絡(luò)和版本控制。Figma就像是基于瀏覽器并具有實時協(xié)作功能的Sketch。

　　實時協(xié)作

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

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

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

　　版本控制

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

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

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

　　矢量網(wǎng)絡(luò)

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

　　（本文轉(zhuǎn)載于http://www.parabnet.net/）