工欲善其事必先利其器，優秀的素材網站為產品設計師、UI/UX設計師帶來設計靈感，簡化前端工程師的開發時間，以及為使用者提供更好的使用體驗。一個漂亮的使用者介面、一組吸引眼球的圖片、或一個平衡的調色盤可以極大的提高使用者粘度，也是一個優秀產品的必備特質。

下面是我工作中常用的一些免費素材網站。我的這個列表將不包括一些最流行的素材網站，比如Unsplash或者Shutterstock等。畢竟這些網站大家已經常使用了。

照片與影片（上篇）

插圖（上篇）

調色盤（上篇）

字型設計（上篇）

動畫效果（下篇）

圖示（下篇）

圖案（下篇）

其他工具（下篇）

照片與影片

Coverr

Coverr免費的影片素材網站，它幾乎涵蓋了各類影片素材。

地址：https：//coverr。co/

Mixkit

Mixkit包括大量的免費影片素材，音樂，聲效，以及影片模板。

https：//mixkit。co/

Pexels

Pexels是一個免費的照片素材網站，它時常為攝影師舉辦挑戰比賽，你可以在上面發現很多意想不到的好素材。

https：//www。pexels。com/zh-cn

Photo Creator

如果你找不到想要的人畫素材，那你一定要試試Photo Creator。從選擇模特，到挑選背景，再到放入裝飾物品，Photo Creator可以幫助你創造自己的人像照片。

https：//icons8。com/creator/

Unscreen

借用AI技術，Unscreen可以幫助我們刪除、替換影片、GIF中的背景。

https：//unscreen。com/

Remove Background

Remove Background可以幫助我們去除圖片中的背景。

https：//www。remove。bg/zh

Generated Photos

Generate Photos是一款非常好用的人像照片生成工具。

https：//generated。photos/faces

Duotone

Duotone可以將任何圖片轉換為雙色調風格。

https：//duotone。shapefactory。co/

插圖

Open Peeps

Open Peeps是一個提供免費的100%手繪插畫素材。

https：//www。openpeeps。com/

Smash Illustrations

另一個有意思的免費插畫素材網站。

https：//usesmash。com/

Open Doodles

又一款免費的插圖素材網站。

https：//opendoodles。com/

Control

Control為我們提供了108組不同主題的插畫素材。

https：//control。rocks/

Ouch!

Ouch為設計師提供了大量的免費插畫素材。

https：//icons8。com/illustrations

Avataaars Generator

Avataaars Generator幫助我們生成各類有意思的卡通使用者頭像。

https：//getavataaars。com/

Faux Code Generator

Faux Code Generator可以把程式碼轉換成SVG向量圖片。

http：//knutsynstad。com/fauxcode/

調色盤

Parametric Color Mixer

一個類似聲音均衡器的調色盤工具。

https：//colormixer。web。app/

CSS Gradient

一款CSS漸變程式碼生成器，很推薦。

https：//cssgradient。io/

Colorsinspo

Colorsinspo擁有上千種顏色組合。

https：//colorsinspo。com/

Color Hexa

ColorHexa可以為任何一個顏色生成相匹配的色調組合。

https：//www。colorhexa。com/

Color Space

Color Space可以為你的專案生成漂亮的調色盤、漸變和匹配的配色方案！

https：//mycolor。space/

Palettte App

Palettte App為我們建立、分析和編輯平滑的調色盤。

https：//palettte。app/

Colorable

Colorable是一個顏色組合測試應用，它可以將我們的顏色方案實時展現在一個網站上。

https：//colorable。jxnblk。com/

字型設計

Freebiesbug

Freebiesbug提供免費的英文字型以及檔案。

https：//freebiesbug。com/free-fonts/

Fonts Arena

很好的免費版英文字型素材網站。

https：//fontsarena。com/

Befonts

同樣是一個免費字型網站，專注於各類藝術字、花體字。

https：//befonts。com/

Fontjoy

Fontjoy可以讓設計師輕鬆匹配不同的字型，並實時展示在網站上。

https：//fontjoy。com/

下篇文章，我將為大家帶來一些使用的

動效、圖示、圖案

等

免費素材庫

。

瀏覽下篇文章可點選：未定義變數：50個設計師/前端工程師必備的寶藏素材網站 - 下篇

——閱讀更多文章，請關注我的公眾號 ：未定義變數