對(duì)于設(shè)計(jì)師和開發(fā)者而言，好工具和好想法同樣重要。我們常說“工欲善其事，必先利其器”，所以在項(xiàng)目開始之初，有必要弄清楚有哪些事情任務(wù)需要完成，而哪些成熟的工具可以有針對(duì)性地搞定這些問題。隨著如今網(wǎng)站開發(fā)需求的細(xì)化，越來越多項(xiàng)目衍生工具開始誕生，這些新工具通常會(huì)相當(dāng)?shù)鼐哂嗅槍?duì)性，它們逐步成熟之后，會(huì)很好地反哺到其他的項(xiàng)目。

這次的設(shè)計(jì)與開發(fā)工具的精選當(dāng)中，有幾個(gè)可能就是在這樣的背景下誕生的。這10款工具乍一看一般，但是在特定的項(xiàng)目中可能會(huì)大放異彩。

01. UI Interactions

這款名為UI Interactions 的工具實(shí)際上是一個(gè)款UI流程圖庫(kù)，它幫你整理出交互稿的圖庫(kù)，這些梳理好的交互流程可以很好地幫你做做UI設(shè)計(jì)的決策。

這些被整理好的UI交互合集可以持續(xù)不斷地給你輸送靈感，如果其中某個(gè)設(shè)計(jì)深得你心，你可以直接點(diǎn)擊選取獲得相應(yīng)的源代碼，并且合集中還會(huì)為你推薦類似的實(shí)現(xiàn)方法。

02. CanIUse Embed

Can I Use 是一個(gè)著名的前端技術(shù)開發(fā)類的信息支持網(wǎng)站，不同瀏覽器的各種技術(shù)支持細(xì)節(jié)會(huì)在網(wǎng)站上更新，可供查詢。Ire Aderinokun 所提供的這段腳本可以讓你輕松的獲取Caniuse.com的最新更新信息。

03. Microsoft Flow

IFTTT是“if this then that”的縮寫，事實(shí)上是讓你的網(wǎng)絡(luò)行為能夠引發(fā)連鎖反應(yīng)、讓你使用更為方便地將不同的功能與服務(wù)連通起來。而微軟的Microsoft Flow 就是官方提供的一項(xiàng)IFTTT服務(wù)，你可以借助它連通不同的APP和服務(wù)來提升你的整個(gè)工作流程，舉個(gè)例子，你可以創(chuàng)建這樣一個(gè)流程：當(dāng)你的Github更新一個(gè)新的問題的時(shí)候，就會(huì)自動(dòng)向Slack 發(fā)送一條通知。又或者，當(dāng)你從特定的人那里收到一封郵件的時(shí)候，就向你的手機(jī)發(fā)送一條通知短信。

IFTTT服務(wù)出現(xiàn)的年頭也不短了，各家服務(wù)各有特色，支持也各部形同，這次微軟家的支持應(yīng)該不差，你可以用來試試。

04. Resource Cards

如果你是剛剛進(jìn)入網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域不久的新人，那么你有必要了解一下進(jìn)行這項(xiàng)工作的過程中，有哪些工具、素材是可以使用，讓你事半功倍的。而Resource Cards 就是幫你搞定這個(gè)事情的：所有的素材、工具和教程都被清晰地分成不同的類別，不論你是要設(shè)計(jì)原型、編寫代碼還是使用Photoshop來做設(shè)計(jì)，都能從中找到相應(yīng)的教程和資源。

05. Inspire by CanvasFlip

想體驗(yàn)新的APP又不想挨個(gè)安裝、注冊(cè)、登錄和測(cè)試？不妨試試 Inspire 。CanvasFlip 出品的這款工具是一款原型工具，并且內(nèi)置了UX測(cè)試模塊。Inspire 堪稱是原型領(lǐng)域的Dribbble，它可以展示用戶體驗(yàn)流程，主要針對(duì)移動(dòng)端應(yīng)用原型設(shè)計(jì)，并且是直接在瀏覽器中運(yùn)行。無需安裝大量的應(yīng)用程序，直接運(yùn)行、測(cè)試就可以了。

06. Alloy

Alloy 是一款全新的網(wǎng)絡(luò)瀏覽器，它可以根據(jù)你所執(zhí)行的任務(wù)來組織標(biāo)簽頁(yè)，所以，相比于將一大堆標(biāo)簽頁(yè)都開著，Alloy 來的更加便捷：不同的標(biāo)簽頁(yè)根據(jù)任務(wù)屬性和相關(guān)性被整合到了一起，使用的時(shí)候更加清晰明了。當(dāng)你在執(zhí)行特定任務(wù)的時(shí)候，不同頁(yè)面間的切換會(huì)更加有條理，也更加清晰，不會(huì)出現(xiàn)混亂的情況。

07. Boxy SVG

如果你此刻電腦上沒有安裝AI和Sketch，或者是壓根不想打開它們，那么你可以使用矢量圖形編輯工具Boxy SVG來編輯圖形。Boxy SVG 是一款跨平臺(tái)的矢量圖形編輯工具，只要你有瀏覽器就可以運(yùn)行了，不需要安裝，還可以借助網(wǎng)絡(luò)導(dǎo)入Google Fonts 字體，各種圖形變幻、路徑編輯也都手到擒來，是個(gè)相當(dāng)順手的替代工具。

08. React UIkit components

這個(gè) React UIKit 其中的組件都是基于UIKit CSS 框架和其他的獨(dú)立模塊來運(yùn)作的，所以，無需進(jìn)行復(fù)雜的安裝和配置就可以使用這些UI控件，甚至可以和其他的布局空間混搭使用。

09. Chart.js

Chart.js是一個(gè)相當(dāng)實(shí)用的JS庫(kù)，它可以幫你創(chuàng)建漂亮的JS圖表，甚至可以將不同的柱狀圖和餅圖混合到一起，使用不同樣式的座標(biāo)系來呈現(xiàn)，定制比例，如果數(shù)據(jù)允許，你還可以制作相應(yīng)的動(dòng)畫效果。

10. Bootstrap 4 Cheat Sheet

Bootstrap 4 Cheat Sheet 可以讓你秒變 Bootstrap 4的專家?，F(xiàn)在甚至還有一個(gè)專門的Reddit板塊在討論這款 Cheat Sheet以及Bootstrap 4 的新功能。

【技多不壓身的設(shè)計(jì)師才有高薪資！】

1. 平面設(shè)計(jì)：《超贊！設(shè)計(jì)師完全自學(xué)指南》
2. 交互設(shè)計(jì)：《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》
3. UI設(shè)計(jì)：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
4. 前端開發(fā)：《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識(shí)學(xué)起來！為設(shè)計(jì)師量身打造的DPI指南》
8. 交互設(shè)計(jì)自學(xué)路徑圖：《零基礎(chǔ)入門！給非科班生的自學(xué)路徑圖之交互設(shè)計(jì)篇》

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