到位！2018年5月設計圈超實用干貨大合集

新的設計工具和設計素材多數時候都是在新的需求之下誕生的，又或者開發者或者設計師發現了更優的解決方案，它們應運而生。新的工具和素材讓設計師的工作更為便捷，一些新的設計問題因此而有了解決方案，這也是為什么這些工具和素材令人著迷。5月份的設計圈干貨素材來了，仔細看看，里面總會有一些素材和工具是你用得上的。
?

Duotone Effect Generator

這款雙色調配色生成器能夠快速幫你生成時尚的雙色調配色。不僅如此，如果你上傳一張圖片到這個網站上，它能夠一鍵生成特別漂亮的雙色調效果，你可以下載處理后的圖片到自己的項目中使用。
?

Curtains.js

Curtains.js 是一款有趣的 WebGL工具，它可以讓圖片擁有移動的窗簾特效。開發者是這樣說的：“這是一個小型的 Vanilla WebGL JS庫，它可以將包含圖片的 HTML 元素轉換為 3D WebGL 紋理化的對象，你可以通過著色器將它動畫化，你可以通過CSS來定義每個對象的大小和位置。”
?

Solis

Solis 是一款實時輸出的應用，可以借助它看到你所輸入的代碼的實際效果。你可以通過多個窗口，同時獲得 HTML、CSS、Sas 和 Less 的實時預覽。這款工具目前僅支持 Mac 平臺。
?

Cards Webflow UI Kit

如果你是 Webflow 用戶，那么 Cards Webflow UI Kit 這款工具對你而言就非常有用了。這是第一款完全可克隆的 UIKit，并且是完全服務于 Webflow 的。其中包含常用的UI元素，諸如按鈕、標簽、社交媒體圖標，其中的UI元素多是以卡片式的樣式呈現出來的。
?

BBC Sound Effects

你可能一直在設計項目中使用 Creative Commons 協議下的圖片，那么聲音素材要從哪里來呢？英國廣播公司 BBC 旗下有一個音效庫包含了超過16000種音效，不過它只能用于個人、教育和研究的目的。
?

ScreenFocus

ScreenFocus 是一款生產力工具，它包含了一套非常完整有用的雙顯示器設置體系，包括在屏幕之間切換的設置，包括各種屬性的控制，確保多個顯示器的內容能夠被更好的管理，而不會被分散注意力。
?

React Circle

React Circle 可以為你生成一個環形進度加載器動畫，它是使用可定制的SVG來實現這一功能的。
?

Unavatar

想要在多個社交媒體中統一使用一個頭像？Unavatar 這個服務只需要幾行代碼和一個用戶名或者電子郵箱地址就能幫你實現這個功能。
?

Login Critter

想讓你的登錄頭像是自定義的可愛的小動物頭像么？Login Critter 能夠幫你做到這一點，你可以在它的 Github 頁面中獲得它。
?

Lobe

Lobe 是一款視覺化的人工智能工具，它可以幫助你的應用構建深度學習模型，這款工具目前還處于測試階段，可以被廣泛應用。
?

Blobby Background

Blobby Background 所生成的獨特的形狀讓它在 CodePen 上瘋狂流行，它的Demo 是使用 SVG 和過濾器來實現的。
?

HueSnap

HueSnap 是一款配色方案生成工具，你可以一邊瀏覽各種配色一邊收藏，以供之后使用。這款配色工具的高效之處在于，你可以一次瀏覽許多的配色方案，在更多的配色方案中作出選擇。
?

Findshot

Findshot 是一款全新的、免費的圖片庫，通過電子郵箱注冊之后，可以免費使用其中的圖片。
?

Pico-js

Pico-js 是一款僅有200行代碼的 JS 人臉檢測庫，它的簡約和輕量級是優勢所在，它比其他的許多的庫都要小巧得多，保存下來僅僅只有2Kb這么小。
?

Modular

Modular 是一款免費的 Android 平臺的 UI Kit，其中包含了大量的 Material Design 風格的自適應元素，其中涵蓋了13個類別的78種元素，總計167 個項目。
?

Tutorial: Responsive Knockout Text with Video

這個教程來自CSS-Tricks 的 Giulio Mainardi，他為你展示了如何使用視頻構建炫酷的剪切蒙板文本效果，這個效果的實用性非常高，適用范圍也非常廣。
?

Semantic Experiences

語音搜索正在成為越來越流行的一種交互，這也是Google 團隊研發語義表達式的原因，它能夠幫助開發人員更好的在產品中利用自然語言。

Design Systems Repo

這個網站包含大量關于設計系統的文章、工具和案例。整個數據庫非常的龐大，是搜集靈感、獲取素材的好地方。
?

Science of Color Codes

Color Codes 不僅僅是一個能為你輸出配色代碼的工具，它的背后有專業的配色系統（RGB、HEX、CMYK、Pantone）作為支持，還有專門的配色專家將它作為一門科學來進行鉆研。

Fontisto

Fontisto 是一個巨大的SVG 圖標合集，你可以使用 CSS 對它進行自定義。它是一款快速響應的工具，無需 JavaScript 就可以輕松使用，另外， Fontisto 可以免費商用。
?

Aloja

Aloja 是一款免費的手寫字體，字體風格顯得拙稚有趣，非常適合用來展示。
?

Dank Mono

Dank Mono 是一款看起來很整齊簡約的等寬字體，用來顯示代碼頗為不錯，它的細節非常到位，適合視網膜屏幕的顯示。
?

MD Tall

MD Tall 是一款x高非常高的字體，它看起來非常纖瘦也非常富有凝聚力。它包含完整的字符集，包括連字和斜體。

「2018年設計趨勢，一個都不要錯過」

• 《2018年，這10個LOGO設計趨勢值得你關注》
• 《超全面總結！2017年UI設計領域流行過這21個設計趨勢》
• 《掌握這12個移動端UX設計趨勢，你就掌控了2018年》
• 《這款獨特的紫色，是為你指引2018年設計方向的年度潘通色》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com