25款新鮮出爐的實用網頁設計工具大合集

 　　工欲善其事，必先利其器，對於設計師而言尤其如此。好工具對於整個設計的加成是相當明顯的。不同的工具配合不同的設計流程和設計對象，對於效果和效率的提升都有顯著的效果。

　　隨著設計和開發壁壘的逐漸模糊，最新的設計工具也開始試圖融合設計和開發的流程，而免代碼開發的擁簇則將更多的精力投放到無代碼平台的研發上去了。今天我們所搜羅的新工具，包含了不少針對網站和APP的原型設計工具，另外一部分則是測試工具。這些工具中一部分已經發布有一陣子了，但是因為版本一直持續更新，非常值得一用，它們也姑且算是新工具吧!接下來，讓我給你一一介紹吧。

　　設計工具

　　Macaw Scarlet

　　Macaw Scarlet 之所以出現在這個列表當中，是因為這款工具還沒有正是發布，但是非常值得期待!這款被稱為“實時設計環境”的工具會讓大家設計響應式網頁和APP更加方便。

　　Wagtail

　　Wagtail 並非是設計工具，而是一套內容管理系統(CMS)，它的特殊之處在於這套系統包含了設計流程，尤其是針對內容的設計。

　　它有一個夢幻般的功能，叫做Streamfield，它的工作原理接近於Medium的內容編輯器，不同之處在於它更加易於定制化，功能也更加完備。

　　Magic Mirror for Sketch 3

　　這個名為Magic Mirror的工具是為Sketch 3的用戶所准備的，它可以幫你將一系列智能對象所構建的原型融入到照片中去。

　　線框圖工具

　　Wire Flow

　　作為一款對繪圖並不友好的平板而言，線框圖工具Wire Fow是如此的好用，可以說讓我的老平板重生了過來。這款幾乎可以滿足你所有線框圖繪制需求的工具，可以在手機、平板上運行，並且擁有良好的可視化的編輯功能，簡直是業界良心。

　　Apple Watch wire-frame kit

　　這是一套Apple Watch的線框圖工具，多的就不用介紹了!

　　PowerMockup

　　為蘋果的Keynote所定制的線框圖工具已經不止一款了，但是為PowerPoint設計的這類工具並不多，而PowerMockup 就是這樣的一款工具。

　　原型工具

　　Origami

　　Origami是一款Facebook發布的原型工具，他們是這樣描述它的：”Origami 是一款免費的工具，用於設計現代的用戶界面。它可以幫你迅速組件原型，在iPhone和iPad上運行，迭代升級，並且導出開發可用的代碼。”

　　Marvel

　　這是一款非常簡單的原型工具，即使是免費版都可以幫你制作一個非常不錯的APP原型。它集成了Google Drive和Dropbox並且允許你將指定的圖像組合到一起，快速制作APP原型。也正是這種雲端同步的方式，你所制作的原型也可以快速地傳遞到雲端，讓你的原型實時更新。

　　Protosketch

　　Protosketch 是一款為iPad所設計的原型設計APP。其中包內置了一套包含大量組件的 UI Kit，基本的矢量編輯工具、對齊工具等等也都具備。

　　雖然它只適用於iPad並且處於測試階段，但是這可能是這個平台上你最好的選擇。另外，它可以超出SVG和PDF格式的文檔。

　　Frontify

　　Frontify 也是原型工具，而它的獨特之處在於，它還提供一系列工具幫你更好地組織和設計品牌形象和風格指南。從配色方案到成體系的樣式、UI元素，簡直是團隊設計的必備品。

　　Atomic

　　將你的PSD或者Sketch文檔拖放到Atomic 當中可以生成對應的原型。版本控制、協作功能也都內置其中，這絕對是適合團隊協作迭代升級的工具。

　　Form

　　Form 是一款先進的原型創建工具，可以和你的iPhone聯動。你可以在電腦上創建好了原型之後，可以在手機上浏覽。另外，它采用的是Material Design的設計規范，這使得原型看起來更漂亮。

　　Pixate

　　Pixate 是一款專注於手機顯示效果的原型工具，它可以幫你制作真正意義上高保真的“原生”的原型。

　　Web 開發

　　Sandvox

　　Sandvox 是一款為非編程人員所設計的Mac應用。Sandvox很大程度上是一個基於模板的體系，不過對於高級用戶而言，同樣可以手動調整。

　　盡管Sandvox同樣可以作為CMS系統來使用的時候，並不會比其他的Blog系統更“前衛”，但是它的功能一直在持續更新，對於新手而言，也是一套更加人性化的解決方案。

　　XPRS

　　這是一個給新手的網站建設工具，XPRS會免費提供給個人使用，商用有更專業的解決方案。

　　WordPress 架設工具

　　Themify Flow

　　雖然有許多人一致诟病Wordpress，但是它依然具有強大的生命力。比如Themify這個工具就很令人驚艷，它在傳統的發布系統上搭建了一個設計工具，其結果是Themify Flow 允許你真的能靠簡單托拽生成反應靈敏，可用性極高的響應式主題，並且它是免費而開源的!

　　Cornerstone

　　Cornerstone 是上面Themify Flow的競爭對手，它也是一個托拽是WP主題生成工具。不過它的運作方式稍有不同，比如它提供實時代碼編輯器，為前端和其他的設計和開發者提供不同級別的訪問權限和功能。不過它不是免費的，除非你購買了X Theme。

　　Qards

　　Qards 也是Wordpress 頁面搭建工具，它為你搞定了絕大多數的設計工作，不過相比於其他的構建單個模板，Qards選擇的方案是以卡片的形式堆棧構成頁面。一般而言，Qards 會為你預制一套頁面布局，你可有混合搭配構建你自己的方案，針對不同的功能而選擇不同的設計。

　　協作和生產力工具

　　Relay

　　Relay 是一款快速便捷的分享協作工具，它擁有針對Adobe CC、Sketch、Chrome和OSX的插件/APP，不論你所做的項目是什麼，分享吧。

　　Skala Preview

　　想看看你在Photoshop中的設計在實際設備上長啥樣?簡單，裝上Skala Preview吧，你可以在幾乎所有移動設備上預覽。不同於其他同類工具的信息傳遞方式，Skala Preview選擇的是USB接口來傳遞，更老派，卻更有效。

　　RightFont

　　RightFont 是Mac平台上的一款快速而漂亮的字體管理