效率就是生命，對于設(shè)計師尤其是如此。所以，能夠讓工作效率有極大提升的工具于設(shè)計師而言，有著極大的價值，因此也有了今天這個高效設(shè)計工具列表。
這些設(shè)計工具大多針對某個特定的設(shè)計環(huán)節(jié)，基于具體的需求而存在，它們提升了整體的效率，從排版設(shè)計、代碼片段到配色方案不一而足，合理的搭配這些工具能讓你的整體效率提升一大截。
漸變作為設(shè)計趨勢再一次回歸網(wǎng)頁設(shè)計界，WebGradients 這個網(wǎng)站給你大把的選項，供你探索漸變在網(wǎng)頁中的運用。你可以在這里調(diào)校好了，直接復(fù)制CSS3代碼，并且在你的網(wǎng)站中使用。
Typewolf 為排版課程所準備的這個清單，被單獨做成一個交互工具，幫你避免排版中常見的錯誤。這個列表所涵蓋的內(nèi)容非常全面，每一條給予了簡單的說明，幫你理解。
想要獲得更多配色方案上的靈感？LOL 將許多配色方案打包提供給你，每個方案都有HEX和RGB等代碼，確保你立刻可以上手使用。
想要測試你的網(wǎng)站的響應(yīng)式設(shè)計，直接在Resizr 中輸入鏈接，你可以以用戶的角度，查看你的網(wǎng)站在不同的設(shè)備和分辨率上的展示效果。
你所編寫的CSS樣式表長什么樣？CSS Stats 是一個很好的分析工具，幫你將樣式表轉(zhuǎn)化為可用的格式。比如你的配色、字體的的實際顯示效果和相應(yīng)的格式。
Adobe Spark 是一款免費的圖片制作工具，非常適合用來制作社交媒體上的宣傳和營銷用的圖片。和Adobe 最近的新產(chǎn)品一樣，Spark 的學習曲線非常的平緩。
這個新的應(yīng)用依然處于測試階段，你可以使用這個工具設(shè)計出有參與感的、易于交互的動效設(shè)計，所輸出的內(nèi)容都是基于HTML5的代碼。
如果你經(jīng)常使用 Google Fonts 的話，這個工具能夠幫你標注和組織你正在使用的字體內(nèi)容。
和求字體一樣，你可以使用 What Font Is 來辨別字體，你所需要做的就是上傳帶有待查詢字體的圖片，它會幫你找到這個字體的相關(guān)信息。
這個圖庫網(wǎng)站提供了一些和普通圖庫不同類型的免費圖片，這些免費的圖片合集都是不同的攝影師單獨策劃、上傳的。
Todoist 是一個非常實用的待辦事項、列表清單類的APP。實際上優(yōu)設(shè)哥一度非常喜歡使用這款A(yù)PP 。
Bulma 是一款簡單而現(xiàn)代的CSS框架，它是基于Flexbox 設(shè)計的。
請忽略這個略顯復(fù)古的界面吧，這個網(wǎng)站搜集了一堆適合編程的時候聽的音樂。
如果你需要一個用來展示你的項目的視覺稿，那么你可以在這里的2500多個創(chuàng)意設(shè)計中，找出一個用來展示你的項目。
你可以使用這個工具來查看CSS長度之間的差異，從字體相對值，到百分比。輸入?yún)?shù)，然后開始對比。
Patterninja 是一個能夠借助圖片來生成圖案的工具，你可以將你的圖片庫轉(zhuǎn)化為網(wǎng)頁可用的各種圖案。
Theme.Cards 是一組優(yōu)秀的免費主題合集，其中涵蓋了博客模板，登錄頁面，單頁APP應(yīng)用，BootStrap 主題，Wordpress 主題等，不一而足。
Type Anything 能幫你快速創(chuàng)建漂亮的字體組合，這樣你可以在屏幕上預(yù)覽、調(diào)整相應(yīng)的參數(shù)，然后就可以將這些設(shè)計在代碼中實現(xiàn)出來。
這款工具能幫你將任何圖片生成純粹的CSS代碼。
你可以使用這款工具對比不同的字體的差異。
和許多配色工具類似，這款工具也能夠幫你拆分出一張圖片中的主要配色，不過它是基于潘通的配色系統(tǒng)來給出配色方案。而這個工具的獨特之處在于，它還提供了許多其他的備選配色方案。
你可以使用這款工具幫你找到圖片或者某個設(shè)計的視覺中心。它還有相應(yīng)的 Sketch 和 AI 的插件。
Hero Patterns 是一個可復(fù)用的SVG格式紋理的背景合集，在下載前，記得選取好前景色和背景色。
千萬不要糾結(jié)SEO的問題，Site Auditor 會幫你分析你的網(wǎng)站的狀況，找出相應(yīng)的SEO的問題和解決方案。
Sketchpacks 讓你能從菜單欄當中就能找到并管理Sketch 相關(guān)的插件。
想要創(chuàng)造出更優(yōu)秀的網(wǎng)絡(luò)環(huán)境，我們應(yīng)當遵循一定的網(wǎng)絡(luò)開發(fā)的道德準則。
這款工具能夠幫你制作出更加優(yōu)秀的響應(yīng)式圖片，生成真正合理的斷點，幫你針對不同的設(shè)備和屏幕尺寸生成相應(yīng)的圖片。
Unsplash 是一個素質(zhì)相當高的高清免費圖片網(wǎng)站，非常值得收藏。
Material Design 這幾年一直都是設(shè)計趨勢，而相應(yīng)的配色方案也是目前的主流需求。這款工具能夠幫你挑選色彩，并且展示出這些色彩在實際設(shè)計中的樣子，并提供相應(yīng)的配色方案下載文件。
如果排版相關(guān)的術(shù)語讓你感到陌生的話，那么這個動態(tài)的排版信息圖能夠幫你更深入的了解這些術(shù)語的實際含義。
【這些最佳實踐幫你在UI設(shè)計上更上一層樓】
原文地址：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è)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
非特殊說明，本文版權(quán)歸原作者所有，轉(zhuǎn)載請注明出處
本文地址：http://www.uisdc.com/30-time-saving-tools-for-designers
