工欲善其事，必先利其器，對於設計師而言尤其如此。好工具對於整個設計的加成是相當明顯的。不同的工具配合不同的設計流程和設計對象，對於效果和效率的提升都有顯著的效果。
隨著設計和開發壁壘的逐漸模糊，最新的設計工具也開始試圖融合設計和開發的流程，而免代碼開發的擁簇則將更多的精力投放到無代碼平臺的研發上去了。今天我們所搜羅的新工具，包含了不少針對網站和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設計的這類工具並不多，而Power Mockup就是這樣的一款工具。
原型工具
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平臺上的一款快速而漂亮的字體管理工具，可以和Adobe CC於Sketch進行聯動。
新鮮出爐的代碼
jQuery 3
jQuery 3 剛剛發布，儘管沒有宣布新的特性，但是大量的舊功能被重新編寫，並且Bug進行了修復，性能也得到了提升。
Simpler Sidebar
說道jQuery，還有一些新鮮出爐的插件讓設計師的工作更容易，尤其是對那些需要編寫代碼的設計師而言。Simper Sidebar就是這樣的一個側邊欄插件，小巧快速。
Labelauty
全新的單選框和多選框樣式，用這套代碼就可以告別瀏覽器的默認樣式了。
smart-placeholder
填寫表單的時候，用戶體驗設計很重要。不使用佔位符讓人迷惑，使用佔位符同樣也存在問題，用戶填寫的時候偶爾也會迷失。而這裡的智能佔位符兼具了兩者的優勢，當你填寫表單的時候，佔位符會自動下移，保持提醒的功能。
老工具的新生
其實許多早已存在的工具，在新版本上投注了相當的精力，更新了許多優秀的功能，這絕對是無法忽視的。不信往下看：
Webflow
Webflow 以全新的方式集成了更多的第三方服務。現在你已經可以從Webflow將功能添加到網絡表單當中。
InVision
作為一款著名的在線協作工具，InVision 持續不斷地推出新功能，穩步更新，對於移動端測試也無限制，工作流程管理，集成了Dribbble服務。為了更好地協作溝通，InVision還增加了聊天表情符……
Strikingly
最近幾個月，Strikingly 增加了一套全新的網頁編輯器，協作平臺，甚至為自家的博客添加了RSS源……
Adobe Muse
最後，是Adobe Muse。現在的Muse已經可以添加任何TypeKit字體了，對於網頁設計師而言，這是一個非常有用的更新。現在的Muse 可以輕鬆創建博客、電商網站等內容向的站點。另外，正如同其他最新的Adobe CC套件中的工具，Adobe Muse也集成了Adobe圖庫服務。
文章來源：優設網 譯者：@陳子木
文章地址：http://www.uisdc.com/2015-25-fresh-tools-for-webdesign
商務合作QQ：2601929995
HTML5技術交流群：424839972
投稿郵箱：xiaoxiao.shen@3g2win.com
HTTP必死：Google是怎麼考慮安全的?
點擊【閱讀原文】查看