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

隨著設(shè)計(jì)和開發(fā)壁壘的逐漸模糊，最新的設(shè)計(jì)工具也開始試圖融合設(shè)計(jì)和開發(fā)的流程，而免代碼開發(fā)的擁簇則將更多的精力投放到無代碼平臺(tái)的研發(fā)上去了。今天我們所搜羅的新工具，包含了不少針對網(wǎng)站和APP的原型設(shè)計(jì)工具，另外一部分則是測試工具。這些工具中一部分已經(jīng)發(fā)布有一陣子了，但是因?yàn)榘姹疽恢背掷m(xù)更新，非常值得一用，它們也姑且算是新工具吧！接下來，讓我給你一一介紹吧。

設(shè)計(jì)工具

Macaw Scarlet

Macaw Scarlet 之所以出現(xiàn)在這個(gè)列表當(dāng)中，是因?yàn)檫@款工具還沒有正是發(fā)布，但是非常值得期待！這款被稱為“實(shí)時(shí)設(shè)計(jì)環(huán)境”的工具會(huì)讓大家設(shè)計(jì)響應(yīng)式網(wǎng)頁和APP更加方便。
?

Wagtail

Wagtail 并非是設(shè)計(jì)工具，而是一套內(nèi)容管理系統(tǒng)（CMS），它的特殊之處在于這套系統(tǒng)包含了設(shè)計(jì)流程，尤其是針對內(nèi)容的設(shè)計(jì)。

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

Magic Mirror for Sketch 3

這個(gè)名為Magic Mirror的工具是為Sketch 3的用戶所準(zhǔn)備的，它可以幫你將一系列智能對象所構(gòu)建的原型融入到照片中去。

線框圖工具

Wire Flow

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

Apple Watch wire-frame kit

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

PowerMockup

為蘋果的Keynote所定制的線框圖工具已經(jīng)不止一款了，但是為PowerPoint設(shè)計(jì)的這類工具并不多，而PowerMockup 就是這樣的一款工具。

原型工具

Origami

Origami是一款Facebook發(fā)布的原型工具，他們是這樣描述它的："Origami 是一款免費(fèi)的工具，用于設(shè)計(jì)現(xiàn)代的用戶界面。它可以幫你迅速組件原型，在iPhone和iPad上運(yùn)行，迭代升級(jí)，并且導(dǎo)出開發(fā)可用的代碼。"

Marvel

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

Protosketch

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

雖然它只適用于iPad并且處于測試階段，但是這可能是這個(gè)平臺(tái)上你最好的選擇。另外，它可以超出SVG和PDF格式的文檔。

Frontify

Frontify 也是原型工具，而它的獨(dú)特之處在于，它還提供一系列工具幫你更好地組織和設(shè)計(jì)品牌形象和風(fēng)格指南。從配色方案到成體系的樣式、UI元素，簡直是團(tuán)隊(duì)設(shè)計(jì)的必備品。

Atomic

將你的PSD或者Sketch文檔拖放到Atomic 當(dāng)中可以生成對應(yīng)的原型。版本控制、協(xié)作功能也都內(nèi)置其中，這絕對是適合團(tuán)隊(duì)協(xié)作迭代升級(jí)的工具。
?

Form

Form 是一款先進(jìn)的原型創(chuàng)建工具，可以和你的iPhone聯(lián)動(dòng)。你可以在電腦上創(chuàng)建好了原型之后，可以在手機(jī)上瀏覽。另外，它采用的是Material Design的設(shè)計(jì)規(guī)范，這使得原型看起來更漂亮。

Pixate

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

Web 開發(fā)

Sandvox

Sandvox 是一款為非編程人員所設(shè)計(jì)的Mac應(yīng)用。Sandvox很大程度上是一個(gè)基于模板的體系，不過對于高級(jí)用戶而言，同樣可以手動(dòng)調(diào)整。

盡管Sandvox同樣可以作為CMS系統(tǒng)來使用的時(shí)候，并不會(huì)比其他的Blog系統(tǒng)更“前衛(wèi)”，但是它的功能一直在持續(xù)更新，對于新手而言，也是一套更加人性化的解決方案。

XPRS

這是一個(gè)給新手的網(wǎng)站建設(shè)工具，XPRS會(huì)免費(fèi)提供給個(gè)人使用，商用有更專業(yè)的解決方案。

WordPress 架設(shè)工具

Themify Flow

雖然有許多人一致詬病Wordpress，但是它依然具有強(qiáng)大的生命力。比如Themify這個(gè)工具就很令人驚艷，它在傳統(tǒng)的發(fā)布系統(tǒng)上搭建了一個(gè)設(shè)計(jì)工具，其結(jié)果是Themify Flow 允許你真的能靠簡單托拽生成反應(yīng)靈敏，可用性極高的響應(yīng)式主題，并且它是免費(fèi)而開源的！

Cornerstone

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

Qards

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

協(xié)作和生產(chǎn)力工具

Relay

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

Skala Preview

想看看你在Photoshop中的設(shè)計(jì)在實(shí)際設(shè)備上長啥樣？簡單，裝上Skala Preview吧，你可以在幾乎所有移動(dòng)設(shè)備上預(yù)覽。不同于其他同類工具的信息傳遞方式，Skala Preview選擇的是USB接口來傳遞，更老派，卻更有效。

RightFont

RightFont 是Mac平臺(tái)上的一款快速而漂亮的字體管理工具，可以和Adobe CC于Sketch進(jìn)行聯(lián)動(dòng)。

新鮮出爐的代碼

jQuery 3

jQuery 3 剛剛發(fā)布，盡管沒有宣布新的特性，但是大量的舊功能被重新編寫，并且Bug進(jìn)行了修復(fù)，性能也得到了提升。

Simpler Sidebar

說道jQuery，還有一些新鮮出爐的插件讓設(shè)計(jì)師的工作更容易，尤其是對那些需要編寫代碼的設(shè)計(jì)師而言。Simper Sidebar 就是這樣的一個(gè)側(cè)邊欄插件，小巧快速。

Labelauty

全新的單選框和多選框樣式，用這套代碼就可以告別瀏覽器的默認(rèn)樣式了。

smart-placeholder

填寫表單的時(shí)候，用戶體驗(yàn)設(shè)計(jì)很重要。不使用占位符讓人迷惑，使用占位符同樣也存在問題，用戶填寫的時(shí)候偶爾也會(huì)迷失。而這里的智能占位符兼具了兩者的優(yōu)勢，當(dāng)你填寫表單的時(shí)候，占位符會(huì)自動(dòng)下移，保持提醒的功能。

老工具的新生

其實(shí)許多早已存在的工具，在新版本上投注了相當(dāng)?shù)木?，更新了許多優(yōu)秀的功能，這絕對是無法忽視的。不信往下看：

Webflow

Webflow 以全新的方式集成了更多的第三方服務(wù)?，F(xiàn)在你已經(jīng)可以從Webflow將功能添加到網(wǎng)絡(luò)表單當(dāng)中。

InVision

作為一款著名的在線協(xié)作工具，InVision 持續(xù)不斷地推出新功能，穩(wěn)步更新，對于移動(dòng)端測試也無限制，工作流程管理，集成了Dribbble 服務(wù)。為了更好地協(xié)作溝通，InVision還增加了聊天表情符……
?

Strikingly

最近幾個(gè)月，Strikingly 增加了一套全新的網(wǎng)頁編輯器，協(xié)作平臺(tái)，甚至為自家的博客添加了RSS源……
?

Adobe Muse

最后，是Adobe Muse。現(xiàn)在的Muse已經(jīng)可以添加任何TypeKit字體了，對于網(wǎng)頁設(shè)計(jì)師而言，這是一個(gè)非常有用的更新?，F(xiàn)在的Muse 可以輕松創(chuàng)建博客、電商網(wǎng)站等內(nèi)容向的站點(diǎn)。另外，正如同其他最新的Adobe CC套件中的工具，Adobe Muse也集成了Adobe圖庫服務(wù)。

【往期設(shè)計(jì)圈干貨合集】

一月干貨合集：《干貨駕到！2015年一月設(shè)計(jì)圈干貨大合集》
二月干貨合集：《來收最新干貨！二月份免費(fèi)設(shè)計(jì)資源+實(shí)用工具大合集！》
三月干貨合集：《月底福利！三月設(shè)計(jì)圈干貨大合集第一波》
四月干貨合集：《四月福利！30+酷炫實(shí)用的免費(fèi)APP設(shè)計(jì)模板》
五月干貨合集：《有好貨！五月必收的優(yōu)質(zhì)設(shè)計(jì)資源干貨大合集》
六月干貨合集：《假期福利！六月設(shè)計(jì)圈高品質(zhì)干貨大合集》
七月干貨合集：《七月干貨！幫你發(fā)掘高素質(zhì)圖標(biāo)的50個(gè)優(yōu)質(zhì)網(wǎng)站》
八月干貨合集：《不要錯(cuò)過！姍姍來遲的八月設(shè)計(jì)圈干貨大合集》

原文地址：webdesignerdepot
優(yōu)設(shè)譯者：@陳子木

「子木說」

許多長城外面的網(wǎng)站咱們上不去，尤其是許多優(yōu)秀的設(shè)計(jì)工具和服務(wù)咱們用不上，這事兒挺鬧心的。紅杏前陣子跪了，曲徑關(guān)停，看世界也越發(fā)艱難了。好在中華兒女多奇志，最近發(fā)現(xiàn)一個(gè)服務(wù)挺不錯(cuò)的，ZPN，唯一的問題是ZPN目前還處于內(nèi)測階段，大家可以關(guān)注一下。私下分享，低調(diào)，低調(diào)哈。

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量100萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com