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

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

1. Web Gradients

漸變作為設計趨勢再一次回歸網頁設計界，WebGradients 這個網站給你大把的選項，供你探索漸變在網頁中的運用。你可以在這里調校好了，直接復制CSS3代碼，并且在你的網站中使用。

2. Flawless Typography Checklist

Typewolf 為排版課程所準備的這個清單，被單獨做成一個交互工具，幫你避免排版中常見的錯誤。這個列表所涵蓋的內容非常全面，每一條給予了簡單的說明，幫你理解。

3. LOL Colors

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

4. .resizr

想要測試你的網站的響應式設計，直接在Resizr 中輸入鏈接，你可以以用戶的角度，查看你的網站在不同的設備和分辨率上的展示效果。

5. CSS Stats

你所編寫的CSS樣式表長什么樣？CSS Stats 是一個很好的分析工具，幫你將樣式表轉化為可用的格式。比如你的配色、字體的的實際顯示效果和相應的格式。

6. Adobe Spark

Adobe Spark 是一款免費的圖片制作工具，非常適合用來制作社交媒體上的宣傳和營銷用的圖片。和Adobe 最近的新產品一樣，Spark 的學習曲線非常的平緩。

7. Google Web Designer

這個新的應用依然處于測試階段，你可以使用這個工具設計出有參與感的、易于交互的動效設計，所輸出的內容都是基于HTML5的代碼。

8. Font Library

如果你經常使用 Google Fonts 的話，這個工具能夠幫你標注和組織你正在使用的字體內容。

9. What Font Is

和求字體一樣，你可以使用 What Font Is 來辨別字體，你所需要做的就是上傳帶有待查詢字體的圖片，它會幫你找到這個字體的相關信息。

10. Death to Stock

這個圖庫網站提供了一些和普通圖庫不同類型的免費圖片，這些免費的圖片合集都是不同的攝影師單獨策劃、上傳的。

11. Todoist

Todoist 是一個非常實用的待辦事項、列表清單類的APP。實際上優設哥一度非常喜歡使用這款APP 。

12. Bulma

Bulma 是一款簡單而現代的CSS框架，它是基于Flexbox 設計的。

13. Music for Programming

請忽略這個略顯復古的界面吧，這個網站搜集了一堆適合編程的時候聽的音樂。

14. PlaceIt

如果你需要一個用來展示你的項目的視覺稿，那么你可以在這里的2500多個創意設計中，找出一個用來展示你的項目。

15. CSS Ruler

你可以使用這個工具來查看CSS長度之間的差異，從字體相對值，到百分比。輸入參數，然后開始對比。

16. Patterninja

Patterninja 是一個能夠借助圖片來生成圖案的工具，你可以將你的圖片庫轉化為網頁可用的各種圖案。

17. Theme.Cards

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

18. Type Anything

Type Anything 能幫你快速創建漂亮的字體組合，這樣你可以在屏幕上預覽、調整相應的參數，然后就可以將這些設計在代碼中實現出來。

19. Img2CSS

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

20. Glyphdiff

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

21. Impalette

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

22. Visual Center

你可以使用這款工具幫你找到圖片或者某個設計的視覺中心。它還有相應的 Sketch 和 AI 的插件。

23. Hero Patterns

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

24. Site Auditor

千萬不要糾結SEO的問題，Site Auditor 會幫你分析你的網站的狀況，找出相應的SEO的問題和解決方案。

25. Sketchpacks

Sketchpacks 讓你能從菜單欄當中就能找到并管理Sketch 相關的插件。

26. Ethical Web Development

想要創造出更優秀的網絡環境，我們應當遵循一定的網絡開發的道德準則。

27. Responsive Image Breakpoint Generator

這款工具能夠幫你制作出更加優秀的響應式圖片，生成真正合理的斷點，幫你針對不同的設備和屏幕尺寸生成相應的圖片。

28. Unsplash

Unsplash 是一個素質相當高的高清免費圖片網站，非常值得收藏。

29. Material Design Palette

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

30. Type Terms

如果排版相關的術語讓你感到陌生的話，那么這個動態的排版信息圖能夠幫你更深入的了解這些術語的實際含義。

【這些最佳實踐幫你在UI設計上更上一層樓】

1. 《網頁設計中，如何突破柵格的限制又保持協調？》
2. 《幫你搞定長滾動網頁的設計最佳實踐》
3. 《覺得自己學了假設計？真正的新用戶引導應該這么設計》
4. 《老生常談！設計高素質的UI應該掌握這7個關鍵屬性》
5. 《這8個要點，能讓你的網頁首圖抓住用戶注意力》

原文地址：designshack
原文作者：CARRIE COUSINS
優設譯文：@陳子木

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

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

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