開學福利！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平臺上的一款快速而漂亮的字體管理工具，可以和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圖庫服務。

【往期設計圈干貨合集】

一月干貨合集：《干貨駕到！2015年一月設計圈干貨大合集》
二月干貨合集：《來收最新干貨！二月份免費設計資源+實用工具大合集！》
三月干貨合集：《月底福利！三月設計圈干貨大合集第一波》
四月干貨合集：《四月福利！30+酷炫實用的免費APP設計模板》
五月干貨合集：《有好貨！五月必收的優質設計資源干貨大合集》
六月干貨合集：《假期福利！六月設計圈高品質干貨大合集》
七月干貨合集：《七月干貨！幫你發掘高素質圖標的50個優質網站》
八月干貨合集：《不要錯過！姍姍來遲的八月設計圈干貨大合集》

原文地址：webdesignerdepot
優設譯者：@陳子木

「子木說」

許多長城外面的網站咱們上不去，尤其是許多優秀的設計工具和服務咱們用不上，這事兒挺鬧心的。紅杏前陣子跪了，曲徑關停，看世界也越發艱難了。好在中華兒女多奇志，最近發現一個服務挺不錯的，ZPN，唯一的問題是ZPN目前還處于內測階段，大家可以關注一下。私下分享，低調，低調哈。

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量100萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com