UI設(shè)計師必備！10個免費的UI素材網(wǎng)站推薦。

時間：2023-09-25 03:54:02 | 來源：網(wǎng)站運營

時間：2023-09-25 03:54:02 來源：網(wǎng)站運營

UI設(shè)計師必備！10個免費的UI素材網(wǎng)站推薦。：Hello 各位好，我是皮仔。

不少 UI 設(shè)計師在開始設(shè)計之前，會去到素材網(wǎng)站搜集設(shè)計需要用到的各種 UI 素材。皮仔平時在使用 UI 設(shè)計素材時，會優(yōu)先選擇那些免費高質(zhì)量的網(wǎng)站，畢竟免（bai）費（piao）的誰不愛呢，逛完免費網(wǎng)站如果沒找到合適的素材，才會考慮開通素材會員。

話不多說，和各位分享皮仔私藏的 10 個好用的 UI 設(shè)計素材網(wǎng)站，希望能幫到題主和有相同需求的知友。

01 Pixso 資源社區(qū)

Pixso 資源社區(qū)，是在線協(xié)同設(shè)計軟件 Pixso 推出的設(shè)計社區(qū)，提供了 UI 設(shè)計經(jīng)常會用到的各類素材和模板，素材模板不僅質(zhì)量高，關(guān)鍵還是完全免費的~

素材：矢量圖標(biāo)、插畫素材、emoji 表情、3D 圖標(biāo)、樣機素材
模板：多款移動端 UI 模板、網(wǎng)頁端 UI 模板、國內(nèi)外眾多大廠的 UI 設(shè)計規(guī)范和設(shè)計系統(tǒng)

對于 Pixso 資源社區(qū)的模板或素材，可以點擊右上角的「收藏」或「復(fù)制」，保存到自己的賬號中，方便之后需要用到的時候可以隨時找回。

將模板復(fù)制到個人賬號后，點擊「打開文件」可以直接調(diào)用 Pixso 自帶的編輯器，打開剛復(fù)制的模板，Pixso 編輯器支持在線編輯模板，且所有編輯操作會自動保存到云端。

每一個 UI 模板包含了多個不同的頁面——開屏頁、注冊頁、主頁、用戶頁、搜索頁等等，頁面中的所有元素都是可以自由編輯的。

點擊左側(cè)的「組件」選項卡，可以看到 UI 模板中用到的所有組件，組件可以在文檔的多個頁面復(fù)用，如果你在模板的基礎(chǔ)上創(chuàng)建了新的頁面，可以優(yōu)先從中挑選組件作為頁面元素，保證整體風(fēng)格的統(tǒng)一。

模板自有的組件如果不能滿足需求，可以切換到「資源」選項卡，調(diào)用來自其他組件庫的組件，這一點大大提升了 UI 模板的可拓展性，將模板原有組件進行替換，就能得到另外一套不同風(fēng)格的模板。

對于模板中用到的位圖素材，如果想更換為自己更喜歡的圖片，可以點擊右上角的「插件」，打開內(nèi)置的 Pexels 圖庫插件，選中需要更換的圖片，點擊 Pexels 插件中的圖片就能一鍵更換。

多個模板不同的頁面設(shè)計，既可以給我們的設(shè)計提供靈感，也可以將其中的一些組件復(fù)制到自己的項目中，稍加修改就能直接使用，減少不必要的重復(fù)勞動。

在線 UI 設(shè)計工具 Pixso 目前對所有個人用戶免費開放，現(xiàn)在前往 Pixso 官網(wǎng)注冊賬號，可以使用 Pixso 內(nèi)置的所有功能和素材資源，且能享受到多項專屬權(quán)益：無限文件數(shù)量、無協(xié)作者人數(shù)限制、無限云存儲空間等等，快來嘗試一下吧～

02 Icons 圖標(biāo)網(wǎng)站

① unDraw

unDraw，一個開源免費的矢量素材網(wǎng)站，網(wǎng)站提供了許多簡約、風(fēng)格統(tǒng)一的矢量素材，非常適合用在設(shè)計項目中。下載素材時，unDraw 有 svg 和 png 兩種格式可供選擇。

點擊網(wǎng)站右上角的取色器，打開取色器面板，修改面板默認(rèn)的顏色，可以批量調(diào)整所有矢量素材中的主色。

② manypixels

manypixels，同樣是一個免版權(quán)的矢量素材網(wǎng)站，目前已有的素材數(shù)量超過 2500，網(wǎng)站提供的素材格式為 svg 和 png，下載時可根據(jù)需要選擇相應(yīng)的格式。

在尋找素材時，manypixels 提供了兩個篩選條件——素材目錄和類型，目錄與素材的使用場景、行業(yè)相關(guān)，類型則體現(xiàn)為素材的風(fēng)格（單色、等距立體、雙色、扁平等），搜索時搭配使用這兩個篩選條件，返回的素材可以更有針對性。

③ WorldVectorLogo

除了前面介紹的兩個網(wǎng)站，做設(shè)計的過程中，有時還會用到一些品牌的 logo，比如登錄頁面的微 X 登錄或蘋果賬號登錄，就需要用到微 X 和蘋果的 logo。

不少人使用其他品牌 logo 時，往往都是從搜索引擎下載 PNG 格式的素材，這樣得到的素材要么清晰度不高，要么在使用之前需要進行摳圖處理。

WorldVectorLogo，一個專門提供各類品牌 logo 的網(wǎng)站，正如網(wǎng)站的名字，這里的 logo 素材都為矢量格式，可無限放大不失真，一般比較大的品牌，都可以在這里找到矢量格式的 logo。

④ freepik

freepik，一個擁有海量高質(zhì)量素材的網(wǎng)站，這里的素材分為免費和收費兩類，免費素材可用于個人和商業(yè)項目。

在搜索素材之前，可設(shè)置多個篩選條件：搜索單張素材還是素材合集、免費還是付費、素材的格式（矢量、位圖、psd、圖標(biāo)），這樣搜索返回的結(jié)果可以更符合我們的需求。

在使用 freepik 的免費素材時，需要注明素材的來源，對于不同的使用場景（Web、印刷項目、視頻、App/游戲），網(wǎng)站提供了相應(yīng)的素材來源說明。

03 Mockup 樣機模板

① ls.graphics

ls.graphics，一個提供高質(zhì)量樣機模板的網(wǎng)站，這里的樣機模板有免費和付費之分，免費樣機的質(zhì)量也非常高，既有平面也有 3D 風(fēng)格的模板。

網(wǎng)站提供的樣機模板一般為 psd 或 sketch 格式，使用之前需要下載到本地。由于這是一個國外的網(wǎng)站，遇到體積比較大的模板，下載需要花費比較多的時間。

② Device Shots

Device Shots，一個可自定義樣機模型的在線網(wǎng)站，提供的樣機模型包含手機、平板、電腦、顯示器、手表。

左側(cè)是樣機模板預(yù)覽界面，右側(cè)是網(wǎng)站提供的模板，點擊右側(cè)的樣機，可以自由更換使用的樣機模型。

點擊右側(cè)的「Devices」選項卡，切換到設(shè)備頁面，點擊 Add Device 下拉菜單，可以給左側(cè)的模板添加額外的樣機。

左側(cè)的樣機模板支持簡單的編輯操作，譬如選中其中一個樣機模型，按下 Del 鍵，就可以刪除模板中原有的樣機，只留下我們剛添加的樣機模型。

③ MockRocket

MockRocket，一個在線的 3D 樣機工具，可以將制作好的設(shè)計作品放到內(nèi)置的設(shè)備中，例如下圖的 Macbook Pro，讓作品瞬間變得更有立體感。

使用 MockRocket 頂部工具欄中的移動、旋轉(zhuǎn)工具，可以改變樣機的位置和旋轉(zhuǎn)角度，這種可交互的設(shè)計比常見的樣機模板具有更高的自由度，可得到各種不同角度的樣機圖片。

MockRocket 下方的時間軸還支持給樣機設(shè)置動畫，分別調(diào)整樣機在起始位置和結(jié)束位置的位置或旋轉(zhuǎn)參數(shù)，軟件就會自動生成順滑的過渡動畫。

導(dǎo)出樣機時，MockRocket 提供了兩種導(dǎo)出格式：靜態(tài)圖片和視頻，圖像分辨率最高為 4K，免費用戶導(dǎo)出的圖片和視頻會帶有水印。

04 高清圖片素材

① Unsplash

Unsplash，國外知名的免版權(quán)圖片網(wǎng)站，這里的圖片基于 CC0 方式進行授權(quán)，下載的圖片可用于商業(yè)目的而不需支付任何費用，最大限度地降低了圖片侵權(quán)的風(fēng)險。

Unsplash 提供的圖片類型非常廣泛，包含：時下熱點、電腦壁紙、3D 作品、材質(zhì)和紋理、藝術(shù)、自然、商業(yè)、時尚、電影、食物、健康等。

② Pexels

Pexels，一個和 Unsplash 非常相似的網(wǎng)站，這里的素材同樣可以免費使用。區(qū)別在于，Pexels 額外提供了視頻素材，而且網(wǎng)站支持中文搜索，英文不太好的朋友，可以優(yōu)先來 Pexels 下載圖片素材。




以上就是皮仔私藏的 10 個好用的 UI 設(shè)計素材網(wǎng)站，希望對你有幫助。




碼字不易，如果對你有幫助的話，請別忘了賞個【三連】或是【關(guān)注】我哦，關(guān)注不迷路！

我是皮仔 @Pixso協(xié)同設(shè)計，那我們下次再見咯。