將靈感和想法一點(diǎn)一滴轉(zhuǎn)化成為實際可見的產(chǎn)品是一件非常有成就感的事情，對于設(shè)計師和工程師而言，這種愉悅是無可替代的。所以，成就好設(shè)計的好素材、好工具往往非常重要。一個靠譜的工具能讓設(shè)計過程事半功倍，而可靠的素材更是可以令你如虎添翼。這次的干貨素材主要都是用于UI設(shè)計的，不僅涵蓋了PS和AI素材，包括了圖片素材和APP工具，還有許多用于Sketch的素材，針對性非常強(qiáng)。

如果你十一長假期間流連于山水之間，那么你可能錯過了國慶期間的第一波干貨：《國慶干貨第一波！20個實用便捷的CSS3工具、庫及實例》

免費(fèi)PSD素材

TETHR by InVision

這是出自InVision的8款PSD文件，其中包含了100個模板和超過500個UI控件。來自InVision和UI8的設(shè)計師一同協(xié)作完成了這套UI Kit，非常漂亮。

Designer-naut UI Kit

這是一套簡約整飭的UI Kit，內(nèi)置了40款矢量的小插件。這套UI Kit 為視網(wǎng)膜屏幕而生，基于16欄的960柵格系統(tǒng)，目前限時免費(fèi)。

Wire Kit

這是一套分辨率為840 x 8600的 UI Kit，是一套為視網(wǎng)膜屏幕而生的素材，內(nèi)置2組不同風(fēng)格的控件，每組都有60個不同的控件。

iPhone Wireframe Kit

這是一套頗為方便的 iPhone 線框圖 UI Kit ，整體采用的低保真的色調(diào)，所以它適合用來設(shè)計簡約外觀的UI。

免費(fèi)Sketch資源

Yosemite UI Kit

這是一套完全免費(fèi)的用于Sketch平臺的Yosemite UI Kit，整套UI Kit 覆蓋面非常廣，非常實用。

Sketch Android UI Kit

如果你是一位喜歡使用Sketch的Android APP UI設(shè)計師，那么這套UI Kit絕對值得收入囊中，完整的UI控件支持絕對讓你省心。

Bootstrap 3 UI for Sketch

這套 UI Kit包含了Twitter Bootstrap 3全套UI控件，完備而實用。

進(jìn)階Sketch UI Kit素材

Bolt Kit

Bolt Kit 是一套非常漂亮非?，F(xiàn)代的視覺套件，你可以在Bolt Kit的幫助下，非常快捷的排列組合控件設(shè)計出你心目中的界面。

Flat UI Kit for Sketch

扁平化依然是目前的主流，這套扁平UI Kit中的的各種UI控件都非常簡約，可以非常快捷地設(shè)計出漂亮的界面。整套UI Kit包含超過50個獨(dú)特的UI元素，覆蓋網(wǎng)站、移動端和響應(yīng)式設(shè)計。

Wireframe Kit V2

這套UI Kit包含175個模板和超過500個UI元素，可以用于網(wǎng)頁、平板和手機(jī)界面，使用這套工具可以讓你的UX Workflow提速。這套UI Kit 是AI格式的，現(xiàn)在也有了Sketch的版本。

Illustrator UI Kit

Wireframe & UI Kit by C. Rowe

處于對傳統(tǒng)線框圖的失望，設(shè)計師C.Rowe決定自己動手豐衣足食，按照自己的想法設(shè)計出一套更加完善的線框圖 UI Kit，當(dāng)然，它是免費(fèi)的。

Awesome Kit

這套炫酷的UI Kit包含了26套AI線框圖模板、兩套筆刷，由設(shè)計師George Vasyagin設(shè)計完成，實用且免費(fèi)。

實用iPad應(yīng)用

可能最終的設(shè)計你還是需要借助PS、AI和Sketch，但是在設(shè)計過程中，這些實用的iPad APP可以幫你實現(xiàn)一些最初的想法，快速成型，輸出成可以處理的格式，幫你設(shè)計提速。

Adobe Sketch

Sketch是Adobe進(jìn)軍移動端的重要APP，它不僅可以讓設(shè)計師更容易表達(dá)自己的設(shè)計和想法，還可以連接社區(qū)，了解其他設(shè)計師的設(shè)計，尋求靈感。

Paper by FiftyThree

Paper是真正為觸摸屏設(shè)計的繪圖應(yīng)用，靈活的筆刷和極富創(chuàng)意的手勢操作令這款A(yù)PP別具一格，流暢的操作和無按鈕設(shè)計可以讓設(shè)計師充分發(fā)揮。配合FiftyThree所推出的Paper Pencil，體驗非常贊。

Adobe Ideas

這是一款用來抓住靈感的絕佳APP，可以靈活控制矢量素材、圖層和色彩主題，設(shè)計作品最終可以輸出到AI中進(jìn)行后期處理。

免費(fèi)圖標(biāo)素材

The Noun Project

這套圖標(biāo)素材非常值得收入囊中，其中所包含的數(shù)千個圖標(biāo)源自不同的藝術(shù)家，其中部分圖標(biāo)是免費(fèi)的，部分是收費(fèi)的。

80 mini icons

這是一組簡潔明快的小圖標(biāo)合集，可以在很多項目中靈活使用。

144 Social Icons

這套圖標(biāo)都是各大社交品牌的圖標(biāo)，包含了4種不同的樣式、色彩。每個圖標(biāo)都是在PS中創(chuàng)建的矢量圖形，可以輕松編輯。

進(jìn)階圖標(biāo)素材

Streamline

Streamline 應(yīng)該是最豐富最強(qiáng)大的圖標(biāo)合集，設(shè)計師們已經(jīng)不遺余力地為你搜集每一款有價值的圖標(biāo)。

Symbolicons- Icon Font

Symbolicons是一款圖標(biāo)字體，這使得你可以更加方便地控制圖標(biāo)的大小、顏色，你完全不用單獨(dú)打開一個PSD文件或者AI文件然后來回拖拽每一個圖標(biāo)。

免費(fèi)圖片資源

Unsplash

Unsplash提供的圖片全都是高分辨率的素材，每10天更新10張新圖片，這么慢的更新，當(dāng)然保質(zhì)保量啦~

New Old Stock

這個網(wǎng)站搜集的是各種復(fù)古的照片，絕對有范兒。

Death to the stock photo: Free & Premium Options

這個網(wǎng)站圖片質(zhì)量也相當(dāng)不錯，可以商用，也可以放到個人博客、社交媒體以及放到自己的視覺稿中。如果你覺得免費(fèi)用戶不夠暢快的話，還可以購買高級用戶。

Public Domain Archive

這里提供的照片都是免費(fèi)共享的，并且會每周更新，盡情地使用吧！

設(shè)備素材

3 Free Flat Device Mockups from InVision!

這是三款來自InVision的設(shè)備視覺稿素材，當(dāng)你設(shè)計好UI之后，可以結(jié)合這三款素材制作成高保真的視覺稿。

iPhone 5s Template from Mockuuups

這是一款iPhone 5s的視覺稿素材，你可以輕松修改屏幕內(nèi)容和背景圖片，制作屬于你的效果圖。

iPhone 5s & 5c Mockups

同上一款一樣，這一款iPhone 5s和5c的素材也是免費(fèi)的，可以輕松定制內(nèi)容。

3 Free Presentation Mock Ups

這3款視覺稿模板可以幫你輕松創(chuàng)建逼真的演示文稿。

Photorealistic Macbook Mockups

這一Macbook視覺稿素材是基于真實而專業(yè)的照片制作而成，絕贊。

Free iPhone & iPad Mock Ups

主流的iOS設(shè)備都是兼容iPhone和iPad的，當(dāng)你展示iOS APP的時候，不妨直接使用這款高分辨率的iPhone/iPad素材。PSD文件中，屏幕截圖都是單獨(dú)的智能對象，可以替換。除此之外，背景還包含了5張不同的圖片可供替換。

Placeit.net

Placeit 是一個免費(fèi)的視覺稿生成工具，上傳照片，網(wǎng)站會幫你處理成截圖，并生成一個單獨(dú)的網(wǎng)址，打開網(wǎng)站就可以看到最終結(jié)果。

帶柵格的PSD

iPhone 5 Grid

設(shè)計師Eddie Lobanovskiy制作的10列柵格的iPhone 5 柵格系統(tǒng)，在這套柵格系統(tǒng)下，你設(shè)計的UI會更加整潔。

Bootstrap 3 Grid System

這套Bootstrap 3柵格系統(tǒng)是PSD格式的，方便你在PS中設(shè)計基于Bootstrap的UI。

A better Photoshop grid for responsive web design

來自Typekit的設(shè)計師Elliot Jay所制作的一款寬度約為1000px的響應(yīng)式柵格系統(tǒng)，你可以在他的博客中下載這套柵格系統(tǒng)。

靈感

當(dāng)你靈感閃現(xiàn)的時候，想要很快進(jìn)入設(shè)計階段然后實現(xiàn)它，并不容易。好在有許多技巧和方法可以幫你快速推進(jìn)，迅速地將靈感轉(zhuǎn)為為實際可見的作品，節(jié)省大量的時間。

A shorthand for designing UI flows

來自Basecamp的設(shè)計師Ryan Singer設(shè)計了一套快速高效推進(jìn)UI設(shè)計流程的Outlines，遵循這套工具，你可以在5分鐘內(nèi)看到一套清晰而簡約的設(shè)計稿。

Storyboards

在InVision，我們通常使用低保真的故事板來快速推進(jìn)設(shè)計流程，通過故事板，我們可以快速地將腦中的概念同直觀的視覺效果結(jié)合到一起，甚至可以試圖將最終的UI界面具現(xiàn)化，在這個過程中無需花費(fèi)大量時間進(jìn)行像素級的打磨。

收藏好UI設(shè)計素材，掌控好UI設(shè)計技巧：

你必須了解的UI設(shè)計規(guī)范：
《一針見血！UI設(shè)計師必學(xué)的設(shè)計規(guī)范要點(diǎn)總結(jié)》

你必須掌控的UI版式設(shè)計：
《UI設(shè)計新利器！版式設(shè)計在移動界面中的應(yīng)用》

你必須明白的UI設(shè)計易用性：
《想界面好看好用？聊聊UI設(shè)計師不可不學(xué)的易用性原則》

原文地址：invisionapp
優(yōu)設(shè)網(wǎng)譯者：@陳子木
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量82萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：