UI設(shè)計比較好用免費(fèi)的素材網(wǎng)站有哪些？

時間：2023-12-06 07:12:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-12-06 07:12:02 來源：網(wǎng)站運(yùn)營

UI設(shè)計比較好用免費(fèi)的素材網(wǎng)站有哪些？：要說有哪些好用免費(fèi)的 UI 設(shè)計素材網(wǎng)站，收藏過不下 100+ 設(shè)計網(wǎng)站的皮仔必須有發(fā)言權(quán)（? `▽′?)

趁著這個機(jī)會，把收藏夾吃灰已久的各種網(wǎng)站，拿出來和大家分享。如果有幫助的話，記得雙擊屏幕告訴我哦～

模板網(wǎng)站

每個設(shè)計師或多或少都會收藏一些模板網(wǎng)站，以備不時之需，UI 設(shè)計師也不例外，這里首推一個寶藏般存在的 UI 模板網(wǎng)站——Pixso 資源社區(qū)。

Pixso 資源社區(qū)，提供了 UI 設(shè)計師經(jīng)常會用到的各類設(shè)計素材、模板，包含圖標(biāo)插畫素材、設(shè)計規(guī)范、UI 組件庫、高保真原型模板等，質(zhì)量都非常高，而且完全免費(fèi)。

UI 設(shè)計師在剛接手一個新的項目計時，往往需要先了解對應(yīng)平臺或系統(tǒng)的設(shè)計規(guī)范，在此基礎(chǔ)上可以制作出更符合平臺特點、易用性良好的界面設(shè)計。

Pixso 資源社區(qū)剛好提供了這方面的資源，例如微軟的 Fluent Design、騰訊的 TDesign、字節(jié)的 Arco Design、螞蟻的 Ant Design、谷歌的 Material Design 等，一個網(wǎng)站就能 Get 眾多平臺的設(shè)計規(guī)范，節(jié)約了搜集不同平臺設(shè)計規(guī)范的時間。

此外，Pixso 資源社區(qū)中的每一個高保真原型模板，按照頁面類型分別進(jìn)行了設(shè)計，所有頁面元素和組件都是可自由編輯的，這些模板既可以為你的設(shè)計提供靈感，也可以作為素材直接復(fù)用到你的項目中。

圖片素材

UI 設(shè)計中制作高保真原型時，經(jīng)常需要將線框圖中的占位符替換成圖片，這時就需要用到各種圖片素材。

Unsplash

Unsplash，是國外知名的免版權(quán)圖片網(wǎng)站，圖片質(zhì)量非常高，上面的圖片分類細(xì)致，涉及多個題材，包含壁紙、自然風(fēng)景、藝術(shù)、商業(yè)等。

由于 Unsplash 是國外的網(wǎng)站，雖然使用中文也能搜索，但搜出來的圖片較少且結(jié)果不準(zhǔn)確，因此搜索圖片時建議使用英文。

從外部網(wǎng)站下載圖片素材，再將圖片導(dǎo)入 UI 設(shè)計軟件，應(yīng)該是之前眾多設(shè)計師在設(shè)計時采用的工作流，如果項目需要用到的圖片較多，這個看似簡單的流程，也會占用比較多的時間。

如果使用內(nèi)置了圖片素材庫的 UI 設(shè)計軟件，例如在線設(shè)計工具 Pixso，在需要用到圖片的時候，可以直接從內(nèi)置的 Pexels 圖庫插入圖片，省去了從外部導(dǎo)入素材的步驟，工作效率直接拉滿。

樣機(jī)素材

① ls.graphics

ls.graphics，一個免費(fèi)提供高質(zhì)量樣機(jī)素材的網(wǎng)站，以下圖為例，我們看到的實物手機(jī)外殼、手機(jī)和筆記本電腦白模，都屬于上面提到的樣機(jī)。樣機(jī)中的綠色圖片、彩色形狀和文本內(nèi)容，就是我們的設(shè)計作品。

樣機(jī)可以類比為人的外衣，就像老話說的「人靠衣裝」，略顯平凡的設(shè)計作品因為有了樣機(jī)的裝飾，設(shè)計感瞬間就提升了幾個檔次。

② Smartmockup

前面介紹的 ls.graphics，使用之前都需要把樣機(jī)文件下載到本地，再用 PS 或 Sketch 打開才能進(jìn)行編輯。

如果我們急著要為一個作品套上樣機(jī)，而且電腦沒有安裝 PS 或 Sketch，此時使用 ls.graphics 就不夠高效了。

Smartmockup，一個在線的樣機(jī)網(wǎng)站，使用起來非常方便，只需要將本地圖片上傳到網(wǎng)站，就能直接得到一張帶有樣機(jī)的效果圖了。

在下載帶有樣機(jī)的效果圖時，Smartmockup 提供了 3 種圖像質(zhì)量，多數(shù)情況下普通清晰度就夠用了。

字體

做設(shè)計也離不開字體，優(yōu)先推薦各位使用免費(fèi)可商用的字體，不管是自己的個人項目，還是公司內(nèi)做的事情，以免之后引來不必要的糾紛。

下載免費(fèi)字體，可以去「貓啃網(wǎng)」，網(wǎng)站提供了單個字體的下載鏈接，并沒有把所有免費(fèi)字體打包在一起，節(jié)省了下載的時間。

此外，使用內(nèi)置免費(fèi)可商用字體的設(shè)計軟件，也可以免去設(shè)計前安裝字體的步驟。

在線設(shè)計工具 Pixso 就是這樣一個軟件，內(nèi)置了多個免費(fèi)可商用的中文字體，例如思源黑體、站酷快樂體、浙江拙楷體等，無需手動安裝即可使用，應(yīng)用到商業(yè)設(shè)計無侵權(quán)風(fēng)險。

如果 Pixso 的云端字體庫不能滿足你的需求，還可以安裝「字體助手」，從本地導(dǎo)入電腦上安裝的字體，給你的設(shè)計提供更多樣化的選擇。

UI 設(shè)計靈感網(wǎng)站

① Screenlane

Screenlane，一個提供網(wǎng)頁和移動界面設(shè)計的靈感網(wǎng)站。網(wǎng)站提供了多個 App 不同界面的多張截圖，打開任意一個 App，可以看到 App 在不同狀態(tài)、交互操作、頁面下的所有截圖，非常全面地展示了一個產(chǎn)品界面設(shè)計的全貌，也能學(xué)習(xí)到一個產(chǎn)品的設(shè)計風(fēng)格是如何保持統(tǒng)一的。

在網(wǎng)站的左側(cè)邊欄，可以頁面類型、組件、產(chǎn)品類別、產(chǎn)品名稱作為篩選條件，從眾多的界面設(shè)計作品中，找到符合自己需求的案例。

② CollectUI

CollectUI，一個每日更新 UI 設(shè)計靈感的網(wǎng)站，每天都可以獲取到前沿、熱門的設(shè)計資訊，讓你靈感不枯竭。

這個網(wǎng)站和上面介紹的 Screenlane 有些相似，網(wǎng)站左側(cè)將所有的 UI 設(shè)計作品按照頁面類型進(jìn)行分類，細(xì)分為 167 種，包含注冊頁、登錄頁、用戶檔案、分享頁、表單頁等等。

在尋找設(shè)計靈感時，可以根據(jù)自己要設(shè)計的頁面，打開 CollectUI 左側(cè)欄相對應(yīng)的頁面類型，搜集靈感時更有針對性。

③ dribbble

dribbble：發(fā)現(xiàn)世界上頂級的設(shè)計師和富有創(chuàng)造力的專業(yè)人士

dribbble，是國外知名的設(shè)計社區(qū)，在這里可以看到全球各地的設(shè)計師上傳的作品，涵蓋動畫、品牌、插畫、移動端設(shè)計、印刷品、產(chǎn)品設(shè)計、排版設(shè)計以及網(wǎng)頁設(shè)計，設(shè)計作品類別非常全面，很適合 UI 設(shè)計師用來尋找靈感。

在 dribbble 瀏覽設(shè)計作品時，可以使用網(wǎng)站提供的「篩選」功能，按照標(biāo)簽、顏色、時間、設(shè)計作品所使用的工具等維度，來對作品進(jìn)行篩選，更快地找到符合自己需求的參考作品。




以上就是皮仔收藏夾中私藏已久的素材和靈感網(wǎng)站，希望對你有幫助。

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

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