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

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

1. Web Gradients

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

2. Flawless Typography Checklist

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

3. LOL Colors

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

4. .resizr

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

5. CSS Stats

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

6. Adobe Spark

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

7. Google Web Designer

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

8. Font Library

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

9. What Font Is

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

10. Death to Stock

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

11. Todoist

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

12. Bulma

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

13. Music for Programming

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

14. PlaceIt

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

15. CSS Ruler

你可以使用這個工具來查看CSS長度之間的差異，從字體相對值，到百分比。輸入?yún)?shù)，然后開始對比。

16. Patterninja

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

17. Theme.Cards

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

18. Type Anything

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

19. Img2CSS

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

20. Glyphdiff

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

21. Impalette

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

22. Visual Center

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

23. Hero Patterns

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

24. Site Auditor

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

25. Sketchpacks

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

26. Ethical Web Development

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

27. Responsive Image Breakpoint Generator

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

28. Unsplash

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

29. Material Design Palette

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

30. Type Terms

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

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

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

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

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

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

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