效率就是生命，對(duì)于設(shè)計(jì)師尤其是如此。所以，能夠讓工作效率有極大提升的工具于設(shè)計(jì)師而言，有著極大的價(jià)值，因此也有了今天這個(gè)高效設(shè)計(jì)工具列表。

這些設(shè)計(jì)工具大多針對(duì)某個(gè)特定的設(shè)計(jì)環(huán)節(jié)，基于具體的需求而存在，它們提升了整體的效率，從排版設(shè)計(jì)、代碼片段到配色方案不一而足，合理的搭配這些工具能讓你的整體效率提升一大截。

1. Web Gradients

漸變作為設(shè)計(jì)趨勢(shì)再一次回歸網(wǎng)頁(yè)設(shè)計(jì)界，WebGradients 這個(gè)網(wǎng)站給你大把的選項(xiàng)，供你探索漸變?cè)诰W(wǎng)頁(yè)中的運(yùn)用。你可以在這里調(diào)校好了，直接復(fù)制CSS3代碼，并且在你的網(wǎng)站中使用。

2. Flawless Typography Checklist

Typewolf 為排版課程所準(zhǔn)備的這個(gè)清單，被單獨(dú)做成一個(gè)交互工具，幫你避免排版中常見(jiàn)的錯(cuò)誤。這個(gè)列表所涵蓋的內(nèi)容非常全面，每一條給予了簡(jiǎn)單的說(shuō)明，幫你理解。

3. LOL Colors

想要獲得更多配色方案上的靈感？LOL 將許多配色方案打包提供給你，每個(gè)方案都有HEX和RGB等代碼，確保你立刻可以上手使用。

4. .resizr

想要測(cè)試你的網(wǎng)站的響應(yīng)式設(shè)計(jì)，直接在Resizr 中輸入鏈接，你可以以用戶的角度，查看你的網(wǎng)站在不同的設(shè)備和分辨率上的展示效果。

5. CSS Stats

你所編寫(xiě)的CSS樣式表長(zhǎng)什么樣？CSS Stats 是一個(gè)很好的分析工具，幫你將樣式表轉(zhuǎn)化為可用的格式。比如你的配色、字體的的實(shí)際顯示效果和相應(yīng)的格式。

6. Adobe Spark

Adobe Spark 是一款免費(fèi)的圖片制作工具，非常適合用來(lái)制作社交媒體上的宣傳和營(yíng)銷用的圖片。和Adobe 最近的新產(chǎn)品一樣，Spark 的學(xué)習(xí)曲線非常的平緩。

7. Google Web Designer

這個(gè)新的應(yīng)用依然處于測(cè)試階段，你可以使用這個(gè)工具設(shè)計(jì)出有參與感的、易于交互的動(dòng)效設(shè)計(jì)，所輸出的內(nèi)容都是基于HTML5的代碼。

8. Font Library

如果你經(jīng)常使用 Google Fonts 的話，這個(gè)工具能夠幫你標(biāo)注和組織你正在使用的字體內(nèi)容。

9. What Font Is

和求字體一樣，你可以使用 What Font Is 來(lái)辨別字體，你所需要做的就是上傳帶有待查詢字體的圖片，它會(huì)幫你找到這個(gè)字體的相關(guān)信息。

10. Death to Stock

這個(gè)圖庫(kù)網(wǎng)站提供了一些和普通圖庫(kù)不同類型的免費(fèi)圖片，這些免費(fèi)的圖片合集都是不同的攝影師單獨(dú)策劃、上傳的。

11. Todoist

Todoist 是一個(gè)非常實(shí)用的待辦事項(xiàng)、列表清單類的APP。實(shí)際上優(yōu)設(shè)哥一度非常喜歡使用這款A(yù)PP 。

12. Bulma

Bulma 是一款簡(jiǎn)單而現(xiàn)代的CSS框架，它是基于Flexbox 設(shè)計(jì)的。

13. Music for Programming

請(qǐng)忽略這個(gè)略顯復(fù)古的界面吧，這個(gè)網(wǎng)站搜集了一堆適合編程的時(shí)候聽(tīng)的音樂(lè)。

14. PlaceIt

如果你需要一個(gè)用來(lái)展示你的項(xiàng)目的視覺(jué)稿，那么你可以在這里的2500多個(gè)創(chuàng)意設(shè)計(jì)中，找出一個(gè)用來(lái)展示你的項(xiàng)目。

15. CSS Ruler

你可以使用這個(gè)工具來(lái)查看CSS長(zhǎng)度之間的差異，從字體相對(duì)值，到百分比。輸入?yún)��?shù)，然后開(kāi)始對(duì)比。

16. Patterninja

Patterninja 是一個(gè)能夠借助圖片來(lái)生成圖案的工具，你可以將你的圖片庫(kù)轉(zhuǎn)化為網(wǎng)頁(yè)可用的各種圖案。

17. Theme.Cards

Theme.Cards 是一組優(yōu)秀的免費(fèi)主題合集，其中涵蓋了博客模板，登錄頁(yè)面，單頁(yè)APP應(yīng)用，BootStrap 主題，Wordpress 主題等，不一而足。

18. Type Anything

Type Anything 能幫你快速創(chuàng)建漂亮的字體組合，這樣你可以在屏幕上預(yù)覽、調(diào)整相應(yīng)的參數(shù)，然后就可以將這些設(shè)計(jì)在代碼中實(shí)現(xiàn)出來(lái)。

19. Img2CSS

這款工具能幫你將任何圖片生成純粹的CSS代碼。

20. Glyphdiff

你可以使用這款工具對(duì)比不同的字體的差異。

21. Impalette

和許多配色工具類似，這款工具也能夠幫你拆分出一張圖片中的主要配色，不過(guò)它是基于潘通的配色系統(tǒng)來(lái)給出配色方案。而這個(gè)工具的獨(dú)特之處在于，它還提供了許多其他的備選配色方案。

22. Visual Center

你可以使用這款工具幫你找到圖片或者某個(gè)設(shè)計(jì)的視覺(jué)中心。它還有相應(yīng)的 Sketch 和 AI 的插件。

23. Hero Patterns

Hero Patterns 是一個(gè)可復(fù)用的SVG格式紋理的背景合集，在下載前，記得選取好前景色和背景色。

24. Site Auditor

千萬(wàn)不要糾結(jié)SEO的問(wèn)題，Site Auditor 會(huì)幫你分析你的網(wǎng)站的狀況，找出相應(yīng)的SEO的問(wèn)題和解決方案。

25. Sketchpacks

Sketchpacks 讓你能從菜單欄當(dāng)中就能找到并管理Sketch 相關(guān)的插件。

26. Ethical Web Development

想要?jiǎng)?chuàng)造出更優(yōu)秀的網(wǎng)絡(luò)環(huán)境，我們應(yīng)當(dāng)遵循一定的網(wǎng)絡(luò)開(kāi)發(fā)的道德準(zhǔn)則。

27. Responsive Image Breakpoint Generator

這款工具能夠幫你制作出更加優(yōu)秀的響應(yīng)式圖片，生成真正合理的斷點(diǎn)，幫你針對(duì)不同的設(shè)備和屏幕尺寸生成相應(yīng)的圖片。

28. Unsplash

Unsplash 是一個(gè)素質(zhì)相當(dāng)高的高清免費(fèi)圖片網(wǎng)站，非常值得收藏。

29. Material Design Palette

Material Design 這幾年一直都是設(shè)計(jì)趨勢(shì)，而相應(yīng)的配色方案也是目前的主流需求。這款工具能夠幫你挑選色彩，并且展示出這些色彩在實(shí)際設(shè)計(jì)中的樣子，并提供相應(yīng)的配色方案下載文件。

30. Type Terms

如果排版相關(guān)的術(shù)語(yǔ)讓你感到陌生的話，那么這個(gè)動(dòng)態(tài)的排版信息圖能夠幫你更深入的了解這些術(shù)語(yǔ)的實(shí)際含義。

原文地址：designshack
原文作者：CARRIE COUSINS
優(yōu)設(shè)譯文：陳子木